Map Method(맵 메소드)

배열에 있는 요소의 값을 변경하여 새로운 배열을 만들 때 사용할 수 있다.

반복문으로 처리가 가능 하지만 간단하게 Array.map() 메소드를 사용할 수 있으며, 이는 콜백 함수를 이용해 각각의 요소를 호출하고 그 값을 변환할 수 있게 만들어준다.

 

즉, 콜백 함수는 배열의 각 요소에 실행된다.

예를 들어,

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

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

console.log(arr); // [2, 4, 6, 8]

와 같은 반복문으로 나타낼 수도 있지만

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

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

console.log(modifiedArr); // [2, 4, 6, 8]

처럼 Array.map() 메소드를 사용할 수 있다.

 

이는 객체 배열에서도 적용될 수 있으며

예를 들어,

let users = [
  {firstName : "Kanghyun", lastName: "Kim"},
  {firstName : "Donald", lastName: "Trump"},
  {firstName : "Michel", lastName: "Jordan"}
];

과 같은 배열을 순환처리해서

let users = [
  {firstName : "Kanghyun", lastName: "Kim"},
  {firstName : "Donald", lastName: "Trump"},
  {firstName : "Michel", lastName: "Jordan"}
];

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

console.log(userFullnames);
// ["Kanghyun Kim", "Donald Trump", "Michel Jordan"]

와 같이 각각의 객체를 결합할 수도 있다.

 

이러한 Map() 메소드는 원본 배열을 변경하지 않으며, 각 요소에 대해 콜백 함수를 실행한다

또한, 결과물로 새로운 배열을 반환한다.

 

참조 : https://www.freecodecamp.org/korean/news/javascript-map-method/