HTML, CSS, JavaScript

[JavaScript] filter() 함수 간단한 사용 방법

15호의 개발자 2021. 8. 22. 15:22
반응형

[JavaScript] filter() 함수 간단한 사용 방법

 

filter() 함수 사용 방법에 대해 간단히 알아보자.

 

우선, filter()은 true와 false에 반응한다.

true를 받으면 filter처리를 하고, false를 받으면 filter처리를 하지 않는다.

 

 

먼저 예시부터 봐보자.

1.

function alwaysTrue() {return true};
[1, 2, 3, 4].filter(alwaysTrue);    //결과값: [1, 2, 3, 4]

항상 true가 반환되는 함수를 만들고, 이를 filter에 집어 넣으면

filter처리한 array는 모든 내용을 가지고 있다.

 

 

이번엔 false로 해보자.

function alwaysFalse() {return false};
[1, 2, 3, 4].filter(alwaysFalse);    //결과값: []

항상 false가 반환되는 함수를 filter 안에 넣으면

array는 모든 내용을 잃게 된다.

(실제로는 array의 내용을 잃는 게 아니라, 빈 array를 새로 하나 만드는 것이다.)

 

 

즉, filter함수는 true면 요소를 유지하고, false이면 요소를 잃는다.

 

2.

이번엔 filter를 통해 특정 element만 없애는 걸 해보자.

function myFilter(num) {return num !== 2};
[1, 2, 3, 4].filter(myFilter);    //결과값: [1, 3, 4]

myFilter는 넘겨받은 매개변수(num)가 2이면 false를, 2가 아니면 true를 반환한다.

이를 filter() 함수로 처리하면,

숫자가 2일 때는 해당 요소를 잃게 되고, 숫자가 2가 아닌 경우에는 해당 요소를 유지하게 된다.

 

 

따라서, 없애고 싶은 요소가 있으면 그 요소값을 넣었을 때 true로 반환하는 조건문을 만든 후 filter에 넣어주면 된다.

 

 

*편의상 filter 함수를 통하면 array의 값을 잃게 된다는 표현을 썼다.
하지만 실제로는 새로운 array를 하나 만드는 것이다.

filter 함수를 거치면 true에 해당하는 요소들은 포함하고, false에 해당하는 요소들은 제외한 새로운 array를 만들게 된다.

 

반응형