A Comprehensive Overview of ECMAScript 2016 – ES 7 Features

Hello, JavaScript enthusiasts!

In our previous blog post, we dove into the game-changing features of ECMAScript 2016 (ES6), which revolutionized the way we write JavaScript with its modern syntax and powerful capabilities. We explored how ES6 introduced block-scoped variables, arrow functions, classes, template literals, and more, making our code more concise, readable, and maintainable.

Today, we’re taking the next exciting step in our JavaScript journey: exploring ECMAScript 2016 (ES7). While ES7 might not have made as many headlines as its predecessor, it brought valuable enhancements that have made JavaScript even more robust and user-friendly.

Let’s explore what ES7 has to offer and how these new features can improve your development experience!

Some of the key features introduced in ES7 include:

1. Array.prototype.includes()
2. Exponential Operator
3. Class Properties

1. Array.prototype.includes()

In ECMAScript 2016 (ES7), the Array.prototype.includes() method was introduced. This method is used to check if an array contains a certain element, and it returns true or false based on the presence of that element.

Here are some examples of how Array.prototype.includes() works:

Example 1: Checking for Presence in an Array of Strings

const fruits = ['apple', 'banana', 'cherry', 'date'];

console.log(fruits.includes('banana'));  // true
console.log(fruits.includes('grape'));   // false

Example 2: Using fromIndex Parameter

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.includes(30, 2));   // true (searches from index 2)
console.log(numbers.includes(10, 1));   // false (searches from index 1)

Example 3: Using Negative fromIndex

const animals = ['cat', 'dog', 'elephant', 'tiger'];

console.log(animals.includes('elephant', -3));  // true (searches from the 3rd last element)
console.log(animals.includes('cat', -2));       // false (searches from the 2nd last element)

Example 4: Checking for the Presence of Objects

const objects = [{ id: 1 }, { id: 2 }, { id: 3 }];

const objToFind = { id: 2 };
console.log(objects.includes(objToFind));  // false (objects are not the same instance)

const objToFindSameInstance = objects[1];
console.log(objects.includes(objToFindSameInstance));  // true (searches for the same instance)

mconst obj1 = { key: 'value' };
const obj2 = obj1;

console.log(obj1 === obj2); // true

const obj1 = { key: 'value' };
const obj2 = { key: 'value' };

console.log(obj1 === obj2); // false

Example 5: Using NaN

const numbersWithNaN = [1, 2, NaN, 4];

console.log(numbersWithNaN.includes(NaN));  // true
console.log(numbersWithNaN.includes(2));    // true
console.log(numbersWithNaN.includes(5));    // false

2. Exponentiation Operator (**)

The exponentiation operator (**) was introduced as a shorthand for performing exponentiation operations. This operator allows you to raise a number to the power of another number, making the code more concise and readable compared to using the Math.pow() function.

Basic Usage

// Using the exponentiation operator
let result = 2 ** 3; // 2 raised to the power of 3
console.log(result); // Outputs: 8

Operator Precedence

The ** operator has higher precedence than most operators but lower precedence than () (parentheses). Here’s how it fits in:

console.log(2 + 3 ** 2); // Outputs: 11, because 3 ** 2 is evaluated first (9), then 2 + 9

Associativity

The ** operator is right-associative, meaning that if you have multiple ** operators, they are evaluated from right to left:

console.log(2 ** 3 ** 2); // Outputs: 512, because it's evaluated as 2 ** (3 ** 2) (2 ** 9)

Comparison with Math.pow()

While Math.pow() is still valid and supported, the ** operator provides a more concise and readable way to perform exponentiation:

console.log(Math.pow(2, 3)); // 8
console.log(2 ** 3); // 8

Using the ** operator is generally preferred for its simplicity and clarity.

3. Class Properties

Class properties are variables that belong to an instance of the class. Before ES7, you had to define instance properties inside the constructor method, but with ES7, you can define them directly within the class body.

Syntax and Example

class Person {
  // Class property
  name = 'Unknown';
  
  // Constructor
  constructor(name) {
    this.name = name;
  }

  // Method
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// Creating instances
const person1 = new Person('Amitab');
const person2 = new Person('Uday');

// Using the method
person1.greet(); // Output: Hello, my name is Amitab
person2.greet(); // Output: Hello, my name is Uday

You can also use class properties to define methods and static properties. Here’s an example that includes both instance and static properties:

class Car {
  // Instance property
  model = 'Unknown';
  
  // Static property
  static numberOfWheels = 4;

  // Constructor
  constructor(model) {
    this.model = model;
  }

  // Instance method
  getModel() {
    return this.model;
  }

  // Static method
  static getNumberOfWheels() {
    return Car.numberOfWheels;
  }
}

// Creating an instance
const myCar = new Car('Toyota');

// Accessing instance and static properties
console.log(myCar.getModel()); // Output: Toyota
console.log(Car.getNumberOfWheels()); // Output: 4

Class properties in ES7 and later make it easier to work with class instances and their properties by allowing direct initialization within the class body. This feature improves code readability and reduces boilerplate code.

If you missed my recent post on ES6 (ECMAScript 2015), no worries! You can find it linked below.
Click here to explore ES6 (ECMAScript 2015)

Happy coding!

FAQs

These FAQs cover the key aspects of ECMAScript 2016 and should help clarify its features and usage. If you have any more questions or need further details, feel free to ask!