1. Press cmd+option+J : This will then open up this console that we see below.
   You can see all the tabs : Elements, Console,Sources, Network, Performance, Memory, Application, Security, Lighthouse.

2. Right Click and then Inspect.

3. Chrome Menu >> Go to View >> Developer >> JavaScript Console

A function without a name is anonymous function.

Now, Other related questions are::
What are first class functions in javascript?
What is difference between function statement and function expression?

Let move on, we’ll be covering all below topics:
1. Function Statement
2. Function Expression
3. Function Declaration
4. Anonymous Function
5. Named Function Expression
6. Difference between Parameters and Arguments ?
7. First Class Functions

First of all, let’s see What is Function Statement?
If you write a function keyword and give it a name like below then it is a function statement.

function a(){
}

Let’s just say function “a” have nothing more then console like below:

function a(){
console.log("Hello, I am calling a")
}

So, this way of creating a function is called Function Statement 🤷🏻‍♀️.

Now, you can assign a function to a variable 😮 also :

var b = function(){
console.log("Hello, b called")
}

Above, We assigned a function to variable “b”. Now function acts like a value. Now this is known as Function Expression 🤷🏻‍♀️.

So, Function Statement and Function Expressions, both are ways to create functions which we are doing from many years.

Now, What the difference between Function Statement and Function Expression?
Answer is: Hoisting.. 🧐

Now, the question is how??
So, when we try to call both functions on top of file and check output then what happens?

a();
b();

//Function Statement
function a(){
  console.log("Hello, a called")
}

//Function Expression
var b = function(){
  console.log("Hello, b called")
}

Output : “b” throws an error
Uncaught TypeError: “b” is not a function 😳🤨

As you already know from hoisting in previous articles. Function “a” will create a memory in memory creation phase and function is assigned to a. But in case of Function expression, “b” will be treated like any another variable. So, “b” is assigned undefined initially until code hits the line 9. So, when JS engine executes line by line and reaches line no. 9 then only function will be assigned to variable “b” until then it is undefined.

So, that’s the major difference between Function Statement and Function Expression.

What is Function Declaration?🧐
It is same as Function Statement

What are Anonymous Function?🧐
A function without a name is Anonymous Function. These functions doesn’t have their own identity. This means if I do below then it will give you syntax error

// Anonymous Function
function () {

}

Why is the error?
Because Anonymous Function looks exactly like a function statement but doesn’t have a name. As per ECMA Script specification, A function statement should always have a name.

Now the question is what’s even the use of Anonymous Functions?🤔
These functions are used in a place where functions are used as values. This means that you can use those to assign as values to some variables, like we did in Function expression.

What is Named Function Expressions?
A named function expression is like a function expression but instead of anonymous function, we use a function with a name.

//Named Function Expression
var b = function xyz(){
  console.log("Hello, b called")
}

So, if interviewer asks you “How can you have the name of function itself and then put it into an expression”?
Answer is: Named function expression. Function “xyz” have name to itself and then assigned it to variable “b” and this makes named function expression.

Next question: Can you call function “xyz”? What will happen then?

//Named Function Expression
var b = function xyz(){
  console.log("Hello, b called")
}

b(); // output here?
xyz(); // output here?

Output :
Uncaught ReferenceError: “xyz” is not defined 🧐 😮

So, What’s the reason? Why “xyz” is not defined?
Because function “xyz” is used as value and not in global scope. But it is created in local scope.
So, if you try to access it inside the function then you can do that. See below:

Note: If you are not familiar how scoping works. Please read here.

What is difference between Parameters and Arguments?

The local variable in function scope is called parameters.
See below example: You can not access param1, param2 outside the function

var b = function(param1, param2){
  console.log("Hello, b called")
 
}

The values which we pass inside a function are called arguments.

var b = function(param1, param2){
  console.log("Hello, b called")
 
}

b(1,2); // 1 and 2 are arguments

What are First Class functions?

The ability to use functions as values which means
1. can be passed as an arguments into another functions
2. and can be returned from the functions
is known as First class Functions.

Example 1: When you can pass function inside another function as an arguments.

var b = function(param1){
  console.log("Param 1 =",param1)
 
}

b(function(){
});

You can also do this using Named function like below:

// First Class function
var b = function(param1){
  console.log("Param 1 =",param1) // cheking here if accessible
 
}

// Named function
function xyz(){

}

b(xyz); // passing named function as xyz

