Key Features of ECMAScript 2015 (ES6)

Some key features introduced in ES6 are:

• let and const declaration
• Arrow functions
• Modules
• Template literals
• Spread and rest operators
• Classes
• Promises

let and const declaration

Variables declared with let and const are block-scoped, whereas var had function-level scope.

      let x = 10;
const PI = 3.14;
    

Arrow functions

Arrow functions, with their concise syntax for function expressions, bind the this value lexically, which effectively resolves common issues encountered with traditional function expressions.

      // Traditional function expression 
function add(a, b) {
  return a + b;
}

// Arrow function equivalent 
const add = (a, b) => a + b;

    

Modules

ES6 introduced a standardized module system to JavaScript, enabling developers to define modules and facilitate the export/import of functionalities between them.

      export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

    

Template Literals

Template literals were introduced in ES6 as a new way to create strings in JavaScript. They provide a more expressive syntax compared to traditional string literals (delimited by single or double quotes) by allowing interpolation of expressions and multiline strings.

      // Traditional string literal
const name1 = '@dsabyte'; // Changed variable name to name1
const greeting1 = 'Welcome to, ' + name1 + '!'; // Changed variable name to greeting1

// Template literal (removed redeclaration of name)
const name2 = '@dsabyte'; // Renamed variable to name2
const greeting2 = `Welcome to, ${name2}!`;

    

Spread and rest operatos

The spread (...) and rest (...) operators were introduced as powerful tools for working with arrays and function parameters, respectively.

• spread operators (`...`): The spread operator is denoted by ... and is used to expand elements of an iterable (e.g., array, string) into individual elements.

      const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6]; // Spread operator used to concatenate arrays
console.log(arr2); // Outputs: [1, 2, 3, 4, 5, 6]

    

• rest operator (`...`): The rest parameter, also denoted by ..., is used in function parameters to collect multiple arguments into a single array.

      function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Outputs: 15

    

Classes

ES6 introduced a more convenient syntax for defining classes in JavaScript, making it easier to create and work with object-oriented code.

      class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    calculateArea() {
        return this.height * this.width;
    }
}

const rectangle = new Rectangle(10, 20);

    

Promises

ES6 introduced native promises, providing a standardized and more expressive way to handle asynchronous operations in JavaScript. Promises simplify asynchronous code with a straightforward syntax and support chaining, error handling, and handling multiple promises concurrently or competitively.

      function fetchData() {
  return new Promise((resolve, reject) = >{
    setTimeout(() = >{
      const data = {
        id: 1,
        name: 'John Doe'
      };
      resolve(data);
    },
    1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log('Data fetched successfully:', data);
  } catch(error) {
    console.error('Error fetching data:', error.message);
  }
}

getData();
    

Improvements brought by ES6

• Enhanced Syntax: ES6 introduces new syntax features such as arrow functions, template literals, and destructuring assignments, which make code more concise and readable.
• Improved Variable Declaration: The introduction of let and const provides block-scoping, preventing issues related to variable hoisting and providing better control over variable mutation.

Summary

In this article, we discussed the new features introduced in ES6. We learned about let and const declaration, arrow functions, modules, template literals and spread and rest operators. We also saw their examples.