Core features of next generation JavaScript: ES6 and ES7

Nowadays, programming languages evolve very quickly, with an overwhelming addition of new, ‘different looking’ features . As developers, it’s important for us to learn these features, as they allow us to do more powerful things.

Needless to say, JavaScript is amongst the front-runners in such evolution. Sometimes, JS looks like a new language altogether because of how quickly it evolves and the next generation features it uses. It is important for us to understand these features as they enable us to write robust and clean code.

Here are the core features of the next generation JavaScript in ES6 and ES7.

let and const (bye bye var)

var is a way to create variable in JavaScript. Even to create constant we use var in old version of JS.

ES6 has introduced two keywords let and const. (... var still works fine, but you are highly encouraged to use let and const …)

let and const has block level scope while var has function level scope.

Problem with var: This example will show, why you should use let not var.

function print() {
    var a = 10;
    if (true) {
        var a = 20;
    }
    console.log(a); // this  prints 20( not expected)
}

In the above code, you can find that when the variable is updated inside the if loop, the value of variable “a” is persisted to 20 globally, instead of 10.

Therefore, we have to be very careful in using this functionality, because there is a possibility of overriding an existing value.

However, when we use let function (as seen below), the value of “a” is not overridden outside the block.

function print() {
    let a = 10;
    if (true) {
        let a = 20;
    }
    console.log(a); // this  prints 10( block level scope)
}

Arrow function

It is a way to create function in a shorter way, plus it will also solve issues which you have with this keyword.

Sometimes, this keyword does not refer to what you have expected, when you write your code.

However, when you write this inside the Arrow function, it always keeps its context. There are no surprise changes in the context of this during runtime.(see here)

arrow function may look a bit strange, but it’s actually simple, and helps create function in a shorter way. Here’s an example:

Old way of writing function:

let print = function (name) {
    console.log(name);
}

New way of writing function:

let print =  (name) => {
    console.log(name);
}
//it further can be condensed, if u have only one argument
let print =  name => {
    console.log(name);
}

If your function only returns some value, and nothing else, you can use just a one liner function. For example,

let multiply =  (number) => {
    return number*2;
}
// you can omit curly braces and return keyword
let multiply =  (number) => number*2;

export and import

The idea behind import and export is that inside any JS file, we can import other JS files so that files know their dependency.

You have to use export keyword to make functionality available to outside file.

There are two types of export; export default and named export . Here is an example:

Spread and Rest Operator

Actually it is just one operator ... which acts as spread or rest depending on how we use it. Spread operator allows you to pull elements of an array or properties of an object.

Here is an example with an array:

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5] // now [1, 2, 3, 4, 5]

And here’s an example with an object:

const oldObject={ name: 'Max'}; 
const newObject={...oldObject, age: 28 }; // {name: 'Max', age: 28}

Spread operator is very useful for cloning and copying array or object.

As both are reference type, copying them safely could be tricky. With spread operator, you have easy way to copy or clone object and array.

Rest Operator: It is used to merge a list of function arguments into array. Here is syntax for rest operator:

function sortArgs(...args) {
    return args.sort();
}

As you can see, we use rest operator for function arguments. In above code, sortArgs receives unlimited arguments and all arguments would be merged in array. You can apply any function of array conveniently in this stored array.

Destructuring array and object

It allows us to easily extract array elements or object properties and store them in variable. It may sound same as spread operator, but it is different.

Spread takes out all array elements, or all object properties and distributes them in new array or object.

On the other hand, Destructuring allows you to pull out a single element or a single object property and store them in variables.

//array destructuring 
[a, b] = [6, 8]
console.log(a); // 6
console.log(b); // 8

//Object destructuring
{name} = {name: "Max", age: 25};
console.log(name); // max.

Destructuring is very useful when working with function arguments. Consider this example:

const printName = (personObj) => {
    console.log(personObj.name);
}

printName({name: 'Max', age: 28});//prints'Max'

Here, we only want to print the name in the function, but we pass a complete person object to the function.

Of course this will create no issue as such, but it forces us to call personObj.name unnecessarily.

With destructuring, we can condense this code inside our function like this:

const printName = ({name}) => {
    console.log(name);
}
printName({name: 'Max', age: 28});//prints'Max')

As you can see, we get the same result as before, but we don’t have to call personObj.name.

By destructuring, we simply pull out the property and store it in a variable / argument name, which we can then use in the function body.