ES9 Features: A Deep Dive for Beginners and Intermediates 🎯

Welcome to our ES9 Features tutorial! This lesson is designed to help you understand the exciting new features introduced in ECMAScript 9 (ES9). We'll cover the basics, delve into practical applications, and even provide some fun quizzes along the way. Let's get started!

Table of Contents 📝

Introduction to ES9
- What is ECMAScript?
- Why ES9?
New Data Types
- BigInt
- Optional Chaining
New Functions
- async-await
- Object Rest and Spread Syntax
Improved Template Literals
- Tagged Template Literals
Other Notable ES9 Features
- JSON Support in RegExp
- Promise.prototype.finally()
Practical Examples
- Example 1: BigInt and Number operations
- Example 2: async-await for handling promises
Quiz

Introduction to ES9 📝

ES9, or ECMAScript 9, is the latest version of the JavaScript language specification. It introduces several new features, enhances existing ones, and makes JavaScript more powerful and efficient.

What is ECMAScript?

ECMAScript, often abbreviated as ES, is the standard for defining JavaScript. It's a specification that includes a set of rules for implementing JavaScript engines in web browsers, as well as tools for describing JavaScript itself.

Why ES9?

ES9 was released to provide developers with more powerful tools to handle complex projects and to make JavaScript more efficient.

New Data Types 📝

BigInt

BigInt is a new data type introduced in ES9 for handling large integers.

javascript

// Creating BigInt numbers
const num1 = BigInt(9007199254740991);
const num2 = 123n; // n denotes a BigInt literal

// Arithmetic operations with BigInt
const result = num1 + num2;
console.log(result); // Output: 9007199254741224n

Optional Chaining

Optional Chaining allows us to access nested object properties without worrying about undefined or null.

javascript

const user = {
  name: {
    first: 'John',
    last: null
  }
};

// Traditional approach
console.log(user && user.name && user.name.last); // undefined

// Using Optional Chaining
console.log(user?.name?.last); // null

New Functions 📝

async-await

async-await is a feature that simplifies working with asynchronous functions in JavaScript.

javascript

// A simple example of async-await
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
};

fetchData();

Object Rest and Spread Syntax

Object Rest and Spread Syntax provide a more concise way to work with objects in JavaScript.

javascript

// Object Rest Syntax
const user = {
  id: 1,
  name: 'John',
  email: 'john@example.com',
  // more properties...
};

const { id, email, ...rest } = user;
console.log(id); // Output: 1
console.log(email); // Output: 'john@example.com'
console.log(rest); // Output: { name: 'John' }

// Object Spread Syntax
const newUser = { ...user, id: 2 };
console.log(newUser); // Output: { id: 2, name: 'John', email: 'john@example.com' }

Improved Template Literals 📝

Tagged Template Literals

Tagged Template Literals allow us to create custom template literals by using a tag function.

javascript

// Tag function
const taggedTemplate = (strings, ...values) => {
  const result = [];

  strings.forEach((string, index) => {
    result.push(string + values[index]);
  });

  return result.join('');
};

// Using Tagged Template Literals
const name = 'John';
const greeting = taggedTemplate`Hello, ${name}!`;
console.log(greeting); // Output: 'Hello, John!'

Other Notable ES9 Features 📝

JSON Support in RegExp

ES9 introduces support for JSON-like syntax in regular expressions.

javascript

// JSON-like RegExp
const regex = /{ "name": "John", "age": 30 }/;
const match = regex.exec('{ "name": "John", "age": 30 }');
console.log(match[0]); // Output: '{ "name": "John", "age": 30 }'

Promise.prototype.finally()

Promise.prototype.finally() allows us to specify a function that will be executed regardless of the Promise's outcome (fulfilled or rejected).

javascript

// Using finally()
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Result');
  }, 1000);
});

promise
  .finally(() => console.log('Finally executed.'))
  .then(result => console.log(result))
  .catch(error => console.error(error));

Practical Examples 📝

Example 1: BigInt and Number operations

javascript

const num1 = BigInt(9007199254740991);
const num2 = BigInt(1234567890123456789012345678901234567890);

const result1 = num1 + num2;
const result2 = num1 * BigInt(5);

console.log(result1); // Output: 900719925474122576811340715058086863485679012345678901234567890n
console.log(result2); // Output: 450359962737050432125n

Example 2: async-await for handling promises

javascript

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

Quiz 📝

That's it for our ES9 Features tutorial! We hope you found this lesson informative and enjoyable. Stay tuned for more advanced topics and remember to practice what you've learned! 💡 Happy coding! 🎯