[JS] Short Circuiting, The Nullish Operator(??), Logical Assignment Operators
강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy)
Section 9 - Data Structures, Modern Operators and Strings
Short Circuiting(&& and ||)
or(||) short circuiting
Use Any data type, return ANY data type
console.log(3 || 'Jonas'); // 3
console.log('' || 'Jonas'); // Jonas '' 가 falsy value 이므로
console.log(true || 0); // true
console.log(undefined || null); // 앞에 있는게 falsy라 뒤의 값 null 출력
console.log(undefined || 0 || '' || 'Hello' || 23 || null); // Hello
삼항조건 연산식
const guests1 = restaurant.numGuests ? restaurant.numGuests : 10;
console.log(guests1); //10
short circuiting 이용하기 (더 간단한 방식)
const guests2 = restaurant.numGuests || 10;
console.log(guests2); // 10
and(&&) short circuiting
console.log('-----AND-----');
console.log(0 && 'Jonas'); //0 falsy value 인 0 을 바로 return 한다.
console.log(7 && 'Jonas'); // Jonas
console.log('Hello' && 23 && null && 'jonas'); // null
Practical example
if (restaurant.orderPizza) {
restaurant.orderPizza('mushrooms', 'spinach');
} // mushrooms ['spinach']
restaurant.orderPizza && restaurant.orderPizza('mushrooms', 'spinach'); // mushrooms ['spinach']
요약)
A || B : A가 아니면 B
A && B : A가 맞으면 B
The Nullish Coalescing Operator(??)
기존의 코드
restaurant.numGuests = 0;
const guests = restaurant.numGuests || 10;
console.log(guests); // 10; 0 is falsy value
the Nullish Coalescing Operator로 문제 해결하기
->find nullish value instead of falsy value
참고) nullish value : null and undefined (NOT 0 or '')
const guestCorrect = restaurant.numGuests ?? 10;
console.log(guestCorrect); // 0
Logical Assignment Operators
const rest1 = {
name: 'Capri',
//numGuests: 20,
numGuests: 0,
};
const rest2 = {
name: 'La Piazza',
owner: 'Giovanni Rossi',
};
OR assignment operator
rest1.numGuests = rest1.numGuests || 10;
rest2.numGuests = rest2.numGuests || 10;
rest1.numGuests ||= 10;
rest2.numGuests ||= 10;
nullish assignment operator(null or undefined)
rest1.numGuests ??= 10;
rest2.numGuests ??= 10;
AND assignment operator
//rest1.owner = rest1.owner && '<ANONYMOUS>';
//rest2.owner = rest2.owner && '<ANONYMOUS>';
rest1.owner &&= '<ANONYMOUS>';
rest2.owner &&= '<ANONYMOUS>';
console.log(rest1.owner); //undefined why? rest1.owner 값이 존재하지 않으므로!
console.log(rest2.owner); //<ANONYMOUS> rest2.owner 값이 존재하므로!
console.log(rest1.numGuests); //20 //0
console.log(rest2.numGuests); //10 //10
Author And Source
이 문제에 관하여([JS] Short Circuiting, The Nullish Operator(??), Logical Assignment Operators), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hoje15v/Today-I-Learned-Short-Circuiting-The-Nullish-Operator-Logical-Assignment-Operators
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const rest1 = {
name: 'Capri',
//numGuests: 20,
numGuests: 0,
};
const rest2 = {
name: 'La Piazza',
owner: 'Giovanni Rossi',
};
rest1.numGuests = rest1.numGuests || 10;
rest2.numGuests = rest2.numGuests || 10;
rest1.numGuests ||= 10;
rest2.numGuests ||= 10;
rest1.numGuests ??= 10;
rest2.numGuests ??= 10;
//rest1.owner = rest1.owner && '<ANONYMOUS>';
//rest2.owner = rest2.owner && '<ANONYMOUS>';
rest1.owner &&= '<ANONYMOUS>';
rest2.owner &&= '<ANONYMOUS>';
console.log(rest1.owner); //undefined why? rest1.owner 값이 존재하지 않으므로!
console.log(rest2.owner); //<ANONYMOUS> rest2.owner 값이 존재하므로!
console.log(rest1.numGuests); //20 //0
console.log(rest2.numGuests); //10 //10
Author And Source
이 문제에 관하여([JS] Short Circuiting, The Nullish Operator(??), Logical Assignment Operators), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoje15v/Today-I-Learned-Short-Circuiting-The-Nullish-Operator-Logical-Assignment-Operators저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)