AND와 OR 연산자 심화

console.log('I love u' && 'React!');

위 코드를 실행하면 어떤 결과 값이 출력될까? 

I live u 와 React! 모두 문자열이기 때문에 Truthy한 값이라 true and true가 되서 콘솔에 true가 출력될것 같다.

//출력된 값
React!

하지만 실행해보면 "React!"가 출력된걸 볼 수 있다. 자바스크립트에서 논리연산자는 매번 true 혹은 false를 리턴하는게 아니라 상황에 따라 양쪽 값 중 어느 한쪽을 선택하는 방식으로 동작한다.

//익숙하게 본 boolean 형태로 AND 연산자를 생각해보자
console.log(true && true); //ture
console.log(true && false); //false
console.log(false && true); //flase
console.log(false && false); //flase

AND 연산자는 양쪽 값이 모두 true인 경우에만 true를 리턴하고 어느 한쪽이라도 false일 경우 false를 리턴한다.

하지만 사실 왼쪽 값이 truthy하면 오른쪽 값을 리턴하고, 왼쪽 값이 falsy 하면 그대로 왼쪽 값을 리턴하는 방식으로 동작한다. 그래서 위에서 작성했던 문자열로 작성한 연산자에서 "React!"를 출력한 것이다. 문자열 "I love u"가 truthy 하기 때문에 오른쪽에 있는 "React!"가 리턴 된 것이다.

그렇다면 OR 연산자는?

//OR 연산자 boolean 타입
console.log(true || true); //ture
console.log(true || false); //true
console.log(false || true); //true
console.log(false || false); //false

둘 중 하나라도 true일 경우 true를 리턴하고 양쪽 다 false일 경우에 false를 리턴했다. 그런데 OR 연산자도 둘 중 하나를 선택하는 관점에서 바라보면 AND연산자와 정반대로

왼쪽 값이 truthhy 하면 그대로 왼쪽 값을 리턴하고, 왼쪽 값이 falsy하면 오른쪽 값을 리턴하는 방식으로 동작한다.

예시를 가지고 연산을 더 공부해보자.

console.log(null && undefined);
console.log(0 || true);
console.log('0' && NaN);
console.log({} || 123);

1. null과 undefined 둘 다 falsy 값으로 flase AND false. 왼쪽 값이 falsy 하면 그대로 왼쪽 값을 리턴하기 때문에 null이 출력될것이다.
2. 0은 falsy값, true는 말 그대로 true. false OR true. 왼쪽값이 falsy하면 오른쪽 값을 리턴하니 true가 출력될 것이다.
3. 0이라는 문자열 true, NaN은 falsy 값. true AND false. 왼쪽 값이 true기 때문에 오른쪽 값을 리턴해 NaN이 출력될 것이다.
4. 빈 배열과 객체 또한 truthy. 그리고 숫자 123은 true. true OR true. 왼쪽값이 truthy하면 그대로 왼쪽값을 리턴하기 때문에 {빈 객체}가 출력될 것이다.

function print(value) {
  const message = value || "Code World!";
  
  console.log(message);
};

print(); //Code World!
print('JavaScript'); //JavaScript

함수를 호출할 때 아무런 값도 전달하지 않으면 파라미터에 undefined, flasy한 값이 전달된다는 특징을 이용해서 함수를 호출할 때 전달한 값이 없다면 "Code World!"를,  전달한 값이 있을 땐 그 값을 사용하게끔 조건식처럼 활용할 수 있다.

---

AND 연산자와 OR 연산자 우선순위

function checkAnswer(value) {
  if (value < 10 && value > 0 && value !== 3) {
    return '정답입니다!';
  }
  return '틀렸습니다!';
};

console.log(checkAnswer(4)); // 정답입니다!

10보다는 작고, 0보다는 크지만 3은 아닐때 정답입니다를 리턴하고, 아니라면 틀렸습니다를 리턴하는 함수이다.

코드를 작성하다보면 다양한 상황을 고려하기 위해 이렇게 AND나 OR 연산자를 여러번 사용해야 할 수도 있다.

AND 연산자나 OR 연산자 중 하나만 계속해서 사용할 때는 문제 없지만, 만약 AND 연산자와 OR 연산자를 섞어서 사용할 때는 연산의 우선순위가 존재한다.

쉽게 설명해서 1 + 2 + 3 처럼 계속해서 더하기 연산자만 사용한다면 왼쪽부터 차례대로 더하면 되지만, 1 + 2 * 3 처럼 더하기와 곱하기 연산자가 섞여 있다면 연산자 우선순위를 고려해야 한다. AND 와 OR 연산자 사이에서는 AND 연산자의 우선순위가 더 높다.

console.log(true || false && false); // true
console.log((true || false) && false); // false

console.log('Coding' || NaN && false); // Coding
console.log(('Coding' || NaN) && false); // false