JavaScript Interview Questions

1 What is the difference between `let`, `const`, and `var`?

Answer: `var` is function-scoped and can be redeclared and updated, while `let` and `const` are block-scoped. Variables declared with `let` can be updated but not redeclared, and `const` cannot be updated or redeclared after initialization.

2 Explain closures in JavaScript with an example.

Answer: A closure is a function that has access to its outer function's scope, even after the outer function has returned. For example:

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Here, the inner function maintains access to the `count` variable even after `createCounter` has finished execution.

3 What is event delegation in JavaScript?

Answer: Event delegation is a technique where you attach an event listener to a parent element instead of individual child elements. It leverages event bubbling to handle events at a higher level, which is more efficient and works for dynamically added elements.

4 What are Promises and async/await?

Answer: Promises are objects representing the eventual completion (or failure) of an asynchronous operation and its resulting value. `async/await` is syntactic sugar built on top of Promises, making asynchronous code easier to write and understand by allowing you to write asynchronous code that looks synchronous.

async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();

5 Explain the difference between `==` and `===`.

Answer: The `==` (loose equality) operator checks for value equality after converting both values to a common type, while the `===` (strict equality) operator checks for both value and type equality without type conversion.

console.log(5 == '5');    // true
console.log(5 === '5');   // false
console.log(0 == false);  // true
console.log(0 === false); // false

6 What is the difference between `null` and `undefined`?

Answer: `undefined` means a variable has been declared but not assigned a value, while `null` is an intentional assignment to represent "no value" or "empty". `undefined` is a type itself, whereas `null` is an object.

let a;
console.log(a);     // undefined
console.log(typeof a); // "undefined"

let b = null;
console.log(b);     // null
console.log(typeof b); // "object"

7 What are JavaScript data types?

Answer: JavaScript has 8 data types: String, Number, Boolean, Null, Undefined, Object, Symbol (ES6), and BigInt (ES2020). The first 6 are primitive types except for Object, which is a reference type.

8 Explain `this` keyword in JavaScript.

Answer: The `this` keyword refers to the object it belongs to. Its value is determined by how a function is called:

In a method, `this` refers to the owner object
In a function, `this` refers to the global object (or undefined in strict mode)
In an event, `this` refers to the element that received the event
With call/apply/bind methods, `this` can be explicitly set

const obj = {
    name: 'John',
    greet: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

obj.greet(); // "Hello, John!"

9 What is the difference between `map()` and `forEach()`?

Answer: Both iterate over arrays, but `map()` returns a new array with the results of calling a function on every element, while `forEach()` simply executes a function for each element without returning anything. `map()` is immutable and better for transforming data, while `forEach()` is used for side effects.

const numbers = [1, 2, 3];

// map() example
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach() example
let sum = 0;
numbers.forEach(num => sum += num);
console.log(sum); // 6

10 Explain Hoisting in JavaScript.

Answer: Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope. Function declarations are hoisted completely, while variable declarations (not initializations) are hoisted. This allows you to use functions and variables before they're declared in the code.

// Function declaration is hoisted
sayHello(); // "Hello!"

function sayHello() {
    console.log("Hello!");
}

// Variable declaration is hoisted but not initialization
console.log(x); // undefined
var x = 5;

Unlock Premium Questions & Answers

50% OFF

1 What is the difference between call, apply, and bind? Premium

Answer: All three methods are used to control what `this` refers to:

call: Invokes the function immediately with a specified `this` value and arguments provided individually: `func.call(thisArg, arg1, arg2, ...)`
apply: Invokes the function immediately with a specified `this` value and arguments as an array: `func.apply(thisArg, [arg1, arg2, ...])`
bind: Returns a new function with a specified `this` value and initial arguments, which can be invoked later: `const boundFunc = func.bind(thisArg, arg1, arg2, ...)`

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

const person = { name: 'John' };

// call
greet.call(person, 'Hello', '!'); // "Hello, John!"

// apply
greet.apply(person, ['Hi', '!!']); // "Hi, John!!"

// bind
const boundGreet = greet.bind(person, 'Hey');
boundGreet('!!!'); // "Hey, John!!!"

2 Explain the concept of memoization in JavaScript. Premium

Answer: Memoization is an optimization technique that speeds up function calls by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Example:

function memoize(fn) {
    const cache = {};
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache[key]) {
            return cache[key];
        }
        const result = fn.apply(this, args);
        cache[key] = result;
        return result;
    };
}

