map()

 

map() 메서드는 배열에 사용 가능한 메서드입니다.

 

map() 메서드에는 함수를 인자로 주게 되고 배열 내의 모든 요소에 적용되며 해당 함수의 결과 값을 모은 배열을 반환하게 됩니다.

 

map() 메서드에는 함수를 인자로 주어진 함수에는 매개변수를 3개까지 줄 수 있으며, 

 

첫 번째 인자는 배열의 각 요소를 담을 매개변수, 두 번째 인자는 각 요소의 인덱스를 담을 매개변수, 세 번째 인자는 메서드를 호출한 배열을 나타냅니다.

 

 

Array.prototype.map() - JavaScript | MDN

 

예제 코드와 함께 정리해보도록 하겠습니다.

 

 

map()

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

const map1 = numbers.map((number) => number * 2);

console.log(map1); // [2, 4, 6, 8, 10, 12] 출력

위의 설명처럼 map() 메서드에는 함수를 인자로 받았고 함수의 매개변수 number에는 numbers의 각 요소들이 담기게 됩니다.

 

number에 담긴 각 요소들은 함수의 실행문을 거쳐 새로운 배열에 담기게 됩니다.

 

 

 

만약 배열 안에 있는 객체에서 프로퍼티 별로 값을 분리하고 싶을 경우에 map() 메서드를 사용하면 편리하게 분리가 가능합니다.

const datas = [
  { id: 1, name: "n1", age: 26 },
  { id: 2, name: "n2", age: 27 },
  { id: 3, name: "n3", age: 28 },
];

const names = datas.map((data) => {
  return data.name;
});

console.log(names); // ['n1', 'n2', 'n3'] 출력