#12 TIL - JS에서 map 이해하기

map은 JavaScript에서 배열을 순회하며 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환하는 메서드이다.
map 메서드는 원래 배열을 변경하지 않고, 동일한 길이의 새로운 배열을 반환한다.

map 메서드의 사용법

array.map(function(currentValue, index, array) {
    // 반환 값이 새로운 배열의 요소가 된다.
});

• currentValue: 현재 처리 중인 요소이다.
• index (선택 사항): 현재 처리 중인 요소의 인덱스이다.
• array (선택 사항): map 메서드를 호출한 배열이다.

간단한 예제

다음은 배열의 각 요소에 1을 더하는 예제이다.

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

const incrementedNumbers = numbers.map(number => number + 1);

console.log(incrementedNumbers); // [2, 3, 4, 5, 6]

코드 설명

• numbers.map(number => number + 1): numbers 배열의 각 요소에 대해 1을 더하는 함수가 호출된다.
• incrementedNumbers: map 메서드의 반환 값으로, 각 요소에 1이 더해진 새로운 배열이다.

map 메서드 사용의 다른 예

객체 배열의 특정 속성 값 추출

객체 배열에서 특정 속성 값을 추출하여 새로운 배열을 만들 수 있다.

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

const names = users.map(user => user.name);

console.log(names); // ['Alice', 'Bob', 'Charlie']

조건에 따라 배열 요소 변경

배열의 각 요소를 조건에 따라 변경할 수 있다.

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

const doubled = numbers.map(number => {
    if (number % 2 === 0) {
        return number * 2;
    }
    return number;
});

console.log(doubled); // [1, 4, 3, 8, 5]

요약

• map은 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환하는 메서드이다.
• 원래 배열은 변경되지 않으며, 반환되는 배열은 원래 배열과 동일한 길이를 가진다.
• 각 요소를 변환하거나 특정 속성 값을 추출할 때 유용하게 사용할 수 있다.