[자바스크립트] 논리 연산자 (||, &&, !) ⭐

출처: 모던 자바스크립트 튜토리얼, MDN

 

Truthy 와 Falsy

falsy로 판단되는 값(거짓 같은 값)은 Boolean에서 false로 평가되는 값이다.

다음은 falsy로 판단되는 값들이다.

값	타입
null	Null
undefined	undefined
false	Boolean
NaN	Number
0	Number
-0	Number
0n	BigInt
""	String
document.all	Object

이 외의 모든 값은 Truthy 이다.

||(OR)

---

OR 연산자인 || 이 여러개인 경우

result = val1 || val2 || val3;

이때, or 연산자는 다음 순서에 따라 연산을 수행한다.

1. 가장 왼쪽에 있는 피연산자부터 평가한다.
2. 각각의 피연산자를 불린형으로 변환한 후 그 값이 true이면 바로 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
   (or 연산자는 한개만 true여도 연산이 종료되기 때문에)
3. 피연산자 모두를 평가한 경우(모든 피연산자가 false )에는 마지막 피연산자를 반환한다

반환 값이 형 변환을 하지 않은 원래의 값이라는 것이 중요하다.

이 부분에서 내가 알고있는 OR 연산자와 다른 것인가 생각이 들었다.

내가 알고 있는 OR 연산자는 단순히 true / false를 반환하는 것이었다. 하지만 자바스크립트에서는 불린값이 아닌 원래의 값을 반환한다.

이는 자바스크립트에서만 제공하는 논리연산자 OR의 추가 기능이기 때문이다.

피연산자가 true , false 일 경우 불린형을 반환하지만 그 외의 값들을 피연산자로 사용하게 되면 불린값이 아닌 원래의 값을 반환한다.

alert( 1||0); //1 , 1은 truthy이기 때문에 연산을 멈추고 1을 반환한다.
alert( null || 1); //1, null은 falsy이고 1은 truthy이기 때문에 1을 반환한다.
alert(null || 0 || 1); //1, null, 0은 falsy이고 1은 truthy이기 때문에 1을 반환한다.

alert(undefined || null || 0); //0, 세 개의 피연산자 모두 falsy이기 때문에 마지막 피연산자의 값을 반환한다.

 

 

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert(firstName || lastName || nickName || "익명"); //바이올렛

이 경우 nickName 또한 falsy였다면 "익명" 반환되었을 것이다.

 

&& (AND)

---

&& 연산자 또한 OR 연산자와 마찬가지로 피연산자가 여러개인 경우, 같은 맥락의 알고리즘으로 동작한다.

1. 가장 왼쪽에 있는 피연산자부터 평가한다.
2. 각각의 피연산자를 불린형으로 변환한 후 그 값이 false이면 바로 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.
   (and 연산자는 한개만 false여도 연산이 종료되기 때문에)
3. 피연산자 모두를 평가한 경우(모든 피연산자가 true)에는 마지막 피연산자를 반환한다

alert( 1 && 0); //0, 첫번재 피연산자인 1이 truthy이고 0은 falsy이기 때문에 0을 반환한다.
alert( 1 && 5); //5, 두개의 피연산자 모두 truthy이기 때문에 마지막 피연산자인 5를 반환한다.

alert(null && 5); //null, 첫번째 피연산자가 falsy이기 때문에 연산을 종료하고 null을 반환한다.
alert(0 && "아무거나 와도 상관없습니다."); // 0, 이것 또한 첫번째 피연산자가 falsy이기 때문에 0이 반환된다.

문제오답

---

alert(1)을 먼저 실행하게 되는 것 까지는 알겠는데 alert가 falsy가 아니기 때문에 truthy라고 생각하고 연산이 끝날 것이라고 생각했다. 하지만 alert 메서드는 값을 반환하지 않는다. 따라서, undefined를 반환하게 된다. 그러면 falsy가 되기 때문에 다음 피연산자로 넘어가게된다.

 

 

alert(1)을 실행하고 undefined로 falsy니까 1만 출력할 줄 알았다. 하지만 alert(1)을 실행하고 평가 결과인 undefined를 반환한다. 그래서 undefined까지 출력하게 된다.

 

정리

---

• 피연산자가 여러개일 경우(불린형이 아닌 값들일 경우) 자바스크립트만의 추가 기능을 통해 불린형 값이 아닌 원래 값을 반환한다.
• OR (||) 연산자의 경우 한개만 true여도 true이기 때문에 연산이 종료되면서 첫번째 truthy를 반환하고, 만일 모두 
• AND (&&) 연산자의 경우 한개만 false여도 false이기 때문에 연산이 종료되면서 첫번째 falsy를 반환한다.

처음 본 개념이라 아직 헷갈리지만 논리 연산자를 만나게 되면 알고리즘적으로 어떻게 동작하는지 생각하면서 어떠한 값이 반환되는지 생각하면서 공부해야겠다.