1. AND 연산자 : &&

console.log('Codeit' && 'JavaScript');		// JavaScript

참 and 참이니 true가 출력될 것 같은데 결과는 'JavaScript' 가 출력된다.

왜 그런걸까?

자바스크립트의 논리 연산자는 매번 true/false 만 리턴하는 것이 아니라, 상황에 따라 양쪽 값 중 어느 한 쪽을 선택하는 방식으로 동작하기 때문이다.

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

&& 연산자는 둘다 참이어야만 true를 리턴하므로 위와 같은 결과가 나온 것 같지만,
사실 JavaScript에서 && 연산자는 왼쪽 값이 true라면 오른쪽 값을 리턴하고,
왼쪽 값이 false라면 그대로 왼쪽 값을 리턴한다.

&&
왼쪽 값이 true → 오른쪽 값 리턴
왼쪽 값이 false → 왼쪽 값 리턴

2. OR 연산자 : ||

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

|| 연산자를 불린 형태로 따져보면 어느 한 쪽이 true라면 true를 리턴하고 두 값이 모두 false일 때 false를 리턴한 것이라고 생각될 것이다.
그러나 자바스크립트에서의 ||는 &&와 정반대로, 왼쪽 값이 true라면 그대로 왼쪽 값을 출력하고, 왼쪽 값이 false라면 오른쪽 값을 출력한 것이다.

||
왼쪽 값이 true → 왼쪽 값 리턴
왼쪽 값이 false → 오른쪽 값 리턴

연습

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

1번 줄 : 왼쪽의 null이 falsy 값이므로 왼쪽 값 리턴 // null
2번 줄 : 0은 falsy값, || 연산자의 왼쪽이 falsy 값이므로 오른쪽 값 리턴 // true
3번 줄 : '0'은 truthy값, && 왼쪽이 truthy이므로 오른쪽 값 리턴 // NaN
4번 줄 : {}는 truthy, ||이므로 왼쪽 그대로 리턴 // {}

응용

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

print();
print('JavaScript');

파라미터에 값을 전달하지 않으면 value 값이 undefined가 되고, 이것은 falsy 값이므로 || 연산자에 의해 왼쪽이 falsy이니 오른쪽 값 'Hello'가 리턴된다.
전달한 값이 있다면 value는 truthy 값이니 그대로 value가 리턴된다.

파라미터에 값을 전달하지 않으면 'Hello'를,
값을 전달하면 그 값을 출력하게 된다.

이렇게 ||의 특징을 이용하여 조건식처럼 활용할 수도 있다.

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

• 함께 사용할 경우 우선순위를 고려해야 한다.
• AND 연산자의 우선순위가 더 높다.

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

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

연산자 우선순위 확인해보기

3. null 병합 연산자 : ??

• ES2020에서 새롭게 추가되었다. (Nullish coalescing operator)
• 물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'JavaScript' ?? 'Hello'; // JavaScript

console.log(example1, example2, example3); // I love JavaScript

• example1, 2
  연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴
• example3
  연산자 왼편의 값이 null 이나 undefined가 아니라면 연산자 왼편의 값이 리턴

OR 연산자(||)와 비교

• 결과가 동일한 상황도 있으나, null 병합 연산자(??)는 왼편의 값이 null이나 undefined인지 확인하고 OR 연산자(||)는 왼편의 값이 falsy인지를 확인하기 때문에 null이나 undefined가 아닌 falsy 값을 활용할 때 결과가 서로 다르게 나타난다.

• 결과가 같은 경우

const title1 = null || 'Hello';
const title2 = null ?? 'Hello';

console.log(title1); // Hello
console.log(title2); // Hello

• 결과가 다른 경우

const title1 = false || 'Hello';
const title2 = false ?? 'Hello';

console.log(title1); // Hello
console.log(title2); // false

const width1 = 0 || 150;
const width2 = 0 ?? 150;

console.log(width1); // 150
console.log(width2); // 0