Home JavaScript Interview Questions and Answers

September 13, 2024

JavaScript Interview Questions and Answers

Top 55 JavaScript Interview Questions and Answers for 2024

Here’s a comprehensive list of 55 JavaScript interview questions and answers to help you prepare for your 2024 interviews. Each question covers fundamental and advanced concepts to ensure a well-rounded understanding of JavaScript.

1. What is JavaScript?

Answer: JavaScript is a versatile, high-level programming language primarily used for adding interactivity and dynamic behavior to web pages. It is an essential component of web development, alongside HTML and CSS.

2. What are the different data types in JavaScript?

Answer: JavaScript has several data types, including:

Primitive types: Undefined, Null, Boolean, Number, BigInt, String, Symbol.
Non-primitive types: Object (including arrays and functions).

3. Explain the concept of “hoisting” in JavaScript.

Answer: Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope during the compile phase. This means functions and variables can be used before they are declared.

javascriptCopy codeconsole.log(x); // undefined
var x = 5;

4. What is the difference between var, let, and const?

Answer:

var: Function-scoped, can be re-assigned, and is hoisted.
let: Block-scoped, can be re-assigned, and is not hoisted in the same way as var.
const: Block-scoped, cannot be re-assigned, and is used for constants.

5. What is a closure in JavaScript?

Answer: A closure is a function that retains access to its lexical scope even when the function is executed outside that scope.

javascriptCopy codefunction outer() {
    let x = 10;
    function inner() {
        console.log(x);
    }
    return inner;
}
const innerFunc = outer();
innerFunc(); // 10

6. Explain the difference between == and === operators.

Answer:

== (loose equality): Compares values after converting them to a common type.
=== (strict equality): Compares values and types without type conversion.

7. What is the this keyword in JavaScript?

Answer: this refers to the context in which a function is executed. Its value depends on how the function is called (e.g., method of an object, constructor function, etc.).

8. What is a JavaScript promise?

Answer: A promise is an object representing the eventual completion or failure of an asynchronous operation. It has three states: pending, fulfilled, and rejected.

javascriptCopy codeconst promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Done!'), 1000);
});
promise.then(result => console.log(result)); // Done!

9. How do you handle errors in JavaScript?

Answer: Errors can be handled using try...catch blocks. try contains code that might throw an error, and catch handles the error if one occurs.

javascriptCopy codetry {
    let result = riskyFunction();
} catch (error) {
    console.log('Error occurred:', error);
}

10. What are arrow functions and how do they differ from regular functions?

Answer: Arrow functions provide a shorter syntax for writing functions and do not have their own this context.

javascriptCopy codeconst add = (a, b) => a + b;

Difference:

this: Arrow functions do not bind their own this but inherit it from the surrounding context.
arguments: Arrow functions do not have their own arguments object.

11. What is event delegation in JavaScript?

Answer: Event delegation is a technique of using a single event listener to manage events for multiple elements. It leverages event bubbling to handle events at a higher level in the DOM.

javascriptCopy codedocument.getElementById('parent').addEventListener('click', function(event) {
    if (event.target && event.target.matches('button')) {
        console.log('Button clicked');
    }
});

12. What is the Document Object Model (DOM)?

Answer: The DOM is an API that represents the structure of a web page as a tree of objects. It allows JavaScript to interact with and manipulate HTML and CSS.

13. How do you create an object in JavaScript?

Answer: Objects can be created using object literals, constructors, or the Object.create() method.

javascriptCopy codeconst person = {
    name: 'John',
    age: 30
};

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person2 = new Person('Jane', 25);

14. What is a JavaScript module?

Answer: JavaScript modules are a way to break down code into smaller, reusable pieces. They use export and import statements to share and use code between files.

javascriptCopy code// module.js
export const greet = () => 'Hello';

// app.js
import { greet } from './module';
console.log(greet());

15. What is asynchronous programming and how is it handled in JavaScript?

Answer: Asynchronous programming allows code to run independently of the main program flow, improving performance. In JavaScript, it’s handled using callbacks, promises, and async/await.

javascriptCopy codeasync function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
}
fetchData();

16. What is the event loop in JavaScript?

Answer: The event loop is a mechanism that allows JavaScript to perform non-blocking operations by handling asynchronous tasks and callbacks. It continuously checks the call stack and task queue to execute tasks.

17. What is the purpose of the bind() method?

Answer: The bind() method creates a new function with a specified this value and initial arguments. It is often used to set the context for a function.

javascriptCopy codeconst obj = { value: 10 };
function show() {
    console.log(this.value);
}
const boundShow = show.bind(obj);
boundShow(); // 10

18. What are template literals in JavaScript?

