[CodeCamp-Week 2] map, filter, every...

·2022년 7월 14일
0
post-custom-banner

아직 for문도 완벽히 마스터 못했는데 실무용 반복문이 또 있다뇨...
실무에서는 for문 보다 map과 filter를 많이 사용한다고 한다
멀지 않은 미래(?)에 실무에 있을 사람이니 실무에서 활용하는 map, filter, every에 대해 알아보고 some, find, reduce에 대해 간략히 살펴보자!
여기서 소개하는 method들은 모두 배열일 때만 사용 가능!

1. map

1) map이란?

map은 배열의 원소를 일괄적으로 바꿀 때 활용할 수 있다.

2) map 활용하기

(1) 단순 배열

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

classmate.map((item) => (item+"어린이"))

item : 배열 원소들이 들어가는 매개변수로, 이름은 item이 아닌 aaa, bbb 등 자유롭게 지정 가능하다.

결과는 ["철수어린이", "영희어린이", "훈이어린이"]가 된다.

(2) 객체가 원소인 배열

const school = [
	{name: 다람쥐},
    {nmae: 코끼리},
    {name: 강아지}
  ]
  
school.map((link) => ({name: school.name + "초등학교", grade: "1학년"})

결과는
[ {name: "다람쥐초등학교", grade: "1학년"},
{name: "코끼리초등학교", grade: "1학년"},
{name: "강아지초등학교", grade: "1학년"} ] 이 된다.

(3) 컴포넌트 안에서 사용하기

export default const MapComponent = () => {
	const school = ["다람쥐", "코끼리", "강아지"]
    
    return (
    	{school.map ((link) => <div>{link}초등학교</div>)}
     )
   }

2. filter

1) filter 란?

filter란 원하는 조건에 따라 배열의 원소를 필터링해주는 method다.

2) filter 활용하기

const num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

num.filter( (number) => (number<=5) )

결과는 [0, 1, 2, 3, 4, 5]가 된다.

3. every

1) every 란?

every는 배열의 모든 원소가 원하는 조건에 맞는지 확인해주는 method다.
단, map과 filter와 달리 결과값이 true 또는 false가 나온다.

2) every 활용하기

const num = [0, 1, 2, 3]

num.every( (item) => (item<4) )
num.every( (item) => (item>4) )

첫번째 every 결과값은 true, 두번째 every 결과값은 false가 나온다.

4. some, find, reduce

1) some

some은 every와 달리 배열의 일부 원소가 원하는 조건에 맞는지 확인해주는 method다.
every와 마찬가지로 일부 조건이 맞다면 결과값으로 true가, 전혀 조건에 부합하지 않는다면 false가 나온다.

const num = [0, 1, 2, 3, 4, 5]

num.some ( (item) => (item === 0) )
num.some ( (item) => (item > 6) )

첫번재 some 결과값은 true, 두번째 some 결과값은 false가 나온다.

2) find

find는 원하는 값이 배열에 있다면 해당 값이 있는 원소를, 없다면 undefined를 결과값으로 보여주는 method다.

const num = [0, 1, 3, 4, 5]

num.find ( (item) => (item === 3) )
num.find ( (item) => (item === 2) )

첫번째 find 결과값은 3, 두번째 find 결과값은 undefined가 나온다.

3) reduce

reduce는 배열의 각 요소에 주어진 함수를 실행한 결과값을 보여주는 method다.

array.reduce( (누적값, 현재값, 누적값의 초기값) => 누적값 + 현재값, 누적값의 초기값 )
(화살표 함수 뒤 +식은 원하는 식을 넣으면 된다.)

const arr = [1, 2, 3, 4, 5]

arr.reduce( (a, b) => (a+b), 0 )

결과값은 1부터 5까지 다 더한 15가 된다.

profile
개발을 개발새발 열심히➰🐶
post-custom-banner

0개의 댓글