Javascript short circuiting (AND &&) , Nullish Coalescing Operator (??)

논리 연산자에는 boolean 값만 다루지 않는다.

논리 연산자 사용

1. 어떤 데이터형을 써도 된다.

2. 어떤 데이터형을 반환해도 된다.

3. short - circuiting

OR 연산자의 경우 첫번째 피연산자가 truthy value 이면 첫번째 피연산자를 반환한다.

1 2 3 4 5 6

console.log(3 || 'www'); //3 console.log('' || 'www'); //www console.log(true || 0); //true console.log(undefined || null); //null   console.log(undefined || null || 0 || 'hello' || 12); //hello

cs

 OR 연산자는 맨 처음으로 truthy 값이 나올 때 그 값을 반환하는 역할을 한다. 만약 없다면 마지막의 값을 반환한다.

 OR 연산자를 true or false 의 boolean 값으로 활용했을 때에도 OR 연산자는 맨 처음의 true 값을 반환했을 뿐이다.

좀 더 실용적인 활용을 해보자

1 2

const exsist = arr[6] || 10; console.log(exsist);

cs

배열 arr 의 6번째 자리는 할당되지 않았다. 따라서 undefined를 반환하고 short circulting 에 의해서 exsist에는 10이 할당된다. 세자리 표현식이나 if /else를 이용하여도 이 코드를 작성할 수는 있지만 소요가 크다. 대신 논리 연산자를 사용해서 간단히 작성할 수 있다.

ES2020 뒤에 나온 Nulish Coalescing Operator 는 OR 연산자와 비슷하게 작동하지만 차이점이 있다. OR 연산자는 모든 falshy value 를 pass 하는 반면에 (??)연산자는 null 과 undefined 만을 falshy value로 간주하기 때문이다.

default 값으로 OR 논리 연산자를 사용하면 0 이 할당되어 있음에도 falsy value라 default value 설정이 어려울 수 있다. 여기서 ?? 연산자를 사용하면 0 이나 ' ' empty value 가 있어도 falsy value 로 간주하지 않아 코드 조건을 추가할 필요 없이 간단하고 강력하게 사용할 수 있다.

AND 논리 연산자에 대해 알아보자.

AND 연산자는 OR 연산자와는 반대로 작용한다. AND 연산자가 처음으로 falsy value 를 찾는다면 그 값을 반환한다. 모두 truthy value 라면 마지막 값을 반환한다.

실용적인 활용을 해보자.

1 2 3 4 5

if(restaurant.orderPizza){   restaurant.orderPizza('mushroom'); }   restaurant.orderPizza && restaurant.orderPizza('mushroom');

cs

&& 논리연산자는 처음의 falshy 값을 반환함을 생각하면 restaurant.orderPizza 가 없다면 아무일도 일어나지 않고 있다면 다음 함수를 실행하는 방식으로 활용가능하다.