Answer: Template literals are string literals allowing embedded expressions and multi-line strings, denoted by backticks (`).

javascriptCopy codeconst name = 'John';
const message = `Hello, ${name}`;

19. Explain the concept of “prototypal inheritance”.

Answer: Prototypal inheritance allows objects to inherit properties and methods from other objects via their prototype chain. Every object in JavaScript has a prototype.

javascriptCopy codeconst animal = {
    eats: true
};
const rabbit = Object.create(animal);
console.log(rabbit.eats); // true

20. What is the fetch API?

Answer: The fetch API is a modern way to make HTTP requests. It returns a promise that resolves to the Response object representing the response to the request.

javascriptCopy codefetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

21. What is a “callback function”?

Answer: A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

javascriptCopy codefunction processUserInput(callback) {
    // Simulate user input
    const userInput = 'User Data';
    callback(userInput);
}
processUserInput(function(input) {
    console.log('Received:', input);
});

22. What is localStorage and sessionStorage?

Answer:

localStorage: Stores data with no expiration time. Data persists even when the browser is closed and reopened.
sessionStorage: Stores data for the duration of the page session. Data is cleared when the page session ends.

23. How do you prevent default form submission in JavaScript?

Answer: Use event.preventDefault() within an event handler to prevent the default action of form submission.

javascriptCopy codedocument.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    // Handle form submission
});

24. What is the Array.prototype.map() method?

Answer: The map() method creates a new array with the results of calling a provided function on every element in the calling array.

javascriptCopy codeconst numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

25. What is the Array.prototype.reduce() method?

Answer: The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

javascriptCopy codeconst numbers = [1, 2, 3];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

26. What is a Set in JavaScript?

Answer: A Set is a built-in object that lets you store unique values of any type, whether primitive values or object references.

javascriptCopy codeconst uniqueNumbers = new Set([1, 2, 2, 3]);
console.log(uniqueNumbers); // Set { 1, 2, 3 }

27. What is the purpose of the JSON.stringify() method?

Answer: The JSON.stringify() method converts a JavaScript object or value to a JSON string, making it suitable for transmission or storage.

javascriptCopy codeconst obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj);

28. What is the Object.keys() method?

Answer: The Object.keys() method returns an array of a given object’s own enumerable property names.

javascriptCopy codeconst obj = { name: 'John', age: 30 };
const keys = Object.keys(obj); // ['name', 'age']

29. What are Symbol data types used for?

Answer: Symbol is a primitive data type that creates unique identifiers for object properties, preventing accidental name clashes.

javascriptCopy codeconst uniqueId = Symbol('id');
const obj = { [uniqueId]: 123 };

30. Explain the concept of “function currying”.

Answer: Function currying is a technique where a function returns another function that accepts one argument at a time. It helps to create functions with preset parameters.

javascriptCopy codefunction multiply(a) {
    return function(b) {
        return a * b;
    };
}
const double = multiply(2);
console.log(double(5)); // 10

31. What is the forEach() method in JavaScript?

Answer: The forEach() method executes a provided function once for each array element.

javascriptCopy codeconst numbers = [1, 2, 3];
numbers.forEach(num => console.log(num));

32. What is the purpose of the Object.assign() method?

Answer: The Object.assign() method copies the values of all enumerable own properties from one or more source objects to a target object.

javascriptCopy codeconst target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);

33. What is the difference between null and undefined?

Answer:

null: Represents the intentional absence of any object value.
undefined: Indicates that a variable has been declared but not yet assigned a value.

34. What is a “self-invoking function”?

Answer: A self-invoking function (or Immediately Invoked Function Expression, IIFE) is a function that runs as soon as it is defined.

javascriptCopy code(function() {
    console.log('Executed!');
})();

35. What is the difference between call() and apply() methods?

Answer: Both call() and apply() methods invoke a function with a specific this value and arguments. The difference is in how arguments are passed:

call(): Arguments are passed individually.
apply(): Arguments are passed as an array.

javascriptCopy codefunction greet(greeting, name) {
    console.log(`${greeting}, ${name}`);
}
greet.call(null, 'Hello', 'Alice');
greet.apply(null, ['Hello', 'Bob']);

36. What is the Array.prototype.find() method?

Answer: The find() method returns the first element in the array that satisfies the provided testing function.

javascriptCopy codeconst numbers = [1, 2, 3, 4, 5];
const found = numbers.find(num => num > 3); // 4

37. What are “getter” and “setter” methods?

Answer:

Getter: A method that retrieves the value of a property.
Setter: A method that sets the value of a property.

javascriptCopy codeconst obj = {
    _value: 0,
    get value() {
        return this._value;
    },
    set value(val) {
        this._value = val;
    }
};
obj.value = 5;
console.log(obj.value); // 5

38. What is a “generator function” in JavaScript?

Answer: A generator function allows you to define an iterative algorithm by writing a function that can be paused and resumed. It uses the function* syntax and yields values using yield.

javascriptCopy codefunction* generator() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

39. What is the with statement and why should it be avoided?

Answer: The with statement extends the scope chain for a statement, but it can lead to confusing code and unpredictable behavior. It is generally avoided in modern JavaScript.

javascriptCopy codewith (obj) {
    x = 5;
}

40. What are “default parameters” in JavaScript functions?

Answer: Default parameters allow you to initialize function parameters with default values if no value or undefined is passed.

javascriptCopy codefunction greet(name = 'Guest') {
    console.log(`Hello, ${name}`);
}
greet(); // Hello, Guest

41. Explain the spread operator.

Answer: The spread operator (...) allows you to expand elements of an array or object into individual elements.

javascriptCopy codeconst arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

42. What is a “high-order function”?

Answer: A high-order function is a function that takes other functions as arguments or returns a function as its result.

javascriptCopy codefunction createMultiplier(multiplier) {
    return function(value) {
        return value * multiplier;
    };
}
const double = createMultiplier(2);

43. What is the setTimeout() function?

Answer: The setTimeout() function executes a function after a specified number of milliseconds.

javascriptCopy codesetTimeout(() => console.log('Executed!'), 1000);

44. What is the setInterval() function?

Answer: The setInterval() function repeatedly executes a function at specified intervals (in milliseconds).

javascriptCopy codesetInterval(() => console.log('Repeated!'), 1000);

45. Explain the concept of “event bubbling” and “event capturing”.

Answer:

Event Bubbling: Events propagate from the target element up to the root of the DOM tree.
Event Capturing: Events propagate from the root down to the target element.

You can specify the phase in addEventListener().

46. What is the Array.prototype.slice() method?

Answer: The slice() method returns a shallow copy of a portion of an array into a new array object, selected from start to end (end not included).

javascriptCopy codeconst arr = [1, 2, 3, 4];
const sliced = arr.slice(1, 3); // [2, 3]

47. How do you convert a string to a number in JavaScript?

Answer:

parseInt() and parseFloat(): Convert strings to integers and floating-point numbers, respectively.
Number(): Converts a string to a number.
Unary + operator: Converts a string to a number.

javascriptCopy codeconst str = '123';
const num1 = parseInt(str);
const num2 = Number(str);
const num3 = +str;

48. What is the Object.freeze() method?

Answer: The Object.freeze() method prevents modifications to an object, making it immutable. Properties cannot be added, removed, or modified.

javascriptCopy codeconst obj = { name: 'John' };
Object.freeze(obj);
obj.name = 'Jane'; // No effect

49. Explain the concept of “memoization”.

Answer: Memoization is an optimization technique that caches function results based on input parameters to avoid redundant computations.

javascriptCopy codefunction memoize(fn) {
    const cache = new Map();
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = fn(...args);
        cache.set(key, result);
        return result;
    };
}

50. What is the Object.entries() method?

Answer: The Object.entries() method returns an array of a given object’s own enumerable string-keyed property [key, value] pairs.

javascriptCopy codeconst obj = { a: 1, b: 2 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2]]

51. How do you implement inheritance in JavaScript?

Answer: Inheritance in JavaScript can be implemented using prototypes, Object.create(), or ES6 classes.

javascriptCopy code// ES6 Class Inheritance
class Animal {
    speak() {
        console.log('Animal speaks');
    }
}

class Dog extends Animal {
    bark() {
        console.log('Dog barks');
    }
}

const dog = new Dog();
dog.speak(); // Animal speaks
dog.bark(); // Dog barks

52. What is the Array.prototype.splice() method?

Answer: The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements.

javascriptCopy codeconst arr = [1, 2, 3];
arr.splice(1, 1, 'a', 'b'); // [1, 'a', 'b', 3]

53. What is the this keyword in JavaScript?

Answer: The this keyword refers to the object from which a function was called. Its value depends on the execution context.

javascriptCopy codeconst obj = {
    name: 'John',
    greet() {
        console.log(this.name);
    }
};
obj.greet(); // John

54. What is the Array.prototype.reduce() method?

Answer: The reduce() method executes a reducer function on each element of the array, resulting in a single output value.

javascriptCopy codeconst nums = [1, 2, 3];
const sum = nums.reduce((acc, num) => acc + num, 0); // 6

55. Explain the Promise.all() method.

Answer: The Promise.all() method takes an iterable of Promise objects and, when all of the given promises have resolved, returns a single Promise that resolves with an array of the results.

javascriptCopy codeconst p1 = Promise.resolve(3);
const p2 = 42;
const p3 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));

Promise.all([p1, p2, p3]).then((values) => {
    console.log(values); // [3, 42, 'foo']
});

These questions cover a range of basic to advanced JavaScript concepts, suitable for preparing for interviews in 2024.