자바스크립트에서의 순환, 반복 메서드
# 자바스크립트에서의 순환 반복 메서드들에 대해 이해해봅시다.
2024년 10월 19일
학습 배경
코딩 테스트를 준비하다 보면, 특히 문자열 및 객체 배열 아이템들에 대한 반복적 작업을 수행해야 할 일이 많습니다. 다양한 반복 형태의 메서드를 사용하고 있지만, 각 메서드들의 원리와 특징을 깊이 있게 이해하지 못한 채 사용하는 경우가 많습니다. 이번 포스팅에서는 자바스크립트에서 제공하는 다양한 반복문 형태의 특징과 장단점, 그리고 성능 비교까지 알아보려고 합니다.
for...of 반복문
for...of는 이터러블 객체(배열, 문자열, Map, Set 등)를 순회할 때 사용합니다. 각 요소에 직접 접근할 수 있어 코드가 간결해지며, 키(key)가 아닌 값(value)을 순회하는 것이 특징입니다.
const array = [1, 2, 3, 4];
for (const value of array) {
console.log(value);
}
// 출력: 1, 2, 3, 4장점
- 이터러블 객체에 사용할 수 있어 배열이나
Set,Map과 같은 데이터 구조를 순회할 때 유용합니다. - 코드가 간결하며, 요소의 값을 바로 접근할 수 있어 사용하기 쉽습니다.
break와continue같은 제어문을 사용할 수 있어 루프 중간에 멈추거나 건너뛰기가 가능합니다.
단점
- 객체에는 사용할 수 없습니다. 객체의 속성을 순회하려면
for...in을 사용해야 합니다.
for...in 반복문
for...in은 객체의 열거 가능한 속성을 순회할 때 사용됩니다. 배열에도 사용할 수 있지만, 주로 객체에서 키(key)를 순회하는 용도로 사용됩니다.
const object = { a: 1, b: 2, c: 3 };
for (const key in object) {
console.log(`${key}: ${object[key]}`);
}
// 출력: a: 1, b: 2, c: 3장점
- 객체의 속성을 순회할 때 유용하며, 객체의 모든 열거 가능한 속성에 접근할 수 있습니다.
- 배열에도 사용할 수 있지만, 배열의 인덱스를 순회하게 됩니다.
단점
- 배열 순회에 사용하는 것은 권장되지 않습니다. 배열에
for...in을 사용하면 예상치 못한 순회 결과가 발생할 수 있습니다. 이는 배열의 인덱스 순서가 보장되지 않기 때문입니다. - 객체의 비열거형 속성에는 접근할 수 없습니다.
Array.prototype.map
map은 새로운 배열을 생성하는 메서드입니다. 원본 배열의 각 요소에 대해 콜백 함수를 호출하고, 그 결과로 구성된 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.
const array = [1, 2, 3, 4];
const doubled = array.map((num) => num * 2);
console.log(doubled);
// 출력: [2, 4, 6, 8]장점
- 새로운 배열을 생성해야 할 때 유용합니다.
- 함수형 프로그래밍 스타일을 구현할 수 있습니다.
- 코드가 간결하며 가독성이 높습니다.
단점
- 반환값을 사용하지 않는 경우 불필요합니다. 새로운 배열을 반환하기 때문에 그 결과를 사용하지 않으면 메모리 낭비가 발생할 수 있습니다.
- 비동기 콜백과는 잘 맞지 않습니다. 비동기 처리를 하려면
map대신for이나for...of를 사용하는 것이 좋습니다.
Array.prototype.reduce
reduce는 배열의 각 요소에 대해 누적값을 계산하고, 최종적으로 단일 값을 반환합니다. 누적된 결과를 계산할 때 주로 사용됩니다.
const array = [1, 2, 3, 4];
const sum = array.reduce((acc, current) => acc + current, 0);
console.log(sum);
// 출력: 10장점
- 배열을 하나의 값으로 축약해야 할 때 유용합니다.
- 누적 값, 합산, 평균 계산, 객체로 변환 등 다양한 작업에 사용할 수 있습니다.
단점
reduce는 가독성이 낮을 수 있으며, 콜백 함수의 동작을 이해하는 데 시간이 걸릴 수 있습니다.- 잘못 사용하면 코드가 복잡해질 수 있습니다.
Array.prototype.forEach
forEach는 배열의 각 요소에 대해 콜백 함수를 호출합니다. 반환값이 없기 때문에 배열을 변형하거나 순회하는 작업에 적합하지만, 새로운 배열을 생성하지 않습니다.
const array = [1, 2, 3, 4];
array.forEach((value) => {
console.log(value);
});
// 출력: 1, 2, 3, 4장점
- 배열을 단순히 순회하면서 작업을 수행할 때 유용합니다.
- 코드가 간결하며, 익숙해지면 사용하기 편리합니다.
단점
break와continue를 사용할 수 없기 때문에 루프를 조기 종료하거나 건너뛸 수 없습니다.- 반환값이 없으므로, 새로운 배열을 생성해야 할 때는 적합하지 않습니다.
각 반복문에서의 성능 비교
기본 반복문 (for, while): 가장 빠른 성능을 보입니다. 단순히 배열의 요소에 접근하고 처리하는 작업에서는 for 반복문이 최적화된 성능을 보여줍니다.
forEach: 배열 크기가 작을 때는 차이가 크지 않지만, 배열이 커질수록 성능이 떨어질 수 있습니다. 이는 forEach가 내부적으로 함수를 호출하기 때문입니다.
for...of: 배열을 순회하는 작업에서는 forEach와 유사한 성능을 보입니다. 이터러블 객체를 순회할 때 유용하지만, 기본 for문보다 약간 느릴 수 있습니다.
map과 reduce: 새로운 배열을 생성하거나 누적 작업을 처리하는 데 유용하지만, 반복문 자체의 성능은 상대적으로 느립니다. 배열 크기가 커질수록 이러한 성능 차이는 더 두드러집니다.
❗️ 단순한 배열 순회에서는 for나 while을 사용하고, 배열의 데이터를 변경하거나 축약해야 하는 경우 map이나 reduce를 사용하면 좋습니다. 성능이 중요한 작업에서는 각 메서드의 특성을 고려하여 선택하는 것이 중요합니다.
