JavaScript 배열 반복: for...in 루프를 사용하지 않는 이유

2024-04-08

"for...in" 루프를 사용하여 배열을 반복하는 것이 좋지 않은 이유

순서가 보장되지 않습니다.

"for...in" 루프는 객체 속성을 반복하는 순서를 보장하지 않습니다. JavaScript 엔진마다 순서가 다를 수 있으며 속성 추가 또는 삭제에 따라 순서가 변경될 수도 있습니다. 배열의 경우 순서가 중요하기 때문에 이는 문제가 될 수 있습니다.

빈 엘리먼트를 건너뛴다.

"for...in" 루프는 빈 엘리먼트(undefined 또는 null 값)를 건너뛴다. 배열의 모든 엘리먼트를 반복해야 하는 경우 이는 문제가 될 수 있습니다.

느린 속도

"for...in" 루프는 "for" 루프보다 느린 속도로 실행됩니다. 배열을 반복하는 경우 "for" 루프를 사용하는 것이 더 효율적입니다.

키만 반복

"for...in" 루프는 엘리먼트의 키만 반복합니다. 엘리먼트 값에 접근하려면 추가 작업이 필요합니다.

대안

배열을 반복하는 경우 "for" 루프를 사용하는 것이 좋습니다. "for" 루프는 순서가 보장되고 빈 엘리먼트를 포함하여 모든 엘리먼트를 반복하며 "for...in" 루프보다 더 빠르게 실행됩니다.

다음은 "for" 루프를 사용하여 배열을 반복하는 예입니다.

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

이 코드는 다음과 같은 결과를 출력합니다.

1
2
3
4
5

"forEach" 메서드를 사용하여 배열을 반복하는 것도 좋은 방법입니다. "forEach" 메서드는 각 엘리먼트에 대해 콜백 함수를 실행합니다.

const arr = [1, 2, 3, 4, 5];

arr.forEach((element) => {
  console.log(element);
});

이 코드는 "for" 루프 예제와 동일한 결과를 출력합니다.

결론

"for...in" 루프는 배열을 반복하는 데 적합하지 않습니다. 순서가 보장되지 않고 빈 엘리먼트를 건너뛴으며 속도가 느립니다. 배열을 반복하는 경우 "for" 루프나 "forEach" 메서드를 사용하는 것이 좋습니다.




예제 코드

for...in 루프

const arr = ["a", "b", "c", "d", "e"];

for (const key in arr) {
  console.log(key); // "0", "1", "2", "3", "4"
  console.log(arr[key]); // "a", "b", "c", "d", "e"
}

for 루프

const arr = ["a", "b", "c", "d", "e"];

for (let i = 0; i < arr.length; i++) {
  console.log(i); // 0, 1, 2, 3, 4
  console.log(arr[i]); // "a", "b", "c", "d", "e"
}

두 코드 모두 동일한 결과를 출력합니다. 하지만 "for...in" 루프는 엘리먼트의 키와 값을 모두 출력하는 반면 "for" 루프는 엘리먼트의 값만 출력합니다.

빈 엘리먼트

const arr = [1, , 3, 4, 5];

for (const key in arr) {
  console.log(key); // "0", "1", "3", "4", "5"
}

for (let i = 0; i < arr.length; i++) {
  console.log(i); // 0, 1, 2, 3, 4
  console.log(arr[i]); // 1, undefined, 3, 4, 5
}

"for...in" 루프는 빈 엘리먼트를 건너뛴지만 "for" 루프는 빈 엘리먼트를 포함하여 모든 엘리먼트를 반복합니다.

속도

다음은 배열을 반복하는 데 걸리는 시간을 측정하는 예제입니다.

const arr = new Array(100000);

const startTime = performance.now();

for (const key in arr) {
  // do nothing
}

const endTime = performance.now();

const forInTime = endTime - startTime;

console.log(`for...in time: ${forInTime}ms`);

const startTime = performance.now();

for (let i = 0; i < arr.length; i++) {
  // do nothing
}

const endTime = performance.now();

const forTime = endTime - startTime;

console.log(`for time: ${forTime}ms`);

이 코드는 "for" 루프가 "for...in" 루프보다 훨씬 빠르다는 것을 보여줍니다.




배열 반복을 위한 for...in 대체 방법

"for" 루프는 배열을 반복하는 가장 기본적인 방법입니다. 엘리먼트의 인덱스를 사용하여 엘리먼트에 접근할 수 있습니다.

const arr = ["a", "b", "c", "d", "e"];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

"forEach" 메서드는 각 엘리먼트에 대해 콜백 함수를 실행합니다.

const arr = ["a", "b", "c", "d", "e"];

arr.forEach((element) => {
  console.log(element);
});

map 메서드

"map" 메서드는 배열을 새로운 배열로 변환합니다. 콜백 함수는 각 엘리먼트에 대해 실행되며 콜백 함수의 반환 값은 새로운 배열의 엘리먼트가 됩니다.

const arr = ["a", "b", "c", "d", "e"];

const newArr = arr.map((element) => {
  return element.toUpperCase();
});

console.log(newArr); // ["A", "B", "C", "D", "E"]

filter 메서드

"filter" 메서드는 조건에 맞는 엘리먼트로 구성된 새로운 배열을 반환합니다. 콜백 함수는 각 엘리먼트에 대해 실행되며 콜백 함수가 true를 반환하는 엘리먼트만 새로운 배열에 포함됩니다.

const arr = [1, 2, 3, 4, 5];

const newArr = arr.filter((element) => {
  return element % 2 === 0;
});

console.log(newArr); // [2, 4]

reduce 메서드

"reduce" 메서드는 배열을 단일 값으로 축소합니다. 콜백 함수는 두 개의 인수를 받습니다. 첫 번째 인수는 축적된 값이고 두 번째 인수는 현재 엘리먼트입니다. 콜백 함수는 축적된 값을 업데이트하고 업데이트된 값을 반환합니다.

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});

console.log(sum); // 15

javascript arrays loops


JavaScript 및 Node.js에서 Array.forEach 루프의 동작 방식: 비동기인가요?

forEach는 배열의 각 요소를 순환하고 콜백 함수를 호출하는 동기 함수입니다. 하지만, 콜백 함수가 비동기 작업을 수행하면 콜백 함수가 완료될 때까지 forEach 루프는 다음 요소로 넘어가지 않습니다. 즉, 콜백 함수가 비동기라면 forEach 루프는 비동기적으로 작동하게 됩니다...


JavaScript에서 ++[[]][+[]]+[+[]]가 '10'을 반환하는 이유: 심층 분석

이 코드는 흥미롭고 다소 의외의 결과를 출력하는 간단한 JavaScript 표현식입니다. 코드를 자세히 살펴보면 다음과 같은 요소들로 구성되어 있습니다.빈 괄호: []는 빈 배열을 나타냅니다.+ 연산자: + 연산자는 일반적으로 두 수를 더하는 데 사용됩니다...


React.js: 부모 컴포넌트로 props 전달하는 완벽한 가이드 (2024년 업데이트)

가장 일반적인 방법은 자식 컴포넌트에서 props 객체를 사용하여 부모 컴포넌트에서 전달받은 데이터를 다시 전달하는 것입니다.예시:위 코드에서 ParentComponent는 data라는 prop을 ChildComponent에 전달합니다...


Angular 2 이상 버전에서 파일 다운로드하기

HttpClient은 Angular에서 제공하는 HTTP 요청을 위한 서비스입니다. HttpClient을 이용하여 파일 다운로드를 구현하려면 다음과 같이 코드를 작성할 수 있습니다.FileSaver 라이브러리 이용하기...


javascript arrays loops