Step 2. JavaScript(3) - Truthy and Falsy + Logical Operator

• Truthy and Falsy

자바스크립트에서 7가지로 값을 나누는 기준과 별개로, 다른 기준이 한 가지 더 존재하는데 Truthiness와 Falsiness다. 진실성과 거짓성인데 자바스크립트의 모든 값들은 이 둘 중 한 가지에 속한다.

0
-0
false
undefined
null
""
''
``
NaN

위의 값들은 Falsy이고 그 외의 모든 값들은 Truthy이다. 자바스크립트가 문맥을 파악할 때, false라고 여겨지는 것들이 falsy이다. 위의 값들이 if문의 조건 부분에 들어갈 경우 false를 반환한다.

 

• Logical NOT Operator

!true; // false
!2; // false
!"abc"; // false
!(function foo () {}); // false
!{ name: 'jun' }; // false

!false; // true
!""; // true
!0; // true

!연산자를 사용할 때, Boolean(true); 혹은 Boolean(2); 등등 ! 뒤에 오는 값으로 Boolean을 실행했을 때 false가 반환된다면, false가 반환된다. Boolean(false); 혹은 Boolean(0);과 같이 false가 반환되는 값들에게 !연산자를 사용하면 true가 반환된다. 값이 뒤바뀐다.

 

• Logical OR Operator

|| 로 표현된다. true나 false 값이 아닌, 연산되지 않은 값인 피연산자 값이 반환된다.

 

 - 연산방식

1. 연산자를 기준으로 '왼쪽'부터 Truthy 값을 찾는다.

2. Truthy 값을 찾은 경우, 연산을 중지하고 '해당 값'(true나 false가 아닌)을 반환다.

3. 마지막까지 Truthy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환다.

true || true; // 맨 처음인 맨 왼쪽에서 이미 Truthy 값인 true를 찾았기 때문에 해당 값인 true 반환
true || false; // 마찬가지로 맨 처음 Truthy 값을 찾아서 맨 처음 해당 값인 true 반환
false || true; // 두 번째에서 Truthy 값인 true를 찾았기 때문에 두 번째 해당 값인 true 반환
false || false; // 둘 다 Truthy가 아니기 때문에 마지막까지 Truthy를 못 찾은 경우이다. 따라서 마지막에 위치한 값인 false 반환
"hello" || {}; // 맨 처음부터 Truthy 값인 "hello"를 찾았기 때문에 "hello" 반환
[] || "hello" // 맨 처음부터 Truthy 값인 []을 찾았기 때문에 [] 반환
(function foo() {}) || "hello"; // 맨 처음부터 Truthy 값인 function을 찾았기 때문에 function foo() {} 반환
false || ""; // 둘 다 Truthy가 아니기 때문에 마지맊가지 Truthy를 못 찾은 경우이다. 따라서 마지막 값인 ""을 반환

 

• Logical AND Operator

&&으로 표현된다. 마찬가지로 true나 false 값이 아닌, 연산되지 않은 값인 피연산자 값이 반환된다.

 

 - 연산방식

1. 연산자를 기준으로 '왼쪽'부터 Falsy값을 찾는다.

2. Falsy 값을  찾은 경우, 연산을 중지하고 해당 값을 반환다.

3. 마지막까지 Falsy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환다.

true && true; // 맨 마지막까지 Falsy인 값을 못 찾았기 때문에 마지막 값인 true를 반환
true && false; // 맨 마지막에서 Falsy를 찾았기 때문에 해당 값인 false 반환
false && true; // 맨 처음부터 Falsy를 찾았기 때문에 해당 값인 false 반환
false && false; // 마찬가지로 맨 처음부터 Falsy를 찾았기 때문에 해당 값인 false 반환
"hello" && {}; // 맨마지막까지 Falsy를 못 찾았기 때문에 마지막 값인 {} 반환
[] && "hello"; // 맨마지막까지 Falsy를 못 찾았기 때문에 마지막 값인 "hello" 반환
"" && "hello"; // 맨 처음부터 Falsy를 찾았기 때문에 해당 값인 "" 반환
(function foo() {}) && "hello"; // 맨마지막까지 Falsy를 못 찾았기 때문에 마지막 값인 "hello" 반환
false && ""; // 맨 처음부터 Falsy를 찾았기 때문에 해당 값인 false 반환

 

하나라도 Truthy가 있다면 그 해당 값을 반환하는 것이 OR이고(논리 연산을 할 때 1 OR 1 OR 0 OR 0 하면 값은 1이지 않는가) 하나라도 Falsy가 있다면 그 해당 값을 반환하는 것이 AND라고 생각하면 될 것 같다.(논리 연산할 때 1 AND 1 AND 1 AND 0 AND 1은 1이지 않는가!)

 

눈으로만 볼 때는 이해가 안됐는데 console로 직접 하나하나 실행해보니까 이해가 된다. 내가 생각했던 논리 연산자 NOT, OR, AND랑 달라서 헷갈렸던 것 같다.