Summary

This context introduces four new JavaScript operations: exponentiation, nullish coalescing, optional chaining, and pipeline operators.

Abstract

The context discusses the introduction of four new JavaScript operations by Technical Committee 39 (TC39), a group of JavaScript experts working on ECMAScript standardization. The operations include the exponentiation operator (**), the nullish coalescing operator (??), the optional chaining operator (?.), and the pipeline operator (|>). The exponentiation operator is used for exponentiation and is equivalent to Math.pow. The nullish coalescing operator returns the right expression when the left expression is null or undefined, while the optional chaining operator allows for short-circuiting with a return value of undefined if the object chain has a nullish reference. The pipeline operator is syntactic sugar for creating chained function calls in a readable manner. The context also provides examples and browser compatibility tables for each operator.

Bullet points

Technical Committee 39 (TC39) is a group of JavaScript experts working on ECMAScript standardization.
The TC39 process has several stages, including Strawperson, Proposal, Draft, Candidate, and Finished.
Four new JavaScript operations are introduced: exponentiation, nullish coalescing, optional chaining, and pipeline operators.
The exponentiation operator (**) is used for exponentiation and is equivalent to Math.pow.
The nullish coalescing operator (??) returns the right expression when the left expression is null or undefined.
The optional chaining operator (?.) allows for short-circuiting with a return value of undefined if the object chain has a nullish reference.
The pipeline operator (|>) is syntactic sugar for creating chained function calls in a readable manner.
Examples and browser compatibility tables are provided for each operator.

The 4 Newest JavaScript Operations: An Introduction

Learn the exponentiation, nullish coalescing, optional chaining, and pipeline operators

Technical Committee 39 (TC39) is a group of JavaScript experts who work on the standardization of ECMAScript.

The TC39 process has a number of stages:

Stage 0 (Strawperson): Takes input for the specification.
Stage 1 (Proposal): Proposes the high-level API for review.
Stage 2 (Draft): Precisely describes the syntax and semantics using formal spec language.
Stage 3 (Candidate): Designated reviewers have signed off on the current spec text.
Stage 4 (Finished): The addition is ready for inclusion in the formal ECMAScript standard.

After stage 4, proposals will be included in the next revision of ECMAScript. When the spec goes through its yearly ratification as a standard, the proposal is ratified as part of it.

Since ES2015, a lot of new ECMAScript syntaxes and features have been introduced. In this article, we present four of them: **, ??, ?., and |>.

The Exponentiation Operator

The exponentiation operator (**) is a computation operator that’s used in the format var1 ** var2. It returns the value of var1 to the power of var2. It’s equivalent to Math.pow, except it also accepts BigInts as operands.

The exponentiation operator (**) is in ES2016.

Here are some examples:

The exponentiation operator is right-associative: a ** b ** c is equal to a ** (b ** c). Therefore, line 7 is equivalent to 2 ** (3 ** 3).

BigInt is in ES2020, so even though it’s shipping in browsers, ESLint doesn’t support it by default. Without the comment at line 8, it’ll show the error “'BigInt' is not defined”. The comment informs ESLint that BigInt is a global variable. Therefore, don’t use the no-undef rule to warn.

Line 10 throws an error: “Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions”.

The following is the table of browser compatibility:

The Nullish Coalescing Operator

The nullish coalescing operator (??) is a logical operator that’s used in the format leftExpr ?? rightExpr. When the leftExpr is null or undefined, it returns rightExpr. Otherwise, it returns leftExpr.

The nullish coalescing operator (??) is in ES2020.

This is an enhancement of the logical OR operator (||), which is used in the format leftExpr || rightExpr. When the leftExpr is falsy, || returns rightExpr. Otherwise, it returns leftExpr. Sometimes, the expression unexpectedly returns rightExpr when leftExpr is a falsy value, such as false, ‘’, or 0.

The following are examples:

The following is the table of browser compatibility:

The Optional Chaining Operator

The optional chaining operator (?.) is syntactic sugar to short-circuit with a return value of undefined if the object chain has a nullish (null or undefined) reference in the middle.

The optional chaining operator (??) is in ES2020.

a?.b is equivalent to a && a.b.

The optional chaining operators can be stacked to make the code concise.

a?.b?.c?.d?.e is equivalent to a && a.b && a.b.c && a.b.c.d && a.b.c.d.e.

The optional chaining can be used for an object, a function, or an array. Here are some examples:

The following is the table of browser compatibility:

The Pipeline Operator

The pipeline operator (|>) is syntactic sugar that’s used in the format expression |> function. It creates chained function calls in a readable manner.

The pipeline operator (|>) is in TC39 stage 1.

Here are examples:

Advanced examples are defined in GitHub. It’s worth reading about.

Currently, you’re not able to run these examples. It’s experimental, and there’s no browser support.

Conclusion

Programming languages evolve over time. It’s a challenge to keep up with them. Meanwhile, it’s fun to see them improve to be more concise and more powerful.

In 2021, there will be new syntaxes and new features in ECMAScript.

Stay tuned!

Thanks for reading. I hope this was helpful. You can see my other Medium publications here.