[JavaScript] map() 메서드로 비슷한 길이의 배열 생성

map() 메서드란?

---

map() 메서드는 배열의 각 요소에 대해 콜백 함수에서 반환된 정보를 새로운 배열로 생성한다.
다른 배열 메서드와 비교했을 때, 반환값을 예상하기 쉽고 명확하다.

 

map() 메서드는 무엇을 할까?

• 배열의 각 요소를 특정 조각으로 변환하거나
• 새로운 형식의 값으로 변환할 수 있다.

 

예제: 밴드 연주자 정보 추출

---

아래는 밴드 연주자의 정보가 담긴 컬렉션이다:

const band = [
    { name: 'corbett', instrument: 'guitar' },
    { name: 'evan', instrument: 'guitar' },
    { name: 'sean', instrument: 'bass' },
    { name: 'brett', instrument: 'drums' }
];

 

반복문으로 구현하기

먼저, 반복문을 사용해 연주자들의 악기 정보만 추출하는 코드를 작성해보자:

const instruments = [];
for (let i = 0; i < band.length; i++) {
    const instrument = band[i].instrument;
    instruments.push(instrument);
}

이 코드는 의도는 명확하지만, 코드가 길고 재사용성이 부족하다.
여기서 한 단계 리팩토링해보자.

 

별도의 함수로 추출하기

악기 정보를 가져오는 로직을 함수로 분리하면 다음과 같다:

function getInstrument(member) {
    return member.instrument;
}

const instruments = [];
for (let i = 0; i < band.length; i++) {
    instruments.push(getInstrument(band[i]));
}

map() 메서드로 변환하기

이제 반복문을 map() 메서드로 바꿔보자.
map()을 사용하면 배열 선언 없이 더 간단하게 작성할 수 있다:

const instruments = band.map(getInstrument);

이 코드는 다음과 같은 이점이 있다:

1. 배열 선언 불필요: map() 메서드가 새로운 배열을 반환한다.
2. 코드 간결화: 반복문과 배열 조작 로직이 모두 추상화된다.
3. 예측 가능성: 반환되는 배열의 길이는 항상 원본 배열과 동일하다.

 

 익명 함수로 변환하기

getInstrument 함수를 익명 함수로 바꾸면 코드가 더 단순해진다:

const instruments = band.map(member => member.instrument);

이 방식은 함수 정의와 호출을 한 번에 처리해 더욱 직관적이다.

 

결론

---

map() 메서드는 단순하면서도 유연하다. 특히, 원본 배열과 같은 길이의 배열을 생성해야 할 때 유용하게 사용할 수 있다.