BLOG

7 New JavaScript Features You Might Have Overlooked

March 31, 2022
Published by

Keeping up with all the ECMAScript spec is not an easy task due to its constant updates, here we summed up the highlights from ES11.

Javascript has new updates every year, and there are a number of features introduced by the JS spec every year. Then it takes some time for the browsers, Node.js, etc. to roll them in, and before you know it, there’s a big pile of new JavaScript features you might have lost.

Having this rapid update cycle, rounded up the ES11 (ECMAScript 11) features that you may have missed. They include some ergonomic and other modern improvements. Let’s take a look.

Optional chaining

Optional chaining is one of those simple-but-effective nice things that just make life a little easier for JS lovers. This feature allows you to navigate object and function chains with a shorthand for dealing with null or undefined values. 

Optional chaining works for simple cases like nested object data, for functions that return non-existent values, and even for functions that don’t exist as member methods on objects. 

es11 javascript

The code is more concise in expressing just what you want: If the thing exists, navigate to it; if not, return undefined.

globalThis Feature

globalThis, is an abstraction of the global object available to the current context. The most well-known and ancient of these is the window object found in JavaScript running in the browser. But environments like Node.js and web workers have their own root objects that serve precisely the same purpose: global and self, respectively.

globalThis makes code that is more portable, also eliminates existence checks by wrapping all of these root objects in the one identifier that resolves to the global root object in whatever environment the code is executing in.

es11 javascript

This is a code example to create a polyfill.

BigInt

Before ES11 the largest integer that could be referenced in JavaScript safely was Number.MAX_SAFE_INTEGER, which resolves to 9007199254740991 (aka 2^53 – 1).  This may not be a daily problem for experienced developers, but for many applications, it’s an amusingly tiny magnitude requiring programmers to use a wrapper like big-integer.

When using the traditional Number type to represent such large numbers, you will encounter unexpected rounding. (Notice these comments all apply to very small numbers as well, i.e. -2^53 – 1).

With ES11, the BigInt type is built-in for these scenarios. You can define it by adding an n to the end of a number, as in mySafeBigNumber = 9007199254740992n.

This is really a new type, not just some sleight of hand around the existing Number type. If you do typeof 12, you get a number.  If you do typeof myBigNumber, you get bigInt, but, if you try anything nefarious like myBigNumber – 12, you will get an error: “Cannot mix BigInt and other types, use explicit conversions.”

BigInt also supports representation in binary, oct, and hex notation and supports all the typical math operators you might expect except the unary plus operator, whose purpose is to convert a value to a Number. The reason for this is rather obscure, in avoiding breaking changes to existing non-JS asm code.

es11 javascript

Nullish Coalescing

Nullish Coalescing joins optional chaining in aiding us in our dealings with nullish values, also it’s a new symbol, the double question mark ??. It is a logical operator with similar behavior to the logical OR operator ||.

The difference between ?? and || is in how the operator handles nullish versus falsy values. Most JavaScript developers are familiar with how the language treats non-boolean values when testing them as true/false. For better optics of this, false, 0, null, empty strings, and undefined are considered false and everything else resolves to true.

Let’s see an example of how nullish coalescing works

es11 javascript

Dynamic Imports

This new feature introduces an advancement in how you can import modules, by allowing for arbitrary placement of imports that are loaded asynchronously. This is also known as code splitting, something that has been done via build tools for years now. Dynamic imports is another example of the spec catching up with in-the-wild practices.

es11 javascript

Promise.allSettled()

The promise.allSettled() method allows you to observe the results of a set of promises whether they are fulfilled or rejected. This can be contrasted to promise.all(), which will end with a rejected promise or error non-promise. promise.allSettled() returns an array of objects describing the results of each promise.

This is useful when watching a group of unrelated promises. That is, you want to know what happened to them all, even if some in the middle fail.

The catch lambda does not fire in this case. Instead, the then clause executes, and an array with key:value content is returned. The key takeaway here is that the third promise has run and we can see its outcome even though promise2 failed before it.

Export Star Syntax

This feature adds the ability to export *(Star syntax) from a module. You could already import * from another module, but now you can export with the same command

This is a kind of module chaining, allowing you to export everything from another module from inside the current module, quite useful if you are building a module that unites other modules into its API, for example.

A Constant-Updated Spec

When you are working in the tech industry you will undoubtedly experience the constant evolution of things. Programming languages are one of the most fundamental expressions of all, where much of the philosophy of computer science meets the reality of day-to-day coding. With ES11 JS continues to grow in response to those forces with its yearly release schedule.


Related Posts
gaming

Save Your Progress: Gaming Is About To Change

  • Business Analysis
  • Software Development
  • . . .
gaming as a service

Gaming as a Service is Having a Moment

  • Business Analysis
  • DevOps
devops in healthcare

Prescription for Efficiency and Innovation: DevOps

  • Business Analysis
  • DevOps
  • . . .
microsoft azure

Preparing for The Workspace of The Future

  • Azure
  • DevOps
data lakes

Three Key Aspects To Understanding Data Lakes

  • DevOps
  • Nearshore Software Development
outsourcing

Bridging The Talent Gap: Latin America’s Outsourcing Boom

  • Agile
  • Nearshoring
  • . . .
onboarding

Effective Onboarding for Software Development Teams

  • Agile
  • Nearshore Software Development
  • . . .
Amazon IVS

Amazon IVS Simplifying Choice and Livestreams

  • Amazon Web Services
  • Business Analysis
  • . . .
data modeling

A Method to the Info. Madness

  • Agile
  • Databases
  • . . .
talent cloud

Recruitment Made Easy For Everyone

  • Business Analysis
  • Databases
  • . . .
software complexity

Simple Means Better Software Design

  • Business Analysis
  • Nearshore Software Development
  • . . .
trojan technologies

Trojan Source: The Bug That Exploits Invisible Vulnerabilities

  • Software Development

Kanban: Workflow Management Made Simple

  • Agile

Do Telehealth Solutions Need HIPAA Compliance?

  • Health & Wellness
  • Software Development

Top 6 Tips to Start Project Management Like a Pro!

  • Agile
  • Nearshore Software Development
  • . . .
staff augmentation talent lifecycle

Talent in Staff Augmentation | You’re Hired!

  • Nearshore Software Development
  • Software Development
  • . . .
staff augmentation vs managed services model

Staff Augmentation | When is it Right for You?

  • Agile
  • Business Analysis
  • . . .
Teravision Hackathon

Teravision Hackathon 2020|Our Last Experience

  • Mobile App Development
  • Software Development
azure logo

How has Azure Responded to the Pandemic?

  • Azure
  • DevOps
hackathon ux design

A Hackathon Keeps Your Team Working in Sync

  • QA
  • Software Development
  • . . .

AWS and the New Cloud Computing Landscape for Small Businesses

  • Amazon Web Services
  • Startups
Flutter hackathon winner

Using Flutter and Teamwork to Win a Hackathon

  • Mobile App Development
  • UI/UX Design
Dedicated Software Development Team

How Teravision Technologies can set up a Dedicated Software Development Team in 48 hours: “The Bench”

  • Digital Agencies
  • Software Development
  • . . .
Nearshore Software Development company in Colombia

Teravision Technologies opens new Nearshore Software Development center in Bogotá, Colombia.

  • Agile
  • Software Development
  • . . .

CONTACT US


AGILE. COMMUNICATION. TALENT.
Nearshore software outsourcing that just makes sense.

We will follow up with you soon

Try us at 1 888 9898324 or send an email to info@teravisiontech.com.