본문 바로가기

새싹 프론트엔드

[새싹 프론트엔트] 22.12.04

리액트를 잘 쓰려면 자바스크립트를 잘 이해해야 하는데
자바스크립트를 아직 잘못하니까 리액트도 덤으로 못하게 되었다.
노력하면 언젠간 잘 할 수 있게 될 거라고 믿는다.

 

오늘은 자바스크립트의 문법 중 하나인 map 과 filter 에 대해 알아보자 !

 


 

 

 

예를 들어서 'numArr' 이란 이름의 배열이 있다 .

그리고 'num_1' 을 map 함수를 이용하여 새롭게 만들어 볼거다.

 

어쩌고.map( ( dk ) => { return dk  } )  이렇게 화살표 함수를 이용해여 사용하면 된다. 

저기 map 안에 있는 ( num )에 있는 num 은 뭐로 하든 상관없다. 

사과든 바나나든 자기가 하기싶은거로 이름을 정해주면 된다.

저 num 은 이제 numArr 에 있던 배열값들을 한바퀴 쓱 돈다.

10 에서 시작해서 20, 30, 40, 50 까지 그리고 그 값이 num 으로 들어가고

return 뒤에 num에 조건을 넣을 수 있다.

 

지금 내가 위에 해놓은 이미지를 보면 return 뒤에 num * 0.5 를 했는데

num 이 numArr 과 같은 [10, 20, 30, 40, 50] 이니까

 

const num_1 의 값은 [5, 10, 15, 20, 25] 가 나오게 된다.

 

 

 

 


 

 

map 과 비슷한 filter 함수이다. 

return 뒤에 저렇게 조건을 걸어주면 그 값이 ture 값이 나오는 것만 엄선해서 뽑아준다.

 

 

그럼 num > 20 에 대해서 true 값이 나오는 30, 40, 50 만 배열로 만들어져서 나온다

 

만약 filter 대신 map 을 넣었다면

 

[ false, false, true, true, true] 이렇게 나온다

 


 

이렇게 map 과 filter 에 대해 알아보았다 !

한국도 노력하니까 월드컵 16강 진출에 성공했다

나도 노력하면 it 중소기업.. 취업이 가능할지도?

 


새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅

 

 

 

 

 

 

 

 

 

'새싹 프론트엔드' 카테고리의 다른 글

[새싹 프론트엔드] 22.12.18  (2) 2022.12.19
[새싹 프론트엔드] 22.12.05  (1) 2022.12.05
[새싹 프론트엔드] 22.11.26  (1) 2022.11.28
[새싹 프론트엔드] 22.11.18  (0) 2022.11.21
[새싹 프론트엔드] 22.11.11  (0) 2022.11.21