Array-prototype.map()

시작하기전 주절주절...

 개발하면서 제일 많이 쓰는데, 개념없이 써와서 아침에 출근하며, 정리 차원에서 정리를 해봅니다. (MDN Web Doc에서 가져왔습니다.)

 

 map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환합니다.

//기본형식
const array1 = [1,4,9]
const map = array1.map(x => x*2)

const map = array1.map(value => {
	return value = value * 2
});

 Syntax

  arr.map(callback(currentValue[, index[, array]]) [, thisArg])

 

 Param

• callback : 새로운 배열 요소를 생성하는 함수. 세가지 인자를 가집니다.
•  currentvalue : 현재 처리할 요소
•  index : 처리할 현재 요소의 인덱스 (optional)
•  array :  map()을 호출한 배열(optional)
•  thisArg : callback을 실행 할때 this

 Return

 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

 callback 함수는 각 요소에 대해 한번씩 순서대로 호출되며, 그 반환값으로 새로운 배열을 만듭니다. 배열값의 인덱스에 대해서만 호출하며, 값이 삭제되거나 아직 할당되지 않은 인덱스는 호출하지 않습니다.

 map은 호출한 배열의 값을 변형하지 않습니다. 단, callback 함수에 의해서 변형될수는 있습니다. map이 처리할 요소의 범위는 첫 callback 함수를 호출하기 전에 정해집니다. map이 시작 된 이후 배열에 추가 되는 요소들은 callback을 호출하지 않으며, 배열에 존재하는 요소들의 값이 바뀐 경우 map이 방문하는 시점의 값이 callback에 전달 됩니다.

 

 예제1. map 활용하여 배열 속 객체 재구성하기

var kvArray = [{ key:1 , value:2}, {key:2 , value:3}]

var objArray = kvArray.map( obj=> {
	var robj ={}
    robj[obj.key] = obj.value;
	return robj;
});

//결과  objArray = [{1:2}, {2:3}]

 예제2. map 다양환 활용

var map = Array.prototype.map;
var a = map.call('Hellp world', function(x){
	return x.charCodeAt(0);
	});
  // a = [72, 101, 108 ... 이하생략] ASCII 인코딩 값으로 가져옵니다
 
 var elems = document.querySelectorALL('select option:checked');
 var vlaues = [].map.call(elems, function(obj)){
 	return obj.value;
 }
 // 이와 비슷한 코드 Array.from() 메소드가 존재하며, 유사배열객체나 반복 가능 객체을 얕게 복사해 Array 객체를 만듭니다.
 

 

forEach와의 차이점은?

Map()은 부모의 Scope를 건드리지 않으며, 새로운 배열을 반환을 하나, forEach는 그렇지 않음. 고로, 사이드이펙트가 날수도 있습니다.