[TIL] 2주차 - 2. 실무 전용 반복문 - map/filter

1. 배열 함수 Map()

1-1. 문자열 배열

const classmates = ["철수","영희","훈이"]

 

classmates의 각 요소마다 뒤에 "어린이"를 붙이고 싶다.

배열 함수 map()을 사용하면 classmaates의 모든 요소

하나하나에 동일한 로직을 실행할 수 있다.

 

classmates.map((el) => (el+"어린이")) 

 

배열의 요소들이 하나씩 뽑혀와서 수정된 뒤 다시 원래자리로 돌아간다.

 

기존 배열 classmates에서 map()함수를 사용해

순서대로 하나씩 요소에 접근해 가져온다.

가져온 값을 el에 넣은 후 (el + "어린이")를 통해

원하던 대로 "누구누구어린이" 가 되게 수정해준뒤

값을 반환하여 다시 원래 자리로 요소를 넣어준다.

 

 

원하던 대로 요소마다 뒤에 "어린이"가 잘 붙었다.

 

 

이 때, 소괄호 생략 가능하다.

 

 

 

---

1-2. 객체 배열

const classmates2 = [ {name: "철수"}, {name: "훈이"}, {name: "훈이"} ]

 

객체도 마찬가지로 map() 배열함수를 이용하여

각 요소 별 값 수정이 가능하다.

 

classmates2.map((el)=>({name: el.name + "어린이"}))

 

({name: el.name + "어린이"})로 새로운 객체를 만들어서
다시 원래 자리에 넣어준다.

 

 

name 속성의 값마다 뒤에 '어린이'가 붙었다.

.

.

 

참고로,

객체 배열에서는 소괄호 생략이 불가능하다!

 

---

1-3. 화살표 => 뒤 ()안에 꼭 el 안써도 된다.

classmates2.map((el)=>(0))

화살표 => 뒤에 무조건 el이 와야 하는 것은 하니다.

저렇게 (0) 을 할당하면

classmates2 배열의 모든 요소는 0 이 된다.

 

 

---

 

이번에는 classmates2 배열의 각 인덱스마다

school 속성 추가하고 싶다. 

 

1-4. 객체 배열 속성 추가

classmates2.map((el)=>({name: el.name, school: "다람쥐초등학교" }))

 

이때 화살표 => 뒤의 () 안의 값이 재할당되기 때문에

기존의 name 속성들을 날아가게 하고 싶지 않다면

name: el.name 을 꼭 써준다.

 

 

마찬가지로 요소들이 순서대로 뽑혀와서 school 속성이 추가된뒤 

다시 원래자리로 돌아가서 원하던 대로 요소 값들이 수정되었다.

 

 

---

2. 배열 함수 filter

직접 정의한 어떤 조건을 바탕으로

필터링된 모든 요소를 모아 새로운 배열로 반환하는 함수.

 

필터링 되고 난 이후는

원래 요소 갯수 보다 작거나 같은 수의 데이터가 나온다.

 

filter함수 예시1)

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

문자열의 길이가 6보다 큰 단어들이 출력된다.

 

filter함수 예시2)

배열.filter(( el )=>( el >= 11 ))

11보다 큰 값들만 나온다.

 

filter함수 예시3)

classmates.filter((el)=>(el.age>=11))

age 속성이 11 이상인 요소들만 가져올 뽑아올 수 있다.

 

 

---

 

3. 필터 & 맵 같이 사용

필터 먼저하고 맵 사용
필터를 통해 break continue를 대체할 수 있다.

-> 필터와 맵을 통해 추후에 for문을 사용할 일이 적어진다.

 

 

---

Reference

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN