Original article: JavaScript Map – How to Use the JS .map() Function (Array Method)

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다.

그 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공 Array.map() 메소드를 사용하면 됩니다.

이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다.

예를 들어 다음과 같은 배열 요소가 있다고 가정해 봅시다:

let arr = [3, 4, 5, 6];
간단한 JavaScript 배열

이제 배열의 각 요소에 3을 곱해야 한다고 상상해 봅시다. 다음과 같이 for 루프 사용을 고려할 지도 모릅니다:

let arr = [3, 4, 5, 6];

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

console.log(arr); // [9, 12, 15, 18]
for 루프를 사용하여 배열에 대해 반복 처리

그러나 사실 Array.map() 메소드를 사용한다면 이런 동일한 결과를 얻을 수 있습니다. 다음은 그에 대한 예시입니다: 

let arr = [3, 4, 5, 6];

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

console.log(modifiedArr); // [9, 12, 15, 18]
map() 메소드를 사용하여 배열에 대해 반복 처리

일반적으로 Array.map() 메소드는 위의 코드에서와 같이 특정 숫자를 곱하거나, 애플리케이션에 필요한 다른 작업을 수행하는 등 요소에 어떤 변경 사항을 적용하는 데 사용됩니다.

객체 배열에서 map()을 사용하는 방법

예를 들어, 당신의 친구들의 firstName 및 lastName의 값을 저장하는 객체 배열이 있습니다:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];
객체 배열

다음과 같이 map() 메소드를 사용하여 배열을 순환하며 처리해서 firstName 및 lastName 값을 결합할 수 있습니다:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]
map() 메소드를 사용하여 객체 배열을 순환 처리하기

map() 메소드는 단순히 하나의 요소만을 전달하는 것이 아닙니다. map()을 통해 콜백 함수에 전달되는 모든 인수를 살펴보겠습니다.

완전한 map() 메소드 구문

map()을 위한 구문은 다음과 같습니다:

arr.map(function(element, index, array){  }, this);

콜백함수 function()은 각 배열 요소에 대해 호출되며, map() 메소드는 언제나 현재의 element와 그것의 index, 그리고 전체 array 객체를 해당 요소에 전달합니다.

this인수는 콜백함수 내부에서 사용되게 됩니다. 기본적으로 이 값은 undefined입니다. 예를 들어, this값을 숫자 80으로 변경하는 방법은 다음과 같습니다:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);
map() 메소드의 this 인수에 숫자 값 할당


console.log()를 사용하여 다른 인수들을 테스트해 볼 수도 있습니다:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);
값을 확인하기 위한 인수 로깅

여기까지가 Array.map()방법에 대해 알아야 할 전부입니다. 대부분의 경우 나머지는 무시하고 콜백 함수 내부의 element 인수만 사용합니다. 저는 보통은 그렇게 많이 사용한답니다 :)

이 튜토리얼을 읽어주셔서 감사합니다

해결해야 할 가장 일반적인 자바스크립트 문제들 중 일부인 객체 배열을 합치는 방법 및 회문 문자열을 찾는 메소드를 포함한 제가 작성한 다른 JavaScript 튜토리얼에도 관심이 있을 수 있습니다.

웹 개발 튜토리얼(대부분 JavaScript 관련)에 대한 무료 뉴스레터도 있습니다.