[JavaScript] Array.prototype.map()

 

 

1. map()

우리는 배열을 다루다 보면 아래와 같은 요구 사항을 갖고 있는 경우가 많다.

• 숫자 배열을 전부 2배로 만들어야 한다.
• 문자열 배열을 전부 대문자로 바꿔야 한다.
• 객체 배열에서 name만 뽑아서 새로운 배열로 만들고 싶다.
• 서버에서 받은 데이터를 UI에서 쓰기 좋은 형태로 바꾸고 싶다.

이런 작업들은 모두 공통점이 있는데, 원본 배열은 그대로 두고, 가공된 결과만 따로 새 배열로 만들고 싶다는 것이다.

 

 

map 메서드는 위의 목적에 딱 맞게 만들어진 것이다.

왜냐하면 배열의 각 요소를 하나씩 방문하면서 그 칸의 값을 새 값으로 바꿔서 새 배열의 같은 위치에 넣어주는 역할을 해주기 때문이다.

즉, 원본 배열의 0번째를 새 값으로 바꿔서 새 배열의 0번째에 넣어주고, 원본 배열의 1번째도 새 값으로 바꿔서 새 배열의 1번째에 넣어주는 거라 보면 된다.

따라서 map의 결과 배열은 항상 원본 배열과 길이가 동일하다 !!

 

 

1.1. map은 변환에 특화된 메서드이다.

우리가 단순히 반복을 하고 싶다면 굳이 map이 아니더라도 for이나 forEach 등을 활용할 수 있다.

map의 가장 큰 특징은 새 배열을 반환하는 것이기 때문에 변환된 결과를 배열로 받고 싶은 상황에서 사용하는 게 가장 적합하다.

 

 

---

 

 

2. map의 기본 형태 및 예시

const result = array.map((value, index, array) => {
  return /* 원하는 새 값을 만드는 코드 */;
});

 

위에서 볼 수 있듯이 map 안에는 함수가 들어가야 한다.

이 함수가 하는 역할은 배열에서 요소(value)를 하나씩 꺼내서 규칙(return)대로 바꾼 뒤에 새 배열에 넣는 것이다.

 

 

2.1. 예시 1) 숫자 2배 만들기

간단한 예시를 살펴보자.

const nums = [1, 2, 3];
const doubled = nums.map( n => n * 2 );

 

결과로는 다음과 같이 원본 배열은 그대로 유지되어 있고, 모든 값이 2배가 된 새 배열이 doubled에 반환된 것을 볼 수 있다.

 

 

2.2. 예시 2) 대문자로 변환하기

const words = ["hello", "world", "map"];
const upper = words.map(w => w.toUpperCase());

 

 

 

2.3. 예시 3) index 활용하기

const fruits = ["apple", "banana", "grape"];
const labeled = fruits.map((fruits, i) => `${i + 1}번 ${fruits}`);

 

 

 

2.4.) 예시 4) 객체에서 필요한 필드만 뽑기

const user = [
  { id: 1, name: "ssosso", role: "admin" },
  { id: 2, name: "kssossok", role: "user" },
];

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

 

 

 

2.5. 예시 5) 비동기 코드와 함께 사용하기

const ids = [1, 2, 3];

const promises = ids.map(async (id) => {
  const res = await fetcy(`/api/user/${id}`);
  return res.json();
});

const users = await Promise.all(promises);

 

위 코드에서 볼 수 있듯이 map 안에서 async-await을 사용하면 결과가 Promise 배열로 반환된다는 점에 주의해야 한다.

 

 

2.6. 예시 6) 렌더링에서 활용하기

{users.map(user => {
  <li key={user.id}>{user.name}</li>
))}