https://www.davidlang.tech/tags/es2020/ Recent content in Es2020 on David Lang Hugo en Sat, 28 Nov 2020 00:00:00 +0000 https://www.davidlang.tech/posts/modern-javascript-es2020-top-features-you-should-know/ Sat, 28 Nov 2020 00:00:00 +0000 https://www.davidlang.tech/posts/modern-javascript-es2020-top-features-you-should-know/ <p>ECMAScript 2020 added practical features that reduce boilerplate and improve null-safety. If you are still avoiding optional chaining, now is the time to adopt it.</p> <h2 id="optional-chaining-and-nullish-coalescing">Optional Chaining and Nullish Coalescing</h2> <div class="highlight"><pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#268bd2">const</span> city <span style="color:#719e07">=</span> user<span style="color:#719e07">?</span>.address<span style="color:#719e07">?</span>.city <span style="color:#719e07">??</span> <span style="color:#2aa198">&#39;Unknown&#39;</span>; </span></span></code></pre></div><p><code>?.</code> short-circuits on <code>null</code> or <code>undefined</code>. <code>??</code> returns the right side only when the left is <code>null</code> or <code>undefined</code>-unlike <code>||</code>, it preserves <code>0</code> and <code>''</code>.</p> <h2 id="bigint-and-globalthis">BigInt and globalThis</h2> <p><code>BigInt</code> handles integers beyond <code>Number.MAX_SAFE_INTEGER</code>. <code>globalThis</code> provides a standard way to access the global object in browsers and Node.</p>