[Javascript] Truthy & Falsy / 단락회로평가 (Short Circuit Evaluation)

Truthy와 Falsy

Javascript의 조건식에서는 Boolean 값이 아니어도 True 또는 False로 인식되는 값들이 있다.

 

Truthy : 참 같은 값

• 빈 배열 [ ]
• 빈 객체 { }
• 0이 아닌 Number ( 42, -42, Bigint, float...)
• Infinity
• 비어 있지 않은 String ("0", "false"...)

 

Falsy : 거짓 같은 값

• null
• undefined
• NaN
• 0 , -0
• 비어 있는 String ("")

 

---

Boolean 값이 아니어도 true, false로 인식되는 Truthy, Falsy 한 값들을 사용해 논리연산자에서 단락회로평가가 발생하는 연산에 대해 알아보자.

 

단락회로평가(Short Circuit Evaluation)란?

💡

논리연산자 사용 시 피연산자 둘 중 앞의 연산 결과로 인해 뒤 연산까지 진행하지 않아도 전체 논리 연산의 결과를 알 수 있어, 뒤에 위치한 피연산자는 실행하지 않고 종료하게 되는 경우를 의미한다.

 

예를들어 논리연산자 (&& , || )를 사용하는 경우를 코드로 알아보자

 

1. && 연산자

true && false // false => 두 번째 피연산자까지 연산
false && true // false => 첫 번째 피연산자까지만 연산 후 종료

두 피연산자가 모두 true가 될 경우에만 true 를 반환하는 && 연산자.

앞에 위치한 피연산자가 false 인 경우 뒤에 위치한 피연산자는 연산할 필요가 없이 false로 결과가 정의된다.

 

 

2. || 연산자

false || true // true => 두 번째 피연산자까지 연산 필요
true || false // true => 첫 번째 피연산자까지만 연산
true || true // true => 첫 번째 피연산자까지만 연산
false || false // false => 두 번째 피연산자까지 연산 필요

두 피연산자가 모두 false 인 경우에만 false를 반환하는 || 연산자.

앞에 위치한 피연산자가 true인 경우 뒤에 위치한 피연산자는 연산할 필요가 없이 true로 결과가 정의된다.

 

 

---

함수를 활용해 Truthy, Falsy , 단락회로 평가를 알아보자

const getName = (person) => {
	if (!person) {
    		return "객체가 아님";
	}
	return person.name;
}

let person;
const name = getName(person); // "객체가 아님"

• person 객체는 undefined로 falsy한 값.
• getName 함수에서 ! + false = true로 인식되어 "객체가 아님" 이란 String을 반환
• name 변수에는 "객체가 아님" 이라는 String이 저장됨

 

위 코드를 단락 회로 평가를 사용해 단축시킬 수 있다.

 

1. &&연산자만 사용. Falsy한 객체 argument

const getName = (person) => {
	return person && person.name;
}

let person;
const name = getName(person); // undefined

• person 객체는 undefined로 falsy한 값.
• getName 함수에서 && 논리연산자는 truthy한 피연산자 두 개가 와야지 두번째 피연산자까지 연산을 함.
• falsy한 피연산자가 앞에 위치해 있음으로 앞에 위치한 피연산자까지만 연산. person 자체를 return 하게 됨.
• 따라서 name 변수에는 undefined 값이 저장됨.

 

 

2. &&연산자와 ||연산자 모두 사용. Falsy한 객체 argument

const getName = (person) => {
	const check = person && person.name;
    	return check || "객체가 아님";
}

let person;
const name = getName(person); // "객체가 아님"

• person 객체 undefined로 falsy한 값.
• getName 함수에서 && 논리 연산자( falsy한 값이 앞에 나오면 뒤까지 연산 X) 를 사용.
• 앞에 위치한 피연산자가 falsy한 person임으로 check변수에 person(undefined) 값 저장.
• retrun에서 || 연산자( truthy한 값이 앞에 위치하지 않으면 두번째 피연산자까지 연산)를 사용.
• falsy한 값 check를 앞에 위치시키고 truthy한 "객체가 아님" String을 return하게 됨.
• 따라서 name 변수에는 "객체가 아님"이 저장됨.

 

 

3. &&연산자와 ||연산자 모두 사용. Truthy한 객체 argument

const getName = (person) => {
	const check = person && person.name;
    	return check || "객체가 아님";
}

let person = {name : "oneyenee"};
const name = getName(person); // "oneyenee"

• person 객체 정의되어 truthy한 값.
• check 변수에 모두 truthy한 값임으로 &&연산자의 특성상 두번째 연산까지 진행하여 person.name 값이 저장됨.
• check 변수에 저장된 "oneyenee" String 값이 truthy함으로 || 연산자의 특성상 첫번째 연산까지만 진행하여 "oneyenee" return.

 

 

---

핵심

• && 연산자 사용 시 첫번째 연산자가 falsy 하면 연산 종료. 첫번째 연산자 return.
• || 연산자 사용 시 첫번째 연산자가 truthy 하면 연산 종료. 첫번째 연산자 return.