[JavaScript] map()

그동안 코딩 테스트 문제를 풀면서 map() 메서드의 활용에 있어서 어려움을 겪었다. 어떤 경우에 map 함수를 사용해야하는지, map() 메서드를 왜 사용해야 하는지에 대한 어려움이 있었는데 이에 대해 정리해보고자 한다.

map() 메서드란?

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

map의 원리는 반복문을 돌며 배열 안의 요소들을 1대 1로 짝지어 주는 것이다. 매핑한다는 표현하기도 한다. 어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 된다.

map은 간결하지만 for문을 사용하면 순환이라는 부분까지 직접 처리해야하기 때문에 작성 코드가 길고 간결하지 못하다. 때문에 이런 경우에 map 메서드를 사용해주면 간결해진다.

const oneTwoThree = [1, 2, 3];
let result = oneTwoThree.map((v) => {
  console.log(v);
  return v;
});
// 콘솔에는 1, 2, 3이 찍힘
oneTwoThree; // [1, 2, 3]
result; // [1, 2, 3]
oneTwoThree === result; // false

위 예시에선 함수가 그냥 return v를 하기 때문에 같은 값을 그대로 짝짓는다.
여기서 주의할 점은 map은 실행하는 배여로가 결과로 나오는 배열이 다른 객체이기 때문에 일치하지 않는다. 기존 배열을 수정하지 않고 새로운 배열을 만들어 내지만 배열 안에 객체가 들어있는 경우, 객체는 공유된다.

즉, map은 배열을 1대1로 짝을 지어주되 기존 객체를 수정하지 않는 메서드이다.