I M P O RTA N T
JavaScript
concepts
FOR INTERVIEWS
Curated by tutort academy
1 New features in ES6 version.
The new features introduced in ES6 version of JavaScript
are:
Let and const keywords.
Arrow functions.
Multi-line Strings.
The destructuring assignment.
Enhanced object literals.
Promises.
Curated by tutort academy
2 Is javascript a statically typed or
a dynamically typed language?
JavaScript is a dynamically typed language. In a
dynamically typed language, the type of a variable is
checked during run-time in contrast to a statically
typed language, where the type of a variable is
checked during compile-time.
Static Typing Dynamic Typing
Variables have types Variables have no types
Variables cannot Variables can change type
change type
From To
10+ year
Sayan experience
Curated by tutort academy
3 Explain scope and scope chain
JavaScript
JavaScript has the following kinds of scopes:
Global Scope: A variable with global scope is one
that can be accessed from anywhere in the
application. It is the default scope for all code
running in script mode.
Example :
var x = 2;
console.log(x) //global scope
Local Scope: Any declared variable inside of a
function is referred to as having local scope. Within
a function, a local variable can be accessed. It
throws an error if you attempt to access any
variables specified inside a function from the
outside or another function.The scope for code
running in module mode.
Curated by tutort academy
Example :
// This part of code cannot use x
function myFunction() {
let x = 1;
// This part of code can use x
This part of code cannot use x
Function Scope: In JavaScript, every new function
results in the generation of a fresh scope. Variables
declared inside a function cannot be accessed
from outside the function or from another function.
When used inside of a function, var, let, and const
all act similarly. The scope created with a function.
Example :
function myFunction() {
const firstName = "Krishna"; // Function Scope
Scope Chain refers to the situation when one variable,
which may have a global, local, function, or block scope, is
used by another variable, function, or block, which may
also have a global, local, function, or block scope. This
entire chain construction continues till the user decides to
halt it in accordance with the need.
Curated by tutort academy
4 What are the differences between
var, const & let in JavaScript?
var let const
The scope of a var
The scope of a let The scope of a let
variable is functional
variable is block scope. variable is block scope.
scope.
It can be updated but It cannot be updated
It can be updated
cannot be re-declared or redeclared into the
and redeclared into
into the scope. scope.
the scope.
It can be declared It can be declared It cannot be declared
without initialization. without initialization. without initialization.
It can be accessed It cannot be accessed
It cannot be accessed without
without initialization without initialization, as
initialization otherwise it will
as its default value is it cannot be declared
give ‘referenceError’.
“undefined”. without initialization.
Hoisting is done, but not
Hoisting is done, but not initialized (this is the
Hoisting done, with initialized (this is the reason reason for the error
initializing as ‘default’ for the error when we access when we access the
value the let variable before
const variable before
declaration/initialization declaration/
initialization
Curated by tutort academy
5 What is hoisting in JavaScript?
Hoisting is the default behaviour of javascript where all
the variable and function declarations are moved on top.
Declaration
a=1:
Move on top alert(a=’+a);
var a;
This means that irrespective of where the variables and
functions are declared, they are moved on top of the
scope. The scope can be both local and global.
Curated by tutort academy
6 Explain temporal dead zone.
Temporal Dead Zone is a behaviour that occurs with
variables declared using let and const keywords. It is
a behaviour where we try to access a variable before
it is initialized.
Examples of temporal dead zone:
num = 23; // Gives reference error
let num;
function func(){
greeting = "Hi"; // Throws a reference error
let greeting;
func();
Curated by tutort academy
7 What is closure in JavaScript?
A closure consists of references to the surrounding
state (the lexical environment) and a function that
has been wrapped (contained). In other words, a
closure enables inner functions to access the scope
of an outside function. Closures are formed whenever
a function is created in JavaScript, during function
creation time.
8 What are differences between “==”
& “===”?
The == operator performs a loose equality comparison
that, if necessary to enable the comparison, applies
type coercion.
On the other hand, the === operator conducts a strict
equality comparison without type coercion and
necessitates that the operands be of the same type
(as well as the same value).
Curated by tutort academy
9 What is NaN property?
The NaN property is a global property that represents
"Not-a-Number" value. i.e, It indicates that a value is
not a legal number. It is very rare to use NaN in a
program but it can be used as return value for few
cases
For E.g.:
Math.sqrt(-1);
parseInt("Hello");
Courses Offered by Tutort Academy
DSA with System Full Stack with
Design MERN
Learn more Learn more
Curated by tutort academy
10 What is the difference between
null and undefined?
null undefined
It is an assignment value which It is not an assignment value where
indicates that variable points to a variable has been declared but
no object. has not yet been assigned a value.
Type of null is object Type of undefined is undefined
The null value is a primitive value The undefined value is a primitive
that represents the null, empty, or value used when a variable has
non-existent reference. not been assigned a value.
Indicates the absence of a
Indicates absence of variable itself
value for a variable
Converted to zero (0) while Converted to NaN while
performing primitive operations performing primitive operations
Curated by tutort academy
11 What are the terms BOM and DOM in
JavaScript?
DOM stands for Document Object Model and BOM for
Browser Object Model.
DOM: An element may be added, changed, or removed
from a document using the Document Object Model
(DOM), a programming interface for HTML and XML
documents. It specifies how a document is accessed
and handled, as well as its logical structure. The DOM
allows the webpage to be represented as a structured
hierarchy, making it simple to access and modify HTML
tags, IDs, classes, attributes, and elements using the
Document object's provided commands and methods.
This makes it easier for programmers and users to
understand the document.
DOM provides several methods to find & manipulate the
behavior of the HTML element:
getElementById() Method
getElementsByClassName() Method
getElementsByName() Method
getElementsByTagName() Method
querySelector() Method
querySelectorAll() Method
Curated by tutort academy
BOM: Browser Object Model (BOM) is a browser-specific
convention referring to all the objects exposed by the
web browser. The BOM allows JavaScript to “interact
with” the browser. The window object represents a
browser window and all its corresponding features. A
window object is created automatically by the browser
itself. JavaScript’s window.screen object contains
information about the user’s screen.
Window properties of BOM are:
screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
Window methods of BOM are:
window.open() Method
window.close() Method
window.moveTo() Method
window moveBy() Method
window.resizeTo() Method
Curated by tutort academy
12 What is Critical Rendering Path?
The Critical Rendering Path is the sequence of
steps the browser goes through to convert the
HTML, CSS, and JavaScript into pixels on the screen.
Optimizing the critical render path improves render
performance. The critical rendering path includes
the Document Object Model (DOM), CSS Object
Model (CSSOM), render tree and layout.
Tutort Benefits
1:1 Mentorship from
24x7 Live 1:1 Video based
Industry experts doubt support
Special support for
Resume building & Mock
foreign students Interview Preparations
Curated by tutort academy
13 What are basic JavaScript array
methods?
Some of the basic JavaScript methods are:
push() method: adding a new element to an array.
Since JavaScript arrays are changeable objects,
adding and removing elements from an array is
simple. Additionally, it alters itself when we change
the array's elements.
Syntax: Array.push(item1, item2 …)
pop() method: This method is used to remove
elements from the end of an array.
Syntax: Array.pop()
Curated by tutort academy
slice() method: This method returns a new array
containing a portion of the original array, based on
the start and end index provided as arguments
Syntax: Array.slice (startIndex , endIndex);
map() method: The map() method in JavaScript
creates an array by calling a specific function on
each element present in the parent array. It is a non-
mutating method. Generally, the map() method is
used to iterate over an array and call the function on
every element of an array.
Syntax: Array.map(function(currentValue,
index, arr), thisValue)
reduce() method: The array reduce() method in
JavaScript is used to reduce the array to a single
value and executes a provided function for each
value of the array (from left to right) and the return
value of the function is stored in an accumulator.
Syntax: Array.reduce(function(total,
currentValue, currentIndex, arr), initialValue)
Curated by tutort academy
14 What is the rest parameter and
spread operator?
Rest parameter ( … ):
It offers a better method of managing a function's
parameters.
We can write functions that accept a variable
number of arguments using the rest parameter
syntax.
The remainder parameter will turn any number of
inputs into an array.
Additionally, it assists in extracting all or some of
the arguments.
Applying three dots (...) before the parameters
enables the use of rest parameters.
Curated by tutort academy
Syntax:
function extractingArgs(...args){
return args[1];
// extractingArgs(8,9,1); // Returns 9
function addAllArgs(...args){
let sumOfArgs = 0;
let i = 0;
while(i < args.length){
sumOfArgs += args[i];
i++;
return sumOfArgs;
addAllArgs(6, 5, 7, 99); // Returns 117
addAllArgs(1, 3, 4); // Returns 8
Note- Rest parameter should always be used at the
last parameter of a function.
Curated by tutort academy
Spread operator(…): Although the spread operator's syntax
is identical to that of the rest parameter, it is used to spread
object literals and arrays. Spread operators are also used
when a function call expects one or more arguments.
Syntax:
function addFourNumbers(num1,num2,num3,num4){
return num1 + num2 + num3 + num4;
let fourNumbers = [5, 6, 7, 8];
addFourNumbers(...fourNumbers);
// Spreads [5,6,7,8] as 5,6,7,8
let array1 = [3, 4, 5, 6];
let clonedArray1 = [...array1];
// Spreads the array into 3,4,5,6
console.log(clonedArray1); // Outputs [3,4,5,6]
let obj1 = {x:'Hello', y:'Bye'};
let clonedObj1 = {...obj1}; // Spreads and clones obj1
console.log(obj1);
let obj2 = {z:'Yes', a:'No'};
let mergedObj = {...obj1, ...obj2}; // Spreads both the
objects and merges it
console.log(mergedObj);
// Outputs {x:'Hello', y:'Bye',z:'Yes',a:'No'};
Curated by tutort academy
15 Explain this keyword
In JavaScript, the this keyword always refers to an
object. The thing about it is that the object it refers to
will vary depending on how and where this is being
called. If we call this by itself, meaning not within a
function, object, or whatever, it will refer to the global
window object. The majority of the time, the value of
this depends on the runtime binding used to call a
function. It may change every time the function is
called and cannot be changed by assignment while
the function is being executed. Although arrow
functions don't give their own this binding (it keeps
the this value of the enclosing lexical context), the
bind() method can set the value of a function's this
regardless of how it's called
From To
10+ year
Sayan experience
Curated by tutort academy
16 Explain call(), apply() and, bind()
methods.
We use call, bind and apply methods to set the this
keyword independent of how the function is called. This is
especially useful for the callbacks.Every function object is
also given a few unique methods and attributes by
JavaScript. These are the methods that every JavaScript
function inherits. Every function inherits certain methods,
such as call, bind, and apply.
bind(): The bind method creates a new function and sets
the this keyword to the specified object.
Syntax:
function.bind(thisArg, optionalArguments)
From To With
10+ year
Mohit Jain experience
Curated by tutort academy
For example:
Let’s suppose we have two person objects.
const john = {
name: 'John',
age: 24,
};
const jane = {
name: 'Jane',
age: 22,
};
Let’s add a greeting function:
function greeting() {
console.log(`Hi, I am ${this.name} and I am
${this.age} years old`);
Curated by tutort academy
We can use the bind method on the greeting function to
bind the this keyword to john and jane objects.
For example:
const greetingJohn = greeting.bind(john);
// Hi, I am John and I am 24 years old
greetingJohn();
const greetingJane = greeting.bind(jane);
// Hi, I am Jane and I am 22 years old
greetingJane();
Here greeting.bind(john) creates a new function with this
set to john object, which we then assign to greetingJohn
variable. Similarly for greetingJane.
call(): The call method initializes the this inside the
function and launches it right away.
In contrast to bind(), which produces a copy of the
function and sets the this keyword, call() sets the this
keyword, executes the function instantly, and does not
create a new copy of the function.
Curated by tutort academy
Syntax: function.call(thisArg, arg1, agr2, ...)
For example:
function greeting() {
console.log(`Hi, I am ${this.name} and I am
${this.age} years old`);
const john = {
name: 'John',
age: 24,
};
const jane = {
name: 'Jane',
age: 22,
};
// Hi, I am John and I am 24 years old
greeting.call(john);
// Hi, I am Jane and I am 22 years old
greeting.call(jane);
Above example is similar to the bind() example except that
call() does not create a new function. We are directly setting the
this keyword using call().
Curated by tutort academy
apply(): The apply() method is similar to call(). The
difference is that the apply() method accepts an array
of arguments instead of comma separated values.
Syntax: function.apply(thisArg, [argumentsArr])
For example:
function greet(greeting, lang) {
console.log(lang);
console.log(`${greeting}, I am ${this.name}
and I am ${this.age} years old`);
const john = {
name: 'John',
age: 24,
};
const jane = {
name: 'Jane',
age: 22,
};
// Hi, I am John and I am 24 years old
greet.apply(john, ['Hi', 'en']);
// Hi, I am Jane and I am 22 years old
greet.apply(jane, ['Hola', 'es']);
Curated by tutort academy
Is JavaScript single-threaded, if yes then how
17
it works as an multi-threaded language? OR
What is event loop in javascript?
JavaScript is a single-threaded asynchronous
programming language. But what does it mean? What
is this event loop in JavaScript that we all keep talking
about? To know more click here
Courses Offered by Tutort Academy
DSA with System Full Stack with
Design MERN
Learn more Learn more
Curated by tutort academy
18 What are promises, async-await
and callback?
A Promise is a proxy for a value not necessarily known
when the promise is created. It allows you to
associate handlers with an asynchronous action's
eventual success value or failure reason.
This lets asynchronous methods return values like
synchronous methods: instead of immediately
returning the final value, the asynchronous method
returns a promise to supply the value at some point
in the future.
Curated by tutort academy
A Promise is in one of these states:
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed
successfully.
rejected: meaning that the operation failed.
A promise is said to be settled if it is either fulfilled or
rejected, but not pending.
Async simply allows us to write promises-based
code as if it was synchronous and it checks that we
are not breaking the execution thread. It operates
asynchronously via the event loop. Async functions
will always return a value. It makes sure that a
promise is returned and if it is not returned then
JavaScript automatically wraps it in a promise
which is resolved with its value.
Syntax:
const func1 = async() => {
return “Hello World!”;
Curated by tutort academy
Await function is used to wait for the promise. It
could be used within the async block only. It makes
the code wait until the promise returns a result. It
only makes the async block wait.
Syntax:
const func2 = async () = {
let x= await func1();
console.log(x);
Tutort Provides 24x7 Live 1:1 Video based doubt support
Curated by tutort academy
19 What is callback hell?
Callback Hell is an anti-pattern with multiple nested
callbacks which makes code hard to read and debug
when dealing with asynchronous logic.
The callback hell looks like below,
Syntax:
async1(function(){
async2(function(){
async3(function(){
async4(function(){
....
});
});
});
});
Curated by tutort academy
20 What are observables?
Observables in JavaScript are a way to handle
asynchronous events. They are functions that return a
stream of values, which can be used to represent data
streams such as DOM events, mouse events, or HTTP
requests.
Observables work by providing a way to subscribe to a
stream of values, and then receiving those values as they
become available. This allows you to respond to events in
a more reactive way, without having to wait for the entire
event stream to complete before processing it.
To use observables in JavaScript, you can use the RxJS
library.
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
subscriber.complete();
});
observable.subscribe(value => {
console.log(value);
});
Curated by tutort academy
21 What are the differences between
promises and observables?
Promises Observables
Emits multiple values over a
Emits only a single value at
period of time(stream of values
a time
ranging from 0 to multiple)
Eager in nature; they are going Lazy in nature; they require
to be called immediately subscription to be invoked
Promise is always
Observable can be either
asynchronous even though it
synchronous or asynchronous
resolved immediately
Provides operators such as
Doesn't provide any
map, forEach, filter, reduce,
operators
retry, and retryWhen etc
Cancelled by using
Cannot be cancelled
unsubscribe() method
Curated by tutort academy
21 What is the difference between
setTimeout, setImmediate and
process.nextTick?
setTimeout(): Using the setTimeout() method, a
callback function can be scheduled to run once after a
millisecond delay.
setImmediate(): Use the setImmediate function to run
a function immediately following the conclusion of the
current event loop.
process.nextTick(): If process.nextTick() is invoked in a
given phase, all the callbacks passed to
process.nextTick() will be resolved before the event
loop continues. This will block the event loop and create
I/O Starvation if process.nextTick() is called recursively.
From To Switch from
Service Based
Uzeen
Chhabra Company
Curated by tutort academy
23 What is microtask in JavaScript?
A microtask is a short function which is executed
after the function or program which created it exits
and only if the JavaScript execution stack is empty,
but before returning control to the event loop being
used by the user agent to drive the script's
execution environment.
24 What Pure Functions in JavaScript?
A function or section of code that always yields the same
outcome when the same arguments are supplied is
known as a pure function. It is independent of any state or
data changes that occur while a program is running.
Instead, it just relies on the arguments it is given.
Additionally, a pure function does not result in any side
effects that can be seen, such as network queries, data
alteration, etc.
Curated by tutort academy
25 What is an error object and its
different error name object?
When an error happens, an error object—a built-in error
object—provides error information. There are two
attributes: name and message. For instance, the following
function records error information,
Syntax:
try {
greeting("Welcome");
} catch (err) {
console.log(err.name + "<br>" + err.message);
There are 6 different types of error names returned from error object,
Error name Description
An error has occurred in the
EvalError
eval() function
An error has occurred with a
RangeError
number "out of range"
ReferenceError An error due to an illegal reference
SyntaxError An error due to syntax
TypeError An error due to a type error
URIError An error due to encodeURI()
Curated by tutort academy
26 What are the various statements in
error handling?
Below are the list of statements used in an error handling,
try: This statement is used to test a block of code for errors
catch: This statement is used to handle the error
throw: This statement is used to create custom errors.
finally: This statement is used to execute code after try and
catch regardless of the result.
Why Tutort Academy?
Guaranteed
Hiring
Highest
100% Job Referrals 250+ Partners 2.1CR CTC
Curated by tutort academy
27 What do you mean by strict mode in
javascript and characteristics of
javascript strict-mode?
In ECMAScript 5, a new feature called JavaScript Strict
Mode allows you to write a code or a function in a "strict"
operational environment. When it comes to throwing
errors, javascript is often 'not extremely severe'. However,
in "Strict mode," all errors, even silent faults, will result in a
throw. Debugging hence becomes more easier. Thus, the
chance of a coder committing a mistake is decreased.
Characteristics of strict mode in javascript:
Duplicate arguments are not allowed by developers.
Use of javascript’s keyword as parameter or
function name is not allowed.
The 'use strict' keyword is used to define strict
mode at the start of the script. Strict mode is
supported by all browsers
Creating of global variables is not allowed.
Curated by tutort academy
28 What are the differences between
cookie, local storage and session
storage?
Cookie Local storage Session
Can be accessed on
Can be accessed on Can be accessed on
both server- side &
client- side only client- side only
client side
Lifetime is until deleted Lifetime is until tab is
As configured using
closed
expires option
SSL is supported SSL is not supported SSL is not supported
Maximum size is 4 Maximum size is 5 MB
Maximum size is 5 MB
KB
From To
Placed with
Subhadip 100% Hike
Chowdhury
Curated by tutort academy
29 Explain prototype chaining
Prototype chaining is used to build new types of objects
based on existing ones. It is similar to inheritance in a
class based language.
The prototype on object instance is available through
Object.getPrototypeOf(object) or __proto__ property
whereas prototype on constructors function is available
through Object.prototype.
I got rejected in the Amazon interview. After that, I joined Tutort Academy
for DSA concepts as a working professional. They fulfilled my all
requirements and that is why I am in Microsoft right now. I highly
recommend Tutort Academy for professionals.
Nikesh Bisen
Curated by tutort academy
30 What are generators and what are
its different kinds?
Introduced in the ES6 version, generator functions are a special
class of functions.
They can be stopped midway and then continue from where
they had stopped.
Generator functions are declared with the function* keyword
instead of the normal function keyword.
There are five kinds of generators,
Generator function declaration
Generator function expressions
Generator method definitions in object literals
Generator method definitions in class
Generator as a computed property
Curated by tutort academy
31 Difference between Debouncing and
Throttling.
Debouncing Throttling
Debouncing waits for a certain An error has occurred in the
time before invoking the function eval() function
again.
Ensures that the function is called
An error has occurred with a
only once, even if the event is
number "out of range"
triggered multiple times.
Useful when you want to delay the
invocation of a function until a certain An error due to an illegal reference
period of inactivity has passed.
Eg. You can debounce an async API
request function that is called every An error due to syntax
time the user types in an input field.
Syntax:
Syntax:
function debounce(func, delay) {
function throttle(callback, delay =
let timerId;
1000) {
return function () {
let shouldWait = false;
const context = this;
return (...args) => {
const args = arguments;
if (shouldWait) return;
clearTimeout(timerId);
callback(...args);
timerId = setTimeout(function () {
shouldWait = true;
func.apply(context, args);
setTimeout(() => {
}, delay);
shouldWait = false;
};
}, delay);
} };
Curated by tutort academy
Start Your
Upskilling with us
Explore More
www.tutort.net
Watch us on Youtube Read more on Quora
Explore our courses
Advanced DSA & System Full Stack Specialisation in
Design Course Software Development
Follow us on
