JavaScript Block Bindings and ES6 every developer must know!

Block Bindings

var a = 1;
let b = 2;
const c = 3;

Var Declarations and Hoisting


function getColor(condition) {
if (condition) {
var color = ‘green’;
return color;
} else {
// ‘color’ exists here with a value of undefined
return ‘color not found’;
}
// ‘color’ exists here with a value of undefined
}
function getColor(condition) {
var color;
if (condition) {
color = ‘green’;
return color;
} else {
return ‘color not found’;
}
}

Block-Level Declarations

function getColor(condition) {
if (condition) {
let color = ‘green’;
return color;
} else {
// ‘color’ is not exists here
return ‘color not found’;
}
// ‘color’ is not exists here
}

Block Binding in Loops

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

// in a browser
var greeting = ‘Hello, Good Morning’;
console.log(window.greeting); // Hello, Good Morning
var person = ‘Hello there’;
console.log(window.person); // Hello there
let greeting = ‘Hello, Good Morning’;
console.log(greeting); // Hello, Good Morning
console.log(window.greeting === greeting); // false
const person = ‘Hello there’;
console.log(person); // Hello there
console.log(person in window); // false

Emerging Best Practices for Block Bindings

Functions in ES6

Functions with Default Parameter Values

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

Working with Unnamed Parameters

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

// 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

if (true) {
console.log(typeof doMath); // “function”
function doMath() {
// some code
}
doMath();
}
console.log(typeof doMath); // function

Arrow Functions

// lets create function expression that add two numbers:
function add(a, b) {
return a + b;
}
console.log(add(21, 10)); //31
// same function using arrow function syntax, where a and b are function parameter:
let add2 = (a, b) => a + b;
console.log(add2(21, 10)); // 31
// above function can also be written as:
let add3 = (a, b) => {
return a + b;
};
console.log(add3(21, 10)); // 31
// if only single parameter is required, parenthesis is not required
let square = (x) => x * x;
console.log(square(5)); // 25