Short Circuiting

hwibaski·2021년 9월 13일
0

TypeScript & JavaScript

목록 보기
7/15
post-custom-banner

1. Or, ||


처음으로 truthy한 값을 return 한다.
truthy 값이 없을 시 가장 우측의 값을 return 한다.

기본 사용법


(3 || 'hwimin')                 // 3
('' || 'hwimin')                // 'hwimin'
(null || 0 || false)            // false
(true || 0)                     // true
(undefined || null)             // null
(null || undefined)             // undefined
(undefined || 0 || '' || 'Hello' || 23) // 'Hello'

실용적인 예제


const restaurant = {
  numGuests: '',
  orderPizza: function(...ingredients) {
    console.log(ingredients)
  }
}

// numGuests가 true이면 numguest할당, 아니면 10 할당
const guest1 = restaurant.numGuests ? restaurant.numGuests : 10
console.log(guest1)                				// 10

// numGuests는 falsy이므로 10을 할당
const guest2 = restaurant.numGuests || 10
console.log(guest2)               				// 10

// retaurant.numGuests가 0명인 경우에는 어떻게 될까?
restaurant.numGuests = 0

||을 사용해서 0을 할당하도록 처리해야하지만 0은 ||&&에서 falsy값으로 처리되기 때문에 적절하게 처리할 수 없다. 그럴 때는 ??을 사용해야한다.


주의사항


const restaurant = {
  numGuests: 0,
}

// retaurant.numGuests가 0명인 경우에는 어떻게 될까?
// 0을 falsy 취급해서 10이 할당되어버린다.
// 이 경우에는 ??을 사용해줘야한다
const guest = restaurant.numGuests || 10
console.log(guest)               			// 10


2. And, &&


처음으로 falsy한 값을 return 한다.
falsy 값이 없을 시 가장 우측의 값을 return 한다.

기본 사용법


(0 && 'hwimin')							// 0
(7 && 'hwimin')							// 'hwimin'
('Hello' && 23 && null && 'hwimin')   			        //  null

실용적 사용법


어떠한 객체내에 특정 메소드가 있다면 그것을 사용하고 싶다.
그 메소드가 있다면 상관없지만 그 메소드가 없다면 error를 부른다.
때 조건을 붙혀주면 안전하다.

//retaurant.orderPizza가 있다면 body에 있는 것을 실행해줘
if (restaurant.orderPizza) {
  restaurant.orderPizza('mushrooms', 'spinach')
}

//retaurant.orderpizza가 없을 경우 falsy이므로 && 뒤는 실행되지 않는다.
restaurant.orderPizza && restaurant.orderPizza('mushrooms', 'spinach')

Nullish coalescing operator, ??


&&||는 0을 falsy로 처리한다.
??는 null과 undefined만 처리한다.

const restaurant = {
  numGuests: 0,
}


// ?? nullish coalescing operator
// numGuests 0을 falsy로 취급함
const guest3 = restaurant.numGuests ? restaurant.numGuests : 10
console.log(guest1)    									// 10

// Nullish: null and undefined (NOT 0 or '')
const guest4 = restaurant.numGuests ?? 10
console.log(guest4)										// 0
post-custom-banner

0개의 댓글