리액트 강의를 듣다가 JavaScript의 Truthy와 Falsy에 대한 내용이 나왔습니다. if (!null) {} 같은 코드는 자주 사용했지만, null이 false로 평가되는 이유는 몰랐습니다. Falsy라는 개념으로 정의되어 있다는 걸 알게 되어 글로 정리해보려 합니다.

정의: Truthy와 Falsy

Boolean context

true 또는 false 값이 필요한 상황을 말합니다. JavaScript에서는 조건문(if, else)이나 반복문(for, while) 등에서 Boolean context가 만들어집니다.

// if 조건문
if(조건) {}

// for 반복문
for(초기값; 조건; 증감) {}

JavaScript는 Boolean context에서 타입 변환을 통해 어떤 값이든 Boolean 값으로 강제 변환합니다.

Falsy

Boolean context에서 false로 평가되는 값

예시 값

• false
• 0
• -0
• 0n
• “”
• null
• undefined
• NaN

Truthy

Boolean context에서 true로 평가되는 값

예시 값

falsy 값을 제외한 모든 값들

• true
• {} (빈 객체)
• [] (빈 배열)
• “0” (문자열 “0”)
• “false” (문자열 “false”)
• Infinity
• -Infinity
• …

실전 활용

Falsy 활용 예제

null/undefined 체크

function displayName(person) {
	if(!person) {
		console.log("존재하지 않는 유저입니다.");
		return;
	}
	
	console.log(`user name: ${person.name}`);
}

const person = { name: "Lu" };
displayName(person);

로딩 상태 처리

function PostList() {
	const { posts, isLoading } = usePostList();
	
	if(isLoading) return <Loading />;
	if(!posts) return <div>데이터가 없습니다.</div>;
	
	return(
		<ul>
			{posts.map(post => <li key={post.id}>{post.title}</li>)}
		</ul>
	);
}

Truthy 활용 예제

배열, 객체 존재 확인

function processItems(items) {
	if(items && items.length) {
		console.log(`${items.length}개의 아이템 처리 중...`);
		items.forEach(item => console.log(item));
		return;
	}
	
	console.log("처리할 아이템이 없습니다.");
}

조건부 렌더링

function UserProfile({ user }) {
	return (
		<div>
			{user && <h1>{user.name}</h1>}
			{user?.email && <p>Email: {user.email}</p>}
		</div>
	);
}

참고 자료

• Falsy | MDN Docs
• Truthy | MDN Docs