Some Important Things for JavaScript Es6 Block Binding and Function Hacks

5 min readMay 6, 2021

Block Binding in ES6

Generally, bindings occur whenever we declare or set a value in a variable. For example, we use var, let, and const to assign a variable.

var x = 1;
let y = 2;
const z = 3;

Now I will explain how var and hoisting occur and how to use ES6 for block bindings using var, let, and const

Var Declarations and Hoisting

When variables declared with var they are hosted to the top of the function or global scope if declared outside a function. var declarations are treated as if they are hoisted to the top of the function as enclosing block or to the global scope if they are declared outside a function. Consider the following function:

function getName(condition) {
  if (condition) {
    var name = 'javascript'
    return name
  } else {
    // 'name' exists here with a value of undefined
    return 'name not found'
  }
  // 'name' exists here with a value of undefined
}

Block-Level Declarations

Block-level declarations are those that declare variables that are inaccessible outside of given block scope. Block scopes are created:

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

Variable declarations using let or const are not hoisted to the top of the enclosing block which can limit the variable’s scope to only the current code block. But if you want the variables are available to the entire block then you can declare the variable using let or const first in the block. consider the same example but with let:

function getName(condition) {
  if (condition) {
    let name = 'javascript'
    return name
  } else {
    // 'name' is not exists here
    return 'name not found'
  }
  // 'name' is not exists here
}

so if let and const are used in block scope then hoisting will not occur but if var is used then hoisting will occur or variable will be accessible outside the block scope.

Block Binding in Loops

In Javascript, Block-level is very useful when dealing with loops. It is best practice to use let instead of var because var is being hosted. Follow the two examples below:

for (var i = 0; i < 10; i++) {
  // some code
}
// i is accessible here because we declare using var
console.log(i) // 10

for (let i = 0; i < 10; i++) {
  // some code
}
// i is inaccessible here because we declare using let
console.log(i) // error- i is not defined

Global Block Bindings

Generally, var is different than let and const fin Global scope Behavior. For example, when var is used in the global scope, a new global variable is created, which is a property on the global object, 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. That means for var you can accidentally overwrite an existing global, but if you use let or const you cannot overwrite. Here’s the example:

for var variable,

// in a browser
var string = 'I love javasript'
console.log(window.string) // I love javasript

var string2 = 'love you too'
console.log(window.string2) // love you too

for let variable,

let string = 'I love javasript'
console.log(string) // I love javasript
console.log(window.string === string) // false

const string2 = 'love you too'
console.log(string2) // love you too
console.log(string2 in window) // false

Functions in ES6

In Javascript, ES6 offers a number of incremental improvements on top of ES5 functions that make javascript less prone to error and more powerful.

Functions with Default Parameter Values

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

function add(num1, num2 = 0) {
  //here, 0 is default parameter value
  return num1 + num2
}
console.log(add(20, 5)) // 25
console.log(add(20)) // 20function add(num1, num2 = 0) {
  //here, 0 is default parameter value
  return num1 + num2
}
console.log(add(20, 5)) // 25
console.log(add(20)) // 20

Function with Unnamed Parameters

In JavaScript function parameters that are passed without defining are inspect through argument object. Though 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. The rest parameter allows any number of arguments as an array.

function add(...args) {
  // args is the name for the array
  return args.reduce((accumulator, current) => accumulator + current, 0)
}

console.log(add(5)) // 5
console.log(add(5, 3)) // 8
console.log(add(5, 2, 3)) // 10

The Spread Operator

Spread Operator takes in an iterable (array) and expands it to a list of arguments. The … spread operator is useful for many different tasks including the following:

Copying an existing array, Merge or combine arrays, Call function without apply, Use in Math Functions, Use in restructuring, Use an array as arguments, adding to state in React, Convert arguments or NodeList to Array

some of the code example:

// Using in Math
let arr = [6, 10, 21]
console.log(Math.max(...arr)) //21

// Multiple iterable and combine
let arr1 = [25, -10, 31, 44]
let arr2 = [30, 26, 98, 11]
console.log(Math.max(...arr1, ...arr2, 25)) //98

// Combine or merge arrays
let arr3 = [33, 25, 21]
let arr4 = [28, 37, 35]
let combine = [10, ...arr3, 20, ...arr4]
console.log(combine)
// [ 10, 33, 25, 21, 20, 28, 37, 35 ]

Block-Level Functions

In Javascript, 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 handleTest) // "function"

  function handleTest() {
    // some code
  }

  handleTest()
}

console.log(typeof handleTest) // function

Arrow Functions

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

//have no parameter
const testNumber = () => 81;//have single parameter
const multiplyNum = num => num * 2;// have multiple parameter
const sum = (x, y) => x + y;
console.log(add(90, 10)); // 100