map()

내일배움캠프 LGLG!

5주차(주특기 숙련 - React)

map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용

arr.map(callback(currentValue, index, array), thisArg)

map함수는 callback, thisArg 함수를 가지고 있으며,

callback은 currentValue, index, array 등 3개의 인수를 가진다.

callback
새로운 배열 요소를 생성하는 함수로, 다음 세 가지 인수를 가진다.

currentValue
배열 내에서 현재 처리해야 하는 값
index
현재 처리해야 하는 인덱스 값 array
map()을 호출한 배열, 여기서 arr의 배열을 가져오는 것이라 할 수 있음

thisArg
callback을 실행할 때 this로 사용되는 값이다.

arr의 값을 하나씩 불러와 thisArg값에 맞게 실행을 한 후 새로운 배열을 보내는 것

• 예시) 숫자 배열을 만들어 2씩 곱하여 새로운 2의 배수 배열을 보여준다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const multNumber = numbers.map(number => number *2);
console.log(multNumber); // [2, 4, 6, 8, 10, 12, 14, 16, 18]

1. numbers라는 배열을 가져와 number값에 하나하나 넣는다.
2. 그 값은 위에 보여주는 currentValue값이라 할 수 있으며, 현재 값은 곱하기 2를 한다.
3. 곱한 값은 새로운 변수 multNumber에 새로운 배열로 계속 추가된다.
4. numbers 배열을 모두 실행하게 되면, map 함수는 종료가 되고 새로운 배열(multNumber)을 저장하여 호출할 수 있다.

여기서 index, array라는 인수는 필요성이 없어 쓰이지 않았다.