Top JavaScript Interview Questions and Answers

JavaScript is a programming language for developing interactive and dynamic websites. JavaScript runs in browsers and performs actions such as user events, form validations, animations, and content updates. JavaScript is used for software front-end development and backend development. Frameworks like React Native are used for mobile apps.

If a value is not defined, it'll be considered as undefined.

null is a special value that says that some variable or object has no value.

undefined is a value automatically assigned to a variable which is declared but has no value assigned.

It's a behaviour where variables and function declarations in JavaScript are moved to the top of their current scope during the compilation phase before the code execution starts.
The variables declared with var are hoisted and initialised with undefined. In case of functions, both the declaration and the function body are moved to the top.

In this example, the variable x is hoisted and initialised with undefined before the console.log(x) is called. The function foo() is hoisted entirely, so it can be called before its declaration.

Remember, the variables declared with let and const are not hoisted, and they remain in a "temporal dead zone" until initialised.

var:

Scope: Function or global.
Hoisting: Hoisted and initialised as undefined.
Re-declaration: Can be re-declared.

let:

Scope: Block-scoped.
Hoisting: Hoisted but not initialised (temporal dead zone).
Re-declaration: Cannot be re-declared in the same block.

const:

Scope: Block-scoped.
Hoisting: Hoisted but not initialised.
Re-declaration: Cannot be re-declared.
Value: Must be initialised and cannot be reassigned.

JavaScript objects are collections of key-value pairs used to store data. Objects store properties (data) and methods (functions). We can create JavaScript objects in different ways.

With Object literal:

Using new Object():

Using a constructor function:

JavaScript functions are reusable code blocks that perform a specific task. Functions can take inputs(parameters), perform operations(actions) and return a result. We can define a function in different ways.

Function declaration:

Function expression (stored in a variable):

Arrow function (shorter syntax):

The this keyword in JavaScript refers to the context in which a function is called.

In a regular function:

In an object method: In methods, it refers to the object.

In a constructor function: In constructors, it refers to the new object.

In an arrow function: In regular functions, it refers to the global object. Arrow functions do not have their own this.

With Arrow functions, we can shorten JavaScript functions. They differ from regular functions in some ways.
Arrow function

Regular function

Arrow functions inherit this from the surrounding scope. Regular functions have their own this.
Arrow function

Regular function

Arrow functions return a value automatically if there's only one expression. Regular functions require the return keyword.
Arrow function

Regular function

A closure is a function that can access outer function variables even after the outer function finishes execution.

In synchronous programming, tasks run one after another.

In asynchronous programming, tasks run in parallel.

The event loop in JavaScript manages asynchronous tasks without blocking execution.

1. Call Stack: Executes functions.
2. Event Queue: Stores asynchronous tasks (like setTimeout).
3. Event Loop: Moves tasks from the event queue to the call stack when it's empty.

Here, "Task 1" and "Task 3" run first. "Task 2" waits in the queue and runs after 1 second. The event loop ensures JavaScript can handle tasks without blocking other operations.

A Promise in JavaScript denotes the result of an asynchronous operation. The result can be either successful (resolved) or failed (rejected).

The async and await simplify working with promises. async marks a function as asynchronous, while await waits for the promise to finish before moving on.

Higher-order functions are functions that can take other functions as arguments or return a function as a result.

// Function that takes another function as an argument

Here, welcome is a higher-order function because it takes another function (callback) as an argument. When you call welcome ("John", () => console.log("Goodbye!")), It prints "Hello, John" and then calls the function () => console.log("Goodbye!").

// Function that returns another function

Here, the function multiplyBy returns a new function. When you call multiplyBy(2), it returns a function that multiplies a number by 2. You can now call multiplyBy2(5), and it will return 10 (because 5 * 2 = 10).

To compare values after type conversion, we can use ==

console.log(5 == '5'); // true. 5 is an integer type, and ‘5’ is a string, but == checks for the value after type conversion only

To compare both the value and type, we can use ===

console.log(5 === '5'); // false. Because 5 and ‘5’ are of different types, they are not equal when validating with ===

A callback function in JavaScript is a function passed as an argument to another function. A callback function runs after one task finishes.

The call() and apply() method immediately invokes the function. The call() method uses arguments, whereas the apply() method uses an array of arguments.

The bind() returns a new function that can be called later.

Destructuring in JavaScript is a way to extract values from arrays or objects and assign them to variables simply. 

Array destructuring extracts values from an array. 

Object destructuring extracts properties from an object.

Lexical scope in JavaScript means that a function can access variables from its outer scope, from where the function is defined, not where it is called.

When a property or method is accessed on an object, JavaScript first checks if that property exists directly on the object. If it’s not found, JavaScript looks at the object’s prototype (an internal reference to another object). If the property is still not found, it keeps looking up the prototype chain until it reaches null (the end of the chain).

Generators are special functions that return iterators and can pause (yield) and resume. Iterators are objects that let you loop through a collection one item at a time.

Here, function* gen() is a generator function. It uses yield to pause and return values one at a time.

It is the iterator created when you call the generator: const it = gen(); it.next() is used to get the next value in the sequence.

Shallow Copy copies only the top-level properties. If the object has nested objects, they are still shared.

Deep Copy copies all levels of the object, including nested objects. No shared references.

JavaScript handles asynchronous code using:

• Call Stack: Executes code line by line.
• Web APIs: Handle async tasks like setTimeout and fetch.
• Task Queues: Store tasks (e.g., callbacks, promises).
• Event Loop: Moves tasks from queues to the call stack when it’s empty.

Output:
Start //Synchronous code runs first.
End//Synchronous code runs first.
Promise //Microtasks (Promises) run next.
Timeout//Macrotasks (setTimeout) run last.

Currying is a technique where a function takes one argument at a time and returns a new function for each argument.

Object.freeze() prevents modifying, adding, or deleting properties. All properties are read-only. Object.seal() prevents adding or deleting properties, but modifying existing properties is allowed.

A factory function is a function that creates and returns an object. It doesn't use the new keyword.

A Constructor Function is a function used to create objects using the new keyword. It typically defines object properties and methods using this.

An event starts from the most specific element (the target) and "bubbles" up to the root element. For example, if you click on a button inside a <div>, the click event will first trigger on the button, then propagate to the <div>, and then to the parent elements, if any.

The escape() encodes a string by replacing non-ASCII characters with escape sequences (e.g., %20 for spaces). The unescape() decodes an encoded string, converting escape sequences back to their original characters. These functions are deprecated and should be avoided and use the encodeURIComponent() and decodeURIComponent() for URL encoding/decoding.
 

'5' + 3: Results in '53' (string concatenation).
'5' - 3: Results in 2 (string '5' is converted to a number for subtraction).