WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

JS Interview Questions

Previous Next

1. What are the differences between var, let, and const in JavaScript?

  • var: Function-scoped, can be redeclared and updated, hoisted but not initialized.
  • let: Block-scoped, can be updated but not redeclared in the same scope, hoisted but not initialized.
  • const: Block-scoped, cannot be updated or redeclared, must be initialized during declaration.
Example Comparison:
// var example
var x = 10;
if (true) {
var x = 20; // Same variable is overwritten
}
console.log(x); // Output: 20

// let example
let y = 10;
if (true) {
let y = 20; // Different variable (block scope)
}
console.log(y); // Output: 10

// const example
const z = 10;
z = 20; // Error: Assignment to constant variable

Try it yourself

2. Explain the event loop in JavaScript.

The event loop is a fundamental concept in JavaScript that allows asynchronous operations to be executed without blocking the main thread. JavaScript is single-threaded, meaning it executes code one line at a time. The event loop helps manage asynchronous tasks like:

  • setTimeout, setInterval
  • Promises (fetch, AJAX)
  • DOM events (click, keypress)
  • I/O operations (reading files, database queries)


Example 1: setTimeout vs. Synchronous Code
console.log("1️⃣ Start");

setTimeout(() => {
console.log("2️⃣ Inside setTimeout (executes later)");
}, 0);

console.log("3️⃣ End");
Output
1️⃣ Start
3️⃣ End
2️⃣ Inside setTimeout (executes later)

Even though setTimeout is 0ms, it goes to Web APIs and runs after the synchronous code.

Example 2: Promises vs. setTimeout
console.log("1️⃣ Start");

setTimeout(() => console.log("2️⃣ setTimeout"), 0);

Promise.resolve().then(() => console.log("3️⃣ Promise resolved"));

console.log("4️⃣ End");
Output
1️⃣ Start
4️⃣ End
3️⃣ Promise resolved
2️⃣ setTimeout

Promises run before setTimeout because microtasks (Promises) have higher priority than macrotasks (setTimeout).

Real-world Example: API Fetching
console.log("Fetching data...");

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(response => response.json())
.then(data => console.log("✅ Data received:", data));

console.log("Other synchronous tasks...");
Output
Fetching data...
Other synchronous tasks...
✅ Data received: { userId: 1, id: 1, title: "delectus aut autem", completed: false }

Fetch works asynchronously, so JavaScript continues execution and logs "Other synchronous tasks..." before receiving API data.

3. What is the difference between == and === in JavaScript?

  • == (Abstract Equality): Checks only values, allowing type coercion (e.g., 5 == "5" is true).
  • === (Strict Equality): Checks both values and types (e.g., 5 === "5" is false).

4. How does this keyword work in JavaScript?

The value of this depends on the execution context:

  • Global scope: this refers to the window object (in browsers).
  • Inside a method: this refers to the object calling the method.
  • Inside a function: this refers to undefined in strict mode, else window.
  • In arrow functions: this is lexically inherited from the surrounding scope.
  • With bind(), call(), apply(): this can be explicitly set.
Example 1 : Global Scope (window)
console.log(this); // In browser: window, In Node.js: global
Output
Window {...}
Example 2 : this in an Object Method
const user = {
name: "John",
greet: function () {
console.log(`Hello, ${this.name}`);
}
};

user.greet(); // "Hello, John"

Here, this refers to user.

Example 3 : this in a Constructor Function
function Person(name) {
this.name = name;
}

const p1 = new Person("Alice");
console.log(p1.name); // "Alice"

this refers to the new object (p1).

Example 4 : this in Arrow Functions
const user = {
name: "Alice",
greet: () => {
console.log(`Hello, ${this.name}`);
}
};

user.greet(); // "Hello, undefined"

Why? Arrow functions don’t bind this, they inherit it from their parent scope (which is window in this case).

Fixed Version: Use Regular Function
const user = {
name: "Alice",
greet() {
console.log(`Hello, ${this.name}`);
}
};
user.greet(); // "Hello, Alice"
Example 5 : this in Event Listeners
document.querySelector("button").addEventListener("click", function () {
console.log(this); // Refers to the button
});

Here, this refers to the element that triggered the event.

Explicit Binding: call, apply, bind

call():
function greet() {
console.log(`Hello, ${this.name}`);
}

const person = { name: "Bob" };
greet.call(person); // "Hello, Bob"

call()explicitly sets this to person.

apply():
function introduce(age) {
console.log(`${this.name} is ${age} years old`);
}

const user = { name: "Emma" };
introduce.apply(user, [25]); // "Emma is 25 years old"

Similar to call(), but apply() takes an array of arguments.

bind():
const user = { name: "Jack" };

function greet() {
console.log(`Hello, ${this.name}`);
}

const boundGreet = greet.bind(user);
boundGreet(); // "Hello, Jack"

bind()returns a new function with this set to user.

5. What is the difference between call, apply, and bind?

  • call(obj, arg1, arg2, …) → Calls function with this set to obj, arguments passed separately.
  • apply(obj, [arg1, arg2, …]) → Similar to call(), but arguments are passed as an array.
  • bind(obj) → Returns a new function with this permanently set to obj.

6. What is closure in JavaScript?

A closure is a function that retains access to its parent scope even after the parent function has finished executing.

function outerFunction() {
let count = 0;
return function innerFunction() {
count++;
console.log(count);
};
}
const increment = outerFunction();
increment(); // 1
increment(); // 2

Here, innerFunction still has access to count even after outerFunction has returned.

7. Explain the difference between synchronous and asynchronous JavaScript.

  • Synchronous JavaScript: Executes code sequentially, blocking further execution until the current task is completed.
  • Asynchronous JavaScript: Uses mechanisms like callbacks, promises, or async/await to execute tasks in the background, allowing non-blocking execution.
Example using setTimeout (Async):
console.log("Start");
setTimeout(() => console.log("Async Task"), 2000);
console.log("End");

// Output:
// Start
// End
// Async Task (after 2s)

8. What is the difference between map(), filter(), and reduce()?

Answer:

  • map(): Transforms each array element and returns a new array.
  • filter(): Returns a new array with elements that satisfy a condition.
  • reduce(): Reduces the array to a single value (e.g., sum, product).
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

9. Explain async and await in JavaScript.

async and await simplify working with promises by making asynchronous code look synchronous.

  • async makes a function return a promise.
  • await pauses execution until the promise resolves.
async function fetchData() {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
}
fetchData();

10. What is the difference between deep copy and shallow copy in JavaScript?

  • Shallow Copy: Copies only references for nested objects, not actual values.
  • Deep Copy: Recursively copies all object properties.
Example of Shallow Copy:
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = { ...obj1 }; // Spread operator (shallow copy)
obj2.b.c = 42;
console.log(obj1.b.c); // 42 (original object also modified)
Example of Deep Copy using structuredClone():
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = structuredClone(obj1);
obj2.b.c = 42;
console.log(obj1.b.c); // 2 (original object remains unchanged)

11. How does JavaScript handle memory management and garbage collection?

JavaScript uses Garbage Collection (GC) to free up memory that is no longer accessible.

  • Uses Reference Counting and Mark-and-Sweep Algorithm to identify unused objects.
  • Objects with no references are automatically removed from memory.
let obj = { name: "John" };
obj = null; // Now eligible for garbage collection