10 Essential Concept of ES6 and Functions in JavaScript

5 min readMay 6, 2021

Hello..! May be you are an enthusiastic Javascript learner who already known about basic javascript. This is an article that explores your ES6 and function-related knowledge. So, let's started…

1. Block Binding:

Variable is more formally known as binding. When we declare and/or initialize a variable, we actually bind a value to a name inside a scope. Scope usually refers to a specific part of a program.

So binding occurs whenever we declare and/or initialize a variable using one of these keywords: var, let and const in JavaScript. For example:

ES6 offers some best approaches for block bindings using var, let and const. But there are some indistinct things that JavaScript engine does behind the scene. First I would go with var binding:

Here I log name variable to the console three times in the if, else, and enclosing blocks.

Now can you imagine what happens if we pass a boolean value to the function? Well, the confusion happens here. If you pass true, the function gets output from if and enclosing blocks, otherwise, from else and enclosing blocks. But remember name is only declared and initialized in the if block.

How is the name available in the else and enclosing blocks? The answer is because of hoisting.In the next section we will discuss about Hoisting.

2. Hoisting:

ES6 brings a new feature called hoisting. In general, hoisting is a mechanism that handles execution contexts in JavaScript. This means the variable and function declarations (not initializations) are put into the memory during the compile phases before going for any execution.

var declarations are treated as if they are hoisted to the top of the function (enclosing block) or to the global scope if they are declared outside a function. So JavaScript engine treats the previous function internally as the following:

Notice carefully the declaration is hoisted to the top but the initialization is staying exactly where we type the name variable. This means that we can access the name variable from everywhere in the enclosing block in case of var binding.

To address this issue with var ES6 introduces block-level declarations using let and const.

3. Block Level Declaration:

If you declare a variable in a block-level scope using any of let and const you can not access the declaration outside that block scope. Block Scopes can be created in the following places:

Inside a function (function block)
Inside a block (wrapped with two curly { } braces)

We have already seen these block-level scopes in the example above. Now we will use the previous function again but this time using either let or const. Ok. I am going to use let. Consider the following example:

Notice the let binding. This time name only exists inside the if block. It is not available outside the if block. Because JavaScript engine does not hoist let and const declarations. So the name is not accessible in else and enclosing blocks.

4.Block Binding in Loops

Block level is very useful when dealing with loops in javascript. It is best practice to use let instead of var because var is being hoisted. consider the following example:

5.Global Block Bindings:

Global scope behavior for var is different than let and const. For example when var is used in the global scope, a new global variable is created, which is a property on the global object (window in browsers), but if you use let or const in the global scope, a new binding is created in the global scope but no property added to the global object (window in browsers). That mean for var you can accidentally overwrite an existing global, but if you use let or const you cannot overwrite. Here’s the example:

When var is being used:

When let is being used:

6. Emerging Best Practices for Block Bindings

At now we should know What is Best for for Block Bindings ??

During ES6 development, the convention was to use let instead of var and use const to limit the modification. But as more developers migrated, developer following a convention that use const as default and use let when you know the variable value may change.

Some Functional Concepts in ES6

7. Functions with Default Parameter Values

In ES5 and earlier requires lots of extra code to simulate default parameter value. ES6 make it easier to pass default parameter values when parameter is not formally passed when call the function. For example:

8. Block-Level Functions

ES6 allows block-level functions which are hoisted on top of the function or hoisted into the global scope.. For example:

9. Arrow Functions

ES6 allows an alternative way to write shorter syntax named arrow function compared to traditional function expression. For example:

The above functional operation is easily done by using arrow function.

Is is not amazing..? I say obviously. what you think?

The function can also be define as :

10. Working with Unnamed Parameters

Earlier in javaScript function parameters that are passed without defining are inspect through argument object. Though inspecting arguments works fine in most of the cases, this object can be a little cumbersome to work with. ES6 introduces the rest parameter to make it easier to work with unnamed parameters. The rest parameter allows any number of arguments as an array.