Important Hacks About ES6

So Lets Get Started ……..

Block Bindings

Variable Declaration and Hosting

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

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

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

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

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

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

Example :

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

Arrow Functions

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