[javascript] 자바스크립트 filter(Boolean)

 

안녕하세요😊!

 

자바스크립트 코테 문제를 풀다가 filter 함수에 대해서 정리해보고 싶어서 작성합니다!

 

 

[edabit] 자바스크립트 코테 연습 - 2 (feat.filter함수)

 

 

 

 

filter ()

1. 콜백함수에 지정된 조건에 맞는 요소를 새롭게 반환하여준다. (즉, 테스트에 통과된 모든 요소들을 모아서 새로운 배열로 반환해줌) 

2. 중복값을 제거하지 않기 때문에 중복된 값이 등장할 수 있다.

 

 

 

그런데 filter(Boolean)을 사용하면 배열을 좀 더 안전한 상태로 걸러낼 수 있다는 것!!!

 

 

 

즉, undifined, false, 0, -0, "", null , NaN 을 제거 한 값을 반환하여 준다는 말.....!

 

 

 

 

 

 

 

let arr = [true, false, false, true, false];
const newArr = arr.filter(Boolean);    
console.log(newArr);

 

 

 

우선 아래 콘솔창에서와 같이 true, false로 배열에서 걸러지는 모습을 확인했습니다.

 

 

 

 

ture 두개를 포함한 새로운 배열로 반환해준 모습

 

 

 

 

 

그러면 이제 위에서 언급했던 그 친구들을 가지고 테스트를 해봐야겠져

 

 

 

 

let arr = [3, false, "", true, 0, null, '기분좋음', -3, -0, undefined, {name: "개구리"}];
const newArr = arr.filter(Boolean);    
console.log(newArr);

 

 

 

아래와 같이 newArr에 true 값들로 걸러주는 모습을 확인 할 수 있습니다!

 

 

 

 

 

 

그러면 이렇게 Boolean으로 일차적으로 걸러주는 것이 왜 좋을까에 대한 답변은

 

 

 

undefined나 null 값이 의도치 않게 배열에 들어가있을 수 있다는 생각을 해본다면, for문을 돌려서 걸러주는 작업을 번거롭게 해주거나 코드가 길어져서 복잡해질 수 있습니다.

 

 

 

그렇기 때문에 filter(Boolean)으로 일차적으로 걸러준다면 훨씬 쉽게 배열의 상태를 먼저 관리할 수 있게 되는 것이죠!

 

 

 

 

 

 

 

 

잘 활용한다면 안전하게 배열관리하고 여기저기 재사용하기에 편리하겠네요ㅎㅎ 

 

 

 

 

참조문서 
https://michaeluloth.com/filter-boolean