[JAVASCRIPT] 자바스크립트 map() 함수 완벽 가이드

자바스크립트 map() 함수 완벽 가이드

목차

1. 개요
2. 기본 문법
3. 주요 특징
4. 실용적인 예제
5. 심화 활용
6. 성능과 주의사항
7. 실전 팁과 트릭

개요

map() 메서드는 배열의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 데이터 변환, 가공에 매우 유용한 함수형 프로그래밍 도구입니다.

기본 문법

array.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수 설명

• callback: 각 요소에 대해 실행할 함수
  • currentValue: 처리할 현재 요소
  • index: 현재 요소의 인덱스 (선택적)
  • array: map을 호출한 배열 (선택적)
• thisArg: callback을 실행할 때 this로 사용할 값 (선택적)

기본 예제

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

// 각 숫자를 2배로
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 각 숫자를 문자열로
const stringNumbers = numbers.map(num => String(num));
console.log(stringNumbers); // ['1', '2', '3', '4', '5']

주요 특징

1. 새로운 배열 반환

const original = [1, 2, 3];
const mapped = original.map(x => x + 1);

console.log(original); // [1, 2, 3]
console.log(mapped);   // [2, 3, 4]
console.log(original === mapped); // false

2. 원본 배열 유지

const numbers = [1, 2, 3, 4, 5];
numbers.map(num => num * 2);
console.log(numbers); // [1, 2, 3, 4, 5] - 원본 배열은 변경되지 않음

3. 반환값 필수

// undefined가 반환됨
const result = [1, 2, 3].map(num => {
    num * 2; // return 문이 없음
});
console.log(result); // [undefined, undefined, undefined]

실용적인 예제

객체 배열 변환

const users = [
    { id: 1, name: '김철수', age: 25 },
    { id: 2, name: '이영희', age: 30 },
    { id: 3, name: '박지성', age: 28 }
];

// 이름만 추출
const names = users.map(user => user.name);
console.log(names); // ['김철수', '이영희', '박지성']

// 객체 구조 변경
const transformed = users.map(user => ({
    userId: user.id,
    userName: user.name,
    isAdult: user.age >= 20
}));

중첩 배열 처리

const matrix = [
    [1, 2],
    [3, 4],
    [5, 6]
];

// 각 하위 배열의 합 계산
const sums = matrix.map(row => row.reduce((acc, curr) => acc + curr, 0));
console.log(sums); // [3, 7, 11]

// 행렬 변환
const transposed = matrix.map((row, i) => 
    matrix.map(col => col[i])
);

DOM 조작

// DOM 요소 배열 조작
const links = Array.from(document.querySelectorAll('a'));
const hrefs = links.map(link => link.href);

// 이미지 속성 변경
const images = Array.from(document.querySelectorAll('img'));
const imageData = images.map(img => ({
    src: img.src,
    alt: img.alt,
    dimensions: {
        width: img.width,
        height: img.height
    }
}));

심화 활용

Promise와 함께 사용

async function fetchUserData(users) {
    const userPromises = users.map(user => 
        fetch(`/api/users/${user.id}`)
            .then(response => response.json())
    );

    return Promise.all(userPromises);
}

// 사용 예
const users = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
];

fetchUserData(users)
    .then(userData => console.log(userData))
    .catch(error => console.error(error));

함수형 프로그래밍

// 함수 합성
const compose = (...fns) => x => 
    fns.reduceRight((v, f) => f(v), x);

const numbers = [1, 2, 3, 4, 5];
const double = x => x * 2;
const addOne = x => x + 1;
const toString = x => String(x);

const transformed = numbers.map(
    compose(toString, addOne, double)
);

성능과 주의사항

성능 최적화

const hugeArray = Array.from({ length: 1000000 }, (_, i) => i);

// 비효율적인 방법
const inefficient = hugeArray
    .map(x => x + 1)
    .map(x => x * 2)
    .map(x => x.toString());

// 효율적인 방법
const efficient = hugeArray.map(x => {
    const added = x + 1;
    const multiplied = added * 2;
    return multiplied.toString();
});

메모리 사용

// 큰 객체 배열 처리
const bigObjects = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    data: new Array(1000).fill('x')
}));

// 필요한 데이터만 추출하여 메모리 사용 최적화
const optimized = bigObjects.map(obj => ({
    id: obj.id,
    dataLength: obj.data.length
}));

728x90

실전 팁과 트릭

조건부 매핑

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

const conditional = items.map(item => {
    if (item % 2 === 0) {
        return item * 2;
    }
    return item;
});

// 삼항 연산자 사용
const concise = items.map(item => 
    item % 2 === 0 ? item * 2 : item
);

다중 배열 처리

const arrays = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 2차원 배열 평탄화와 변환
const flatMapped = arrays
    .flatMap(arr => arr.map(num => num * 2));

console.log(flatMapped);
// [2, 4, 6, 8, 10, 12, 14, 16, 18]

에러 처리

const data = ['1', '2', 'three', '4', 'five'];

const parsed = data.map(item => {
    try {
        const num = parseInt(item, 10);
        if (isNaN(num)) throw new Error(`Cannot parse ${item}`);
        return num;
    } catch (error) {
        console.error(`Error processing ${item}:`, error);
        return null;
    }
});

체이닝 최적화

const users = [
    { name: '김철수', age: 25, scores: [85, 90, 95] },
    { name: '이영희', age: 30, scores: [90, 95, 100] }
];

// 체이닝을 사용한 복잡한 데이터 변환
const results = users
    .map(user => ({
        name: user.name,
        average: user.scores.reduce((acc, curr) => acc + curr, 0) / user.scores.length
    }))
    .filter(user => user.average >= 90)
    .map(user => `${user.name}: ${user.average.toFixed(1)}점`);

결론

map() 함수는 배열 데이터 변환의 핵심 도구입니다. 함수형 프로그래밍의 불변성 원칙을 지키면서도 강력한 데이터 변환 기능을 제공합니다. 다른 배열 메서드들과 조합하여 사용하면 복잡한 데이터 처리도 간결하고 읽기 쉽게 구현할 수 있습니다.