정리를 너무 잘해놓으셔서 나중에 생각 안날때 찾아보려고 올려둔다.
https://velog.io/@haleyjun/JavaScript-filter-%EC%82%AC%EC%9A%A9%EB%B2%95
여기서 가져온 글이에요
여러 가지 데이터 중에 원하는 데이터만을 뽑아내고 싶다면? 🤔
이처럼 어떤 데이터 집합에서 특정 조건을 만족하는 값만 반환받기를 원할 때 filter 메서드를 사용한다.
✍️ filter 란?
자바스크립트에서 filter 는 배열에 사용하며, 주어진 함수를 만족하는 모든 요소를 모아 새 배열로 반환한다.
아래 코드를 통해 filter 가 어떻게 사용되는지 간단히 알아보자.
let array = [3,5,11,0,9,'string'];
let result = array.filter((value) => value < 10)
console.log(result);
//output : array [3, 5, 0, 9]
위의 코드를 보면, array라는 배열이 있다. 이 배열에서 10미만의 값만 추출하려고 한다.
이를 위해 우선 결과값들을 담아둘 result 변수를 만들었다. 그 후 기존 배열에 .filter()를 붙이고 괄호 안에는 필터조건이 되는 함수를 넣어 주었다.
🔨 filter 사용법
filter 를 쓸 때, 조건식을 filter()의 괄호 안에 쓰는 방법이 있고 filter외부에 사용하는 방법이 있다.
함수를 filter 내에 주기
위 사진의 #1 solution을 보면, filter 메서드의 조건식을 괄호 안에 바로 작성해 주었다.
이 방법은 조건식이 간단할 경우 유용하며, 코드 라인을 줄일 수 있고 한 눈에 보기 편한 장점이 있다.
함수를 filter 외부에 사용
위 사진의 #2 solution 을 보면, filter 의 조건을 외부함수로 선언한 후 callback하고 있다.
이 방법은 filter 조건식이 복잡해질 수록 코드 관리에 유용할 것 같다.
🧩 Quiz
filter를 이용해 다음 배열에서 species가 'mammalia'인 새로운 배열을 만들고 콘솔에 출력해 주세요.
let animals = [ { species: 'mammalia', name: "cat" }, { species: 'reptiles', name: "lizard" }, { species: 'amphibia', name: "flog" }, { species: 'mammalia', name: "dog" }, { species: 'amphibia', name: "salamander" } ];
위 문제를 풀기 위해서 우선 새로운 배열을 저장할 변수 result를 선언한다.
👉 let result
그 후 animals 배열에 filter 메서드를 사용한다.
👉 let result = animals.filter()
이제 filter에 조건함수를 줄 것이다. 근데 animals 배열의 요소들은 {} 안에 담겨있다. 이런 중괄호 안의 요소를 property라고 하는데, .을 찍어서 접근할 수 있다.
또한 species가 'mammalia'와 일치하는지 검사하기 위해 동등연산자 == 를 사용할 것이다. 그럼 조건식을 아래와 같이 작성할 수 있다.
👉 let result = animals.filter((value) => value.species == 'mammalia')
이를 코드로 작성하면 아래와 같다.
let animals = [
{ species: 'mammalia', name: "cat" },
{ species: 'reptiles', name: "lizard" },
{ species: 'amphibia', name: "flog" },
{ species: 'mammalia', name: "dog" },
{ species: 'amphibia', name: "salamander" }
];
let result = animals.filter((value) => value.species == 'mammalia')
console.log(result);
결과가 아래와 같이 나오면 성공이다.
[
{ species: "mammalia", name: "cat" },
{ species: "mammalia", name: "dog" }
]
출처
https://velog.io/@haleyjun/JavaScript-filter-%EC%82%AC%EC%9A%A9%EB%B2%95