// Example usage with a factorial function
function slowFactorial(n) {
    if (n === 0 || n === 1) return 1;
    return n * slowFactorial(n - 1);
}

const fastFactorial = memoize(slowFactorial);

console.log(fastFactorial(5)); // Calculates and caches
console.log(fastFactorial(5)); // Returns cached result

3 Explain JavaScript currying with an example. Premium

Answer: Currying is a technique where a function with multiple arguments is transformed into a sequence of functions each with a single argument. Example:

// Regular function
function add(a, b, c) {
    return a + b + c;
}

// Curried version
function curryAdd(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

// Usage
console.log(add(1, 2, 3)); // 6
console.log(curryAdd(1)(2)(3)); // 6

// Practical example: creating specialized functions
const addFive = curryAdd(5);
const addFiveAndTwo = addFive(2);
console.log(addFiveAndTwo(3)); // 10

Currying allows for partial application of functions and creating more specialized functions from general ones.

4 What are JavaScript generators and iterators? Premium

Answer: Iterators are objects with a `next()` method that returns values in a sequence. Generators are special functions (marked with `function*`) that can pause and resume execution, yielding multiple values. They simplify the creation of iterators by automatically implementing the iterator protocol. Example:

function* countUp(max) {
    let count = 0;
    while (count < max) {
        yield count++;
    }
}

const counter = countUp(3);
console.log(counter.next().value); // 0
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // undefined

// Practical example: infinite sequence
function* fibonacci() {
    let [prev, curr] = [0, 1];
    while (true) {
        yield curr;
        [prev, curr] = [curr, prev + curr];
    }
}

const fib = fibonacci();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3

5 What is the JavaScript Event Loop? Premium

Answer: The Event Loop is a fundamental part of JavaScript's concurrency model. It's responsible for executing code, collecting and processing events, and executing queued sub-tasks. It works by:

Executing synchronous code in the call stack
If the call stack is empty, checking the message queue for callbacks to execute
If a callback is present, pushing it onto the call stack to be executed
This process repeats, allowing JavaScript to handle asynchronous operations without blocking

This model allows JavaScript, which is single-threaded, to handle multiple operations concurrently.

// Example demonstrating event loop behavior
console.log('Start');

setTimeout(() => console.log('Timeout callback'), 0);

Promise.resolve().then(() => console.log('Promise callback'));

console.log('End');

// Output order:
// Start
// End
// Promise callback
// Timeout callback

6 Explain browser storage options (localStorage, sessionStorage, cookies) and their differences. Premium

Answer: Browser storage options:

localStorage: Stores data with no expiration date, persists even after browser is closed, limited to about 5MB, same-origin policy
sessionStorage: Similar to localStorage but data is cleared when the page session ends (when browser tab is closed), limited to about 5MB
Cookies: Small text files stored on the client's computer, limited to about 4KB, can set expiration time, sent with every HTTP request to the same domain, can be made secure/HTTP-only

Choose based on persistence needs, storage size requirements, and whether data needs to be sent to the server.

// localStorage example
localStorage.setItem('username', 'john_doe');
console.log(localStorage.getItem('username')); // "john_doe"
localStorage.removeItem('username');

// sessionStorage example
sessionStorage.setItem('theme', 'dark');
console.log(sessionStorage.getItem('theme')); // "dark"

// Cookies example
document.cookie = "username=john_doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
console.log(document.cookie);