[JavaScript] Truthy and Falsy

안녕하세요? 오늘은 자바스크립트의 귀엽고 깜찍한 Truthy와 Falsy에 대해 알아보도록 하겠습니다.

 

Truthy

쉽게 설명하자면, Truthy는 값(value)이 있는 대상을 말합니다. 아래의 코드로 예를 들어 보겠습니다.

// Truthy

let reneDescartes = 'I think, therefore I am.'; // 데카르트 : 나는 생각한다, 고로 존재한다

if (reneDescartes) {
	console.log('나도 생각한다, 점심 메뉴를.');
} else { 
	console.log('나는 배부르다, 고로 생각 안한다.');
}

// 출력 : '나도 생각한다, 점심 메뉴를.'

변수 reneDescartes 안에 'I think, therefore I am.'을 넣고 if, else문을 만들어서 출력을 해보면 '나도 생각한다, 점심 메뉴를.' 이 출력되는 것을 확인할 수 있습니다.

 

이유는 reneDescartes 안에 값(value)인 'I think, therefore I am.'가 있기 때문입니다. 이것을 바로 Truthy라고 합니다.

 

---

Falsy

그럼, else문인 '나는 배부르다, 고로 생각 안 한다.'를 출력을 하려면 reneDescartes 값이 거짓이 되어야겠지요? 그렇다면 없는 값을 넣어보도록 하겠습니다.

// Falsy

let reneDescartes = '';

if (reneDescartes) {
	console.log('나도 생각한다, 점심 메뉴를.');
} else { 
	console.log('나는 배부르다, 고로 생각 안한다.');
}

// 출력 : '나는 배부르다, 고로 생각 안한다.'

변수 reneDescartes 안에 ''으로 없는 값을 넣어 보았더니 컴퓨터가 거짓으로 판명하고 else문인 '나는 배부르다, 고로 생각 안 한다'를 출력하는 것을 확인할 수 있습니다.

 

이렇게 변수를 거짓(Falsy)으로 만드는 친구들이 있는데 밑에 표로 알아보죠!

의미	Falsy
0	0
비어 있는 문자열	"" 또는 ''
어떤 값이 의도적으로 비어있음	null
시스템에서 어떤 변수나 속성이 정의 되지 않음	undefined
숫자가 아님(Not a Number)	NaN

null이랑 defined는 할 말이 더 있지만 우리는 기초를 알아보고 있기 때문에 '아 그냥 쟤네는 거짓이구나' 하고 넘어가도록 하겠습니다.

---

Truthy and Falsy Assignment

컴퓨터가 Truthy와 Falsy를 판단하는 것을 이용해서 코드를 간결하게 만들어 줄 수 도 있는데요, 아래의 예제를 보도록 합시다. 

 

'username'으로 접속을 하면 각각의 고객님들의 'username'으로 인사를 하는 코드를 만들어 봤어요. 'username'이 없는 고객님들은 'defaultName'로 '고객'님으로 출력이 될 거예요.

let username = 'Dongi_Coding';
let defaultName = '고객';

if (username) {
	console.log(`반갑습니다! ${username}님`);
}
else if (defaultName) {
	console.log(`반갑습니다! ${defualtName}님`);
}

// 출력 : 반갑습니다! Dongi_Coding님

상당히 길죠? 지난번에 배운 논리 연산자(Logical Operators)와  Truthy and Falsy Assignment 이용해서 코드를 간략하게 줄여보겠습니다. 

let username = 'Dongi_Coding';
let defaultName = '고객';

if (username || defaultName) {
	console.log (`반갑습니다! ${username||defaultName}님`);
}

// 출력 : 반갑습니다! Dongi_Coding님

오호라 ||(or)로 코드가 상당히 간결해졌네요. 해석하기 전에 ||(or)이 뭐였는지 떠올려 봅시다. 음.....

주어진 두 값 중에 하나라도 참이면 참으로 만들어주는 논리 연산자였죠? 그렇다면 'username'도 참이고 (값이 존재하니까) 'defaultName'도 참인데 왜 '반갑습니다! Dongi_Coding님'만 출력이 되었을까요? 그것은 ||(or) 표현을 컴퓨터가 왼쪽에 먼저 나온 값부터 체크를 하기 때문인데요, 만약 'username'이 없는 값이거나 'defaultName'이 if문에서 먼저 사용이 된다면 상황은 반대가 됩니다. 아래의 코드를 보시죠!

 

1. 'username'이 거짓인 경우 

let username = '';  // 빈문자열 = 거짓 (고객이 username이 없는 경우가 되겠죠?)
let defaultName = '고객';

if (username || defaultName) {
	console.log (`반갑습니다! ${username||defaultName}님`);
}

// 출력 : 반갑습니다! 고객님

2. 'defaultName'을 먼저 사용한경우

let username = 'Dongi_Coding';  
let defaultName = '고객';

if (defaultName || username) { // defaultName을 먼저 사용한 경우
	console.log (`반갑습니다! ${defaultName||username}님`);
}

// 출력 : 반갑습니다! 고객님

차이가 보이시나요? 저 이거 처음에 엄청 이해가 안돼서 한 이틀 헤맨 거 같아요 ㅠㅠ 여러분은 한방에 이해하시길 바라요... 

 

오늘의 느낌

여러분 건강이 최고입니다. 항상 행복하세요 ~~~