JavaScript -Array.map()

Array.prototype.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const numbers = [1, -1, 2, 3];
const filtered = numbers.filter(n=>n>=0);
console.log(filter) // [1. 2. 3]
const item = filtered.map(n => '<li>'+n+'</li>')
console.log(item) //['<li>1</li>', '<li>2</li>', '<li>3</li>']
const html =  '<ul>' + item.join('') + '</ul>'
console.log(html) //<ul><li>1</li><li>2</li><li>3</li></ul>

const items = filtered.map(n=> {
    const obj = {value : n};
    return obj;
});

▼ 같은 결과, 다른 풀이 (코드의 간결화)

const items = filtered.map(n=> ({value : n}) );

filter나 map의 경우 모두 배열로 반환하기 때문에 chaining이 가능하여 배열의 메서드를 반복해서 사용할 수 있다.

const itemts = numbers
	.filter(n => n>=0)
	.map(n => ({value : n}) )
	.filter(obj => obj.value > 1);
	.map(obj => obj.value);

🥑 Array.map() : 표현방식 1

let numbers = [4, 9, 16, 25]
let result =  numbers.map(Math.sqrt);

🥑 Array.map() : 표현방식 2

let numbers = [1, 2, 3, 4, 5]
let newNumbers = numbers.map(function(num) {
	return num * 2 ;
})

arrow func

let numbers = [1, 2, 3, 4, 5]
let newNumbers = numbers.map(num => num * 2 })

🥑 Array.map() : 표현방식 3

function형

let numbers = [1, 2, 3, 4, 5]
function multiplyTwo(num) {
	return number * 2;
}
 let newNumbers -= numbers.map(multiplyTwo);

📌 예제1

 let students = [
   {id:1, name: 'James'},
   {id:2, name: 'Tim'},
   {id:3, name: 'John'},
   {id:4, name: 'Brian'}
 ];

let names = students.map(x => students.name);
console.log(names);

📌 예제2

var numbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
var newNumbers = numbers.map(array => array.map(number => number * 2));
console.log(newNumbers);

📌 예제3

배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

console.log(roots) //[1, 2, 3]
console.log(numbers) //[1, 4, 9]

map()메서드는 원본배열을 수정하지 않는다.

📌 예제4

map을 활용해 배열 속 객체를 재구성하기

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray는 [{1:10}, {2:20}, {3:30}]

📌 예제5

인자를 받는 함수를 사용하여 숫자 배열 재구성하기
인자가 한개인 함수를 이용하여 map이 어떻게 동작하는지 확인하기

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]