(4) Modern JavaScript - AND , OR 연산 방식과 우선 순위

AND와 OR의 연산 방식

// AND, OR의 연산 방식
console.log("SeopE" && "JavaScript");

 

위와 같은 코드는 SeopE와 JavaScript라는 문자열은 모두 Truthy한 값이기 때문에

true AND true 이므로 결과는 true일 것 같지만 결과는 'JavaScript' 문자열이 출력 된다.

자바스크립트에서 논리 연산자는 매번 true와 false를 리턴하는게 아니라

상황에 따라서 양쪽 값들 중 어느 한쪽을 선택하는 방식으로 동작한다.

---

한쪽을 선택한다는 것이 어떤 뜻인지 감이 안올텐데

일단 익숙하게 알고 있는 불린 타입의 값으로 AND 연산자를 살펴보자면..

// AND, OR의 연산 방식

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

AND 연산자는 양쪽 값이 모두 true인 경우에만 true를 리턴하고

어느 한쪽이라도 false 일경우 false를 리턴한다고 했을 때,

첫 줄만 true 나머지는 false가 출력 된다.

그런데 자바스크립트에서 AND 연산자는

왼쪽 값이 Truthy하면 오른쪽 값을 리턴하고

왼쪽 값이 Falsy하면 그대로 왼쪽 값을 리턴하는 방식으로 동작한다.

 

이러한 시점으로 연산식 결과를 다시 한번 살펴보면

왼쪽 값이 true 인 경우엔 오른쪽 같이 리턴됐고

왼쪽 값이 false인 경우에는 그대로 왼쪽 값이 리턴된 것이다.

 

그래서 처음에 살펴봤던 문자열 'SeopE'와 'JavaScript'의 AND 연산 결과도 연산자 기준으로 봤을 때

왼쪽에 있는 문자열 'SeopE'가 Truthy하기 때문에 오른쪽에 있는 'JavaScript'가 리턴된 것이다.

---

이번엔 OR연산자를 살펴보자.

// AND, OR의 연산 방식

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

OR 연산자는 양쪽이 모두 false일때 false를 리턴하고 

어느 한쪽이라도 true가 있을 때는 true가 리턴 된다고 했을 때,

마지막 줄만 false가 출력되고 나머지는 true가 출력 된다.

그런데 OR 연산자도 둘 중 하나를 선택하는 관점에서 보면

AND 연산자와는 정반대로 왼쪽 값이 Truthy하면 왼쪽 값을 리턴하고

왼쪽 값이 Falsy하면 오른쪽 값을 리턴한다는 것을 확인할 수 있다.

---

불린 값이 아닌 값을 가지고 한번 살펴보자.

// AND, OR의 연산 방식

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

위 내용을 정확히 이해했다면 쉽게 결과를 예측 할 수 있다.

 

(null && undefined) - 왼쪽 값이 Falsy이고 AND 연산자 이므로 왼쪽 null을 출력

(0 || true) - 왼쪽 값이 Falsy 이고 OR 연산자 이므로 오른쪽 true를 출력

("0" && NaN) - 왼쪽 값이 문자열이므로 Truthy이고 AND 연산자 이므로 오른쪽 NaN을 출력

({} || 123) - 왼쪽 값은 빈 객체이므로 Truthy이고 OR 연산자 이므로 왼쪽 빈 객체 {}를 출력

---

이런 특성은 아래와 같이 응용할 수도 있다.

// AND, OR의 연산 방식

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

print();
print("JavaScript");

함수를 호출할 때 아무런 값도 전달하지 않으면 = print();

파라미터에 undefined 결과가 나오므로 Falsy 값이 전달된다는 특징을 활용해서

Falsy에서 OR 연산자는 오른쪽 값을 출력하므로 'Hello' 가 출력 되고 

 

전달한 값이 있을 경우 = print('JavaScript') 그 값을 사용하게 끔 조건식 처럼 활용할 수 있다.

결국 파라미터에 문자열이 들어가 Truthy한 값이 전달되어

Truthy에서 OR 연산자는 왼쪽 값을 출력하므로 'JavaScript'가 출력 된다.

---

이전에 알고 있었던 일반적인 논리 연산의 형태로도 활용할 수 있지만

자바스크립트에서는 어느 한 쪽을 선택하는 논리 연산의 특징을 다양한 방식으로 응용해서 활용할 수 있다.

 

AND와 OR의  연산 우선 순위

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

  return '틀렸습니다!';
}

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

조건문 함수 정의 부분에서 파라미터 value로 전달되는 값이 10보다 작으면서 0보다는 크고

3은 아닐때 '정답입니다'라는 문자열을 콘솔에 출력하고자 할때 AND 연산자를 사용했다.

 

그런데 위와 같이 AND나 OR 연산자 중 하나를 사용할 때는 문제 없지만

만약 섞어서 사용할 때는 연산의 우선순위가 존재하게된다.

결론부터 말하자면 AND 와 OR 연산자에서 가장 높은 우선순위는 AND 연산자 이다.

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

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

위와 같이 OR 연산자 뒤에 AND 연산자를 사용한다면

소괄호로 OR 연산을 감쌀 때와 감싸지 않았을 떄 서로 다른 결과를 볼수있다.

즉 연산의 우선순위를 명확하게 하지 않으면 예상치 못한 결과를 얻을 수있으니

잘 구분하여 코드를 작성해야한다.