JavaScript - map 함수란 (feat. filter)

 

map () 이란

- 반복문을 돌며 배열 안의 요소들을 1대 1로 짝지어 매핑해준다.

- 결과로 나오는 새 배열과 !== 기존배열 은 다르다. (기존 배열을 수정하지 않고 새로운 배열을 만들기 때문)

- 단, [ 배열 안에 { 객체 } 가 들어있으면, ] 객체는 공유된다.

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

---

 

map() 으로 짝수만 출력하기

- 새 배열의 아이템 갯수는 === 기존배열 아이템 갯수와 같다. 그래서 map으로 거른 부분을 제외한 나머지는 undefined 가 된다.

map() 으로 걸러서 짝수만 arr2 에 담는다.

 

출력화면

arr 은 총 6개라서 arr2 에서도 짝수 제외하고 나머지는 빈칸으로 남아있다. (얘도 총 6 인덱스)

 

** tip. 만약 빈칸으로 남아있는게 싫다면 filter 함수로 필터링 해주면 된다. 

 

filter() 으로 짝수만 출력하기

같은 내용이지만 filter을 사용해보면 ? 

 

출력화면

깔끔하게 걸러진 부분만 배열이 된다.

 

 

** 나의생각

map 과 filter 를 결합하여 사용하면 cool 할것같다! 🤟 filter 로 데이터를 한 번 깔끔하게 걸러주고 map 으로 데이터를 변형하는 것이다.