map() 함수
•
어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야할 때가 있다
•
그때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공 Array.map() 함수를 사용하면 된다
•
Array.map() 함수는 콜백함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해준다.
•
다시 말하자면 콜백함수는 배열의 각 요소에 실행된다
예시 1
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]
JavaScript
복사
예시 2
let arr = [3, 4, 5, 6];
let modifiedArr = arr.map(function(element) {
return element * 3;
});
console.log(modifiedArr);
// [9, 12, 15, 18]
JavaScript
복사
일반적으로 Array.map() 메소드는 위의 코드에서와 같이 특정 숫자를 곱하거나, 어플리케이션에 필요한 다른 작업을 수행하는 등 요소에 어떤 변경 사항을 적용하는데 사용된다
각 배열에서 map()을 사용하는 방법
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"]
JavaScript
복사
완전한 map() 메소드 구문
arr.map(function(element, index, array){ }, this);
// 콜백함수 function()은 각 배열 요소에 대해 호출
// map() 메소드는 언제나 현재의 element와
// 그것의 index, 그리고 전체 array 객체를 해당 요소에 전달
// this 인수는 콜백함수 내부에서 사용된다 -> 기본적으로 이 값은 undefined
JavaScript
복사
this값을 숫자 80으로 변경하는 방법
let arr = [2, 3, 5, 7]
arr.map(function(element, index, array) {
console.log(this) // 80
}, 80);
JavaScript
복사
let arr = [2, 3, 5, 7]
arr.map(function(element, index, array){
console.log(element);
console.log(index);
console.log(array);
return element;
}, 80);
JavaScript
복사
•
대부분의 경우 나머지는 무시하고, 콜백함수 내부의 element 인수만 사용