It's important to revise the concepts before appearing in an interview. So here is the cheatsheet of some important JavaScript concepts , which will help you to clear your technical interview round.
What is Scope?
Like any other programming language, JavaScript also uses the concept of scope for variables . The accessibility of an variable in JavaScript is referred to as scope. Which sections of the program can access a given variable and where the variable can be seen. There are mainly three types of scopes-
1. Global Scope
The global scope includes any variable that is not contained within any function or block (a set of curly braces). These variables can be accessed from anywhere in the program. In the below example, the variable greet is a global variable, and it can be accessed anywhere in the program.
Example-
var greet="say hello";
function f1(){
console.log(greet); // output= say hello
}
f1();
console.log(greet); // output= say hello
2. Function/Local Scope
The variable declared inside the function will have local or function scope only, it can only be accessed inside the function ,if we try to access this variable outside the function then it will give a error message. In the below example, if we try to access the variable greet outside the function then it will return Uncaught ReferenceError: greet is not defined.
Example-
function f1(){
let greet="say hello";
console.log(greet); // output= say hello
}
f1();
console.log(greet); // Uncaught ReferenceError: greet is not defined.
3. Block Scope
Unlike var variables, let and const variables can be scoped to the nearest pair of curly brackets in ES6. They can't be reached from outside that pair of curly braces, which means they can't be accessed from the outside.
Example-
{
let hello = 'Hello!';
var language = 'Hindi';
console.log(hello); // 'Hello!' gets logged
}
console.log(language); // 'Hindi!' gets logged
console.log(hello); // Uncaught ReferenceError: hello is not defined
Scope Chain
When we use a variable in JavaScript, first the JavaScript engine looks for the current scope of the variable value. If it can't find the variable in the inner scope, it will look into the outer scope until it finds the variable or reaches the global scope.
If it still can't identify the variable, it will either return an error or implicitly declare the variable in the global scope (if not in strict mode).
Example-
let a = 'a';
function f1() {
let b = 'b';
console.log(b); // 'b' gets logged
console.log(a); // 'a' gets logged
}
f1();
JavaScript is single threaded language
JavaScript runs on a V8 engine in the Chrome Browser, which has a memory heap and a call stack. Single-threaded means that each statement in JavaScript is executed sequentially. To implement synchronous execution in JavaScript, it uses the LIFO(Last In First Out) approach. Each time the top of the stack statement is executed and then removed from the stack. JavaScript is single threaded, it has only one call stack that is used to execute the program.
Example-
function F_One(){
function F_Two(){
console.log('two');
}
F_Two();
console.log('one');
}
Call Stack
JavaScript uses call stack to keep track of multiple function calls. When a JavaScript program gets run, JavaScript creates a global stack to keep track of functions and their execution. The stack follows LIFO(Last In First Out) method. Functions are pushed and popped in to the stack. Each time top of stack function is executed and then popped out after the execution.
Example-
function funOne {
console.log('It's function one');
}
function funTwo() {
funOne();
console.log('It's function two');
}
funTwo();
Hoisting
In JavaScript, all the variable declarations, function declarations, and class declarations are moved or hoisted to the top of their scope before the execution phase. Because of hoisting, we can use the variables , functions, and classes even before their declaration without getting any errors.
Variable Hoisting
Example-
str = "Hello World!";
console.log(str); // Outputs: Hello World!
var str;
But if we try to access a variable before the initialization, then it returns undefined.
Example-
console.log(str); // Outputs: undefined
var str;
str = "Hello World!";
Function Hoisting
Functions that are defined using a function declaration are automatically hoisted and their reference is stored at top of the scope . That means they can be called before they have been defined.
Example-
greet(); // Outputs: Hello, I'm hoisted
function greet() {
console.log('Hello, I'm hoisted');
}