[React] 자바스크립트 배열의 map() 함수

📍 자바스크립트 배열 객체의 내장 함수인 map 함수
map 함수를 사용해 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.

✔ 문법

arr.map(callback, [thisArg])

• 파라미터

  • callback
    새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다.
    

    • currentValue : 현재 처리하고 있는 요소
    • index : 현재 처리하고 있는 요소의 index 값
    • array : 현재 처리하고 있는 원본 배열
    
    

  • thisArg(선택 항목)
    callback 함수 내부에서 사용할 this 레퍼런스

---

• 예제
  map 함수를 사용하여 배열 [1, 2, 3, 4, 5]의 각 요소를 제곱해서 새로운 배열을 생성해보기.
  
  

크롬 개발자 도구(F12)를 열어 이 코드를 콘솔에 입력해보자!

(+) 콘솔에서 새 줄 작성하기
콘솔에서 Shift를 누른 채 Enter를 누르면 명령어가 바로 실행되지 않고 새 줄을 들여 쓸 수 있음!

var numbers = [1, 2, 3, 4, 5];

var processed = numbers.map(function(num){
  return num * num;
});
 
console.log(processed);

이 코드를 ES6 문법으로 작성한다면?
var 키워드 대신 const를 사용하고, function(...){...} 대신 화살표 함수를 사용함.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => num * num);
console.log(result);