map 메소드

자바스크립트에서 배열의 값을 이용할때 이 배열의 요소를 이용해서 리스트를 보여주거나 새로운 배열을 생성할 때가 있다

react 앱 과제 1에서 입력 받은 데이터(배열)를 글 목록으로 보여주고 싶을때 for을 이용해서 배열의 인덱스를 바꿔 수동적으로 처리했다

이때 for을 이용하지 않고 기본 제공되는 map() 메소드를 이용하면된다

Array.map()메소드는 콜백함수를 이용해서 각각의 값을 호출하고 그 값을 반환 받는다 콜백함수는 각각의 요소에 실행된다

for 사용

let arr = [1,2,3,4,5];
for (i=0;i<arr.length;i++ ){
  console.log(arr[i])
} // 1,2,3,4,5 가 출력된다

 

map 메소드를 사용

let arr = [1,2,3,4,5];
let lis = arr.map(element => element +1);
console.log(lis) //(5) [2, 3, 4, 5, 6]

함수의 인수가 하나라서 괄호를 생략하고 화살표 함수를 이용했다

map메소드를 이용해서 쉽게 배열의 반복을 처리했다

 

 

객체 배열에서 map

객체 배열이란 객체가 배열로 묶여있는 것을 의미한다

let objArr =[
		{id: 1, num:'1번',name: "one"},
		{id: 2, num:'2번',name: "two"},
		{id: 3, num:'3번',name: "three"},
		{id: 4, num:'4번',name: "four"},
		{id: 5, num:'5번',name: "five"},
		{id: 6, num:'6번',name: "six"},
		{id: 7, num:'7번',name: "seven"}
] // 객체 배열

 

map() 메소드를 이용해서 객체배열들의 num과 name을 합칠 수 있다

let objArr =[
		{id: 1, num:'1번',name: "one"},
		{id: 2, num:'2번',name: "two"},
		{id: 3, num:'3번',name: "three"},
		{id: 4, num:'4번',name: "four"},
		{id: 5, num:'5번',name: "five"},
		{id: 6, num:'6번',name: "six"},
		{id: 7, num:'7번',name: "seven"}
] 
let sumObj = objArr.map(function(element) {
		return element.num + element.name;
});
console.log(sumObj);//(7) ['1번one', '2번two', '3번three', '4번four', '5번five', '6번six', '7번seven']

let sumObj = objArr.map(element => {
	  element.num + element.name;
}); //(7) [undefined, undefined, undefined, undefined, undefined, undefined, undefined]

why?

 

 

완전한 map() 메소드

arr.map(function(element, index, array){ }, this);

콜백함수는 각 배열의 요소에 대해서 호출되며 map메소드는 현재의 element와 element의 index 전체의 array객체를 해당 요소에 전달한다 this는 콜백 함수 내부에서 사용된다

// this 이용하기
let arr = [1,2,3,4,5]; 
arr.map(function(element,index,array){
		console.log(this);
}); //this에 값 할당 없음
	//Window {window: Window, self: Window, document: document, name: '', location: Location, …}
	//5번 출력
arr.map(function(element,index,array){
		console.log(this);
},80);
	//Number {80} 5번 출력

 

각 요소 출력하기

let arr = [1,2,3,4,5]; 
arr.map(function(element,index,array){
		console.log(this); //80
		console.log(element); //1,2,3,4,5
		console.log(index); //0,1,2,3,4
		console.log(array);// (5) [1, 2, 3, 4, 5]
},80); 

파이썬의 map과 비슷한 사용법과 결과가 비슷하다