[자바스크립트] javascript map() 사용하기

[자바스크립트] javascript map() 사용하기

 

 

 

 

 

 

 

자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수!

 

배열 요소를 순환하며 어떠한 가공을 가하거나, 배열요소 안의 요소를 추출하거나 할 때 가장 알맞은 함수!

가공된 결과물은 새로운 배열로 반환된다!

 

 

 

 

 

 

[사용법]

 

// 화살표 함수
array.map((element, index, array) => { ... })


// 콜백함수만 호출
array.map(callbackFn, thisArg)


// 익명함수
array.map(function(element, index, array) {
},thisArg)

 

 

 

 

 

 

[간단설명]

 

array.map()은 배열을 순환하면서 지정된 callback 함수를 각 요소마다 

순서대로 실행하여 새로운 배열을 return 한다.

 

 

 

 

 

[특징]

• map() 자체는 원본배열을 변형시키지 않는다(callback함수에서 변형시킬수는 있어도)
• 특정 인덱스의 요소가 delete 됬거나, 아예 값이 배정된 적이 없는 인덱스는 callback 함수를 실행하지 않는다.

 

 

 

 

[주의]

map()을 사용하지 않아야 하는 case :

• return 되는 배열을 사용하지 않는 경우는 anti-pattern! (그냥 for문 쓰는게 낫다)
• callback 함수가 값을 return 하지 않는 경우
  
  

 

 

 

 

 

파라미터(parameter) : 

 

 

callback함수 :
배열의 모든 요소가 거쳐갈 함수. return값은 새로운 배열로 만들어진다.

 

 

element : 
(순환 중) 현재 처리중인 요소 그 자체

 

index (optional) : 
(순환 중) 현재 처리중인 요소의 index

 

array (optional) : 
map() 이 실행되고 있는 원본배열

 

thisArg (optional) : 
callback 함수가 실행중일 때 this로 사용될 값

 

 

 

 

---

 

[예제 1]

 

let array = [3, 6, 9];
let result = array.map(el => el * 2);


//array = [3, 6, 9];  //원본은 변함이 없음
//result = [6, 12, 18];  //콜백함수가 실행된 값

 

 

 

 

 

 

[예제 2]

 

let array1 = [
	{key : 1, value : 10},
	{key : 2, value : 20},
	{key : 3, value : 30}
]


let returnArray = array1.map(obj => {
	let newObj = {};
	newObj[obj.key] = obj.value;

	return newObj;
})


// returnArray = [{1 : 10}, {2 : 20}, {3 : 30}] 

// 원본은 변함이 없음
//  array1 = [
//  	{key : 1, value : 10},
//  	{key : 2, value : 20},
//  	{key : 3, value : 30}
//  ]

 

 

 

 

 

 

[예제3]

 

//배열 안의 객체구조
var array = [
    {prdNo : 33208, prdNm : '투싼', brandNm : '현대'},
    {prdNo : 34082, prdNm : '소나타', brandNm : '현대'},
    {prdNo : 58200, prdNm : '소렌토', brandNm : '기아'},
    {prdNo : 79257, prdNm : 'K9', brandNm : '기아'},
    {prdNo : 82975, prdNm : 'SM5', brandNm : '르노삼성'}
];


//각 요소의 prdNo 만 추출하고 싶다면
var prdNoList = array.map(el => el.prdNo);

//결과값 :
//prdNoList = [33208, 34082, 58200, 79257, 82975]

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

특정조건에 맞는 배열요소만을 골라내서 배열로 만들고 싶다면?

https://devinserengeti.tistory.com/21?category=901017

[자바스크립트] javascript filter() 사용하기