JavaScript Preparation Cheat Sheet
In this blog, you will learn some important concepts of JavaScript which are mostly been asked in interviews.
Scope
Scope
is a range or accessible area of any value or expression. Values declared out of the scope, are not accessible, they will be unknown or undefined
.
To understand it better, let us try to understand it with one scenario. Say that, you and your father stay in a nice Porsche society. These societies are under one campus called XYZ Society. As you are young and go to school, your father has not allowed you to go out of society without his permission or can go only under some elder guidance. But, your father as he is working has to go out of society to work for a living he has access to both outside and inside society.
So, with this simple scenario, we can clearly, see that for you outer world is not in your range or scope { }
. But for your father, the outside world is accessible. He can enjoy going outside as well as inside society. But in your case, you have to enjoy inside society itself. For you outside scope is not accessible but for your father it is.
In code
let outsideAccess = 'father' // `insideAccess` variable is not accessible outside society function
// but `outsideAccess` varible is accessible inside society function
console.log(insideAccess); // ReferenceError: insideAccess is not defined,
function society() {
let insideAccess = 'child'
console.log(outsideAccess); // father
}
From this image, we can see that the outsideAccess
variable is accessible to both global and block level scope. We can also say that the child
variable cannot have access to the parent
scope and but the parent
scope is accessible to the child.
Note
{ }
any code written between these curly braces is treated as scope.
Type of scope?
- Global Scope
- Local Scope
- Function Scope
1. Global Scope
The scope which is visible to another scope is called Global Scope.
Here name
variable is global variable. Its scope is visible globally as well as inside functions also.
2. Local Scope
The scope of the variable which is accessible inside { }
itself is called Local Scope.
3. Function Scope
Variable declared within the function
can be only visible to the function and not visible outside the function. This is called Function Scope.
Single Thread
JavaScript
is a single-threaded
, non-blocking
, asynchronous
and concurrent
programming language. Single-Threaded means that JavaScript code will execute line-by-line
. That means any written code in JavaScript will first execute line 1, line 2, line3, ...so on. Because of this approach of JavaScript V8
engine, we call JavaScript a Single Thread.
Call Stack
Call Stack is a mechanism for the interpreter of JavaScript to keep track of its place in the script when multiple functions are being called and what functions are being called inside of that function.
Let us understand the concept of the call stack with an example
function One() {
console.log(`Entered Function One`);
Two()
console.log(`Leave Function One`);
// rest code here
}
function Two() {
console.log(`Entered Function Two`);
Three()
console.log(`Leave Function Two`);
}
function Three() {
console.log(`Entered Function Three`);
console.log(`Leave Function Three`);
}
One()
Output
Entered function One
Entered function Two
Entered function Three
Leave function Three
Leave function Two
Leave function One
From the above example and output, we can clearly understand that. As soon as the function One
is being called, the function One
is added to the call stack. in that function, it first printed Entered Function One
then another function Two
is called which will again add function Two
in the call stack and it will print Entered Function Two
on executing the next line of code it again encountered with function Three
which is being added again to the call stack and it will print Entered Function Three
.
In function Three
no more addition function
is being called so it will print the next line Leave Function Three
. As soon as all the code gets executed in function Three
the control gets back to function Two
and it will print Leave Function Two
and function Three
is been removed from the call stack means function Three
becomes empty. Similarly, after execution of all code in function Two
, it is removed from the call stack. The same goes for function One
.
Let us picture the same concept below to understand better how function and inside function behave in a call stack
Remember whenever we start executing any file in JavaScript
Call Stack
is empty and when the program endsCall Stack
again becomes empty.Note: whenever the
stack
variable or function is more than the space. It gives a `stack overflow error.
Hosting
Hosting is a behaviour of JavaScript which allows you to access any variable or function before it is been declared. Although, it is been not recommended to access either of them before declaration still we have an option of that as well.
Accessing variable before initialization
var hosting
Declaring a variable with the var
keyword shows output undefined
when it's been called before declaring an initialization.
console.log(animal); // undefined - Return undefined on calling before declaration
var animal = 'tiger'; // declaration an initialization
console.log(animal); // tiger - Return tiger after declaration and initialization
There might be another case where you want to access a variable without declaration itself. It will throw an error to us as Reference Error
.
For Example
console.log(animal); // ReferenceError: animal is not defined
animal = 'tiger'; // only initilisation happened
Output
let and const hosting
Declaration of the variable with let
and const
is somewhat little different than var
. If we try to access any variable declared with let
and const
it will throw us an error called // ReferenceError: Cannot access 'animal' before initialization
. This is because both let
and const
works with block-level scope. That means the variable is not hoisted.
For Example
console.log(animal); // ReferenceError: Cannot access 'animal' before initialization
let animal = 'tiger'; // let initilisation and declaration.
Function Hosting
The function can be called before or after the initialization of the function. No matter what you call it where the file function will be hoisted.
greet() // calling function before declaring greet function
function greet() { // initialising function
console.log(`Good Morning`);
}
greet() // calling function after declaring greet function
Output
Good Morning
Good Morning
However, if try to assign a variable to a function then it will throw us an error.
For Example
greet()
let greet = function() { // initialising function
console.log(`Good Morning`);
}
greet()
Output
ReferenceError: Cannot access 'greet' before initialization
Note:
- Generally hoisting gives you undesirable outcomes. So it's recommended to access the variable and function after its initialization for less buggy code and better outcome.
It recommended to use
let
andconst
to declare a variable to avoid hoisting.Hosting in JavaScript shows how execution contexts work.
In the end, if you like this article helpful for your interview preparation show some love 💓 and spread ☮️ peace.
Thank you!