본문 바로가기
JS/JavaScript 강의

35. Short Circuiting (단락 회로 평가)

by 박기린 2022. 11. 8.

안녕하세요. 박기린 입니다.

이전에 설명드린 논리 연산자를 이용해서, 조건문을 쉽게 구현하는 방법에 대해 알아보겠습니다.

 

 

|| (OR 연산자)

console.log(3 || 'giraffe'); // 3
console.log('' || 'giraffe'); // Jonas
console.log(true || 0); // true
console.log(undefined || null); // null
console.log(undefined || 0 || '' || 'Hello' || 23 || null); // Hello

OR 연산자의 경우, 단락의 첫 번째 값이 true이면, 즉시 첫 번째 값을 반환합니다. (이해가 안 되시면, 논리 연산자 글을 읽고 오시는 것을 추천드립니다.)

JS는 OR 연산자 단락에서 하나만 참이면 전부 참이기 때문에, 참을 만나면 바로 evaluation(평가) 합니다.

 

 

 

 

//restaurant.numGuests는 존재하지 않는 property이다.
const guests = restaurant.numGuests ? restaurant.numGuests : 10; // 존재하지 않을 경우를 대비해 10을
console.log(guests); // 10

위와 같은 삼항 연산자 식이 있다고 가정합니다. 이를 OR 연산자로 대체할 수 있습니다.

 

const guests = restaurant.numGuests || 10;
console.log(guests); // 10

restaurant라는 객체에 numGuests라는 property가 존재하지 않아 undefined이기 때문에, || 연산자에서 거짓인 요소가 됩니다.

그러면 바로 다음 항을 evaluation하고, 이때 10은 참인 값이기 때문에 10을 반환합니다.

 

 

! - 이 방식의 문제점 : 만약 레스토랑의 실제 게스트멤버 수가 0일 경우에도, 0은 falsy한 value이기 때문에 기본값 10을 return한다는 문제가 있습니다. 이때는 Nullish Coalescing Operator(??)를 사용하면 됩니다. (이에 대한 설명글을 작성 후 링크 연동 예정)

 

 

 

 

 


&& (AND 연산자)

AND(&&) 연산자는 OR(||) 연산자와 반대되는 방식으로 작동합니다.

console.log(0 && 'giraffe'); // 0
console.log(7 && 'giraffe'); // giraffe

첫 번째 값이 거짓이면, 바로 그 거짓인 값을 return 합니다.

모두 참이면, 가장 마지막 값을 return 합니다.

 

OR은 참인 값이 보일 때까지, AND는 거짓인 값이 보일 때까지!

 

 

 

 

 

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

위와 같은 if 조건문 식이 있다고 가정합시다. 

restaurant라는 객체에 orderPizza라는 property가 존재하는 지를 미리 체크하기 위해서 if문을 위처럼 사용합니다.

이럴 때 &&(AND 연산자)를 사용할 수 있습니다.

 

 

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

&&(AND 연산자)로 property의 존재 여부를 검사하고, 두 번째 단락에서 코드를 실행할 수 있습니다.

반응형