배열.맵()

이 기사는 다양한 배열 방법, 작동 방식 및 사용 사례를 설명하는 시리즈의 시작입니다.

지도 방법부터 시작하겠습니다.

맵 방식이란?

배열의 map 메서드는 배열의 각 항목을 반복하고 항목에 대해 몇 가지 작업을 수행한 다음 반환하여 결과 배열을 구성하는 고차 함수입니다.

고차 함수로서 함수를 인수로 취합니다. 루프 동안 이 함수는 항목(및 배열에서 해당 인덱스 위치)을 받고, 항목에 대해 작업을 수행하고, 새 항목을 새 배열로 만드는 새 항목을 반환합니다.

맵 메서드의 반환된 출력은 동일한 수의 항목을 포함하지만 새 항목이 포함된 새 배열입니다.

Map 메서드의 구문

someArray.map(function(item, index, array) {
  // something with item and/or index
  // return new item
})

item 인수는 반복되는 항목입니다.
index 인수는 배열의 위치입니다. 예를 들어 첫 번째 항목은 index가 0이고 두 번째 항목은 1입니다.
array 인수는 배열 자체입니다.

지도 방법 없이

map 메서드는 문자 그대로 "배열을 통해 매핑"하는 선언적 추상 함수입니다. 다음은 이 메서드 없이 배열을 통해 매핑할 수 있는 방법을 보여주는 예입니다.

const array = [...]

const newArray = []

for(let i = 0, i < array.length, i++) {
  const item = array[i]
  const newItem = ?? // do something with item
  newArray.push(newItem)
}

이 루프 방식은 map 메서드가 백그라운드에서 수행하는 것과 유사합니다.

지도 방법의 한 가지 사용 사례

지도 방법의 많은 사용 사례가 있습니다. 일반적인 아이디어는 배열의 항목을 통해 매핑하고 해당 항목으로 작업을 수행하고 새 배열을 반환하는 것입니다.

하지만 한 가지 사용 사례를 살펴보겠습니다.

배열의 불변 복제본을 만들기 위해

JavaScript의 배열은 참조 데이터 유형인 객체입니다. 이것이 의미하는 바는 다음과 같습니다.

const array1 = [1, 2]
const array2 = array1

array2.push(5)
console.log(array2)
// [1, 2, 5]
console.log(array1)
// [1, 2, 5]

직접적인 값이 아니라 참조이므로 array2를 수정하면 array1에도 영향을 미칩니다.

변경할 수 없는 복제본을 만들려면 다음과 같이 map 메서드를 사용할 수 있습니다.

const array1 = [1, 2]
const array2 = array1.map(item => item) // arrow functions

array2.push(5)
console.log(array2)
// [1, 2, 5]
console.log(array1)
// [1, 2]