map()

📖 array.map()

• 배열 내 각각의 요소에 대해 콜백함수 실행으로 인해 리턴된 값을 원소로 하는 새로운 배열을 생성한다.
• 매개변수로는 콜백함수, 콜백함수를 실행했을 때 this로 실행되는 값인 thisArg가 있다.
• 콜백함수의 매개변수는 아래와 같다.
  currentValue : 현재 요소
  index : 현재 요소의 인덱스
  array : map()을 호출한 배열

기본 구조

배열명.map(function(currentIndex, index, array), thisArg)

간단 예제

let arr = [11, 22, 33, 44, 55];

let mapArr = arr.map(num => {
    return num * 2;
})

console.log(mapArr);

map() 메서드를 호출한 배열 각 요소의 값이 2배 증가된 값으로 새로운 배열이 생성된다.

map()함수를 호출한 배열과 이후 생성된 배열의 공통점?

let arr = [11, 22, 33, 44, 55];

let mapArr = arr.map(num => {
    if(num % 2 !== 0) {
        return num * 2;
    }
})

console.log(mapArr);

위 예제와 다르게 홀수 요소만 2배 증가된 값을 새 배열에 담도록 조건문을 작성하였다.

하지만 의도하지 않은 undefined도 리턴된 것을 확인할 수 있다.

이러한 이유는 map() 메서드를 호출한 배열과 map() 메서드를 통해 생성된 배열은 길이가 같아야 하는 특성이 있어 조건문에 적합하지 않은 요소는 undefined로 리턴되어 새 배열에 담기는 것이다.

참고

map()