[JavaScript] 배열 메서드(map, filter, reduce)

📚 배열 메서드(map, filter, reduce)란 무엇인가요?

자바스크립트에서 배열을 다루는 것은 매우 중요해요. 특히 map, filter, reduce 같은 배열 메서드는 배열을 간편하고 효과적으로 처리할 수 있는 방법을 제공해요. 이 세 가지 메서드는 각각 배열을 변환, 필터링, 축소하는 작업을 수행해요.

 

비유하자면, map은 원래의 배열에서 무언가를 변형해서 새로운 배열을 만드는 작업이고, filter는 원하는 조건에 맞는 요소만 걸러내는 작업, 그리고 reduce는 배열을 한 덩어리로 축소하여 단일 값으로 만드는 작업이에요.

---

🖥️ 배열 메서드(map, filter, reduce)의 개념과 예시

1. map: 배열을 변형하는 메서드

• map 메서드는 배열의 각 요소에 동일한 작업을 수행하여, 새로운 배열을 반환해요. 기존 배열을 변경하지 않고, 새로운 배열을 생성하죠.
• 예를 들어, 배열의 모든 숫자를 2배로 만들거나, 문자열을 대문자로 바꾸는 작업을 할 때 유용해요.

// 배열의 각 요소를 2배로 만들기
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log("원래 배열:", numbers); // [1, 2, 3, 4, 5]
console.log("2배로 변환된 배열:", doubled); // [2, 4, 6, 8, 10]

map 메서드는 num이라는 인자를 받아 그 값을 2배로 만든 후, 새로운 배열 doubled에 그 결과를 담아요.
원래 배열인 numbers는 변하지 않고, 새로운 배열이 반환된다는 점이 중요해요.

2. filter: 조건에 맞는 요소만 추출하는 메서드

• filter 메서드는 배열의 요소 중에서 특정 조건을 만족하는 요소들만 걸러내어 새로운 배열을 반환해요.
• 예를 들어, 배열에서 짝수만 추출하거나, 특정 기준을 충족하는 요소들만 남기고 싶을 때 사용해요.

// 배열에서 짝수만 추출하기
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log("원래 배열:", numbers); // [1, 2, 3, 4, 5]
console.log("짝수만 추출된 배열:", evenNumbers); // [2, 4]

filter 메서드는 배열의 각 요소가 짝수인지 확인하고, 그 조건을 만족하는 요소들만 새로운 배열 evenNumbers에 담아요.
원래 배열 numbers는 변하지 않아요.

3. reduce: 배열을 축소하는 메서드

• reduce 메서드는 배열을 순회하며, 각 요소를 누적하여 단일 값으로 축소해요. 배열의 모든 요소를 하나의 값으로 줄이는 데 사용되며, 합계, 평균, 최대값 등을 구할 때 많이 사용해요.
• reduce는 두 개의 인자를 받는데, 첫 번째는 누적 값(accumulator), 두 번째는 현재 처리 중인 요소(current value)예요.

// 배열의 합계 구하기
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log("원래 배열:", numbers); // [1, 2, 3, 4, 5]
console.log("배열의 합계:", sum); // 15

reduce 메서드는 배열의 첫 번째 요소부터 마지막 요소까지 순차적으로 더해서 sum이라는 변수에 합계를 저장해요.
원래 배열 numbers는 변하지 않고, 결과는 단일 값으로 축소돼요.

---

🤔 배열 메서드(map, filter, reduce)의 활용 예

배열 메서드를 사용하면 실용적인 데이터 처리 작업을 매우 간결하게 해결할 수 있어요. 사용자 목록과 같은 실제 데이터를 사용해 map, filter, reduce 메서드가 각각 어떻게 활용될 수 있는지 살펴볼게요.

1. map: 배열의 각 요소를 변형하는 메서드

map 메서드는 배열의 각 요소에 동일한 작업을 수행하여 새로운 배열을 반환해요. 주로, 배열의 각 요소를 변환하는 데 유용하게 사용됩니다.

• map 메서드를 통해 배열의 크기를 유지하면서 요소의 내용만 변경할 수 있어요.
• 현실적인 데이터 구조(사용자 목록 등)에 적용하여, 배열의 각 객체에서 특정 속성만을 간편하게 추출할 수 있습니다.

