Short Circuiting (&& and ||),The Nullish Coalescing Operator (??)

자바스크립트에서는 short circuiting이라는 개념이 있다. &&와 || 연산자에서 적용되는 개념인데, 불필요한 연산을 건너뛰어준다. 무슨말인지는 아래의 코드를 보면서 이해해보자.

|| (or) ,The Nullish Coalescing Operator (??)

//use ANY data type, return ANY data type, short-circuiting
console.log(3 || 'Lingling')//3
//if the first value is truthy value, 
//it will immidately return the first value

console.log(''|| 'Lingling')//lingling
console.log(true|| 0)//true
console.log(undefined|| null)//null

console.log(undefined || 0 || '' || 'hello'||null)//hello
//first truthy vlaue

or에 해당하는 ||를 사용할 때, 첫번째 벨류가 truthy한 벨류이면 바로 그 벨류를 리턴한다. 첫번째 벨류가 truthy가 아닐때는 다음으로 넘어가서 제일 먼저 truthy한 값이 리턴된다. 그렇기 때문에 제일 마지막 console.log에서 hello가 출력되는 것이다. 실제 코드에서 어떤식으로 쓰이는지 아래의 예시를 보자

const guests1 = restaurant.numGuests? restaurant.numGuests : 10;
console.log(guests1) 

const guests2 = restaurant.numGuests || 10
console.log(guests2)

//if the numGuests is 0, the result is 10 so we need to fix it

첫번째 코드에서 삼항연산자를 사용해서 restaurant.numGuests가 있으면 restaurant.numGuests의 값이 나오고 아니면 10이 나오게 했다. 이걸 || 연산자로 더 간단하게 표현할 수 있다. restaurant.numGuests가 truthy 벨류면 restaurant.numGuests값이 나올것이고 아니면 10이 나오기 때문이다. 따라서 같은 로직의 코드지만 더 간결하게 작성할 수 있다.

그런데 여기서 restaurant.numGuests = 0;이라고 해보자. 여기서 0이라는 레스토랑 게스트 숫자가 없기 때문에 우리가 0으로 적은 것이다. 하지만 0은 falsy 값이기 때문에 guests2의 값은 0이 아닌 10이 된다. 로직 오류가 생기는 것이다. 이때, 이 오류를 없애는 방법은 바로 Nullish Coalescing Operator (??)를 사용하는 것이다.

//Nullish: null and undefined (not 0 or '')
const guestCorrect = restaurant.numGuests ?? 10;
console.log('??>>>>',guestCorrect)

??는 값이 null이거나 undefined일 때만 오른쪽 값을 반환하기 때문에, 0은 그대로 사용된다. 따라서 여기서는 로직에 맞게 0을 반환하게 된다.

&&(and)

console.log(0 && 'Lingling') //0
console.log(7 && 'Lingling') //Lingling 

//if the first value is truthy then we get the last one.
//if the first value is falsy then we get the first one.

console.log('hello' && 23 && null && 'Lingling')//null

다음으로 &&을 보면 이건 ||와 다르게 제일 먼저 falsy인 값이 리턴된다. 따라서 마지막 코드에서 제일 먼저 falsy값인 null이 나오게 된다.

실제 코드에서 사용하는 예시를 보자.

if(restaurant.orderPizza){
  restaurant.orderPizza('mushrooms','spinach')
}

restaurant.orderPizza &&
restaurant.orderPizza('mushrooms','spinach')

위의 코드에서는 if문으로 restaurant.orderPizza가 존재할 때만 실행되게 했는데 이 코드를 간단하게 &&을 사용하여 표현할 수 있다. &&는 앞 value가 true이면 뒤의 값이 나오기 때문이다.따라서 둘은 같은 로직이다.