JavaScript에서 for...of, for...in, forEach, map, filter, reduce는 모두 반복문이지만, 각기 다른 용도와 특성을 가지고 있습니다. 특정 상황에 맞는 반복문을 선택하는 것이 중요합니다. 아래에 각 반복문의 사용 용도와 차이점을 설명하겠습니다.
1. for...of
- 용도: 배열, 문자열, Map, Set 등의 iterable 객체의 값을 순회할 때 사용.
- 언제 사용해야 할까?
- 배열이나 iterable 객체의 요소 값을 순회할 때 가장 유연하게 사용 가능.
- 요소의 순서대로 값을 읽어오는 작업에 적합.
- 중간에 break 또는 continue로 반복을 중단하거나 건너뛰고 싶을 때 사용.
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 1, 2, 3
}- 특징: 값만 순회하며, 인덱스가 필요하지 않을 때 적합.
Iterable 객체는 **순회(iteration)**가 가능한 객체를 의미합니다. 즉, 배열, 문자열처럼 한 번에 하나씩 접근할 수 있는 데이터 구조를 가지고 있으며, 이를 반복문(예: for...of)을 사용해 순회할 수 있습니다.
2. for...in
- 용도: 객체의 **열거 가능한 속성(key)**을 순회할 때 사용.
- 언제 사용해야 할까?
- 객체의 속성(key)을 순회할 때 적합.
- 객체의 속성 이름을 얻고자 할 때 사용.
- 배열에 사용하지 말 것! 배열에서 사용하면 인덱스만 순회하며, 배열이 아닌 객체 프로퍼티도 포함될 수 있기 때문에 부작용이 생길 수 있음.
const obj = { name: 'Alice', age: 25 };
for (const key in obj) {
console.log(key, obj[key]); // name Alice, age 25
}- 특징: 객체의 key를 순회하며, 배열에서는 부적절함.
3. forEach
- 용도: 배열의 각 요소를 순차적으로 처리하는 데 사용.
- 언제 사용해야 할까?
- 배열의 요소에 대해 함수를 실행하는 목적일 때 사용.
- 요소, 인덱스, 배열 자체에 접근해야 할 때.
- 반환값이 필요 없고, 각 요소에 대해 단순 작업만 수행할 때 적합.
const arr = [1, 2, 3];
arr.forEach((value, index) => {
console.log(index, value); // 0 1, 1 2, 2 3
});- 특징:
- 배열 요소를 수정하는 작업에는 좋으나, 반환값을 생성하지 않음.
- break나 continue를 사용할 수 없음.
4. map
- 용도: 배열의 각 요소에 대해 함수를 적용하여 새로운 배열을 반환하는 데 사용.
- 언제 사용해야 할까?
- 기존 배열을 수정하지 않고, 새로운 배열을 생성할 때 적합.
- 배열의 변환 작업에 사용 (예: 배열 요소에 수식을 적용하거나 변환).
const arr = [1, 2, 3];
const newArr = arr.map(value => value * 2);
console.log(newArr); // [2, 4, 6]- 특징:
- 배열의 각 요소를 변환한 새로운 배열을 반환.
- 원본 배열을 변경하지 않음.
- 반복 중 중단이 불가능.
5. filter
- 용도: 배열에서 특정 조건을 만족하는 요소들만 새로운 배열로 반환.
- 언제 사용해야 할까?
- 조건을 충족하는 배열 요소들만 필터링할 때 사용.
- 예를 들어, 조건에 맞는 데이터만 추출할 때.
const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(value => value > 3);
console.log(filteredArr); // [4, 5]- 특징:
- 조건을 만족하는 요소들만 새로운 배열로 반환.
- 원본 배열은 변경하지 않음.
6. reduce
- 용도: 배열을 순회하면서 각 요소를 누적(accumulate)하여 하나의 값으로 줄이는 작업에 사용.
- 언제 사용해야 할까?
- 배열의 값을 누적하여 단일 결과(예: 합계, 평균 등)를 구할 때.
- 배열을 변환하여 하나의 값을 생성하는 작업에 적합.
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, value) => accumulator + value, 0);
console.log(sum); // 15- 특징:
- 배열의 요소들을 누적하여 단일 값을 반환.
- 합계, 곱셈, 객체의 병합 등 다양한 용도로 사용 가능.
각 반복문을 사용하는 상황 정리
- for...of: 배열이나 iterable 객체의 값을 순회할 때. break, continue가 필요할 때.
- for...in: 객체의 key를 순회할 때. 배열에서는 사용하지 않는 것이 좋음.
- forEach: 배열의 각 요소를 처리하지만 반환값이 필요 없을 때. break, continue가 필요 없을 때.
- map: 배열의 각 요소를 변환하여 새로운 배열을 반환할 때.
- filter: 조건을 만족하는 배열의 요소들을 필터링하여 새로운 배열로 반환할 때.
- reduce: 배열을 순회하면서 하나의 값으로 줄이는 작업이 필요할 때.
결론
각각의 메서드는 서로 다른 목적에 맞게 설계되었기 때문에, 작업의 목적에 따라 적절한 반복문을 선택하는 것이 중요합니다.
728x90
