17 ES6 Features

Ecma Script is the organization that standardizes Java Script.

• On 2015 it released a new version with lot of good features, that is called ES6.
• Earlier version was ES5. Below are the features in ES6 which were not available in ES5

1. Arrow functions

A shorthand syntax for writing function expressions.

const greet = (name) => {
  console.log(`Hello, ${name}!`);
}

greet('John'); // Output: "Hello, John!"

2. Template literals

A way to concatenate strings and variables using backticks and placeholders.

const name='Biswajit';
console.log(`my name is ${name}`);

3. Let and const

Block-scoped variables that replace var.

const name='Biswajit';
let age = 21;

4. Destructuring

A way to unpack values from arrays and objects into separate variables.

const person = {
  Name: 'John',
  age: 30,
};

const { Name, age } = person;
console.log(firstName); // Output: John

5. Spread operator

A way to spread the elements of an iterable (like an array or string) into a new array or function call.

// Concatenating arrays
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const combinedNumbers = [...numbers1, ...numbers2];

console.log(combinedNumbers); // Output: [1, 2, 3, 4, 5, 6]

// Copying arrays
const originalNumbers = [1, 2, 3];
const copiedNumbers = [...originalNumbers];

console.log(copiedNumbers); // Output: [1, 2, 3]

// Passing multiple arguments to a function
function addNumbers(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const sum = addNumbers(...numbers);

console.log(sum); // Output: 6

6. Rest parameter

A way to capture any remaining arguments in a function call and pass them to an array.

function sum(...numbers) {
  let result = 0;

  for (let number of numbers) {
    result += number;
  }

  return result;
}

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

7. Default parameter

A way to capture any remaining arguments in a function call and pass them to an array.

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: "Hello, World!"
greet('John'); // Output: "Hello, John!"

7. Object shorthand notation

• A shorthand syntax for defining properties on an object.
• We can define object properties without explicitly specifying the property names,
• as long as the property names match the variable names being used to provide the property values.

const name = 'Alice';
const age = 30;

const person = { name, age };
console.log(person); // Output: { name: 'Alice', age: 30 }

8. Classes

A new syntax for creating object-oriented classes.

class Greet{
    constructor(message) {
      this.message= message;
    }
  
    doWish() {
      console.log(`I wish you ${this.message}`);
    }
  }

const greet = new Greet('Good Morning');
greet.doWish();

Inheritance is also supported E.g class Hello extends Greet

9. Promises

A way to handle asynchronous operations that may succeed or fail.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully!');
    }, 2000);
  });
}

fetchData()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

10. Generators

A way to define functions that can be paused and resumed later.

function* fibonacci() {
  let current = 0;
  let next = 1;
  while (true) {
    yield current;
    [current, next] = [next, current + next];
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
// and so on...

11. Modules

A way to define reusable pieces of code that can be imported and exported between files.

// math.js

export const add = (a, b) => {
  return a + b;
};

export const subtract = (a, b) => {
  return a - b;
};

// index.js

import { add, subtract } from './math';

console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3

You can also use the default export syntax to export a single function or object

// logger.js

const logger = (message) => {
  console.log(`[LOG] ${message}`);
};

export default logger;

// index.js

import logger from './logger';

logger('Hello World'); // Output: [LOG] Hello World

12. Array Find

Array.find() and Array.findIndex() are introduced in ES6 and helps to search for an element based on a criteria.

const fruits = ['Apple', 'Mango', 'Grapes'];
const index = fruits.findIndex((fruit)=> fruit==='Mango');
console.log(index);

13. Map & Set collections

In ES6, two new built-in collection types were added to JavaScript, the Map and the Set.

const myMap = new Map();
myMap.set('name', 'John');

const mySet = new Set();
mySet.add('apple');

14. JavaScript For..of

This loop statement introduced in ES6 and simplifies iterating over objects such as arrays, strings, maps, sets, etc.

const myArray = ['apple', 'banana', 'orange'];

for (const element of myArray) {
  console.log(element);
}

15. Symbol

Symbol is a primitive data type that is used as a unique identifier.

• It was introduced in ECMAScript 6 (ES6) to provide a way to create unique values that are not equal to any other value.
• Symbols are used to create private object properties, to define object methods, and to create constants.

const mySymbol = Symbol("mySymbol");

const obj = {
  [mySymbol]: "google",
};

export function app(){
  console.log(obj[mySymbol]); // Output: 'google'
}

16. New Global Methods

ES6 introduced several new global methods that can be used in JavaScript

• Like Object.assign(), Array.prototype.fill(), Array.prototype.find() etc
• Some number methods like Number.isNaN(), Number.isFinite()

17. New Number Properties

• ES6 has new number methods Number.EPSILON, Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER
• Number.isInteger(), Number.isSafeInteger()

//difference between 1 and the smallest representable number greater than 1.
console.log(Number.EPSILON); // 2.220446049250313e-16

//the max, min safe integer that can be represented in JavaScript.
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991

//Check if true or false
console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(5.5)); // false
console.log(Number.isSafeInteger(9007199254740991)); // true
console.log(Number.isSafeInteger(9007199254740992)); // false