[JS] 자바스크립트 filter(), find(), map() 함수 사용법

 

반복해야 한다면 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://velog.io/@yoju/JavaScript-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%86%8C%EB%93%9C-map-filter-find-reduce

https://aljjabaegi.tistory.com/315

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