[JavaScript] map, 화살표 함수

map()

배열 렌더링(배열 안에 있는 데이터들을 화면에 보여주는 기법)을 할 때 JSX에서는 for문을 사용할 수 없으므로 map이라는 함수를 활용한다.

map 안에 함수를 전달하면 배열 내 요소에 대하여 해당 함수를 통과시켜 새로운 배열을 생성한다.

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

// Problem: 모든 요소의 2배를 한 결과를 새로운 배열에 담음
// Sol 1
// 명령형 프로그래밍
const doubleArr = []
for(let i = 0 ; i < arr.length; i++) {
    doubleArr.push(arr[i] * 2);
}

// Sol 2
// mapping
// 함수형 프로그래밍
  const doubleArr = arr.map((n) => n * 2)

화살표 함수 (arrow function)

전통적인 함수 표현식을 보다 간결하게 나타내기 위해 화살표 함수를 활용할 수 있다.
함수 이름을 따로 적어주지 않으며, 매개변수가 한 개일 경우 소괄호는 생략 가능하지만 두 개 이상일 경우 소괄호는 생략 불가능하다. (매개변수가 없을 경우 빈 소괄호만 나타낸다.)

function add(a, b) {
  return a + b
}

// 위와 동일한 함수
(a, b) => { return a + b }
(a, b) => a + b