Example 2: Another thing that we can do is return a function from a function. See below:

var b = function(param1){
  console.log("Param 1 =",param1)
 return function(){

 }
}

function xyz(){

}

console.log("Return value of b = ",b(xyz));

This programming concept of First class function is exist in other languages also.

⭐️Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

Ever wondered how to make your JavaScript code more powerful and organised? Meet closures — the secret ingredient that can take your programming skills to a whole new level! In this article, we’ll demystify closures and show you how to wield their magic to create cleaner, smarter, and more efficient code. So, get ready for an exciting journey of discovery as we unravel the wonders of closures, and watch your code flourish like never before!

Explore the following articles to delve deeper into the subject:

• Part 11: Closures in JS 🤷🏻‍♀️
• Part 12: setTimeout + Closures Interview Questions 🤓
• Part 13: Closure JS Interview Questions 🤯
• Part 14: Closure JS Interview exercise 👩🏻‍🏫

I value your feedback! If you found this article helpful in unraveling the mysteries of closures and enhancing your JavaScript knowledge, I’d love to hear from you. Feel free to share your thoughts and let me know if this content has made a positive impact on your coding journey. Your appreciation fuels my commitment to creating valuable content for my readers!

⭐️ Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

Get ready for an exciting adventure into the world of JavaScript closures! By mastering closures through simple exercises, you’ll level up your JavaScript skills and discover their true potential. So, let’s dive in and explore closures together!

If you don not have understanding of Closures, I highly recommend to go through below articles first.

- Part 11: Closures in JS 🤷🏻‍♀️

- Part 12: setTimeout + Closures Interview Questions 🤓

-Part 13: Closure JS Interview Questions 🤯

Let’s get started.

function outerFunction() {
 var outerVariable = "Hi, ";
 function innerFunction(name) {
  console.log(outerVariable + name);  // What is logged?
 }
 return innerFunction;
}

var inner = outerFunction();
inner("Closure");

function outer() {
  var x = 10;
  function inner() {
    console.log(x);  // What is logged?
  }
  return inner;
}
var innerFunc = outer();
innerFunc();

function outer() {
  var x = 10;
  function inner() {
    console.log(x);  // What is logged?
  }
  var x = 20;
  return inner;
}
var innerFunc = outer();
innerFunc();

function outer() {
  var x = 10;
  function inner() {
    var y = 12;
    console.log(x+y); // What is logged?
  }
  return inner;
}
var innerFunc = outer();
innerFunc();

var a = 1; 
function b() { 
    a = 10; 
    return; 
    function a() {} 
} 
b(); 
console.log(a); // What is logged?

