Top 10 Most Exciting ES6 Features in JavaScript

Setting defaults for function parameters

To get default values for function parameters in the past, you’d have to do something like this:

function findPower(val, exponent) {
   exponent = exponent || 2

   // ...
}

The parameters can now be created and defaulted using the new default parameters functionality.

function findPower(value, exponent = 2) {
   // The rest of your code
}
findPower(1, undefined) // exponent defaults to 2

Extracting Data from Arrays and Objects with Destructuring

Developers can extract values from arrays and objects by destructuring them and then exposing them as separate variables.

Destructuring has a wide range of applications, including situations where specific values from a bigger collection are required.

It provides a technique for quickly obtaining that value via a built-in feature of the language.

A Destructuring object syntax is with ‘ { } ‘ and the destructuring array syntax is with square brackets ‘ [ ] ’

Array case: const [one, two] = [1, 2]
Object case: const {a, b} = { a: ‘a’, b: ‘b’ }

For instance, Destructuring Example 1:

function functionName() {
  return [name, age]
    }
const [name,age] = functionName()

For instance, Destructuring Example 2:

const [first, second, ...theReaming] = my_array_elements

Destructuring Example 3:

var person = {
  name: "Alex", 
  gender: Male 
}

var name = person.name
var gender= person.gender

Using Destructuring in ES6, you can grab object values:

const { name, title, data } = person

Checking Array Values with Array includes() method

The built-in.includes() method for Arrays provides a quick way to see if a value is included anyplace in the array.

If the array contains the supplied value, the method will return true else return false.

You may finally say goodbye to array. indexOf(item) === -1 indefinitely.

[12, 23].includes(12) // returns true

[12, 23].includes(4) // returns false

Allowing Extra Arguments in Functions

Rest parameters allow functions to collect additional arguments in addition to the ones they’ve already defined.

After that, the contents of these arguments are gathered into an array.

This allows a function to capture and parse additional parameters, allowing for many more optimization possibilities than were previously available through the arguments object.

Rest parameters now work with arrow functions, which is excellent because arrow functions previously didn’t have this capacity because the arguments object didn’t exist within them.

function combine(joiner, ...args) {
  // args is an actual Array
  return args.join(joiner)
}
combine('_', 1, 2, 3,4,5) // returns '1_2_3_4_5

Expanding Arrays with the Spread Operator

The spread operator is a versatile utility that is now available in JavaScript.

Expanding an array into arguments for functions or array literals is a valuable feature.

When values are reused, for example, this is quite advantageous because the spread allows them to be stored and called with a considerably lower footprint than previously required.

In function parameters, the spread operator is used:

const numbersArray = [1, 2, 3]
findSum(...numbersArray)

// same as
findSum(1, 2, 3)

Using the spread operator in array literal parameters:

const array1 = [1, 2]

const array12= [...array1 , 3, 4]
// array2: [1, 2, 3, 4]

Arrow Functions

ES6 arrow functions provide you with an alternative way to write a shorter syntax compared to the function expression.

The following example defines a function expression that returns the sum of two numbers:

let sum= function (a, b) {
     return a + b;
};

console.log(sum(100, 200)); // 300

The following example is equivalent to the above add() function expression but uses an arrow function instead:

let sum= (a, b) => x + y;
console.log(sum(100, 200)); // 300

Multi-Line String

With the arrival of Template Literals, it’s finally super easy to produce multi-line strings. Previously, we had to use the \n or separate string concatenation which was messy and difficult to read. Finally, it’s easier now. ES6 for the win;

// Old way

const multiLine = "first \n second";
// ES6 new way

const multiLine = `first
2️second`;

/* RESULT
first
second
*/

Template Literals

ES6 introduces very simple string templates along with placeholders for the variables.

The syntax for using the string template is $ { PARAMETER } and is used inside of the back-ticked string.

let name = `My name is ${firstName} ${lastName}`

Promises

In ES6, Promises are used for asynchronous execution.

However, we can use promises with the arrow function…

var asyncCall = new Promise((resolve, reject) => {
  // do something here
  resolve();
}).then(()=> { 
  console.log(‘Done’);
})

Modules

A Modules were previously not supported natively in JavaScript.

Modules are a new feature introduced in ES6, where each module is represented by a separate “.js” file.

We can import or export variables, functions, classes, or any other component from/to different files and modules using the “import” or “export” declaration in a module.

export var num = 100;

export function name(fullName) { 
  // data
};
import {num, name} from 'module';
console.log(num); // 100

In Conclusion, if you want to check any reference sites you can also look at them similarly for ES6 features in JavaScript.