ES10 Features in JavaScript 🎯

beginner
20 min

ES10 Features in JavaScript 🎯

Welcome to the exciting world of ES10 (ECMAScript 2019) features! In this tutorial, we'll dive into the latest and greatest updates to JavaScript that will help you write cleaner, more efficient code. Let's get started!

Table of Contents

  1. Arrow Function Updates
  2. Nullish Coalescing Operator
  3. Optional Catch Bonding
  4. Array.flat() and Array.flatMap()
  5. String.padStart() and String.padEnd()
  6. Object Rest and Spread Syntax
  7. Quiz

<a name="arrow-function-updates"></a>

Arrow Function Updates 📝

In ES10, arrow functions have received a few improvements:

  1. Implicit Returns - If an arrow function contains only one expression, the curly braces are optional.
javascript
// Before ES10 const add = function(a, b) { return a + b; } // After ES10 const add = (a, b) => a + b;
  1. Improved this Behavior - In ES10, this behaves more predictably in arrow functions. It refers to the lexical this of the containing function or global context.
javascript
let person = { name: "John", sayHello: () => { console.log(`Hello, I am ${this.name}`); } }; person.sayHello(); // "Hello, I am John"

<a name="nullish-coalescing-operator"></a>

Nullish Coalescing Operator (??) 💡

The null and undefined values can cause issues when we want to provide default values for variables. The new nullish coalescing operator (??) returns the second operand only if the first operand is either null or undefined.

javascript
let name = null; let greeting = "Hello, " + (name ?? "Stranger"); // greeting is "Hello, Stranger"

<a name="optional-catch-binding"></a>

Optional Catch Bonding 📝

In ES10, we can catch errors without writing an empty catch block. The finally block will execute as expected, even if an error occurs.

javascript
try { throw new Error("Oops!"); } catch {} finally { console.log("Cleaning up..."); } // "Cleaning up..." will always be logged

<a name="arrayflat-and-arrayflatmap"></a>

Array.flat() and Array.flatMap() 💡

Array.flat() flattens nested arrays to a single level, and Array.flatMap() both flattens and maps arrays in one step.

javascript
let nestedArray = [1, [2, [3, 4], 5]]; let flatArray = nestedArray.flat(2); // Flattens up to 2 levels console.log(flatArray); // [1, 2, [3, 4], 5] let mappedAndFlattenedArray = nestedArray.flatMap(item => Array.isArray(item) ? item : [item]); console.log(mappedAndFlattenedArray); // [1, 2, 3, 4, 5]

<a name="stringpadstart-and-stringpadend"></a>

String.padStart() and String.padEnd() 💡

These methods add padding to strings to ensure a minimum length.

javascript
let message = "Short"; let paddedMessage = message.padStart(10, " "); console.log(paddedMessage); // " Short" (4 spaces added at the start) let paddedEndMessage = message.padEnd(10, "*"); console.log(paddedEndMessage); // "Short***" (3 asterisks added at the end)

<a name="object-rest-and-spread-syntax"></a>

Object Rest and Spread Syntax 💡

Object Rest Syntax allows you to extract the remaining properties of an object into a new object.

javascript
const person = { name: "John", age: 30, city: "New York" }; const { name, ...rest } = person; console.log(name); // "John" console.log(rest); // { age: 30, city: "New York" }

Object Spread Syntax allows you to copy properties from one object to another.

javascript
const person1 = { name: "John", age: 30 }; const person2 = { ...person1, city: "New York" }; console.log(person2); // { name: "John", age: 30, city: "New York" }

<a name="quiz"></a>

Quiz 📝

Quick Quiz
Question 1 of 1

What does the nullish coalescing operator (`??`) return if the first operand is `null` or `undefined`?

That's it for our ES10 features tutorial! As you can see, these new updates make our code cleaner, more efficient, and easier to read. Stay tuned for more exciting JavaScript tutorials on CodeYourCraft! 🚀