오늘 배운 것

논리 연산자(Logical Operator)

논리 연산자는 보통 Boolean(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, &&과 || 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.

• 위 설명은 MDN 논리연산자 문서 도입에 설명된 내용이다. React JSX 인라인에 조건문 넣는 것을 공부하다, 논리 연산자까지 넘어가게 되었는데 내가 단순히 생각했던 내용과 별개로 "와 이렇게 생각할 수도 있구나!!" 하는 깨달음(?)을 얻어 포스팅을 하게 되었다.
• 고백하건데 나는 여태 논리 연산자를 불리언 값을 비교하여 반환하는 형식으로만 사용해 왔으며, 사칙연산에 대해 단순히 받아들이고 그 원리에 대해서는 잘 생각해보지 않듯이 논리 연산자도 그것처럼 받아들여 사용해왔다.
• 예를 들자면 나는 ''A&&B가 true가 되기 위해서 A와 B가 모두 참이여한다" 그리고 "A||B가 true가 되기 위해서 A 또는 B가 참이 되어야한다"라고 생각하고 이 개념 이상으로 논리연산자를 사용하거나 생각해보지 않았다.
• 하지만 이렇게 논리연산자가 작동하기위해 내부적으로는 내가 상상도 못했던 방식으로 작동하고 있었다.

1. 논리 AND(&&)

• expr1 && expr2 일 때 반환값은 expr1이 truthy한 값일 경우 expr2를 반환하고, 그렇지 않으면 expr1을 반환한다.
• 특이점 1 : 논리 연산자는 불리언 값을 반환하는 것이 아니다. 반환된 값이 보통 불리언 값이기 때문에 그렇게 보이는 것이다.
• 특이점 2 : expr1이 truthy한 값이라면, expr2는 검사할 필요도 없이 그대로 반환해버린다. expr2가 truthy한 값이 라면 전체 값이 truthy한 값으로 나올 것이고, 그렇지 않다면 falsy한 값이 나올테니.
• 와 이거 생각해낸 사람 기가 막히네 bb

2. 논리 OR(||)

• expr1 && expr2 일 때 반환값은 expr1이 truthy한 값일 경우 expr1를 반환하고, 그렇지 않으면 expr2을 반환한다.
• 특이점 2 : expr1이 truthy한 값이라면, expr1을 반환한다. 둘 중 하나만 truthy한 값이어도 truthy를 반환해야 하기 때문이다. expr1이 falsy한 값이라면 expr2는 검사할 필요도 없이 그대로 반환해버린다. expr2가 truthy한 값이 라면 전체 값이 truthy한 값으로 나올 것이고, 그렇지 않다면 falsy한 값이 나올테니.

3. 논리 NOT(!)

• 피연산자를 불리언 값의 반대를 반환한다. true로 변환할 수 있으면 false를 반환한다. 그렇지 않으면 true를 반환한다.
• JavaScript에서는 이중 NOT(!!)연산자를 통해 어떤 값이든 불리언 값으로 변환할 수 있다.

n1 = !!true                   // !!truthy returns true
n2 = !!{}                     // !!truthy returns true: any object is truthy...
n3 = !!(new Boolean(false))   // ...even Boolean objects with a false .valueOf()!
n4 = !!false                  // !!falsy returns false
n5 = !!""                     // !!falsy returns false
n6 = !!Boolean(false)         // !!falsy returns false