배열을 필터링하는 것은 프로그래밍에서 매우 흔한 작업입니다. 자바스크립트에서는
Array.prototype.filter() 메소드를 사용해 이를 쉽게 할 수 있습니다. 이번 포스트에서는 특히 filter(Boolean)을 사용하여 배열에서 falsy 값들을 제거하는 방법에 대해 자세히 알아보겠습니다.기본 예제
기본적으로 다음과 같은 코드가 있을 때:
const arr = ['name', 'hansol', null, undefined, '', 0, 'test', '213', 213, -1]; const filteredArr = arr.filter(Boolean);
filteredArr는 [ 'name', 'hansol', 'test', '213', 213, -1 ] 이 됩니다. 즉, null, undefined, 빈 문자열 '', 그리고 0 같은 falsy 값들이 제거됩니다.동작 원리
Boolean 객체는 자바스크립트에서 주어진 값을 true 또는 false로 변환하는 역할을 합니다. 자바스크립트에서는 null, undefined, 0, 빈 문자열 '', NaN 등이 기본적으로 falsy 값입니다.filter(Boolean)는 배열의 각 요소를 Boolean 생성자 함수에 통과시켜, 그 결과가 true인 요소만 새로운 배열로 반환합니다.다양한 활용 예제
1. 중복된 값 제거하기
filter(Boolean)을 다른 배열 메소드와 결합하여 사용할 수도 있습니다. 예를 들어, Set과 함께 사용하여 배열의 중복된 값을 제거할 수 있습니다.const arr = [1, 2, 2, 3, 4, 3, 5]; const uniqueAndTruthy = [...new Set(arr)].filter(Boolean);
2. 객체 배열 필터링하기
객체 배열에서 특정 키의 값이 존재하는 객체만 추출할 수도 있습니다.
const people = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: null }, { name: 'Charlie', age: undefined }, { name: '', age: 30 } ]; const validPeople = people.filter(person => Boolean(person.name) && Boolean(person.age));
3. 문자열 배열 정제하기
문자열 배열에서 빈 문자열이나 공백만 있는 문자열을 제거할 수 있습니다.
const strings = ['hello', ' ', '', 'world', ' ']; const validStrings = strings.filter(str => Boolean(str.trim()));
결론
filter(Boolean)은 배열에서 falsy 값들을 쉽고 빠르게 제거할 수 있는 강력한 방법입니다. 물론 이 방법은 더 복잡한 필터링 로직이 필요한 경우에는 다른 방법을 고려해야 하겠지만, 간단한 상황에서는 이 방법이 상당히 유용합니다.다양한 활용 방법과 결합하면
filter(Boolean)은 코드를 훨씬 깔끔하고 이해하기 쉽게 만들어 줄 수 있습니다. 그러므로 이 메소드는 자바스크립트 개발자라면 반드시 알아두어야 할 필수적인 기술 중 하나입니다.읽어주셔서 감사합니다. 이 글이 도움이 되었다면 공유해 주세요!