Latest ES Features Of Javascript

Below are some new features of ECMAScript.

1. Exponentiation Operator (**)

ECMAScript introduces a new feature Exponentiation Operator which is represented by a double asterisk symbol(**).

This operator provides a way to perform exponentiation operations in JavaScript. This operator is equivalent to Math.pow() function.

Syntex : base ** exponent

Example

const base = 2;
const exponent = 4;

const result = base ** exponent; // similar to Math.pow(base, exponent);
console.log(result); // Output: 16 

2. Array Includes

Array.includes() method is used to check whether the element exists in the array or not.

This will return the index of the first occurrence of an element in the array if the element is found, otherwise, it will return -1 if the element doesn’t exist.

Syntex : Array.includes(value) || Array.includes(value, <startIndex>)

Example

const data = [1,2,3,4,5];

console.log(data.includes(3)); // it will return true
console.log(data.includes(3,1)); // it will return true

3. Object:entries()

Object:entries() is used to extract the key-value pairs of an object as an array of arrays, where each inner array contains a key-value pair. Used to convert objects into the form of array key-value pairs.

Syntex : Object.entries(object_value);

Example

const data = {name:"Abc", age:10};

console.log(Object.entries(data));

// Output:
// [
//   ['name', 'John'],
//   ['age', 10]
// ]

4. String. padStart()

String. padStart() is used to add pads on the left till the given pads value from left until the total length of the string reaches to the given value.

Syntex : string_value.padStart(target_length); || string_value.padStart(target_length, string_value_to_add);

Example

let value = '1234'.padStart(6,0)
console.log(value) // Output: 001234

value = '1234'.padStart(6)
console.log(value.length) // Output: 6

5. String.padEnd()

String. padEnd() is used to add pads on the right till the given pads value from right until the total length of the string reaches the given value.

Syntex : string_value.padEnd(target_length); || string_value.padEnd(target_length, string_value_to_add);

Example

let value = '1234'.padEnd(6,0)
console.log(value) // Output: 123400

value = '1234'.padEnd(6)
console.log(value.length) // Output: 6

6. Trailing Commas

Trailing Commas allows include a comma after the last element of an array, object, function parameter, or function call. It will ignored by JavaScript’s parser.

Syntex : [value1, value2,,]

Example

let data = [1,2,3,,]
console.log(data) // Output: 1,2,3
console.log(data.length) // Output: 4

7. for await of loop

This will be used to iterate the elements asynchronously, it will await each iteration before moving on to the next. This will be useful when dealing with asynchronous data sources or operations.

Syntex : for await…of

Example

const promises = [
  new Promise(resolve => setTimeout(() => resolve('1'), 500)),
  new Promise(resolve => setTimeout(() => resolve('2'), 1500)),
  new Promise(resolve => setTimeout(() => resolve('3'), 1000))
];

async function getPromisesValue() {
  for await (const value of promises) {
    console.log(value);
  }
}

getPromisesValue(); 
// Output:  
// 1
// 3
// 2