[JavaScript] 배열 메소드 filter와 find

filter 메소드

콜백함수가 리턴하는 조건식이 true 인 요소만 찾아서 배열로 리턴.

const devices = [
  { name: 'iPad', brand: 'Apple'},
  { name: 'iPhone', brand: 'Apple'},
  { name: 'GalaxyWatch', brand: 'Samsung'},
  { name: 'Gram', brand: 'LG'},
  { name: 'MacBookAir', brand: 'Apple'},
];

const apples = devices.filter(v => v.brand == "Apple" ) // 배열의 요소 중 brand 값이 'Apple'

console.log(apples);

이처럼 Apple 값을 가진 요소만 배열의 형태로 출력된다.

 

항상 리턴값이 배열이기 때문에,

const devices = [
  { name: 'iPad', brand: 'Apple'},
  { name: 'iPhone', brand: 'Apple'},
  { name: 'GalaxyWatch', brand: 'Samsung'},
  { name: 'Gram', brand: 'LG'},
  { name: 'MacBookAir', brand: 'Apple'},
];

const LG = devices.filter(v => v.brand == "LG" )

console.log(LG);

이처럼 하나의 값만 존재해도

하나의 값을 가진 배열의 형태로 나타난다.

이를 해결하기 위해 spread 구문을 사용하여, 배열을 벗길 수가 있다.

 

이처럼 여러 값들 중에서 유일한 하나의 값을 찾고싶을 때가 있는데, 이럴 때 find 메소드를 사용한다.

 

find 메소드

배열이 아닌 값의 형태로 나타난다.

 

---

filter 와 find 의 차이점

 

1. filter 의 리턴값은 배열, find 는 값

 

2. 같은 배열에서 메소드를 호출하더라도, 반복하는 횟수에 차이가 있을 수 있다.

find : 조건을 만족하는 하나의 값만 찾기때문에, 그 값을 만족하는 순간 반복이 종료됨. 인덱스의 위치가 앞에있는 요소가 리턴. 존재하지 않는 요소를 찾거나, 가장 마지막 인덱스에 있는 요소를 찾게되면 filter 메소드와 반복횟수가 똑같아짐. 존재하지 않는 값을 찾으면 undefind 값이 출력됨.

filter : 끝까지 반복하면서 조건을 만족하는 값을 배열로 리턴