<div id="readability-page-1" class="page"><div id="wrap">
 <article id="post-javascript-optional-chaining" itemscope="" itemprop="blogPost">
 <div>
 
 <header>
 
 
 
 

 </header>
 
 
 
 
 
 <div itemprop="articleBody">
 

 

 

 <img src="https://user-images.githubusercontent.com/33862991/158588462-b41465bb-3dc5-468e-91fd-61f6033d4bfa.jpg" alt="출처 : Unsplash - @amyhirschi https://unsplash.com/photos/9EFF087BPXk">
<figure><table><tbody><tr><td><pre>1 2 3 4 5 </pre></td><td><pre>let myMap = new Map(); myMap.set("foo", {name: "baz", desc: "inga"}); let nameBar = myMap.get("bar") &amp;&amp; myMap.get("bar").name; console.log(nameBar); </pre></td></tr></tbody></table></figure>

위의 코드는 <code>myMap</code>이라는 자료구조에서 2가지를 검증하고 데이터를 파싱하는 코드이다.
<ol>
<li>bar 라는 key가 존재하는지 확인한다. nulish면 <code>undefined</code>를 반환한다.</li>
<li>bar라는 key가 존재하면, 해당 value에서 <code>name</code>이라는 속성이 있는지 확인한다. nulish면 <code>undefined</code>를 반환한다.</li>
</ol>
결국 myMap이라는 자료구조에서 name 프로퍼티의 값을 가져오는 코드인데, 이를 위해 상위타입이 nulish인지 여부를 검증을 해야했다. 이 경우에 옵셔널 체이닝(<code>?.</code>)을 사용하면 자동으로 nuslish 체크를 해주면서 코드의 가독성을 높혀줄 수 있다.
옵셔널 체이닝을 적용한 코드는 아래와 같다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 </pre></td><td><pre>let myMap = new Map(); myMap.set("foo", {name: "baz", desc: "inga"}); let nameBar = myMap.get("bar")?.name; console.log(nameBar); </pre></td></tr></tbody></table></figure>



옵셔널 체이닝과 함께사용하면 좋을 널 병합 연산자(<code>??</code>)도 있다.
nulish 이면, 명시한 값 또는 객체를 할당하는 연산자이다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 </pre></td><td><pre>let myMap = new Map(); myMap.set("foo", {name: "baz", desc: "inga"}); let nameBar = myMap.get("bar")?.name ?? "unkown"; console.log(nameBar); </pre></td></tr></tbody></table></figure>

 

<h4 id="출처"><a href="#출처" title="출처"></a>출처</h4>MDN - 옵셔널 체이닝
<a target="_blank" rel="noopener" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining</a>

 </div>
 </div>
	 
	
	
 

</article>
 </div></div>

Js - 옵셔널 체이닝

댓글