[JS] Optional chaining, Nullish coalescing operator 🛒

Optional chaining, Nullish coalescing operator를 사용하여 코드를 단순하고 명확하게 구성할 수 있습니다.

 

코드를 구성함에 있어 많은 변수를 참조하게 됩니다.

 

변수를 참조함에 있어 사용되어지는사용되는 구조 분해 할당 등의 표현식 정도는 대중적으로 편리하게 사용되는 표현식이라고 할 수 있습니다.

 

하지만 구조 분해 할당을 사용하여 변수를 참조하다 보면..

구조 분해 대상이 Null, undefined 등의 객체가 아닌 데이터일 경우 아래와 같이 코드를 작성하게 됩니다.

// Case. 1
const { name } = people ? people : {}

// Case 2
let name = null
if (people) {
	name = people.name
}

// ... etc

이런 경우를 Optional chaining 표현식으로 아래와 같이 개선할 수 있습니다.

const name = people?.name

이 표현식은 객체 데이터의 depth가 더욱 깊어질수록 유용합니다.

const third = people?.first?.second?.third

 

Nullish coalescing 표현식은 해당 값이 존재하지 않을 경우(null, undefined) 해당 표현식 오른쪽에 있는 데이터를 반환합니다.

앞서 Optional chaining 예제의 Case. 1 의 코드를 다음과 같이 더욱 깔끔하게 구성할 수 있습니다.

const { name } = people ?? {}

 혹은 아래와 같은 예외 처리를 통한 특정 값이 할당 되어야 하는 경우에 사용될 수 있습니다.

// Conditional operator
let result_first = people ? people : 'No people'

// Nullish coalescing operator
let result_second = people ?? 'No people'

 

기존에 ||(OR) 연산자를 사용하여 위의 사양을 충분히 충족할 수 있다고 생각하실 수 있습니다.

const people = people || 'No people'

하지만 위와 같이 OR 연산자로 구현했을 때에는 조금의 위험이 따릅니다.

연산 시 OR 연산자가 'people'를 boolean으로 변환시켜 연산을 수행하기 때문입니다.

Nullish coalescing operator는 이러한 변환을 하지 않고 null, undefined 만 비교하여 판단합니다.

 

위와 같은 이유로 OR 연산자를 통해 구현하는것 보다는, Nullish coalescing operator를 사용하여 구현하는 것이 바람직해 보입니다.

 

Source

GitHub - SungeunP/optional-chaining_nullish-coalescing-operator: Optional chaining과 Nullish coalescing operator의 특성을