비실이의 개발 성장기

javascript의 map() 이란..? 본문

프론트엔드/javascript

javascript의 map() 이란..?

DubbingLee 2016. 11. 23. 23:26

javascript에서 Array 나 JSON의 아이템 갯수만큼 


반복을 돌며 데이터를 가공하여 무언가 작업을 수행해야 할 때가 있습니다.



for문을 이용해도 되고... forEach도 있고  여러가지가 있으나 


map() 이라는 녀석도 있습니다.



Java의 컬렉션 중 Map과는 다른개념 입니다.




그럼 javascript에서  map() 은 어느경우에 이용하느냐...




예제를 만들어서 보겠습니다.



mainArray = [1, 2, 3, 4, 5]; 가 있는데... 


새로운 subArray를 만들고 싶습니다.



새로운 subArray의 아이템들은 


mainArray의 각 인덱스에 있는 아이템 값에 +5를


하여 구성하고 싶습니다.




위와같은 경우를 크롬 개발자 도구에서 


해봤습니다.




중간에 에러는 줄바꿈 실수로 인한 에러입니다.



새로운 subArray의 결과는


[6, 7, 8, 9, 10] 


이 나왔습니다.




1
2
3
let subArray = mainArray.map(function(value, index){
  return value + 5;
});
cs



map() 은 이처럼  '원본리스트' 의 처음 인덱스부터 마지막 인덱스까지 순회하며


현재 인덱스(index)의 아이템(value) 의 데이터를 가공할 수 있고


return을 하면  가공된 데이터를 새로운 리스트의 index에 담게됩니다.



여기서 중요한 점은 


return을 하였다고 map(){} scope를 빠져나가는게 아닙니다.


그 다음 인덱스를 가리키게 됩니다. 


map(){} scope를 빠져나가는 시점은 mainArray의 


마지막 index까지 모두 순회하였을 경우 입니다.





결론은 map() 을 사용하여 만들어진 새로운 리스트의 length는 


원본 리스트의 length와 동일하게 되며, 내부 아이템만 다르게 됩니다.




만약 위에 예제에서 mainArray의 마지막 인덱스에만 +5를 하게 되면 


어떤 결과가 나올까요??



코드는 아래와 같습니다.


1
2
3
let subArray2 = mainArray.map(function(value, index){
  if(value === 5return value + 5;
});
cs





결과는....




[undefined, undefined, undefined, undefined, 10]


이 나왔습니다.



결론은


map(){} 에서 return을 주지 않으면 


해당 index는 undefined로 초기화 되는것을 


확인하였습니다.






#잘못된 부분이나 궁금하신점은 댓글로 남겨주세요.





3 Comments
댓글쓰기 폼