자바스크립트 MAP - array 는 배열로 관리하기. / array 를 key 로 접근

자바스크립트를 공부하면 나오는 array 여기서 ES6 부터는 map 으로 데이터를 관리하여 주게 됩니다. 

이런식으로 array 가 새롭게 생성되어있을 때 Array의 각 요소를 순회하며 callback 함수를 수행하는 것을 map 이라고 합니다 .

 

array 의 핵심 기능 그러면 map 에 대해서 알아봅시다. 

map 은 한마디로 "맵핑" 해주는 개념이라고 생각이라고 하면 된다. 

배열.map((요소, 인덱스, 배열) => { return 요소 });

이런식으로 배열에 있는 요소들을 맵핑해주며 우리가 원하는 작업을 할 수 있다. 많은 사람들이 forEach 를 사용하는데 이것보다 좀더 빠르고 간편하게 쓸 수 있습니다. 

 

 

사용법 ) 특히 JSX 코드 상이나 리액트에서 쓸때 array 의 인자별로 내부 내용을 한꺼번에 적용시키고 싶을 때 아주 편리합니다. 

예시 
 {   importArray.map(element => (  <Option key={element} value={element}>{element}</Option> ))}

저 위에서 element 는 importArray 가 돌아가며 안에 있는 내부 값을 element 로 지칭하고 있습니다. 

 

약간 이런 느낌과 비슷하죠. 이런식으로 array 의 처음부터 끝까지를 돌며 이를 element 로 지칭했다고 생각하시면 되겠습니다. 

for ( let index in importArray.length) {
 var  element = importArray[index] 
}

 

[ Map 간단한 예시 ] 

직접 실행한 파일 코드 

 

map을 실행하는 배열과 결과로 나오는 배열이 다른 객체라는 것이어서 console 창에 보면 numbers 객체 내부는 변하지 않고 새로 만들어진 proceed 의 값이 나오는 것을 의미합니다. 

 

따라서 결과 값은 ) 

numbers  여전히 동일한 [1,2,3,4,5 ] 
proceed 의 값은 [1,4,9, 16, 25 ]

-> 여기서 알 수 있는 점) 
array 의 map 의 기능을 이용하여 접근을 한다고 해도 array 내부의 실제 데이터는 변하지 않는다. 

 

[ 데이터 배열 접근 - concat/ filter  ] 

여기서 key 는 왜 필요할까?

key 는 element 에서 언제나 유일한 값으로 설정되기 때문이다. 따라서 이렇게 mapping 을 하며 각 요소들을 돌아가거나 또한 array 내부의 유일한 값으로 key 를 갖게 됩니다. 따로 key 를 해주지 않으면 index 값으로 설정되기도 합니다 .

두가지 방안 ( concat / filter ) 

 

1) 배열을 추가하는 것 - concat

배열을 추가할 때 "concat"을 씁니다. 이처럼 원래 배열을 건드리지 않고 새로운 배열을 return 해주는 값으로 새로운 array 를 생성해주는 함수입니다. 

 

var importArray = [1,2,3,4,5] 
const array = importArray.concat([6,7]) 

 

 

결과값 :

array 의 결과값은 1,2,3,4,5,6,7 이 모두 들어간 것을 볼 수 있다. 이런식으로 간단하게 cocat을 사용하여 배열을 추가하여 안에 있는 내부 값을 늘릴 수 있습니다. 

 

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

 

2) 배열 내부를 수정하는 것- filter

배열내부를 수정하는 함수는 filter 로 쓸 수 있습니다. 이 역시 원래 Array 의 내부를 건드리지 않고 새롭게 filtering 된 arrya 를 return 해주는 형태입니다 .

 

arr.filter(callback(element[, index[, array]])[, thisArg]) 

element 처리할 현재 요소.
index 처리할 현재 요소의 인덱스. (  선택 ) 
array filter를 호출한 배열. ( 선택) 
thisArg callback을 실행할 때 this로 사용하는 값. ( 선택 ) 

 

가장 많이 쓰였던 내용 중 하나로 검색을 하거나 안에 있는 수정된 값을 적용 시킬때 매우 유효합니다.

또한 필터링 할 때 많이 쓰입니다. 

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);

 

 

 

 

( 참고한 사이트 : www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d ) 

( 참고한 사이트 :  developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter ) 

( 참고한 내용 : 리액트를 다루는 기술/ 출판사 : 길벗)