▶ JavaScript Tutorial

JavaScript Array Iteration

JavaScript Array Iteration: 배열 반복의 이해와 활용

JavaScript 배열에서 **반복(Iteration)**은 배열의 각 요소에 대해 작업을 수행하는 중요한 과정입니다. JavaScript는 배열의 요소를 순회하고 조작하기 위해 다양한 내장 메서드를 제공합니다. 이 가이드는 JavaScript에서 배열을 반복하는 주요 메서드들을 설명하고, 각각의 활용 방법을 다룹니다.

1. 배열 반복 메서드

JavaScript는 배열의 요소를 반복 처리하기 위해 여러 가지 메서드를 제공합니다. 각 메서드는 다른 방식으로 배열을 처리하므로, 적절한 메서드를 선택하는 것이 중요합니다.

1.1. `forEach()`

forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행합니다. 주어진 함수는 배열의 요소, 인덱스, 배열 자체를 매개변수로 받을 수 있습니다.

const fruits = ["apple", "banana", "cherry"];

fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});
// 출력:
// 0: apple
// 1: banana
// 2: cherry

반환 값: forEach()는 항상 undefined를 반환하며, 원본 배열을 변경하지 않습니다.

1.2. `map()`

map() 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. 원본 배열은 변경되지 않고, 새로운 배열이 반환됩니다.

const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);

console.log(squares); // 출력: [1, 4, 9, 16]

반환 값: 새로운 배열을 반환합니다.

1.3. `filter()`

filter() 메서드는 배열의 각 요소에 대해 주어진 조건을 검사하고, 조건을 만족하는 요소들로만 구성된 새로운 배열을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // 출력: [2, 4]

반환 값: 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환합니다.

1.4. `reduce()`

reduce() 메서드는 배열의 각 요소에 대해 주어진 함수의 누적 결과를 계산하여 하나의 값으로 반환합니다. 이 메서드는 배열을 축약할 때 유용합니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 출력: 15

반환 값: 축약된 단일 값이 반환됩니다.

1.5. `some()`

some() 메서드는 배열의 요소 중 하나라도 주어진 조건을 만족하면 true를 반환합니다. 모든 요소가 조건을 만족하지 않으면 false를 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(num => num % 2 === 0);

console.log(hasEvenNumber); // 출력: true

반환 값: 조건을 만족하는 요소가 하나라도 있으면 true, 그렇지 않으면 false를 반환합니다.

1.6. `every()`

every() 메서드는 배열의 모든 요소가 주어진 조건을 만족해야 true를 반환합니다. 하나라도 조건을 만족하지 않으면 false를 반환합니다.

const numbers = [2, 4, 6];
const allEven = numbers.every(num => num % 2 === 0);

console.log(allEven); // 출력: true

반환 값: 모든 요소가 조건을 만족하면 true, 그렇지 않으면 false를 반환합니다.

1.7. `find()`

find() 메서드는 배열의 요소 중 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다.

const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
];

const user = users.find(user => user.name === "Bob");
console.log(user); // 출력: { id: 2, name: "Bob" }

반환 값: 조건을 만족하는 첫 번째 요소를 반환합니다.

1.8. `findIndex()`

findIndex() 메서드는 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 조건을 만족하는 요소가 없으면 -1을 반환합니다.

const index = users.findIndex(user => user.name === "Charlie");
console.log(index); // 출력: 2

반환 값: 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.

2. 반복문의 대안: `for...of` 문

for...of 문은 배열을 순회하기 위한 전통적인 반복문입니다. 배열의 각 요소에 접근할 수 있습니다.

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}
// 출력:
// apple
// banana
// cherry

장점: for...of 문은 배열을 반복 처리할 때 유연하며, 원시 배열뿐만 아니라 이터러블 객체에도 사용할 수 있습니다.

3. 배열 반복에서 `this` 사용

배열 메서드에서 this 키워드를 사용할 수 있습니다. 배열 메서드에 두 번째 인자로 thisArg를 전달하면, 함수 내부에서 this가 지정한 객체로 설정됩니다.

const multiplier = {
    factor: 2,
    multiply(num) {
        return num * this.factor;
    }
};

const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
    return this.multiply(num);
}, multiplier);

console.log(doubled); // 출력: [2, 4, 6]

4. 배열 반복에서 성능 최적화

반복 작업이 배열의 길이에 의존하는 경우, 배열의 길이를 미리 계산하여 성능을 최적화할 수 있습니다.

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

이 방식은 매 반복 시 배열의 길이를 다시 계산하지 않으므로 성능이 향상됩니다.

요약

forEach(): 배열의 각 요소에 대해 작업을 수행하지만, 반환 값이 없습니다.
map(): 배열의 각 요소에 대해 함수를 실행하고, 새로운 배열을 반환합니다.
filter(): 조건을 만족하는 요소들로 새로운 배열을 만듭니다.
reduce(): 배열의 요소를 누적하여 하나의 값으로 축약합니다.
some() 및 every(): 배열의 요소가 조건을 만족하는지 여부를 확인합니다.
find() 및 findIndex(): 조건을 만족하는 첫 번째 요소나 그 인덱스를 찾습니다.
for...of: 배열과 이터러블 객체를 순회하는 반복문입니다.

JavaScript의 다양한 배열 반복 메서드를 활용하면, 배열의 요소를 처리하는 작업을 더욱 효율적으로 수행할 수 있습니다.

코딩 스쿨 JavaScript