JavaScript ES6

Summary: Looking into the JavaScript ES6 features and enhancements such as arrow functions, let and const, template literals, destructuring assignment, default parameters and others.

ES6

ES6, also known as ECMAScript 2015, introduced a significant number of new features and enhancements to JavaScript.

Arrow Functions

Arrow functions provide a more concise syntax for writing anonymous functions. They have a more compact syntax compared to traditional function expressions and lexically bind the this value.

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

// ES6 arrow function
const add = (a, b) => a + b;
// Don't need to use the return keyword

Let and Const

let and const are block-scoped variable declarations. let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used, while const creates a read-only reference to a value.

// ES5 variable
var x = 10;

// ES6 let and const
let y = 20;
const z = 30;

Template Literals

Template literals allow for easier string interpolation in JavaScript. They use backticks (`) instead of single or double quotes and support multiline strings and expression interpolation using ${}.

// ES5 string concatenation
var name = "John";
var greeting = "Hello, " + name + "!";

// ES6 template literals
const name = "John";
const greeting = `Hello, ${name}!`;

Destructuring Assignment

Destructuring assignment allows you to extract values from arrays or objects and assign them to variables in a concise syntax.

// ES5 array destructuring
var numbers = [1, 2, 3];
var a = numbers[0];
var b = numbers[1];

// ES6 array destructuring
const [a, b] = [1, 2, 3];

// ES5 object destructuring
var person = { name: "John", age: 30 };
var name = person.name;
var age = person.age;

// ES6 object destructuring
const { name, age } = { name: "John", age: 30 };

Default Parameters

Default parameter values allow you to initialize function parameters with default values if no value or undefined is passed.

// ES5 default parameter
function greet(name) {
    name = name || "World";
    return "Hello, " + name + "!";
}

// ES6 default parameter
const greet  (name = "World") => `Hello, ${name}!`;

Spread Operator

The spread operator (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.

// ES5 array concatenation
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var combined = arr1.concat(arr2);

// ES6 spread syntax
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

Classes

ES6 introduced a more convenient syntax for defining classes in JavaScript, which simplifies the creation of constructor functions and handling of inheritance.

// ES5 constructor function
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// ES6 class
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

Promises

Promises provide a cleaner and more flexible alternative to callback-based asynchronous code. They represent the eventual completion (or failure) of an asynchronous operation and allow chaining of asynchronous operations.

// ES6 Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        // Asynchronous operation
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

Modules

ES6 introduced a standardized module system for JavaScript, which allows for better code organization and reuse by encapsulating code into reusable modules.

// ES6 module
// Exporting module
export function add(a, b) {
    return a + b;
}

// Importing module
import { add } from './math';

For all ES6 features checkout https://www.javascripttutorial.net/es6/