javascript map()

Array.map()

어떤 배열에 있는 모든 요소의 값을 변경해 만든 새로운 배열을 써야 할 때 루프를 사용해서 수동으로 처리할 수 있으나, 기본 제공 메서드인 Array.map()을 사용할 수 있다.

이 메서드는 콜백 함수를 이용해 각각 요소에 호출해서 그 값을 변환 할 수있게 한다.

구문

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

callback: 새로운 배열 요소 생성하는 함수 (인수 3개)

currentValue: 처리 할 현재 요소

index: 처리할 요소의 인덱스

array: map()을 호출한 배열

thisArg: callback실행시 this로 사용 될 값

반환값: 배열 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

ex)

let arr = [1, 2, 3, 4]

arr의 각 요소에 3를 곱해야 할 때, for을 이용하면 아래와 같다.

let arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [3, 6, 9, 12]

Array.map()을 사용해도 위와 같은 결과를 얻는다.

let arr = [1, 2, 3, 4];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [3, 6, 9, 12]

간단한 화살표 함수로 표현

let arr = [1, 2, 3, 4];

let modifiedArr = arr.map(element => (element * 3));

console.log(modifiedArr); // [3, 6, 9, 12]

일반적으로 map()은 특정 숫자를 곱하거나 어플리케이션에 필요한 다른 작업을 수행할 때 요소에 어떤 변경이 필요할때 사용된다.

map() vs forEach()

map(): 배열 내의 모든 요소 각각에 콜백함수를 호출한 결과를 모아 새로운 배열 반환

forEach(): 요소마다 콜백함수 실행, 결과로 array를 가지려면 push를 통해 배열을 만들어야한다.