자바스크립트 - map() 함수?

 

 

 

 

 

이번에 리액트를 공부하고있는데, 자바스크립트에서 배열안에 있는 데이터들을 반환할 때,

map 함수가 아주 유용하다는걸 느꼈다

 

map() 메서드 : callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다.

 

const numberArr = [1,2,3,4,5];

const result = numberArr.map((num) => num + 1);

console.log(result);

//결과 : [2,3,4,5,6]

 

 

 

callback 함수에 들어가는 첫번째 매개변수는 순서대로 처리할 요소가 들어간다.

(위 코드에서 num은 1,2,3,4,5 가 차례대로 불러져 num+1 하고 반환됨)

 

 

const numberArr = [1,2,3,4,5];

const result = numberArr.map((num, index) => {
	console.log(index);
	return num + 1;
});

console.log(result);

다른 매개변수도 넣어줄수있다. (선택)

위 코드에서는 두번쨰 인자로 index를 넣었는데,

index는 각각 요소들의 인덱스를 의미한다. (index 말고 다른것도 있다)

 

리액트에서 map으로 어떤 배열을 출력할 때 넣을 키 값이 없을때 index를 이용하여 키 값을 줄 수 있다!

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN