[TIL] map() 함수

 

 

♦️ 어떤 배열에 있는 모든 요소들의 값을 변경하여 새로운 배열을 써야 할 때가 있다. 이 때 루프를 사용하여 배열에 대해 수동으로 반벅을 처리하는 대신, Array.map() 메소드를 사용하면 된다. 

 

 

 

예를 들어 아래와 같은 배열 요소가 있을 때, 각 요소에 3을 곱한 값을 출력한다고 하면 for 루프를 사용하려 할 것이다. 

그런데 map() 함수를 사용하면 for 루프를 사용하지 않고도 동일한 결과를 얻어서 출력할 수 있다. 

 

let arr = [4, 5, 6, 7];

 

 

✏️  for 루프를 사용한 배열 반복 

for (let i = 0; i < arr.length; i++) {
	arr[i] = arr[i] * 3; 
}

console.log(arr); // [12, 15, 18, 21];

 

✏️ map() 함수를 사용한 배열 반복

let arr1 = arr.map(function(num) {
	return num * 3;
});

console.log(arr1); // [12, 15, 18, 21]

 

✏️ map() - 화살표 함수로 구현 

let arr1 = arr.map(x => x * 3); 
console.log(arr1); // [12, 15, 18, 21];

 

map을 사용하면 훨씬 더 간단하죠? 

이외에도 다양하게 사용되는 map() ! 아래에 정리해 볼게요

 

 

 

객체 배열에서 map() 사용하기 

 

예를 들어 아래와 같은 firstName / lastName의 값을 저장하는 객체 배열이 있다

let people = [
  {firstName : "Hoi", lastName : "Bbang"}, 
  {firstName : "Poy", lastName : "Ppong"},
  {firstName : "Rose", lastName : "Garden"},
];

 

 

아래와 같이 map() 메소드를 사용하여 배열을 순회하면 firstName / lastName 값을 결합할 수 있다

let people = [
  {firstName : "Hoi", lastName : "Bbang"}, 
  {firstName : "Poy", lastName : "Ppong"},
  {firstName : "Rose", lastName : "Garden"},
];

let fullNames = people.map(function(name) {
	return `${name.firstName} ${name.lastName}`;
});

console.log(fullNames); 
// ["Hoi Bbang", "Poy Ppong", "Rose Garden"]

 

 

map()의 사용법 

 

map은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록한다 

let arr = [0, 1, 2, 3]; 

let arr1 = arr.map(function(element, index, array) {
	console.log(`${array]의 ${index}번째 인자 : ${element}`);
    return element * element;
};

/*
0,1,2,3의 0번째 인자 : 0
0,1,2,3의 1번째 인자 : 1
0,1,2,3의 2번째 인자 : 2
0,1,2,3의 3번째 인자 : 3
*/

console.log(arr1); // [0, 1, 4, 9]