What ES6 adds in Javascript?

6 min readMay 6, 2021

ECMAScript was created to standardize JavaScript, and ECMAScript or ES6 is the 6th version of ECMAScript, published in 2015. Generally, ES is used for client-side scripting of the World Wide Web.

Programming languages work with variables and for that variable declaration is a must. However, declaring a variable might be a tricky task to do! In Javascript, where your variables are actually created depends on the declaration of it . Here, ES6 offers options to make controlling the scope easier.

Block Bindings

There are different ways to declare a variable. Such as- var, let and const. A classic “var” declaration for any variables but it can be confusing. The “let” and “const ” block bindings introduce lexical scoping to JavaScript. These declarations are not hoisted and only exist within the block in which they are declared. While going through the article you’ll know the reasons of it and learn a new term “block-level bindings” in ES6.

Var Declarations and Hoisting

Let’s talk about hoisting first. Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope. When a variable is declared using “var”, it hoisted up to the top and works like a global variable regardless of where it has been declared.

function getValue(condition) {

    if (condition) {
        var value = "red";

        // other code

        return value;
    } else {

        // value exists here with a value of undefined

        return null;
    }

        // value exists here with a value of undefined
}

The declaration of value is hoisted to the top here which means it can be accessed from anywhere of the code. Even though it has been declared inside the if condition.

Block-Level Declarations

To solve the problem of var declaration and hoisting, ES6 introduce us to block level scoping. Block-level declarations declare variables that are inaccessible outside of a given block scope. These block scopes are created:

Inside of a function
Inside of a block

Let Declarations

Let declaration is similar to var declaration and can easily be replaced any “var” to “let” while declaring a variable. The only difference is that in “let” declaration the variable’s scope is limited to the current code block.

No Redeclaration

If a variable is already been declared inside a scope then there’s no need to redeclare that variable. And if you do so, it throws an error.

var count = 30;

// Syntax error
let count = 40;

But if the scope is different and you are using “let” or “const” variable then the scenario is different.

var count = 30;

// Does not throw an error
if (condition) {

    let count = 40;

    // more code
}

Constant Declarations

Like var and let declaration, const is also used to declare a variable and of course, inside a limited scope. Variables that are declared using “const” are considered constants, meaning their values cannot be changed if set once. And no matter whatever you’ve declared using const, for example- an Object. It can never be changed!

Block Binding in Loops

For loop is the one special area where developers most want block level scoping of variables and the counter variable is meant to be used only inside the loop.

for (var i=0; i < 10; i++) {
    process(items[i]);
}

// i is still accessible here
console.log(i);                     // 10

In this example, the variable i only exists within the loop. Once the loop is complete, the variable is destroyed and is no longer accessible elsewhere.

Global Block Bindings

In global scope behavior let and const are different from var. When var is used in the global scope, it creates a new global variable, which is a property on the global object such as window in browsers.

// in a browser
var RegExp = "Hello!";
console.log(window.RegExp);     // "Hello!"

But if you use let or const in the global scope, a new binding is created in the global scope but no property is added to the global object. That means overwriting is not possible here.

// in a browser
let RegExp = "Hello!";
console.log(RegExp);                    // "Hello!"
console.log(window.RegExp === RegExp);  // false

const ncz = "Hi!";
console.log(ncz);                       // "Hi!"
console.log("ncz" in window);           // false

Best Practices for Block Bindings

In ES6, developers may use “let” instead of “var” declaration. As var and let behaved in a similar way, replacing them wouldn’t create a problem. Andthe const declaration is only needed when the variable needs protection from modification.

However, in general, all the variables declared as a “const ”by default and if a variable is needed to change then it is declared as “let”.

Functions in Javascript

A JavaScript function is a block of code designed to perform a particular task and it is executed when the function is being called. The functions is defined using the function keyword which is followed by a name and parentheses (). These parentheses can hold parameters for the functions.

Functions with Default Parameter Values

Default function parameters allow named parameters to be initialized with default values if no value is passed. In JavaScript, function parameters default to undefined. But it's often useful to set a different default value to that parameter.

function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1
  return a * b
}

multiply(5, 2)  // 10
multiply(5)     // 5

Working with Unnamed Parameters

In Javascript, you can always pass fewer or more parameters than it is formally specified. Default parameter values make it clear that a function can accept fewer parameters and ES6 brings a solution to pass more parameters than it is specified. Here comes the REST parameters.

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.

function myFun(a,  b, ...moreArgs) {
  console.log("a", a)
  console.log("b", b)
  console.log("moreArgs", moreArgs)
}

myFun("one", "two", "three", "four", "five", "six")

// Console Output:
// a, one
// b, two
// moreArgs, ["three", "four", "five", "six"]

The Spread Operator

The spread operator is a new addition to the set of operators in JavaScript ES6. It is commonly used to make shallow copies of Javascript objects and enhances its readability. The spread operator is denoted by three dots, …

let arr = [1, 2, 3];
let arr2 = [...arr]; // like arr.slice()

arr2.push(4);
//  arr2 becomes [1, 2, 3, 4]

Block-Level Functions

Block-level functions declarations are allowed in ES6. They hoist to the top of the block and in strict mode, they aren’t visible outside the containing block. It refers to the strictness of the function in which the block that contains the function declaration occurs. There is only one behavior for function declarations in blocks. That is-

|      web-compat               pure
-----------------+---------------------------------------------
strict mode ES6  |  block hoisting            block hoisting
sloppy mode ES6  |  it's complicated          block hoisting

Arrow Functions

An arrow function expression is a compact alternative to a traditional function expression, but is limited so can’t be used in all situations. It allows us to write shorter function syntax.

// Traditional Function
hello = function() {
return “Hello World!”;
}// Arrow Function
hello = () => {
  return "Hello World!";
}// Traditional Function with parameters
function (a, b){
  return a + b + 100;
}

// Arrow Function with parameters
(a, b) => a + b + 100;

Though arrow functions are almost similar to the traditional functions, it has some limitations. It does not have its own bindings to this or super. It is not suitable for call, apply and bind methods, which generally rely on establishing a scope and can not be used as constructors.

Learn more about ES6 here!