Array.filter()

뮤·2022년 3월 19일

메소드 공부

목록 보기

13/22

주어진 배열에서 짝수인 요소만 걸러
새로운 배열에 담도록 solution 함수를 완성해주세요.

function solution(element, index, array) {
  return element % 2 === 0;
}
const arr = [1, 2, 3, 4, 5, 6];
const result = arr.filter(solution);
console.log(result);

저번에 한번 filter에 다뤘던 적이 있어서, 이번에는 조금 더 깊게 들어가보려고 한다.

일단 위에 함수로 만들어놓은 코드가 살짝 이해가 안가서 원형으로 아래 적어보겠다

const arr = [1,2,3,4,5,6];
const result = arr.filter(num => num % 2 === 0);
console.log(result);

아무튼 둘 다 짝수인 요소만 빼주는 역할을 한다.
대신 위에꺼는 함수니까 값만 넣어주면 계속 활용할 수 있다.

그럼 filter()는 무슨 역할을 하는 메소드일까?

filter()는 말 그대로, 조건이 true일 경우 "새로운 배열"을 만들어서 거기에 값을 담아준다.

사용법은 이렇다.

arr.filter(callback(element[, index[, array]])[, thisArg])

여기에서 기본 값은 element 한개만 두고 있기에
arr.filter(ele => ele % 2 === 0); 이런식으로의 사용도 가능하다.

하지만 index, array등 인자를 두개 이상을 둘 경우에는 꼭
arr.filter((ele,dex) => ele % 2 === 0); 이런식으로 분리를 해줘야하며

이것 또한 화살표 함수의 모양을 하고 있기에
arr.filter(num => {num % 2 === 0}); 이렇게 써주는게 좋다고는 한다.
으음 글쎄요 잘 모르겠습니다 뭐 회사를 들어가서 회사의 코드가 저런식이라면 규칙은 지켜줘야할텐데, 그거 그냥 eslint에 설정값 넣어두면 되는거 아닌가? 너무 양아치인가

응용을 해보자

툭하면 나오는 알고리즘 문제 중 한가지는 바로 >중복 제거<다.
중복 제거는 여러가지 방법으로 할 수 있다고 나오는데, 거름망(필터)가 있으니까 이것으로 한번 풀어보자.

const num = [1,2,3,1,2,3];
const unique = num.filter((element, index) => 
{return num.indexOf(element) === index;});
console.log(unique)
console.log(num.indexOf(1))

일단 이것을 이해하기 위해서는 indexOf()를 알고 있어야 하는데
포스트를 적어놨으니 > 이거 꾹 < 왼쪽의 링크를 누르면 넘어간다

위의 코드를 보면