[새싹 성동 2기] JavaScript의 배열 메서드: map(), filter(), reduce()

JavaScript에서 배열은 자주 사용되는 자료구조입니다. 이 배열을 처리하는 데 유용한 다양한 메서드들이 존재하는데, 그 중 map(), filter(), reduce() 메서드는 매우 중요한 역할을 합니다. 각 메서드는 배열을 변환하거나, 조건에 맞는 요소를 추출하거나, 배열을 하나의 값으로 축소하는 등의 작업을 손쉽게 할 수 있게 도와줍니다.

이번 글에서는 map(), filter(), reduce() 메서드의 사용법과 예제를 살펴보겠습니다.

 

1. map() 메서드

map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새 배열을 생성합니다. 원본 배열을 변경하지 않고, 변환된 새로운 배열을 반환합니다.

기본 구문

const newArray = array.map((currentValue, index, array) => {
    // 변환 작업
    return newElement;  // 변환된 새로운 요소
});

 

예시 1: 배열의 값 두 배로 만들기

const source = [1, 4, 8, 16];

// map() 사용
const twoTimes = source.map(value => value * 2);
console.log(twoTimes);  // [2, 8, 16, 32]

위 예제에서 map()을 사용하여 배열의 각 요소를 두 배로 만든 새로운 배열을 출력했습니다.

예시 2: 여러 번의 map() 함수 연결

map() 메서드는 체이닝이 가능합니다. 여러 개의 map() 메서드를 연결하여 순차적으로 배열을 변환할 수 있습니다.

const source = [1, 3, 5, 10];

// 각 요소에 2를 더한 후, 10배를 곱한 배열 만들기
const result1 = source.map(v => v + 2).map(v => v * 10);
console.log(result1);  // [30, 50, 70, 120]

// 각 요소에 10배를 곱한 후, 2를 더한 배열 만들기
const result2 = source.map(v => v * 10).map(v => v + 2);
console.log(result2);  // [12, 32, 52, 102]



//혹은 아래와 같이도 가능합니다.
const source = [1, 3, 5, 10];
{
    const target = [];
    for (let i = 0; i < source.length; i++) {
        target[i] = (source[i] + 2) * 10;
    }
    console.log(target);
}
{
    const twoPlus = v => v + 2;
    const tenTime = v => v * 10;


    // source 배열의 각 요소의 값에 2를 더한 결과를 10배수 해서 출력
    const result1 = source.map(twoPlus).map(tenTime);
    console.log(result1);


    // source 배열의 각 요소의 값에 10배수한 결과에 2를 더한 결과를 출력
    const result2 = source.map(tenTime).map(twoPlus);
    console.log(result2);
}

map()은 배열의 각 요소에 대해 변환 작업을 한 후 결과를 새로운 배열로 반환합니다. 체이닝을 통해 여러 단계를 연속적으로 처리할 수 있습니다.

map()의 다른 예시

예시 1: 객체 배열 변환

const users = [
  { name: "홍길동", age: 23 },
  { name: "고길동", age: 30 },
  { name: "신길동", age: 25 }
];

// 이름만 담은 배열로 변환
const names = users.map(user => user.name);
console.log(names);  // ["홍길동", "고길동", "신길동"]

예시 2: 조건에 맞는 값 변환

const numbers = [1, 2, 3, 4, 5];

// 짝수만 두 배로 만들기
const doubledEvens = numbers.map(num => (num % 2 === 0 ? num * 2 : num));
console.log(doubledEvens);  // [1, 4, 3, 8, 5]

 

2. filter() 메서드

filter() 메서드는 배열에서 주어진 테스트 조건을 만족하는 요소만을 추출하여 새로운 배열을 만듭니다. map()과 마찬가지로 원본 배열은 변경되지 않으며, 조건을 만족하는 요소만을 포함한 새 배열을 반환합니다.

 

예시 1: 길이가 6 이상인 단어만 추출하기

const words = ['visit', 'BBC', 'for', 'trusted', 'reporting', 'business', 'climte', 'innovation'];

// 6글자 이상인 단어만 추출
const results = words.filter(word => word.length >= 6);
console.log(results);  // ["trusted", "reporting", "business", "innovation"]

예시 2: 짝수 길이인 단어만 추출하기

const results = words.filter(w => w.length % 2 === 0);
console.log(results);  // ["BBC", "for", "trusted", "climte", "innovation"]

filter()는 조건에 맞는 요소를 추출하는 데 매우 유용한 메서드입니다.

3. reduce() 메서드

reduce() 메서드는 배열을 순회하면서 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 최종적으로 하나의 결과값을 반환합니다. reduce()는 배열을 축소하는 데 유용하게 사용됩니다.

기본 구문은 아래와 같습니다.

• accumulator: 이전 콜백에서 반환된 누적값입니다. 처음에는 initialValue가 됩니다.
• currentValue: 현재 처리 중인 배열 요소.
• index (선택적): 현재 요소의 인덱스.
• array (선택적): 원본 배열.
• initialValue: accumulator의 초기값. 제공하지 않으면 배열의 첫 번째 요소가 초기값으로 사용됩니다.

array.reduce((accumulator, currentValue, index, array) => {
    // 처리 로직
    return updatedAccumulator;
}, initialValue);

예시 1: 배열의 합 구하기

const numbers = [1, 3, 7, 9];

// 배열 요소들의 합 구하기
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 20

위 예제에서 reduce() 메서드는 배열의 합을 계산합니다. 리듀서 함수에서 accumulator는 누적된 결과이고, currentValue는 현재 배열의 요소입니다. 동작 과정은 아래와 같습니다.

 

• 초기 상태:
  • accumulator는 초기값 0.
  • 배열의 첫 번째 요소부터 시작.
• 순회 과정:
  • 첫 번째 요소 1: accumulator + currentValue = 0 + 1 → accumulator = 1.
  • 두 번째 요소 3: accumulator + currentValue = 1 + 3 → accumulator = 4.
  • 세 번째 요소 7: accumulator + currentValue = 4 + 7 → accumulator = 11.
  • 네 번째 요소 9: accumulator + currentValue = 11 + 9 → accumulator = 20.
• 결과값:
  • 최종적으로 reduce()는 20을 반환.

예시 2: 특정 조건을 만족하는 값만 처리하기

const numbers = [1, 2, 4, 2, 9];

// 각 항목에 13을 곱하고, 그 결과 중 짝수인 값만 합산하기
const result = numbers.map(v => v * 13)
                      .filter(v => v % 2 === 0)
                      .reduce((acc, curr) => acc + curr, 0);
console.log(result);  // 338

 

이 예제에서는 map(), filter(), reduce() 메서드를 연속적으로 사용하여 배열의 각 요소에 13을 곱한 후, 그 중 짝수인 값들만 필터링하여 합산하는 과정을 보여주고 있습니다. reduce()는 배열을 하나의 값으로 축소하는 데 매우 유용한 메서드입니다. 동작 과정은 아래와 같습니다.

• map() 변환:
  • 배열의 각 요소에 13을 곱함.
  • [1, 2, 4, 2, 9] → [13, 26, 52, 26, 117].
• filter() 조건 적용:
  • map() 결과에서 짝수만 추출.
  • [13, 26, 52, 26, 117] → [26, 52, 26].
• reduce() 합산:
  • 짝수 배열 [26, 52, 26]의 합계를 계산.
  • 26 + 52 + 26 = 104 + 26 = 338.

 

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.