자바스크립트_Map 함수 사용

JS.map()

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야할 때,
루프를 사용하여 배열에 대해 수동으로 반복 처리하는대신 Array.map()메소드가 사용됩니다.

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

예시

배열의 각 요소에 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]

· map() 메소드를 사용하여 배열에 대해 반복 처리

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

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

console.log(modifiedArr); // [9, 12, 15, 18]

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

firstName,lastName의 값을 저장하는 객체 배열이 있습니다.
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() 메소드를 사용하여 객체 배열을 순환 처리하기