티스토리 뷰
반복해야 한다면 map() , 한 가지 요소를 찾아야 한다면 find()
조건을 만족하는 모든 요소를 찾는다면 filter()를 사용하면 된다.
🤔 map이란?
map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
- 프로토타입
arr.map(callback(currentValue[ ,index [, array]]) [,thisArg])
- callback : 새로운 배열 요소를 생성하는 함수 안에 세 가지 인수를 가진다.
- currentValue : 처리할 현재 요소
- index : 처리할 현재 요소의 인덱스
- array : map()을 호출한 배열
- thisArg : callback을 실행할 때 this로 사용되는 값
굉장히 어렵게 설명되어있다... 이해하기가 어렵다. 실제로 사용해보면서 이해해보자.
map 활용
- 일반적인 함수 사용 경우
let arrA = [1, 2, 3, 4, 5];
let arrB = arrA.map(function (item) {
return item * 2;
});
/* 아래와 같이도 작성할 수 있다.
function add(item) {
return item * 2;
}
let arrB = arrA.map(add);
*/
console.log(arrA); // 1, 2, 3, 4, 5
console.log(arrB); //2, 4, 6, 8, 10
- ES6 문법 화살표 함수 사용 시 훨씬 직관적이고 간편하게 쓸 수 있다.
let arrA = [1, 2, 3, 4, 5];
let arrB.map((item)=>{
return item*2;
});
console.log(arrA); // 1, 2, 3, 4, 5
console.log(arrB); //2, 4, 6, 8, 10
index 활용
- callback 인자에 idx를 추가해보자.
let arrA = [1, 2, 3, 4, 5];
let arrB = arrA.map(function (item, idx) {
console.log(idx); //0 1 2 3 4
return item * 2;
});
console.log(arrA); // 1, 2, 3, 4, 5
console.log(arrB); //2, 4, 6, 8, 10
- 화살표 함수를 이용해 더욱 간단하게 표현할 수 있다.
let arrB = arrA.map((item, idx) =>{
console.log(idx); //0 1 2 3 4
return item * 2;
});
그림과 같이 idx가 0부터 출력이 되는 것을 확인할 수 있다. 이는 굉장히 유용하다. 아래 React 코드에서처럼 반복되는 컴포넌트에서 Data Array의 index값을 전달해야 할 경우 활용된다.
{shoes.map((item, i) => {
return <ShoesItem shoes={Data[i]} key={i}></ShoesItem>;
})}
find와 filter에서도 map에서와 마찬가지로 index를 인자로 추가해서 사용할 수 있다!
화살표 함수를 기준으로 작성
🤔 find란?
find 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.
//1번째 경우
let arrA = [1, 2, 3, 4, 5];
const found = arrA.find((element) => element > 3);
console.log(found); // 4
//2번째 경우
const inventory = [
{name : 'apples', quantity : 2},
{name : 'bananas', quantity : 4},
{name : 'cherries', quantity : 9}
];
const result = inventory.find(fruit => fruit.name === 'cherries');
console.log(result); // {name : 'cherries', quantity : 9}
🤔 filter란?
filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
//1번째 경우
let arrA = [1, 2, 3, 4, 5];
const filter = arrA.filter((element) => element > 3);
console.log(filter); // 4, 5
//filter함수로 차집합 구하기
const arrA = ['1', '2', '3', '4', '5'];
const arrB = ['4', '5'];
const difference = arrA.filter( x => !arrB.includes(x));
//arrB가 4일경우 포함하므로 !true가 반환, false가 반환
console.log(difference); //["1", "2", "3"]
결론
React에서 filter, map, find를 경우에 따라서 굉장히 유용하게 사용 가능하다. 하지만 사용 시에 undefined
가 뜨거나 []
처럼 빈 배열만을 가져온다면, '==='와 '==' 올바르게 썼는지 확인해보길 바란다.
혹시 틀리거나 잘못된 내용은 댓글로 알려주시면 감사하겠습니다. :)
📕 Reference:
https://aljjabaegi.tistory.com/315
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
728x90
반응형
'TIL(Today I Learn)' 카테고리의 다른 글
HTML, CSS 기본기 다지기(1) (0) | 2021.09.27 |
---|---|
왜 CSR(Client Side Rendering)에서 SEO가 단점일까? (0) | 2021.09.08 |
[JS] 자바스크립트 '==' 와 '==='의 차이 (0) | 2021.08.05 |
[CS] 기초 지식들 (0) | 2021.06.30 |
[c언어] 동적할당이 필요한 이유 (0) | 2021.03.29 |
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- 자바스크립트
- C언어 문제
- 42seoul
- JavaScript
- C언어문제
- 42서울 합격
- c언어알고리즘
- 알고리즘
- 프로그래머스 자바
- 42서울 라피신
- HEXO
- 마크다운 이미지 업로드
- 프로그래머스 코딩테스트
- c언어 함수
- css
- React
- C언어
- html
- windows 10 ubuntu
- 백준
- git vi
- 42서울
- vscode commit vi
- 42서울 합격 후기
- 프로그래머스 카카오
- JS
- 프로그래머스 코테
- vscode
- Git
- flexbox
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함