[자바스크립트의 동작 원리] 07. AND와 OR의 연산 방식

자바스크립트에서 다양한 값들이 맥락에 따라 불린 값처럼 평가될 수도 있다. Truthy와 Falsy 값이 있는데 그런 특징을 논리 연산자인 AND와 OR 연산자에다 한번 활용해 보겠습니다.

// AND와 OR의 연산 방식
console.log('쑥쑥' && 'JavaScript');

이 코드를 실행하면 '쑥쑥'과 'JavaScript'라는 문자열은 모두 Truthy한 값이니까 true AND true가 돼서 콘솔에는 true가 출력 될 것 같지만 저장하고 실행해보면 'JavaScript'가 출력이 되는 걸 확인할 수 있는데요.

사실 자바스크립트에서 논리 연산자는 매번 true 혹은 false를 리턴하는게 아니라 상황에 따라서 양쪽 값들 중 어느 한 쪽을 선택하는 방식으로 동작합니다.

한쪽을 선택한다는 게 무슨 뜻인지 아직 감이 잘 안올 텐데요.

// AND와 OR의 연산 방식
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

일단 우리가 익숙하게 알고 있는 불린 타입의 값으로 AND 연산자를 먼저 살펴봅시다. AND 연산자는 양쪽 값이 모두 true인 경우에만 true를 리턴하고 어느 한쪽이라도 false일 경우 false를 리턴하는 걸로 알고 있습니다.

그래서 코드를 실행해보면 첫 줄만 true, 나머지는 false가 출력이 된 걸 확인할 수 있습니다.

 

그런데 사실 자바스크립트에서 AND 연산자는 왼쪽 값이 Truthy하면 오른쪽 값을 리턴하고 왼쪽 값이 Falsy하면 그대로 왼쪽 값을 리턴하는 방식으로 동작합니다. 연산식과 결과를 다시 한번 살펴 보면 왼쪽 값이 true인 경우엔 모두 오른쪽 값이 리턴됐고 왼쪽 값이 false인 경우에는 그대로 왼쪽 값이 리턴됐습니다.

 

그래서 처음에 살펴봤던 문자열 '쑥쑥'과 문자열 'JavaScript'의 AND 연산 결과도 연산자 기준으로 봤을 때 왼쪽에 있는 문자열 '쑥쑥'이 Truthy하기 때문에 오른쪽에 있는 'JavaScript'가 리턴된 겁니다.

 

자 그럼 이번에는 OR 연산자를 한번 살펴볼까요?

// AND와 OR의 연산 방식
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

이번에도 일단은 불린 타입으로 먼저 살펴봅시다.

OR 연산자는 양쪽이 모두 false일 때만 false를 리턴하고 어느 한쪽이라도 true가 있을 때는 true가 리턴되죠.

코드를 실행해 보면 마지막 줄만 false가 출력 되고 나머지는 모두 true가 출력된 걸 확인할 수 있습니다.

그런데 OR 연산자도 둘 중 하나를 선택하는 관점에서 보면 AND 연산자와는 정반대로 왼쪽 값이 Truthy하면 그대로 왼쪽 값을 리턴하고 왼쪽 값이 Falsy하면 오른쪽 값을 리턴한다는 것을 확인할 수 있는데요.

 

자바스크립트에서 AND와 OR 연산자가 동작하는 원리가 이제는 조금씩 이해가 되시나요?

자 그럼 복습하는 차원에서 불린 값이 아닌 값을 가지고 조금만 더 연습해 봅시다.

// AND와 OR의 연산 방식
console.log(null && undefined); // null
console.log(0 || true); // true
console.log('0' && NaN); // NaN
console.log({} || 123); // {}

첫 번째는 null AND undefined (null && undefined)입니다.

null은 Falsy 값이고 AND 연산자는 왼쪽 값이 Falsy할 때 그대로 왼쪽 값을 리턴하니까 첫 번째 콘솔은 null을 출력합니다.

 

다음은 숫자 0 OR 불린 true (0 || true)인데요. 숫자 0도 Falsy 값이죠. 그런데 OR 연산자는 왼쪽 값이 Falsy할 때 오른쪽 값을 리턴하니까 이 줄은 true가 출력이 됩니다.

 

세 번째는 숫자 0이 아니라 문자열 0 AND NaN('0' && NaN)인데요.

문자열 '0'은 Truthy 값이고 AND 연산자는 왼쪽 값이 Truthy할 때 오른쪽 값을 리턴하니까 이줄은 NaN을 출력합니다.

 

마지막은 빈 객체 OR 숫자 123 ({} || 123)인데요.

지난 시간에 빈 객체나 빈 배열도 모두 Truthy값이라고 배웠습니다. 빈 객체는 Truthy 값이고 OR 연산자는 왼쪽 값이 Truthy할 때 그대로 왼쪽 값을 리턴하니까 이 줄은 빈 객체가 콘솔에 출력 됩니다.

그래서 이대로 코드를 저장하고 실행해보면 똑같은 값이 콘솔에 출력 되는 모습을 확인할 수 있습니다.

 

// AND와 OR의 연산 방식
function print(value) {
  const messag = value || '쑥쑥';
  
  console.log(message);
}

print();
print('JavaScript');

이런 특성은 이렇게 응용할 수도 있습니다.

함수를 호출할 때 아무런 값도 전달하지 않으면 파라미터에 undefined, 그러니까 Falsy한 값이 전달된다는 특징을 활용해서 함수를 호출할 때 전달한 값이 없다면 '쑥쑥'을, 전달한 값이 있을 경우에는 그 값을 사용하게끔 조건식처럼 활용할 수도 있다는 겁니다.