안녕하세요. 박기린 입니다.
이전에 설명드린 논리 연산자를 이용해서, 조건문을 쉽게 구현하는 방법에 대해 알아보겠습니다.
|| (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의 존재 여부를 검사하고, 두 번째 단락에서 코드를 실행할 수 있습니다.
'JS > JavaScript 강의' 카테고리의 다른 글
37. Logical Assignment Operators (논리 할당 연산자) (0) | 2022.11.10 |
---|---|
36. Nullish Coalescing Operator (Null 병합 연산자) (0) | 2022.11.09 |
34. Rest Parameters (나머지 매개변수) (0) | 2022.11.07 |
33. Spread Operator (전개 연산자) (0) | 2022.11.03 |
32. Object Destructuring (객체 구조분해 할당, 비구조화) (0) | 2022.11.02 |