🚀 개요

프로젝트 작업 중에 이런 코드를 보게 됐다

const somethingComponent = (data: somethingDatas[]): somethingArray[] => {
  return data.map((item, index) => {
    // do something
  }).filter(Boolean) as somethingArray[]
}

💡 위 ts 기반 예시 코드의 컴포넌트 명, 타입명 등은 전부 더미로 대체한 것 ( ͡~ ͜ʖ ͡°)

처음엔 .filter(Boolean) 이 부분이 뭔지 잘 몰라서 찾아봤는데, 생각보다 많이 쓰이는 패턴이더라.
그래서 이번 글에서는 이걸 정리해보려고 함

---

🚀 filter(Boolean)이란?

JavaScript의 배열에서 null, undefined, false, 0, NaN, ''(빈 문자열) 등 Falsy 값을 제거해야 할 때가 있다.
이때 filter(Boolean)로 간단하게 해결이 가능하다

• Array.prototype.filter()는 콜백 함수의 반환값이 true인 요소만 걸러내는 메서드
• Boolean은 자바스크립트의 내장 함수로, 전달받은 값을 Boolean으로 변환
• 따라서 filter(Boolean)은 배열에서 Falsy 값을 제거하는 역할을 함!

const arr = [0, 1, false, 2, '', 3, null, undefined];
const filtered = arr.filter(Boolean); // [1, 2, 3]

💡 Falsy 값이란?
JavaScript에서 false처럼 간주되는 값들
→ false, 0, -0, '' (빈 문자열), null, undefined, NaN
(이러한 값들은 Boolean(value)로 변환 시 false가 됨)

---

📌 사용 예시

1️⃣ Falsy 값 제거

const rawList = ['apple', '', null, 'banana', undefined, 'cherry'];
const cleanList = rawList.filter(Boolean);

console.log(cleanList); 
// ['apple', 'banana', 'cherry']

2️⃣ API 응답 데이터 정제

const data = [
  { name: 'Alice' },
  null,
  { name: 'Bob' },
  undefined,
  false,
  { name: 'Charlie' }
];

const validUsers = data.filter(Boolean);

console.log(validUsers);
// [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }]

---

🚀 filter(Boolean) vs 명시적 필터링 vs reduce() 비교

filter(boolean) 함수를 쓰지 않고 명시적으로 필터링을 하게 된다면 어떻게 될까?

✅ filter(Boolean)

const result = arr.map(...).filter(Boolean)

• Falsy 값 (false, 0, "", null, undefined, NaN)을 모두 제거
• 짧고 직관적
• 단, 0이나 false를 유효 값으로 다뤄야 한다면 이 방식은 주의해야 함
  
  

✅ filter(item => item !== undefined && item !== null)

const result = arr.map(...).filter(item => item !== undefined && item !== null)

• undefined, null만 제거
• 보다 명시적이고 안전함
• 0, false, ""는 남겨둬야 할 경우 적합
  
  

✅ reduce()

const result = arr.reduce((acc, item) => {
	const transformed = transform(item)
	if (transformed) acc.push(transformed)
	return acc
}, [])

• map + filter를 하나로 합친 형태
• 유연한 조건 처리, 성능상 유리할 수도 있음
• 코드가 조금 더 길어짐
  
  

비교 정리

방법	장점	단점	적합 상황
filter(Boolean)	간결하고 빠름	false, 0, ""도 제거됨	불필요한 falsy 값 전부 제거할 때
filter(x !== null && ...)	더 명시적이고 안전함	코드가 길어짐	0, false 등을 유지할 때
reduce()	유연한 로직 구현 가능	직관성이 떨어질 수 있음	조건이 복잡한 경우

---

🚀 마치며

filter(Boolean)은 배열에서 모든 Falsy 값을 제거할 때 간편하고 직관적이다
하지만 제거되는 값이 많아 정밀한 조건이 필요한 경우는 사용을 자제하고 명시적으로 필터링하는 방법이 사용되어야한다
짧고 강력한 코드지만, 언제나 의도를 분명히 하며 사용하는 습관을 들이는걸로!