[Javascript] .map()

 

map() 이란

 

map() 메서드는 배열 안의 모든 요소들을 각각 순회하며

그 요소들에게 주어진 함수(callback 함수)를 호출한 결과를 모아

새로운 배열을 반환한다.

 

 

const arr = [1, 3, 5, 10];

// arr 의 요소들을 각각 순회하며 * 2를 하여 반환한다.
const map = arr.map((item) => item * 2);

console.log(map); // Array [2, 6, 10, 20]

 

 

 

형태

 

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

callback: 새로운 배열 요소를 생성하는 함수

currentvalue: 처리할 현재 요소

index: 현재 요소 인덱스 [Optional]

array: map()을 호출할 배열 [Optional]

thisArg: callback을 실행할 때 this로 사용되는 값 [Optional]

 

 

 

 

반환 값

 

배열의 각 요소들에 대해 실행한 callbak의 결과를 모은 새로운 배열을 반환한다.

즉, map은 호출한 배열의 값을 변형하지 않는다.

(단 callback 함수에 의해 변형이 될 수는 있다.)

 

const arr1 = [1, 3, 5, 10];

// arr1 의 요소들을 각각 순회하며 * 2를 하여 반환한다.
const arr2 = arr1.map((item) => item * 2);

// map에 의해 새로 만들어진 배열
console.log(arr2); // Array [2, 6, 10, 20]

// 기존의 배열은 변형하지 않는다.
console.log(arr1) // Array [ 1, 3, 5, 10 ]

 

 

 

 

화살표 함수의 소괄호 () 생략

 

함수의 바디 안의 코드가 한줄이면 소괄호 () 를 생략 할 수 있다.

하지만 코드가 한 줄 이상이거나, 리턴값이 객체인 경우는 생략이 불가능하다.

 

 

 

 

 

화살표 함수의
() => () 소괄호 와  () => {} 중괄호 차이

 

소괄호 () 로 감싸진 부분은 return 문을 작성하지 않아도 return 된다.

반면 중괄호 {} 로 감싸진 함수는 return 문을 작성하지 않는다면 반환값이 없다.