자바스크립트 기초) truthy, falsy, 단축 평가(단락회로평가)

1. truthy

공식문서에서는 아래처럼 설명하고 있다. 

자바스크립트에서, truthy인 값(참 같은 값) Boolean(불리언) 문맥에서 true로 평가되는 값이다. falsy값으로 정의된 값이 아니면 모두 truthy값으로 평가된다.

즉, falsy 값이 아니라면 이를 truthy로 판단하여 내부적으로 True 불리언 값으로 형 변환을 해준다. 

 

falsy 가 아니라면 truthy 이니 falsy 먼저 알아보자. 직감상 falsy 가 외울게 별로 없기에 이렇게 설명하지 않았을까?

2. Falsy

falsy인 값(거짓 같은 값)은 Boolean 문맥에서 false로 평가되는 값이다. 쉽게 말해서 if문의 조건으로 넣었을때 false로 변환되는 값이다. 

총 6가지가 있다. 

 

• if(0)
• if(NaN)
• if(false)
• if(null)
• if(undefined)
• if(‘’)

 

이 falsy 값들이 자바스크립트에서 '불리언 값을 요구하는 부분(ex 조건문,반복문)' 에 들어가면 자바스크립트가 내부적으로 이 값들을 False 불리언 값으로 형변환을 해준다.

 

3. 논리연산자(|| , &&)를 사용한 단축 평가(단락회로평가)

단축평가(단락회로 평가)는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

 

- 불리언 값과 함께 논리연산자를 사용하면 아래와 같은 결과가 나온다

&&  : 연산자 모두 다 true 여야지 true => 1개만 falsy 여도 그 값은 falsy

|| : 연산자 중 1개만 true 여도 true

true && true  // true    2개 다 true 여야하니까 2개 모두 다 봐야한다
false && true  // false   2개다 true 여야하는데 앞에가 벌써 false 니까 뒤 인수는 볼 필요도 없이 바로 false가 된다. 
true || false  // true      1개만 true 여도 true 가 나오므로 뒤 인수는 볼필요도 없이 바로 true 가 된다
false || true  // true       

 

- 하지만, 논리연산자를 사용할때 불리언(true,false) 값만 사용할 필요는 없다.  문자열이나 숫자, 객체를 사용할 수도 있다. 

- 즉,  && 이나 || 연산자 표현식의 평가 결과는 불리언 값이 아닐 수 있다. 

- 결론적으로, 논리연산자 표현식은 언제나 2개의 피 연산자 중 어느 한쪽으로 평가된다는 것이다. 

 

예제 1)

아래 예제처럼 불리언 값만이 아닌, 문자열을 사용할 수도 있다. 따라서, 결과값이 불리언 값이 아니라 2개의 피연산자 중 한쪽으로 평가된다.

그렇다면 왜 'Pizza' 가 반환되었을까??

'Chicken' && 'Pizza'  // 'Pizza'

&& 연산자는 2개 모두 true 여야지 true가 반환된다고 했다. &&(논리곱) 연산자는 좌항에서 우항으로 평가가 진행된다.

첫번째 연산자 'Chicken'은 truthy 값이라서 true 로 평가된다. 2개 연산자 모두 true 여야하니까 뒤에도 봐본다. 뒤 연산자도 'Pizza' 이기때문에 true 다. 즉, 왼쪽부터 시작하여 오른쪽 끝까지 평가한 경우에도 모든 피연산자가 true로 판단될 경우, 마지막 피연산자를 반환한다.

 

 2개 연산자 모두 평가해야지만 위 표현식을 평가할 수 있으므로, 논리 연산의 결과를 결정하는 두번째 피연산자 'Pizza'를 그대로 반환한다.

 

만약, 첫번째 값이 false로 판단 될 경우 평가 과정을 멈추고 해당 피연산자의 값을 반환한다.

ex) 0 && 10 이면 0을 반환할 것이다. 

 

예제 2)

|| 연산자는 1개만 true 여도 true 값을 반환한다. ||(논리합) 연산자도 좌항에서 우항으로 평가가 진행된다.

'Chicken' || 'Pizza'  // 'Chicken'

 

첫번째 연산자 'Chicken'이 이미 Truthy 이므로 true 로 평가된다. 벌써 1개가 true 이기 때문에 두번째 피연산자는 굳이 보지 않아도 평가를 할 수 있다. 논리 연산의 결과를 결정한 첫번째 피연산자 'Chicken' 이 반환된다.

단,  ​왼쪽부터 시작하여 오른쪽까지 끝까지 평가한 경우에도 모든 피연산자가 false로 판단될 경우, 마지막 피연산자를 반환한다. 

 

- 퀴즈를 맞춰보세요~!

result1 = 10 || 100; //10  
result2 = 0 && 100;  //0     0이 이미 falsy 값이기 때문에 0 바로 반환  
result3 = null || 100; //100   1개만 true 여도 true 이기때문에 true 값인 100 반환
result4 = null && 100; //null  null이 이미 falsy 값이기에 false, 뒤에거 볼필요없이 null 반환

username = 'eunhye';
result5 = username || '유저 이름이 없습니다'; //'eunhye'   true 값인 'eunhye' 반환

username = undefined;
result5 = username || '유저 이름이 없습니다'; //'유저 이름이 없습니다'  true 값인 2번째 연산자 반환


console.log(null || 0 || 5); //5
console.log(3 || null || 5); //3
console.log(null || undefined || 0 || "" || NaN || 0); //0   모든게 false일 경우 젤 마지막꺼 반환

 

- 참고한 글 - 

https://medium.com/@hw3053919/javascript%EC%97%90%EC%84%9C-falsy-truthy%EB%9E%80-7249f9356beb

Javascript에서 falsy, truthy란?

 

https://developer.mozilla.org/en-US/docs/Glossary/Truthy

Truthy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

Falsy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://learnjs.vlpt.us/useful/03-short-circuiting.html

03. 단축 평가 논리 계산법 · GitBook

모던 자바스크립트 딥다이브

https://ko.javascript.info/logical-operators

논리 연산자

https://blog.naver.com/tlsrbcjf7579/222723850887