function test() {
   console.log(a); // What is logged?
   console.log(foo()); // What is logged?
   
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

var a = 1; 

function someFunction(number) {
  function otherFunction(input) {
    return a;
  }
  
  a = 5;
  
  return otherFunction;
}

var firstResult = someFunction(19); // What is firstResult?
var result = firstResult(12); // What is result?

var fullname = 'Daisy Doe';
var obj = {
   fullname: 'Vera Singh',
   prop: {
      fullname: 'Amar Akbar Anthony',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test()); // What is logged?

For practise, visit the github exercise repo

I value your feedback! If you found this article helpful in unraveling the mysteries of closures and enhancing your JavaScript knowledge, I’d love to hear from you. Feel free to share your thoughts and let me know if this content has made a positive impact on your coding journey. Your appreciation fuels my commitment to creating valuable content for my readers!

⭐️ Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

If you don not have understanding of Closures, I highly recommend to go through below articles first.

- Part 11: Closures in JS 🤷🏻‍♀️

- Part 12: setTimeout + Closures Interview Questions 🤓

Question 1: What are closures In JS?
A function alongs with it’s reference error together forms a Closure.

Question 2. How you’ll explain more about it?

• Each and every function in JS have access to it’s outer lexical environment that means it has access to variables and functions which are in environment of it’s parent.
• Even If this function is executed in some other scope instead of original scope, it will still remember it’s outer lexical environment where it was originally present in the code.

Question 3. What about an example to explain all this?

function outer(){
  var a =10;
  function inner(){
    console.log(a);
  }
  return inner;
}

outer()();

So, in above example, We have nested function inner() inside function outer() . inner() function have access to variable a which is present in it’s outer environment.

Also, when you return inner() function and invoke outer() function, it will still console value of variable a . So, it remembered it’s outer lexical env even when called in other scope.

So, inner() function = Closure 💡

Question 4. What is outer()() ? Why there are two parenthesis?
Two parenthesis are used to call inner function.

Example :
- outer() will return below output:

- outer()() will return below output:

Also, This can be done in other way as well

function outer(){
  var a =10;
  function inner(){
    console.log(a);
  }
  return inner;
}

var close = outer(); // this will give you outer function
close(); // this will give you inner function and equivalent 

Question 5. What if var declaration is moved to Line 5, just before return statement. What will happen? Will it still be a Closure?

function outer(){ 
  function inner(){
    console.log(a);
  }
  var a =10;
  return inner;
}

var close = outer(); // this will give you outer function
close(); // this will give you inner function and equivalent

Answer is YES, it will still be. Closure. It doesn’t matter what the sequence is, means where the statement is. For closure, all matter is function has access to it’s lexical environment. Also, output will be same.

Question 6. What if var is replaced by let in Line 5. What will happen?

function outer(){ 
  function inner(){
    console.log(a);
  }
  let a =10; // let instead of var
  return inner;
}

var close = outer(); // this will give you outer function
close(); // this will give you inner function and equivalent

Answer is It won’t affect anything. It ‘ll still be a closure and output will be same.

Question 7. What if outer() have a parameter? What happens then?

function outer(b){ 
  function inner(){
    console.log(a, b); // try printing b here
  }
  let a =10; // let instead of var
  return inner;
}

// Passing argument here 
var close = outer("Hi Closures"); // this will give you outer function
close(); // this will give you inner function and equivalent

Answer is It won’t affect anything. It ‘ll still be a closure and we can try printing value of b as well in console.

Reason: b is also the part of outer environment

Output will be:

Question 8. What if outer() function is nested into another function? Will inner() function have access to outer() function’s environment as well?

function outest(){
  var c = 12; 
  function outer(b){ 
    function inner(){
      console.log(a, b, c); // try printing b and c  here
    }
    let a =10; // let instead of var
    return inner;
  }
  return outer;
}


// Passing argument here 
var close = outest()("Hi Closures"); // this will give you outer function
close(); // this will give you inner function and equivalent

Answer is YES, inner() function have access to outer() function’s environment as well.

Try printing variable c inside inner() function.

Output will be :

Question 9. What if we have global variable with conflicted name?

function outest(){
  var c = 12; 
  function outer(b){ 
    function inner(){
      console.log(a, b, c); // try printing b and c  here
    }
    let a =10; // let instead of var
    return inner;
  }
  return outer;
}

let a =100;
// Passing argument here 
var close = outest()("Hi Closures"); // this will give you outer function
close(); // this will give you inner function and equivalent

inner() function has a closure with variable a on Line 7 i.e let a = 10 .So the inner() function has reference for variable a is at Line 7.
let a = 100; at Line 13 is in different scope. So, it will print output with value 10.

But if we comment Line 7, then it will go to outer environments looking for a and prints 100. Check below:

function outest(){
  var c = 12; 
  function outer(b){ 
    function inner(){
      console.log(a, b, c); // try printing b and c  here
    }
    //let a =10; // let instead of var
    return inner;
  }
  return outer;
}

let a =100;
// Passing argument here 
var close = outest()("Hi Closures"); // this will give you outer function
close(); // this will give you inner function and equivalent

Also, if we comment Line 13, then it will print “ReferenceError: a is not defined”. Check below:

function outest(){
  var c = 12; 
  function outer(b){ 
    function inner(){
      console.log(a, b, c); // try printing b and c  here
    }
    //let a =10; // let instead of var
    return inner;
  }
  return outer;
}

// let a =100;
// Passing argument here 
var close = outest()("Hi Closures"); // this will give you outer function
close(); // this will give you inner function and equivalent

Question 10. What are the advantages of Closure?

1. Module Design Patterns
2. Currying
3. Function Like once
4. memoize
5. maintaining state in async world
6. setTimeouts
7. Iterators
8. Data Hiding and Encapsulation

Question 11. What are disadvantages of Closure?

1. There could be over consumption of memory because every time a closure is formed, it consumes a lot of memory.
2. Those closed over variables are not Garbage Collected, so it means it is accumulating a lot of memory
3. If not handled properly, it can lead to memory leaks.

Question 11. What is Garbage Collector?

Garbage Collector is a program in browser or in JS engine, which free up unutilised memory.
In languages like c, c++, it is upto developers how we allocate and deallocate memory but in high level programming language like JS, most work is done by JS engine.
So, whenever there are some unused variables, Garbage collector takes those out of memory

Question 11. How Closures and Garbage Collector related to each other?

function a(){
  var x = 10;
  return function b(){
   console.log(x);
  }
}
var y = a();

In above example, function b() is closure. So, ideally after executing function a() , all it’s memory including variable x should be garbage collected. It wasn’t needed anymore. But because function b() is closure and variable x is being referred and assigning value variable y, so it won’t free up as later on , we might call y() .

This way more closures means keeping a lot of memory accumulating.

Although, some modern browsers like chrome and JS engines like V8, they have smart garbage collection mechanism, in which it somehow identify unreachable variables and collects these garbage variables.

Question 13. What is Smartly garbaged variable, examples?

function a(){
  var x = 10, z = 20;
  return function b(){
   console.log(x);
  }
}
var y = a();

In above example, variable z is not being used . So when function b() is returned , variable z will be smartly garbaged but variable x is not. So, variable z won’t be in memory.

With this, we covers basic questions with explanation.

Thanks for reading the article ❤️

⭐️ Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

Prerequisite:

If you don’t understand concept of how Closures works, I highly recommend you to read below :

• Part 11: Closures in JS 🤷🏻‍♀️

Basic Definition : The setTimeout() function is commonly used if you wish to run your function a specified number of milliseconds from when the setTimeout() method was called. The general syntax of the method is:

setTimeout(expression, timeout);

where expression is the JavaScript code to run after timeout milliseconds have elapsed.

If we run this program, What do you expect to see in console?

Output:

It’ll print value of i i.e 1 after 1 sec.

Similarly if you try doing below, it’ll print after 3 sec.

You might be thinking that setTimeout() will wait for 3 sec first to print i and then print “Learn”. But NO, it will print “Learn” first then wait for 3 sec and print value of i .

What setTimeout() actually does?

• At Line 3, function () forms a Closure. This function remember reference to i.
• setTimeout() is taking that callback function and stores it into some place and attaches timer to it. And JS proceeds and goes to next line.
• Once that timer expires, it takes that function, put it back in call stack and runs it.

Let’s take an example of complicated problem.

Print in console 1, 2, 3, 4, 5 … 10, after each and every second. Means 1 after 1 sec, 2 after 2 sec, 3 after 3 sec and so on. How would you do it?

First solution comes to mind is using for loop and move setTimeout() inside it. Like below, right ?

Let’s check output:

This is not what we expected. Why’s that? What happened?🧐

Two reasons:

1. We learn Closures how it is a function along with it’s lexical environment. So, even when function is taken out from it’s original scope, still it will remember it’s original scope. It’ll have access to those variables of it’s lexical scope.

Remember the example of Indian daughter’s that I give in last article to make it more relatable. If not, read here.

So, When setTimeout() takes this function and stores it somewhere and attaches a timeout, it remember the reference to i.

Remember, in last article, we understand how it remember reference to variable not value of it. In same way, a daughter remember her brother identity , not all the addresses he lived.

So, when loop runs the first time, it mix a copy of function, attaches timer and remember the reference of i .

Similarly, all 10 copies of functions, remember the reference of i , not the value. And all are pointing to same reference of i .

Why the hell they are pointing to same reference of i ? 😳

Because the environment for all these functions are same. All these copies of setTimeout()’s callback functions refers to i in same memory space. 🤷🏻‍♀️

2. JS doesn’t wait for anything. So, it will run the loop again and again 🔄.
So, setTimeout()will store all 10 functions and JS will move on. It won’t wait for timers to expire. It’ll print “Learn” and when the timer expires, it is too late.
Now, value of i changed because the loop was constantly running. when this callback function runs, by that time, the value of var i = 11 in memory location.

That’s why it prints 11 every time🤷🏻‍♀️. Because all of these copies of callback functions are referring to same spot in memory🤦🏻‍♀️. Which now have run 10 times and it’s value became 11 because of increment in for loop🙄.

Now, how we can fix this? 💡💡

use let instead of var because let has block scope. So for each and every loop iteration, i will be new variable every time. New copy of i will be in memory every time.
When setTimeout() runs , callback function will have new copy of i with it.

Let’s run and see output:

It worked 🎉🎉

Let’s just revise again, what actually happened because of let:

1. When loop started with i = 1 , function formed a closure with new variable itself.
2. After i++ , when function formed closure again, it does have new variable with value 2 and saves it.
3. And so on. This way it forms it makes 10 copies of variable i and forms closure with each and every function.

So, Next time someone asks you what will be the difference in output of below two cases and why? You know the answer 😎

Case 1:

function x(){
  for (var i = 1; i <= 10; i++){  // using var here 
    setTimeout(function (){
    console.log(i);
    }, i * 1000);
  }
  console.log("Learn")
}
x();

Case 2:

function x(){
  for (let i = 1; i <= 10; i++){  // using let here 
    setTimeout(function (){
    console.log(i);
    }, i * 1000);
  }
  console.log("Learn")
}
x();

Answer: let is Block Scoped and it’s creates a new copy every time until loop is executed.

And Twist again 🤭 : What If you have to only use var and prints 1,2,3,..10 every second? What to do?

Think a bit , what could be the solution?
Trick is , we have to make a new copy of variable i every time.

So, we will create a new function close() and wrap setTimeout() inside that. And pass i every time in calling.

Why it will work? 😬

Because every time you call close() function with i , it creates a new copy of i for setTimeout() 😎.

And that’s it. We covered how setTimeout() works and connected to closures. 👏🏼

Note: I found one more article here which also explains setTimeout() with good examples. Try reading it.

Next 👩🏻‍🏫 ⏭️ : Part 13: Closure JS Interview Questions 🤯

Thanks for reading the article ❤️

⭐️ Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

Prerequisite:

If you don’t understand concept of how Lexical scope works, I highly recommend you to read below :

1. Part 8: Scope Chain, Scope and Lexical Environment 🧐
2. Part 9 : let, const and Temporal Dead Zone in JS 🧐
3. Part 10 : Block Scope, Function Scope and Shadowing in JS.

— — — — — — — — — — — — — — — — — — — — — —— — — — —

Let’s start with an example

function x(){
  var a = 10;
  function y(){
    console.log(a);
  }
  y();
}
x();

Because of JS lexical scope concept, so when y() function is invoked and executed, it ‘ll try to find a inside local memory scope. If not found there, then it goes to Lexical Parent and search there.

What should be the output?

Let’s put debugger and check what is happening in background:

Closure means that a function bind together with its lexical environment or you can say “function along with it’s lexical scope”

Why it says Closure (x) in above screenshot?

We hold program on to y() at line 4 so inside y() , it forms closure with the variable a which was part of function x() lexical scope.

Or you can say, function y() is bind to variable of function x() . So , it forms a closure and it has access to it’s parent lexical scope.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Let’s take another example:

function x(){
  var a = 10;
  function y(){
    console.log(a);
  }
  return y;
}
var z = x();
console.log(z);

Closures come into picture when you try to return these functions outside.

Output:

So, as you can see function y()is returned in to variable z now.

At Line 8, function x()is gone from memory space, completely vanish and no longer in call stack.
So, now variable z contains function y().

Question: As function y( ) is returned and no longer reside inside function x( ). How will this behave in other lexical scope?

Let’s try calling function z(). See below:

function x(){
  var a = 10;
  function y(){
    console.log(a);
  }
  return y;
}
var z = x();
console.log(z);
z();  // call function here

As function y() is trying print variable a but variable a is not in global scope and function x()is not in call stack anymore. What will happen to variable a? What will invoking function z() will print now?

Output:

As you can see, it printed 10.

Here comes concept of closure, When a function is returned from another function, they still maintains their Lexical Scope. They remember where they were actually present.

We can say when function y() was returned, not only function code was returned but closure was returned.

That closure enclosed function along with Lexical scope is returned.

******************************
IDK Why but I like to compare Closures to daughters in Indian family’s. 🤷🏻‍♀️

Like when a daughter got married and went to in-laws house , she remembers from where she came , family member names and other family details and history.

In same way , when function is returned, it not only return code but returns lexical scope as well which is called Closures.

Physical body represents function body
Memory/details from her parents represents Lexical scope
Daughter represents Closures 🫣

*********************************

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Let’s take another example:

function x(){
  var a = 10;
  function y(){
    console.log(a);
  }
  a = 100;
  return y;
}
var z = x();
console.log(z);
z();

What should be output now?

Because console.log(a) doesn’t refers 10. It is reference to the variable not the value. So, reference to variable persist.

***********************************
Again let’s take daughter’s example🫣
She remember her brother so first brother was staying at place A but then moved to place B. So, reference is to the brother not to the address. Address can keep changing.
Reference to the variable persist not the value.

*************************************

So, now variable a’s reference points to 100 . That means 100 is still in memory preserved because of closure. When function x() was gone , it is not garbage collected, because it has to be used later. That’s why 100 printed not 10.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Let’s take another example again :

function z(){
  var b = 20;
  function x(){
    var a = 10;
    function y(){
      console.log(a,b);
    }
    y(); // call function here
  }
  x(); // call function here
}

z(); // call outer function here

Run it and add debugger in browser:

As you can see in above, there are two closures : Closure (x) and Closure (z).

Closure (x) => for parent
Closure (z) => For parent’s parent

So, if y() is being returned anywhere then value of variable a and variable b are not garbage collected.

********************************************
If I may again take daughter’s example🫣
Daughter remembers her mother’s family as well i.e grand parents .
Her mother was also someone’s daughter so she can also be represented as Closure.

Mother = function x()=> knows variable bbecause it is it’s Lexical scope which is function z()
Daughter = function y()=> knows variable a because it is it’s Lexical scope which is function x(), then further function x() knows variable b in same way

********************************************

So, Because of Closures, as these functions remember things even when they are not in their lexical scope, this makes JS language very powerful.

Few Common usage of Closures are :

1. Module Design Patterns
2. Currying
3. Function Like once
4. memoize
5. maintaining state in async world
6. setTimeouts
7. Iterators
8. Data Hiding and Encapsulation

Disadvantages of Closures:

1. There could be over consumption of memory because every time a closure is formed, it consumes a lot of memory.
2. Those closed over variables are not Garbage Collected, so it means it is accumulating a lot of memory
3. If not handled properly, it can lead to memory leaks.

Next 👩🏻‍🏫 ⏭️ : Part 12: setTimeout + Closures Interview Questions 🤓

Thanks for reading the article ❤️

⭐️ Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

JavaScript developers often add the string "use strict" in their code. What does "use strict" do in JavaScript? What is the reason behind using it? Are there any benefits of using it?

The Solution

The "use strict" directive enables JavaScript’s strict mode.

JavaScript’s strict mode was introduced in ECMAScript 5. It enforces stricter parsing and error handling on the code at runtime. It also helps you write cleaner code and catch errors and bugs that might otherwise go unnoticed.

Usage

You can enable strict mode in two different ways, globally and locally.

Enable strict mode globally by adding the string "use strict" as the first statement in your file. All subsequent code in the script will execute in strict mode.

// First line inside a .js file
'use strict';
// rest of the script

Enable strict mode locally by adding the string "use strict" as the first statement inside a function. Using strict mode locally inside the function will enforce stricter parsing only within the context of that function.

// Inside a function
function strict_function() {
  'use strict'; // rest of the function
}

It is important to note that JavaScript modules are in strict mode by default.

Benefits of Using Strict Mode

Enabling strict mode in your code has many benefits.

Here are some examples:

Prevent accidental creation of global variables

Strict mode is useful in situations where you can accidentally create a global binding. Accidental global variables can create bugs in the code. For example:

'use strict';
x = 9; // ReferenceError: x is not defined
function strict_function() {
  'use strict';
  x = 'I am a strict function';
  console.log(x);
}
strict_function(); // ReferenceError: x is not defined

A common scenario in which you can accidentally create global variables is within for loops. With strict mode enabled, JavaScript will throw an error if you forget to add the let keyword before the loop counter variable (counter in the following example):

function catchTheProblem() {
  'use strict';
  for (counter = 0; counter < 10; counter++) {
    console.log('Catch me if you can!');
  }
}
catchTheProblem(); // ReferenceError: counter is not defined

If you don’t use strict mode here, JavaScript will create a global variable with the name counter.

Catch typing mistakes in variable names

If you don’t use strict mode, a typing error can create a new variable, which can cause bugs down the line. For example:

'use strict';
let misspelledVariable;
misspelleVariable = 9; // This line will throw en error due to // misspelling of "misspelledVariable"

Prevent accidental deleting

Deleting a variable, a function, or an argument will result in an error:

'use strict';
let a = 9;
delete a; //This will cause an error
function testFunction() {}
delete testFunction; // This will cause an error
function testWithArgs(arg) {
  delete arg; // This will cause an error
}

Prevent duplicating parameter names in a function

Duplicating the parameter’s names will result in an error:

function test(arg1, arg1) {} // This will cause an error

Prevent writing to read-only properties

If you set an object’s writable value to false, and then try to assign a new value to the object, strict mode will throw an error:

'use strict';
const obj = {};
Object.defineProperty(obj, 'x', { value: 0, writable: false });
obj.x = 9; // This will cause an error

Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

What is Block ?

1. Block is defined by curly braces i.e { .. }
2. Block is also know as Compound Statement.

Why Block is required in JS?

Block is used to combine multiple javascript statements into one group.

Why we need to group multiple statements at one place?

we group multiple statements in a block so that we can use it where JS expects one statement

Example: if statement only expecting one statement but we provided multiple statements using curly braces. This is a Block.

if(true){
// Compound Statement
var a = 10;
console.log(a);
}

— — — — — — — — — — — — — — — — — — — — — — —

What is Block Scoped?

Block Scoped means what all variables and functions we can access inside block.

To understand in details, let’s take an example and run it:

{
var a = 10;
let b = 20;
const c = 30;
}

So, “b” and “c” are inside Block Scope which is separate space which is reserved for block only. But “a” is hoisted inside global object.
From here the statement comes in picture that:

let and const are block scoped.

Therefore, you can’t access let and const type variable outside the scope .

{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block a= ",a);
console.log("Outside Block b= ",b);
console.log("Outside Block c= ",c);

So, it is saying “Reference Error: b is not defined” . Because “b” is not in global scope.

— — — — — — — — — — — — — — — — — — — — — — — — — — — —

What is Shadowing in JS?

If we have same named variable outside the block, then block variable will shadowed outside block variable.
Example:

var a = 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}

What will log print for “a” now?

Output:

It prints 10. That means line 3 variable shadowed Line 1 variable.

* What If I try to print var “a” outside block ? What should it print 10 or 12?

var a = 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block a= ",a);

Output:

So , it prints 10 again. Line number 3 shadowed line 1 and also modified the value for variable. Because they both are pointing to same memory location.

* Now what happens with “let” type variable?

let b= 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block b= ",b);

Output:

Now, Inside block variable “b” prints 20 but outside block , it prints 12.
Because scopes are different in case of let type variable. Try adding debugger and check scope of variables.

In above screenshot, you can see three scopes ::::

1. Global: memory reserved for var
2. Script: separate memory forletand const outside block scope
3. Block: separate memory for variables inside scope

* Now what happens with “const” type variable?

const c= 12;
{
var a = 10;
let b = 20;
const c = 30;
console.log("Inside Block a= ",a);
console.log("Inside Block b= ",b);
console.log("Inside Block c= ",c);
}
console.log("Outside Block c= ",c);

Output:

Now, Inside block variable “c” prints 30 but outside block , it prints 12.
Because scopes are different in case of const type variable. Try adding debugger and check scope of variables.

Again, in above screenshot, we can see 3 scopes.

— — — — — — — — — — — — — — — — — — — — — — — — — — — —

Does Shadowing behaves same way in functions?

const c= 12;

function a() {
const c = 30;
console.log("Inside Function c= ",c);
}

a();

console.log("Outside Function c= ",c);

Output:

Now, Inside function variable “c” prints 30 but outside function, it prints 12.
Because scopes are different in case of const type variable. Try adding debugger and check scope of variables.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

What is Illegal shadowing?

Case 1: If outside block variable is “let” and inside is “var” type? Will it still gives error?

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

Can we do this? What will be the output now?

So, this is known as Illegal Shadowing.

Case 2: But what If outside block variable is “var” and inside is “let” type? Will it still gives error?

var a = 20;
{
    let a = 10;
}
console.log(a);

Answer is NO .It won’t give any error and work perfectly fine.

WHY?

Because if a variable is shadowing something, it should not cross the boundary of it’s scope.

In Case 1: var is not blocked scope. “var” is function scoped. So you can do it inside a function.

let a = 20;
function b() {
    var a = 10;
}
b();

Now, in this case, var a is not interfering with let a as both have different memory.

Now, Try below on your own, add debugger and see how scopes work:

Case 1:

const a = 20;
{
  const a = 30;
  console.log("Inside Block 1, a = ",a);
  {
    const a = 40;
    console.log("Inside Block 2, a = ",a);
  }
}
console.log("Outside Block, a = ",a);

Case 2:

const a = 20;
{
  const a = 30;
  console.log("Inside Block 1, a = ",a);
  {
    console.log("Inside Block 2, a = ",a);
  }
}
console.log("Outside Block, a = ",a);

These examples also cover Lexical Scope Chain pattern we covered in previous article.

With this, we cover our basics for Block Scope, Function Scope and Shadowing.

⭐️Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job

Prerequisite:

1. Hoisting in javaScript
2. “this” keyword in JS

In this article, we’ll cover : :

1. What is Temporal Dead Zone?
2. Are let and const declaration hoisted?
3. Difference between Syntax Error / Reference Error and Type Error?

— — — — — — — — — — — — — — — — — — — — — — — — — — —
Are let and const declaration hoisted?

Answer is : YES 👍🏼

But they are hoisted very differently then var declarations.
In interviews, you can say that these are in Temporal Dead Zone.

Let’s understand taking an example:

let a = 10;
var b = 100;

In previous hoisting article, we learn that we can access variable “b” even before we have initialised it. Like below

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

Reason: Because in JS, memory has been allocated even before any line of code is executed. So, we can access variable “b” even before initialising or declaring.

Output :

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: What If I try to access variable “a” in same way ? As it is hoisted , Will it give undefined too?

Answer is NO 👎🏼

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

Output:

SO, it is saying “Reference Error: Cannot access ‘a’ before initialisation” . i.e you can access “a” only after you assigned or initialised some value to “a”.

Let’s try below code:

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

Output:

Now, you can see we were able to access “a”. console prints value 10.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: How to know whether any variable is hoisted or not??

Let’s see that in browser, add a debugger:

Now, If you see both variables “a” and “b” are in scope with value undefined but “a” is under “script” where “b” is in Global memory space.

To summarise: “let” and “const” type variables will be allocated memory but that is not in Global Space. They are hoisted but not stored in global space. And this memory is not accessible until you put some value into that.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Question: What is Temporal Dead Zone??

It is the time since when let variable was hoisted and till it is initialised some value.

So, whenever you try to access any let or const variable in Temporal Dead Zone, it gives you Reference Error.

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

So, In above example, until Line 2 : let a = 10; . “a” is in Temporal Dead Zone and gives you Reference Error at Line 1.
After Line 2, at Line 3: you can access variable a.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
In previous article of “this” keyword in JS, we tried to access variables using “this” and “window” keywords. Let’s just try that too.

As you can see above, we are not able to access “a” using “window” and “this” keyword. It keeps giving “undefined”.

Reason: “this” and “window” represents global space and memory allocated to “a” was different then global object. So, this shows, “let” is strict then “var”.

— — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: Can we re-declare “let” variable?

Answer is NO 👎🏼

let a = 10;
let a = 100;

Output:

SO, it is saying “Syntax Error: Identifier ‘a’ has already been declared” .

Also, JS will not run any line of code if it sees redeclaration. It will not reach any line of code.

what If I try below ?

let a = 10;
var a = 100;

Output:

Same again: “Syntax Error: Identifier ‘a’ has already been declared” . “let” variable can’t be declared again with same name again in same scope.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: Can we re-declare “var” variable?

Answer is YES 👍🏼

var a = 10;
var a = 100;

No error when you run code.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Question: Can we re-declare “const” variable?

Answer is NO 👎🏼

var a = 10;
const b= 100;
const b= 1000;

Output:

“const” variable can’t be declared again with same name in same scope.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

What If I run below code?

let a;
const b;
var c;

a = 10;
b = 100;
c = 1000;

SO, it is saying “Syntax Error: Missing Initializer in const declaration.” This means “const” variable needs to be intialised and declared in same line.

“const needs to be initialised and declared in same line”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

What If I try to assign some value again to “const” variable?

let a = 10;
const b = 100;


a = 20;
b = 200;

SO, it is saying “Type Error: Assignment to constant variable.” You can not assign value again to “const” type variable.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Now, As we have three different ways to declare a variable using let, var and const.

Which one we should use?

1. const : whenever you put some value which is not going to change later, use const.
2. let: As let has Temporal dead zone and you won’t run into unexpected errors.
3. var: Try to put it aside and not use.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

How to avoid Temporal Dead Zone errors?

Try to put all declaration and initialisation on top of scope. This will minimise unexpected errors when logic get called.

If you still have any queries related to hoisting of var, let and const. Please write down in comments.

⭐️Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job