CHAPTER -5 JAVASCRIPT BOUNDARIES.

LET AND CONST EXTENSION

Generally we hear let and const declarations are hoisted. Also , it is very different from var declarations.

let and const are more than just placeholders to store values. For a surprise , let and const declarations lie in a temporal dead zone for a time being!

console.log(b)
let a = 100;
var b =2;

We know hoisting allows us to produce and expect output before function and variable initializations.

And due to the concept of Execution Context , we get undefined a s a result as of now. All because of hoisting as well.

But tweaking it a little bit:

console.log(a)
let a = 100;
var b =2;

It gives a true error where you can access variable only after its declaration and initialization.

Summary : In case of var , var a : undefined is in global space but in case of let b it is inside some script.

var a is allocated memory and is attached to global object due to the window object concept. But in case of let a they are also allocated memory but stored in a different memory space(not global).

But what working in behind the scene is Temporal Dead Zone.

What the heck is Temporal Dead Zone?? It is the time being , the time since when this let b ; is hoisted till it is initialized some value. Result is when you try to access a variable before declaration it gives error .

Check this :

The output is all behind the Temporal Dead Zone concept. Also with the ongoing of window concept we studied earlier:

window . a =1; // in case of var a =1
window . b=undefined; //in case of let b=2; where b is not in global space

Const says : I am most important

const is absolute twin of let but cannot be reassigned or reinitialized later. You have to initilaize while declaring only.

Guess the output now:

let a;
a=10;
console.log(a)

ERROR TYPES:

Block Scope + Shadowing in JS

What if someone asks what is block ? It is nothing but {....} known as compound statements as well.

Block groups multiple statements together as for where JS expects only one statement.

But Block + Scope = Block Scope is what all var and functions are accessed inside it.

Check this:

SHADOWING ??

var a = 100;
{
    var a =1;
    let b=2;
    const c=3;
    console.log(a);
    console.log(b);
    console.log(c);
}
console.log("output" ,a );

//ouptut is a:1  b:2 and c:3  and output:1
because here var a : 100 is shadowed by var a:1 and its value is modified completely even after out of the block scope.

Because they both are pointing to same memory locations. Behind the scene for previous output:

Scopes WORLD There are 3 types of scopes:

Global 2.Script 3.Block

Script has their separate memory space for let and var hoisting. Block scope is for the whole JS program.

LEGAL AND ILLEGAL SHADOWING:

const c=100;
function x()
{
   const c= 30;
   console.log(c);  //c:30
}
x();
console.log(c);    //c:100

What can be the output? It is LEGAL SHADOWING

var a =20;
{
   var a =20;
}

Error is "a" is already being declared.

ILLEGAL SHADOWING:

let a =20;
   {
      var a =20;
  }

LEGAL SHADOWING:

var a =20;
{
   let a = 20;
}

ARROW FUNCTION- FEELS SCARY?

Remember: All scope tools for functions are exactly same for arrow functions.

It uses arrow notation (=>) to concisely define a function. They can be very handy but it is important to know when to use them, and when not to use them.

How it is different from normal functions is : The function keyword has been removed and instead, a fat arrow has been added before the curly braces.

Can you see the difference in between?

const add = (a, b) => a+b;

The single statement that is written after the fat arrow (without curly braces), is performed and the result is returned.

We can reduce the arrow function even further. If there is only one argument, there is no need for parenthesis.

const square = a => a*a;

Gibberish of this is different in arrow functions as compared to normal functions.

In regular functions, this represents the object that calls the function.

But, in arrow functions, this keyword always represents the object that defines the arrow function.

Arrow functions were introduced with ES6 as a new syntax for writing JavaScript functions. They save developers time and simplify function scope.

Arrow functions are anonymous and change the way this binds in functions.

Arrow functions make our code more concise, and simplify function scoping and the this keyword. They are one-line mini functions.

Thankyou!

SakshiCodrops

SakshiCodrops

JAVASCRIPT JOURNEY- DAY 5

CHAPTER -5 JAVASCRIPT BOUNDARIES.