๐Ÿคฉ JS(ES11) Optional chaining & Nullish Coalescing Operator

gunwooko

Gunwoo

Posted on March 13, 2021

๐Ÿคฉ JS(ES11) Optional chaining & Nullish Coalescing Operator

๐Ÿ“ ๊ถ๊ธˆํ•œ ๋ชจ๋“  ๊ฒƒ์„ ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค.
๐Ÿ˜Ž ๊ธฐ๋ก์—์„œ ๋ฉˆ์ถ”์ง€ ์•Š๊ณ  ๋‚˜์˜ ๊ฒƒ์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
๐Ÿ™ˆ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ๋‹ค๋ฉด ์–ธ์ œ๋“ ์ง€ ๋Œ“๊ธ€์— ๋‚จ๊ฒจ์ฃผ์„ธ์š” :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); // ??
Enter fullscreen mode Exit fullscreen mode

์œ„์™€ ๊ฐ™์ด ์ž‘์„ฑํ•œ๋‹ค๋ฉด ์–ด๋–ค ์ผ์ด ์ผ์–ด๋‚ ๊นŒ?

๋‘๋ฒˆ์งธ ํ•จ์ˆ˜ ํ˜ธ์ถœ๋•Œ์— ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค. ์—ฌ๊ธฐ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„  ์กฐ๊ฑด๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์‚ผํ•ญ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๊ณ , ๋˜๋Š” && ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ•ด๊ฒฐํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์™€ ๊ฐ™์ด ํ•ด๊ฒฐํ•˜๊ฒŒ ๋˜๋ฉด ๊ฐ€๋…์„ฑ๋„ ์•Š์ข‹๊ณ , ์ฝ”๋“œ๊ฐ€ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ๋ฐ˜๋ณต๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

function printCat(person){
  console.log(person.pet && person.pet.cat && person.pet.cat.name);
};
printCat(avengers2); // undefined
Enter fullscreen mode Exit fullscreen mode

๊ทธ๋Ÿฌ๋‚˜ ์ด์ œ ES11์˜ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์ธ Optional chaining๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ์ง๊ด€์ ์ด๊ณ  ์งง์€ ์ฝ”๋“œ๋กœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค. ๐Ÿคฉ

function printCat(person){
  console.log(person.pet?.cat?.name);
};
Enter fullscreen mode Exit fullscreen mode

๐Ÿ˜Ž 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 ๊ฐ€ ๋‚˜์˜จ๋‹ค.
Enter fullscreen mode Exit fullscreen mode

์—ฌ๊ธฐ์„œ OR ์—ฐ์‚ฐ์ž๋ฅผ ์ž˜ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์–‘ํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ,

// ๋งŒ์ผ ์‚ฌ์šฉ์ž๊ฐ€ ์ž์‹ ์˜ ์ด๋ฆ„์„ ๋นˆ๊ณต๋ฐฑ์œผ๋กœ ๋“ฑ๋กํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด?
const name = '';
const userName = name || 'Guest';
console.log(userName); // Guest ๊ฐ€ ๋‚˜์˜จ๋‹ค. 

// ๋งŒ์ผ ์ˆซ์ž 0์„ ๋“ฑ๋กํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด?
const num = 0;
const crimeRecord = num || 'Undefined';
console.log(crimeRecord); // Undefined ๊ฐ€ ๋‚˜์˜จ๋‹ค.
Enter fullscreen mode Exit fullscreen mode

์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ์˜ˆ๋ฐฉํ•˜๊ณ  ์กฐ๊ธˆ๋” ๋ช…ํ™•ํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด 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์ด ๋‚˜์˜จ๋‹ค.
Enter fullscreen mode Exit fullscreen mode
๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
gunwooko
Gunwoo

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

ยฉ TheLazy.dev

About