๐คฉ JS(ES11) Optional chaining & Nullish Coalescing Operator
Gunwoo
Posted on March 13, 2021
๐ ๊ถ๊ธํ ๋ชจ๋ ๊ฒ์ ๊ธฐ๋กํฉ๋๋ค.
๐ ๊ธฐ๋ก์์ ๋ฉ์ถ์ง ์๊ณ ๋์ ๊ฒ์ผ๋ก ๋ง๋ญ๋๋ค.
๐ ์๋ชป๋ ์ ๋ณด๊ฐ ์๋ค๋ฉด ์ธ์ ๋ ์ง ๋๊ธ์ ๋จ๊ฒจ์ฃผ์ธ์ :D
๐ Optional chaining
const avengers1 = {
title: 'Tony Stark',
pet:{
cat: {
name: 'Jarvis'
}
}
};
const avengers2 = {
title: 'Captain America',
};
function printCat(person){
console.log(person.pet.cat.name);
};
printCat(avengers1); // ??
printCat(avengers2); // ??
์์ ๊ฐ์ด ์์ฑํ๋ค๋ฉด ์ด๋ค ์ผ์ด ์ผ์ด๋ ๊น?
๋๋ฒ์งธ ํจ์ ํธ์ถ๋์ ์๋ฌ๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค. ์ฌ๊ธฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ ์กฐ๊ฑด๋ฌธ์ ์ฌ์ฉํ ์๋ ์๊ณ , ์ผํญ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ ์๋ ์๊ณ , ๋๋ && ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด์ ํด๊ฒฐํ ์๋ ์๋ค. ๊ทธ๋ฌ๋ ์ด์ ๊ฐ์ด ํด๊ฒฐํ๊ฒ ๋๋ฉด ๊ฐ๋
์ฑ๋ ์์ข๊ณ , ์ฝ๋๊ฐ ๋ถํ์ํ๊ฒ ๋ฐ๋ณต๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
function printCat(person){
console.log(person.pet && person.pet.cat && person.pet.cat.name);
};
printCat(avengers2); // undefined
๊ทธ๋ฌ๋ ์ด์ ES11์ ์๋ก์ด ๊ธฐ๋ฅ์ธ Optional chaining๋ฅผ ํ์ฉํ๋ฉด ์ด๋ ๊ฒ ์ง๊ด์ ์ด๊ณ ์งง์ ์ฝ๋๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค. ๐คฉ
function printCat(person){
console.log(person.pet?.cat?.name);
};
๐ Nullish Coalescing Operator
OR(||)์ฐ์ฐ์๋ฅผ ๋ณด๊ฒ๋๋ฉด false, '', 0, null, undefined ๋ฑ์ false๋ก ๊ฐ์ฃผ๋์ด์ง๋ค.
// OR ์ฐ์ฐ์๋ฅผ ์๋์ ๊ฐ์ด ์ฌ์ฉํ๋ฉด ์์ ์๋ ๊ฐ์ด false์ธ ๊ฒฝ์ฐ ๋ค์ ๊ฐ์ด ์ถ๋ ฅ๋๋ค.
const name = 'Hulk';
const userName = name || 'Guest';
console.log(userName); // Hulk ๊ฐ ๋์จ๋ค.
// ๋ง์ผ null๊ณผ ๊ฐ์ falsyํ ๊ฐ์ด ํ ๋น๋๋ฉด, name์ ๊ฐ์ด false์ด๋ฏ๋ก 'Guest'๊ฐ ์ถ๋ ฅ๋๋ค.
const name = null;
const userName = name || 'Guest';
console.log(userName); // Guest ๊ฐ ๋์จ๋ค.
์ฌ๊ธฐ์ OR ์ฐ์ฐ์๋ฅผ ์ ์ดํดํ์ง ๋ชปํ๊ณ ์ฌ์ฉํ๋ฉด ๋ค์ํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋๋ฐ,
// ๋ง์ผ ์ฌ์ฉ์๊ฐ ์์ ์ ์ด๋ฆ์ ๋น๊ณต๋ฐฑ์ผ๋ก ๋ฑ๋กํ๊ณ ์ถ๋ค๋ฉด?
const name = '';
const userName = name || 'Guest';
console.log(userName); // Guest ๊ฐ ๋์จ๋ค.
// ๋ง์ผ ์ซ์ 0์ ๋ฑ๋กํ๊ณ ์ถ๋ค๋ฉด?
const num = 0;
const crimeRecord = num || 'Undefined';
console.log(crimeRecord); // Undefined ๊ฐ ๋์จ๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ์๋ฐฉํ๊ณ ์กฐ๊ธ๋ ๋ช
ํํ ์ฝ๋๋ฅผ ์์ฑํ๊ณ ์ถ๋ค๋ฉด Nullish Coalescing Operator๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ๐
// ๋ง์ผ ์ฌ์ฉ์๊ฐ ์์ ์ ์ด๋ฆ์ ๋น๊ณต๋ฐฑ์ผ๋ก ๋ฑ๋กํ๊ณ ์ถ๋ค๋ฉด?
const name = '';
const userName = name ?? 'Guest';
// name์ด๋ ๋ณ์์ ๊ฐ์ด ์๋ค๋ฉด name์ ์ฌ์ฉํ๊ณ , ์๋ค๋ฉด 'Guest'๋ฅผ ์ฌ์ฉํ์
console.log(userName); // '' ๊ฐ ๋์จ๋ค.
// ๋ง์ผ ์ซ์ 0์ ๋ฑ๋กํ๊ณ ์ถ๋ค๋ฉด?
const num = 0;
const crimeRecord = num ?? 'Undefined';
// num์ด๋ ๋ณ์๊ฐ ๊ฐ์ด ์๋ค๋ฉด num์ ์ฌ์ฉํ๊ณ , ์๋ค๋ฉด 'Undefined'๋ฅผ ์ฌ์ฉํ์
console.log(crimeRecord); // 0์ด ๋์จ๋ค.
Posted on March 13, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024