DEV Community

loading...

JavaScript ES6 and Block Bindings every developer must know!!!!

shamimaakter profile image Shamima Akter ・3 min read
  1. Arrow Function: The arrow function is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a clearer way compared to regular functions.
    Example:
    // Normal function
    Let a = function( a, b) {
    Return a * b;
    }
    // Arrow function
    Let a = ( a, b ) => a * b ;

  2. Default parameters: The concept of default parameters is a new feature introduced in the ES6 version of JavaScript. This allows us to give default values to function parameters.
    Example:
    Function sum (a = 3, y = 5) {
    Return a = b;
    }
    Console.log( sum (5, 15) ) ; // 20
    Console.log (sum( 7)) ; // 12
    Console.log (sum () ); // 8

  3. Spread operator: The spread operator is a new addition to the feature available in the JavaScript ES6 version. It allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected. It allows us the privilege to obtain a list of parameters from an array.
    Example:
    Const arrValue = [ ‘My’ , ‘name’ , ‘is’ , ‘ Shamima ] ;
    Console.log (arrValue) ; // [ ‘My’ , ‘name’ , ‘is’ , ‘ Shamima ] ;
    Console.log ( … arrValue ) ; // My name is Shamima

  4. Block Binding: Usually binding occur whenever we declare or set a value in a variable. For example, we use var, let, and const to declare or assign a variable.

5.Var Declaration and Hoisting: Variable declarations using var are treated as if they are at the top of the function regardless of where the actual declaration occurs, this is called hoisting.

  1. Block-Level-Declaration: Block-Level declarations are those that declare a variable that is inaccessible outside of given block scope. Block scopes are created.
  2. Inside of a function
  3. Inside of a block “ {} “
    Let Declarations: The let declaration syntax is the same as the syntax for var. Just replace var with let to declare a variable with its scope being only that code block.
    Const Declarations: The declaration syntax is similar to let & var, the lifecycle is the same as let. The const declaration syntax variable declared using const are considered constants meaning their values cannot be changed once set.

  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:
    For (var i = 0 ; i < 10 ; i++ ) {
    Console. Log ( i) // 10
    // same code
    For ( let i = 0 ; i < 10 ; i ++ ) {
    Console. log ( i ) // error - i is not defined

  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 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 means for the var I can accidentally overwrite an existing global, but if I use let or const it cannot overwrite.

  6. Emerging Best Practice 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, developers following a convention that uses const as default and use let when I know the variable value may change.

  7. Working with Unnamed Parameters: Earlier in JavaScript function parameters that are passed without defining are inspect through the argument object. Through inspecting arguments works fine in most 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.

  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:
    If ( true ) {
    Console .log ( typeof doMath ) // “ function “
    Function doMath ( ) {
    // some code
    }
    doMath ()
    }
    Console. log ( typeof doMath ) // function

Discussion (0)

Forem Open with the Forem app