map()

사용빈도가 대단히 높은 메서드이다.

배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환한다.

 

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환합니다.
});

---

1. 배열의 각 값에 더하고 곱하고 제곱근에...

const arr = [1, 2, 3];

// res와 res1과 res2는 모두 같다.
const res = [];
for(let i=0; i<arr.length; i++){
    res.push(arr[i]*2)
};
console.log(res)


const res1 = arr.map((value) => {
    return value*2
});
console.log(res1)

const res2 = arr.map((value) => value*2);
console.log(res2)

//인수로 value, index 넣어도 된다.
const res3 = arr.map((value, index) => value*index);
console.log(res3)

//다른 메서드를 안에 넣어도 된다.
const arr_sqrt = [4, 9, 16, 25, 36];
const res4 = arr_sqrt.map(Math.sqrt);
console.log(res4);

//화살표로 하면 쉽다.
const arr_num = [1,2,3,4,5,6,7,8,9];
const res5 = arr_num.map(number => number+2)
console.log(res5)

// 함수 안에서 선언해도 된다.
const arr_num2 = [1,2,3,4,5,6,7,8,9];
const res6 = arr_num2.map(function(v){
    return v * 2;
});
console.log(res6);

//함수 따로 선언해도 된다.
const arr_num3 = [1,2,3,4,5,6,7,8,9];

function 곱하기(v){
    return v*2;
};

const res7 = arr_num3.map(곱하기);

 

추가예시1) 길이로 반환.

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

 

추가예시2) 제곱근

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

---

2.배열 안의 key:value 값 수정하고 다른 객체에 할당

// return을 넣지 않으면, 딕셔너리라고 쓴 {id:x.id}의 중괄호가 map 함수의 중괄호로 인식되어서 
// undefined가 출력된다.
const arr = [{id:1, name: 'john'}, {id:2, name: 'james'}]
const result = arr.map((x) => {id:x.id});
console.log(result)

const arr2 = [{id:1, name: 'john'}, {id:2, name: 'james'}]
const result2 = arr.map((x) => {
    return {id:x.name}
});
console.log(result2)

//새 배열에 name만 할당
const result3 = arr.map((x) => x.name);
console.log(result3);

//할당만 하는걸 함수처럼 쓰면 undefined 출력
const result4 = arr.map((x) => {x.name});
console.log(result4);

 

추가예시1) 배열 속 객체 재구성

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

 

추가예시2) 주의깊게 볼 독특한 활용들1 : 나머지가 0인 것만 배열에 넣어줘.

function solution(arr, divisor) {
    var answer = [];
    arr.map((o) => {
        o % divisor === 0 && answer.push(o);
    })
    
    // 2~5줄은 var answer = arr.filter(el => el % divisor === 0) 와 같다.
    
    return answer.length ? answer.sort((a, b) => a - b) : [-1];

}

추가예시3) 주의 깊게 볼 독특한 활용들2 : 행렬 덧셈

function sumMatrix(A,B){
    return A.map((a,i) => a.map((b, j) => b + B[i][j]));
}

// 아래는 테스트로 출력해 보기 위한 코드입니다.
console.log(sumMatrix([[1,2], [2,3]], [[3,4],[5,6]]))

---

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN