[Javascript] 알아두면 좋은 ES11 최신 문법 : Optional Chaining, Nullish Coalescing

[Javascript] 알아두면 좋은 ES11 최신 문법 : Optional Chaining, Nullish Coalescing 

 

 

 

 

Optional Chaining

 

 

console.log(person.job?.manager?.name);

 

 

 

 

다음과 같이 person1, person2라는 Object가 있다.

 

const person1 = {
	name: 'Haenny',
	job: {
		title: 'S/W Engineer',
		manager: {
			name: 'Chris',
		}
	}
};

const person2 = {
	name: 'Bob'
}

 

 

 

 

위의 두 객체를 다음과 같은식으로 작성하면 어플리케이션이 정상적으로 작동하지 않는다.

 

function printManager(person) {
	console.log(person.job.manager.name);
}

printManager(person1);	// Chris
printManager(person2);	// Uncaught TypeError: Cannot read property 'manager' of undefined at printManager

 

 

이 에러를 해결하기 위해서는 null 체크 혹은 and 연산자를 통해 해결할 수 있다.

 

// null 체크
function printManager(person) {
	console.log(person.job ? person.job.manager ? person.job.manager.name : undefined : undefined);
}

// && 연산자
function printManager(person) {
	console.log(person.job && person.job.manager && person.job.manager.name);
}

 

하지만 이는 코드가 반복적으로 중복되는 것을 볼 수 있다.

 

 

 

 

Optional Chaining 사용

 

function printManager(person) {
	console.log(person.job?.manager?.name);
}

 

이 문법은 Kotlin(코틀린)과 Swift(스위프트) 같은 최신언어에도 포함되어 있는 기능이다.

 

 

 

---

 

 

 

Nullish Coalescing Operator

 

const name = '';
const userName = name ?? 'Guest';
console.log(userName); 

const num = 0;
const message = numm ?? 'undefined';
console.log(message); 

 

 

OR 연산자 :   A || B 일 때, A가 false 이면 B가 출력된다

 

// OR operator
// false : false, '', 0, null, undefined
{
	const name = 'Haenny';
	const userName = name || 'Guest';
	console.log(userName); 	// Haenny
}

{
	const name = null;
	const userName = name || 'Guest';
	console.log(userName); 	// Guest
}

 

 

이 OR 연산자를 사용할 때, 만약 name이 ' '인 경우는 'Guest' 출력이 아닌 ' '값으로 아무런 출력을 하고 싶지 않을 때도 ' '는 false로 간주되어  'Geust'가 할당된다.

 

또 한가지 예제를 보면, num을 0으로 할당했지만 0은 false로 간주되기 때문에 'undefined'이 출력되는 것을 볼 수 있다.

 

{
	const num = 0;
	const message = num || 'undefined';
	console.log(message);		// undefined
}

 

 

이렇게 OR 연산자는 이런 특징을 잘 이해하지 못한다면 수많은 버그가 발생할 수 있다.

 

조금 더 명확하게 코딩을 하기위해 Nullish Coalescing을 이용하면 된다.

 

 

 

Nullish Coalescing 사용

 

{
	const name = '';
	const userName = name ?? 'Guest';
	console.log(userName);		// ''
}

{
	const num = 0;
	const message = numm ?? 'undefined';
	console.log(message);		// 0
}