Prominent Features of ES6

ES6 comes up now with a great amount of goodies & the vendor of the browsers worked hard from the past year in order to get the language updates into their browsers. Some of the available language updates will bring joy to everyone’s face. Amongst them following six are newly added to this.

  1. Object[key] setting syntax

It allows adding the value/key after the original declaration:

// *Very* reduced example

let myKey = ‘key3′;

let obj = {

key1: ‘One’,

key2: ‘Two’

};

obj[myKey] = ‘Three';

This pattern is though inconvenient & also ugly as well as confusing. ES6 helps out in escaping from this mess:

let myKey = ‘variableKey';

let obj = {

key1: ‘One’,

key2: ‘Two’,

[myKey]: ‘Three’ /* yay! */

};

It wraps the variable key in square brackets [] which allows the developers to use one statement to done everything.

 

  1. Arrow Functions

Arrow functions are a source of much talk as well as it creates a lot of confusion amongst the developers. Following code provides a simple coding function:

// Adds a 10% tax to total

let calculateTotal = total => total * 1.1;

calculateTotal(10) // 11

// Cancel an event — another tiny task

let brickEvent = e => e.preventDefault();

document.querySelector(‘div’).addEventListener(‘click’, brickEvent);

Sometimes no function or return keywords are needed to add (), there arrow functions serve best acting as a shortcut for simple functions.

 

  1. Find/findIndex

This function allows the developers to get the index of an item within the array. You just need to enter find & findIndex in order to match the calculated value of an array.

 

let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19

let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

find & findIndex allows a calculated search of a given value and also it reduces the looping & side effects through the possicle values.

 

  1. The Spread Operator

This helps in signaling that an iterable object or an array might have its content splitted amongst the arguments that are separated within a call. For Example:

// Pass to function that expects separate multiple arguments

// Much like Function.prototype.apply() does

let numbers = [9, 4, 7, 1];

Math.min(…numbers); // 1

// Convert NodeList to Array

let divsArray = […document.querySelectorAll(‘div’)];

// Convert Arguments to Array

let argsArray = […arguments];

This adds a bonus to convert the objects that are iterable (NodeList, arguments, etc.)

 

  1. Template Literals

ES6 provides a template literal through which one can easily create the multiline strings by using backticks characters:

// Multiline String

let myString = `Hello

I’m a new line`; // No error!

// Basic interpolation

let obj = { x: 1, y: 2 };

console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

Template literals also allow creating multiple multiline strings.

 

  1. Default Argument Values

This provides the ability to use many server side languages like PHP & Python;

// Basic usage

function greet(name = ‘Anon’) {

console.log(`Hello ${name}!`);

}

greet(); // Hello Anon!

// You can have a function too!

function greet(name = ‘Anon’, callback = function(){}) {

console.log(`Hello ${name}!`);

// No more “callback && callback()” (no conditional)

callback();

}

// Only set a default for one parameter

function greet(name, callback = function(){}) {}

There are other languages as well that typically sends a warning when default values will not provide.

 

To request a quote, reach us at http://achintyatech.com/