예제: 사용자 이름만 추출하기

const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 35 },
];

// 사용자 목록에서 이름만 추출
const userNames = users.map(user => user.name);

console.log(userNames); // ["Alice", "Bob", "Charlie"]

이 예제에서는 map 메서드를 사용해 사용자 목록에서 이름만 추출하여 새로운 배열을 만들었어요.
map은 각 요소에서 이름만 반환하고, 그 결과를 배열에 담습니다.
원래 배열인 users는 변하지 않으며, 새로운 배열 userNames가 반환돼요.

2. filter: 조건에 맞는 요소만 추출하는 메서드

filter 메서드는 배열의 요소 중에서 특정 조건을 만족하는 요소들만 걸러내어 새로운 배열을 반환해요.

• filter 메서드를 사용하면 원하는 조건에 맞는 데이터만 간편하게 추출할 수 있어요.
• 배열의 크기가 줄어들며, 원본 배열은 변하지 않고 새로운 배열만 반환된다는 점을 기억하세요.

예제: 나이가 30 이상인 사용자만 추출하기

const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 35 },
];

// 나이가 30 이상인 사용자만 추출
const adults = users.filter(user => user.age >= 30);

console.log(adults); 
// [{ name: "Bob", age: 30 }, { name: "Charlie", age: 35 }]

이 예제에서는 filter 메서드를 사용해 나이가 30 이상인 사용자만 걸러냈어요.
조건을 만족하는 요소들만 새로운 배열에 담겨 반환됩니다. 조건에 맞지 않는 요소는 새로운 배열에 포함되지 않아요.

3. reduce: 배열을 하나의 값으로 축소하는 메서드

reduce 메서드는 배열의 모든 요소를 누적하여 단일 값으로 축소해요. 주로, 배열의 합계나 평균을 구할 때 사용돼요.

• reduce 메서드는 배열을 단일 값으로 줄여야 하는 작업에 적합해요.
• 배열의 합계, 평균, 곱셈, 또는 다른 복잡한 계산이 필요한 상황에서 자주 사용돼요.

예제: 사용자의 총 나이 계산하기

const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 35 },
];

// 사용자의 나이 합계 계산
const totalAge = users.reduce((acc, user) => acc + user.age, 0);

console.log(totalAge); // 90

이 예제에서는 reduce 메서드를 사용해 사용자들의 총 나이를 계산했어요.
acc(누적 값)는 배열의 각 요소의 나이를 더하면서 계속해서 누적됩니다.
마지막으로 총 나이가 반환돼요. 여기서 0은 누적 계산의 초기값입니다.

---

🚨 주의할 점

배열 메서드를 사용할 때 주의할 몇 가지 사항이 있어요.

1. 원본 배열은 변하지 않아요. map, filter, reduce 메서드는 기존 배열을 변경하지 않고, 새로운 배열 또는 값을 반환해요. 따라서 원본 배열을 안전하게 유지할 수 있어요.
2. 초기값을 설정하는 것이 중요해요. 특히 reduce 메서드를 사용할 때 초기값을 설정하지 않으면, 예기치 않은 오류가 발생할 수 있어요. 초기값을 지정해줘야 배열의 첫 번째 요소를 안전하게 다룰 수 있어요.
3. 함수의 동작을 명확하게 이해해야 해요. map은 배열의 크기가 변하지 않고, filter는 배열의 크기가 줄어들 수 있으며, reduce는 배열의 모든 요소를 하나의 값으로 축소한다는 점을 기억해야 해요. 각각의 메서드가 배열을 어떻게 처리하는지 명확하게 이해하는 것이 중요해요.

---

📖 결론

map, filter, reduce는 자바스크립트에서 배열을 처리하는 강력한 도구예요. map은 배열의 각 요소를 변형하고, filter는 특정 조건을 만족하는 요소만 추출하며, reduce는 배열을 단일 값으로 축소해요. 이 세 가지 메서드를 결합하면 매우 강력한 배열 처리 로직을 간결하게 작성할 수 있어요.

 

특히, 배열 메서드는 간결한 코드 작성과 명확한 의도 표현에 도움을 주기 때문에, 배열을 다룰 때는 이 메서드들을 적극 활용하는 것이 좋아요.

---

🔗 추가 정보

• 자바스크립트 배열 메서드에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.