최근 JavaScript Array 객체를 반복하는 다양한 방법을 묻는 인터뷰 질문을 접했습니다. 몇 가지 예제 코드 조각을 제공해야 했기 때문에 처음에는 프롬프트가 간단해 보였습니다. 하지만 이 질문이 흥미로웠기 때문에 각 방법을 좀 더 자세히 살펴보고 사용 방법뿐만 아니라 특정 접근 방식을 선택하는 시기와 이유도 알아보기로 결정했습니다.

이 기사에서는 JavaScript에서 배열을 반복하는 다양한 방법을 안내하고 차이점, 장점 및 사용 사례를 강조합니다.

for 루프
장점:

• 유연성: for 루프는 break를 사용하여 루프를 종료하거나 다음 반복으로 계속 건너뛸 수 있도록 하여 유연성을 제공합니다. 루프의 동작을 정밀하게 제어할 수 있도록 인덱스를 직접 지정할 수도 있습니다.
• 비순차 순서: 뒤로 반복하거나 특정 요소를 건너뛰는 등 루프 조건을 조정하여 반복 순서를 제어할 수 있습니다.

for...of 루프가 도입되기 전에는 전통적인 for 루프가 배열 반복의 표준 방법이었습니다. 그러나 인덱스를 0 대신 1에서 시작하거나 실수로 arr.length - 1 대신 arr.length를 사용하는 등 오류가 발생하기 쉽습니다. MDN에서 제안한 것처럼 "일반적으로...에 사용하는 것이 가장 좋습니다. 가능하다면."

사용 시기:
반복을 건너뛰거나 역방향으로 반복하는 등 반복에 대한 완전한 제어가 필요한 경우.
반복하는 동안 인덱스와 값이 모두 필요한 경우.

...의
장점:

• 단순성 및 권장 사항: for...of 루프는 자동으로 인덱스를 처리하므로 배열을 반복하는 간단하고 권장되는 방법입니다. 인덱스가 아닌 값을 기반으로 break를 사용하여 루프를 종료하거나 계속해서 다음 반복으로 건너뛸 수 있습니다.

사용 시기:
값 작업만 필요하고 인덱스에 대한 액세스가 필요하지 않은 경우.

Array.prototype.map()
장점:

• 비변형: 원래 배열은 변경되지 않고 유지됩니다.
• 새 배열 반환: 지정된 함수를 각 요소에 적용한 후 map()은 결과와 함께 새 배열을 반환합니다. 이는 함수형 프로그래밍에 이상적입니다.

사용 시기:
배열의 각 요소에 함수를 적용하고 그 결과를 새로운 배열로 필요로 할 때.

Array.prototype.forEach()
장점:

• 반환 값 없음: forEach()를 사용하면 새 배열을 반환하지 않고 각 요소에서 함수를 실행할 수 있습니다. 로깅, 변수 업데이트, DOM 조작과 같은 부작용을 실행하는 데 자주 사용됩니다.

사용 시기:
배열의 각 요소에 함수를 적용하고 싶지만 새 배열을 반환할 필요가 없는 경우.

Array.prototype.entries()
장점:

• 지수와 값 모두에 대한 액세스: 항목()은 각 요소의 색인과 값을 모두 제공하는 반복자를 반환합니다. 이는 기존 for 루프를 사용하는 것보다 더 간단하고 읽기 쉽습니다. 배열 슬롯이 비어 있으면 해당 값에 대해 정의되지 않은 값이 반환됩니다.

사용 시기:
배열 요소의 인덱스와 값에 모두 액세스해야 하는 경우.

Array.prototype.keys()
장점:

• 색인에 대한 액세스: 키()는 배열의 색인에 대한 반복자를 반환합니다. 이는 값이 아닌 인덱스만 필요한 경우에 유용합니다. 희소 배열에서 [...arr.keys()]는 빈 슬롯에 대한 인덱스도 포함합니다(값이 정의되지 않은 경우).

사용 시기:
배열 요소의 인덱스만 제공하는 반복자가 필요한 경우.

Array.prototype.values()
장점:

• 값에 대한 액세스: 값()은 배열 값에 대한 반복자를 반환합니다. 이는 배열에 for...of를 사용하는 것과 유사하지만 루프 대신 반복자를 제공합니다.

사용 시기:
배열 요소의 값만 제공하는 반복자가 필요한 경우.

배열 반복자란 무엇입니까:
Array.prototype.entries(), Array.prototype.keys() 및 Array.prototype.values()는 새로운 배열 반복자 객체를 반환합니다. 이러한 반복자를 사용하면 배열과 같은 컬렉션을 한 번에 한 요소씩 탐색할 수 있습니다. 필요에 따라 호출할 수 있는 시퀀스의 다음 값을 제공하는 next() 메서드가 함께 제공되어 메모리 절약에 도움이 됩니다.

다음은 항목()을 사용하는 예입니다.

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

console.log(iterator.next()); // { value: [0, 'a'], done: false }
console.log(iterator.next()); // { value: [1, 'b'], done: false }
console.log(iterator.next()); // { value: [2, 'c'], done: false }
console.log(iterator.next()); // { value: undefined, done: true }

솔직히 저는 이러한 방법의 세부 사항과 사용법을 완전히 알지 못했기 때문에 이 인터뷰 질문을 해결하고 이해를 깊게 하는 것이 매우 중요했습니다. 기본 루프를 사용하든 고급 함수형 프로그래밍 기술을 사용하든 이러한 방법을 알면 코드의 효율성과 가독성을 크게 향상시킬 수 있습니다.