Important Hacks About ES6

So Lets Get Started ……..

Block Bindings

Usually bindings occur whenever we declare or set a value in a variable. Variable declare is an important factor. ES6 provides a new way to declare variable, so that you can more easily control the scope of variables.

Variable Declaration and Hosting

Before ES6, var was the only keyword used to declare variables in JavaScript. With ES6 JavaScript introduced two other variable declaration keywords let and const. var declarations are globally scoped or function scoped. var is now the weakest signal when you define a variable in JavaScript.

So, today we are talking about var, let and const .

• var : var declarations are globally scoped or function scoped. var variables can be re-declared and updated within its scope. var is now the weakest signal when you define a variable in JavaScript.
• Hosting : variables are hoisted to the top of their scope and initialized with a value of undifined.

Example:

let greeting = " Hi";
let times = 4;

if (times > 3) {
let hello = "Say Hello";
}
console.log(hello) // "Say Hello "

• let : let declarations are blocked scoped. let variables can be updated but not re-declared.
• Hosting : let declarations are hoisted to the top.

Example:

let greeting = " Hi";
let times = 4;

if (times > 3) {
let hello = "Say Hello";
console.log(hello);// "Say Hello "
}
console.log(hello) // hello is not defined

• const : const declarations are blocked scoped. const variables can neither be updated nor re-declared.
• Hosting : const declarations are hoisted to the top but are not initialized.

Example:

const friend = "Tanshin";
friend = "Rana";
console.log(friend) // TypeError: Assignment to constant variable.

Block Binding in Loops

Perhaps one area where developers most want block level scoping of variables is within for loops. For for this we have to use let not var, cause var is being hoisted.

Example :

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

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

i is accessible because we use var.

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

// i is not accessible here - throws an error
console.log(i);

i is not accessible because we use let.

Global Block Bindings

• Another way in which let and const are different from var is in their global scope behaviour. When var is used in the global scope, a new property is added to the global object (window in browsers). That means you can overwrite an existing global using var.

Example :

// in a browser
var greeting = ‘Say Hello’;
console.log(window.greeting); // Say Hello
var person = ‘Hi there’;
console.log(window.person); // Hi there

• If you instead 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. So, here also you can not overwrite a global variable using let or const.

Example :

// in a browser
var greeting = ‘Say Hello’;
console.log(window.greeting === greeting); // false
var person = ‘Hi there’;
console.log(window.person); // Hi there
console.log(person in window); // false

Function With Default Parameters

If you need backup value for your function. You can apply default parameters method. The question is what is default parameters? So the answer is simple, default parameters allow us to initialize functions with default values. A default parameter can be anything from a number to another function.

Example:

1. function add(num1, num2 = 20) {
return num1 + num2
}

const total = add(10, 40);
console.log(total) // Output is 50

2. function add(num1, num2 = 20) {
return num1 + num2
}

const total = add(10);
console.log(total) // Output is 30

• num2 = 20; where 20 is a default parameter value.

Unnamed Parameters

In JavaScript earlier version, there was no possibility to use unnamed parameter into the function. But ES6 Bring us Rest parameters. You define rest parameters by creating a parameter prefixed with …Any arguments provided at or beyond the rest parameter on a function get combined into an array that’s assigned to the rest parameter’s name. You can give them to any name you’d like. You can start at any parameter you want.

Example :

function add(...arg) {
return arg.reduce((accumulator, current) => accumulator + current, 0)
}

console.log(add(10)) // Output is 10
console.log(add(10, 20)) // Output is 30

console.log(add(10, 30, 20)) // Output is 60

Spread Operator

Spread Operator is a new addition to the set of operators in JavaScript ES6. The spread operator is commonly used to make shallow copies of JS objects. When you need to copy an existing array, merge or combine arrays, destructuring and many more things, you simply use spread operator method.

Example :

1. let num = [10, 20, 30]
console.log(Math.max(...num)) // Output is 30

2. let num1 = [10, 20, 30]
let num2 = [40, 50, 60]

console.log(Math.max(...num1, ...num2, 50)) // Output is 60

3. let num3 = [10, 20, 30]
let num4 = [40, 50, 60]

let total = [100, ...num3, 200, ...num4]

console.log(total) // Output is [100, 10, 20, 30, 200, 40, 50, 60]

Block-Level Functions

block-level functions are hosted on top of the function or hoisted into the global scope. Block-level function used in many situations. Block-level functions declarations are allowed in ES6. They hoist to the top of the block. In strict mode, they aren’t visible outside the containing block.

Example :

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

Arrow Functions

Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax. It is also more easier to read and write rather than normal function calling.

Example :

//have no parameter
const give5 = () => 5;//have single parameter
const doubleIt = num => num * 2;// have multiple parameter
const add = (a, b) => a+ b;
console.log(add(20, 10)); // 30