JavaScript Coding Interview QuestionsCoderBeans: A coding blogs website

JavaScript Coding Interview Questions

Basic JavaScript Questions:

1. What is JavaScript?

Answer: JavaScript is a high-level, interpreted programming language used for building dynamic web applications. It runs in the browser.

2. Explain the difference between null and undefined.

Answer: null is an explicitly assigned value, while undefined represents the absence of a value or uninitialized variable. For example, if we want to set a variable's value as null, we will code it like this:

let x = null;

and if we declare a variable without initializing it, JavaScript will set it as undefined.

let name;

3. How do you declare a variable in JavaScript?

Answer: You can declare a variable using var, let, or const. For example:

var x = 10;

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

Answer: let and const have block scope, while var has function scope. const cannot be reassigned, while let and var can. In modern JavaScript, it's generally recommended to use let and const over var. We use let when we need to reassign a variable, and use const when the variable should not be reassigned. This helps prevent unintentional variable reassignment and enforces better coding practices. It's also a good idea to prefer block-scoped variables (let and const) over function-scoped variables (var) to minimize potential issues with variable scope and hoisting. Here are few examples:

var creates a function-scoped variable.

// using var
function example() {
    if (true) {
      var x = 10; // Function-scoped
    }
    console.log(x); // 10
  }

let creates a block-scoped variable and can be re-assigned.

// using let
function example() {
    if (true) {
      let x = 10; // Block-scoped
    }
    console.log(x); // ReferenceError: x is not defined
  }

const is also a block-scoped variable but it can be assigned only once, and its value cannot be changed afterwards.

// using const
function example() {
    if (true) {
      const x = 10; // Block-scoped
      x = 20; // Error: Assignment to constant variable
    }
  }

5. What is a closure in JavaScript?

Answer: A closure is an inner function that has access to its own scope, the outer (enclosing) function's scope, and the global scope.

Data Types and Variables:

1. What are the primitive data types in JavaScript?

Answer: The primitive data types in JavaScript are string, number, boolean, null, undefined, and symbol.

2. How do you check the type of a variable?

Answer: You can use the typeof operator. For example, typeof x returns a string representing the type of x.

3. What is variable hoisting in JavaScript?

Answer: Variable declarations are moved to the top of their containing function or block, but assignments are not. This behavior is known as hoisting.

4. Explain the difference between == and ===.

Answer: == performs type conversion to find the equality, while === performs strict equality without type conversion.

5. What are template literals in JavaScript?

Answer: Template literals are string literals that allow for embedded expressions using ${}. We use back ticks to enclose these expressions. For example:

let name = "Ashraf";

`My name is ${name}`; // Output: My name is Ashraf

5. What are arrays, functions and objects in JavaScript?

Answer: An array is used to store a collection of values, such as a list of numbers or a list of strings like names etc. A function is a block of code that performs a specific task or returns a value. An object is a non primitive data type which can hold multiple values or combination of values, function and other objects.

Loops in JavaScript:

1. What is loop and what are types of loops in JavaScript?

Answer: A loop is a programming way to run a set of instructions(code) repeatedly until a certain condition is met. There are for, while, do-while, for...of, for...in and forEach loop in JavaScript.

For loop allows to iterate a block of code a specific number of times. For example:

// for loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// output: 0 1 2 3 4

While loop execute a block of code while a certain condition is true. For example:

// while loop
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// Output: 0 1 2 3 4

The do-while loop is similar to the while loop, except that the block of code is executed at least once, even if the condition is false. For example:

// do-while loop
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);
// Output: 0 1 2 3 4

2. What is the difference between for...of and for...in loops in JavaScript?

Answer:for...of loop is used to loop through the values of an object like arrays, strings. It allows you to access each value directly, without having to use an index. For example:

// for...of loop
const colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}
// Output: red green blue

for...in loop is used to loop through the properties of an object. It allows you to iterate over the keys of an object and access the values associated with those keys.

// for...in loop
const person = { name: "Alice", age: 30 };
for (let key in person) {
  console.log(key, person[key]);
}
// Output: Alice 30

3. What is the forEach method in JavaScript?

Answer: forEach is a method available on arrays or object that allows you to iterate over each element of the array or each property of the object and perform some action on each element or property, as you can see in the following code examples:

// forEach method on array
const arr = [1, 2, 3];
arr.forEach(function (item) {
    console.log(item);
});
// Output: 1 2 3

// forEach method on Object
const person = {
    name: 'Peter',
    age: 30
};
Object.values(person).forEach(value => {
    console.log(value);
});
// Output: Peter 30

Functions in JavaScript:

1. How do you define a function in JavaScript?

Answer: You can define a function using the function keyword or arrow functions (ES6). For example:

A simple named function:

function add(a, b) {
    return a + b;
  }
  // Calling the function
  const result = add(3, 5); // result will be 8

A simple arrow function with no parameters:

const sayHello = () => {
    console.log("Hello, world!");
  };

An arrow function with parameters:

const add = (a, b) => a + b;

Arrow function without braces (for a single expression):

const double = (num) => num * 2;

2. What is the difference between function declarations and function expressions?

Answer: Function declarations are hoisted, while function expressions are not. Function declarations can be used before the declaration.

3. What is a callback function in JavaScript?

Answer: A callback function is a function passed as an argument to another function and is intended to be executed after a specific task or event has occurred. For example:

function fetchData(url, callback) {
    // Simulate fetching data from a server (async operation)
    setTimeout(function () {
        const data = { id: 1, name: "Example Data" };
        callback(data); // Execute the callback with the retrieved data
    }, 1000);
}

function processFetchedData(data) {
    console.log("Data received:", data);
}

fetchData("https://example.com/data", processFetchedData);
// Output: Data received: {id: 1, name: 'Example Data' }

Callback functions are a crucial part of managing asynchronous behavior in JavaScript, enabling you to control the flow of your program and handle data when it becomes available.

4. What is a closure in JavaScript, and how is it useful?

Answer: A closure is a function that has access to its own scope and the outer (enclosing) function's scope. Closures are useful for creating private variables and encapsulation.

5. Explain the concept of "this" in JavaScript.

Answer: this refers to the current execution context. Its value depends on how a function is called (global, method, constructor, etc.).

6. What is Named Function and Anonymous Function in JavaScript.

Named functions are defined with a function name and can be used before or after their declaration. They are often used for reusable code blocks and are commonly defined using the function keyword.

For example:

//Name Function
function sum(x, y) {
    return x + y;
}
console.log(sum(7, 3));
// Output: 10

Anonymous functions do not have a name and are often used as callback function. For example:

// Anonymous function
console.log(function(a, b) {
    return a + b;
}(3, 2));
// Output: 5

7. What is a function expression in JavaScript?

A function expression is a way to define a function in JavaScript by assigning it to a variable, it can be both named and anonymous functions. For example

// Named function
const result = function sum(a, b) {
    return a + b;
}
console.log(result(3, 7));
// Output: 10

// Anonymous function
const add = function (a, b) {
    return a + b;
}
console.log(add(3, 7));
// Output: 10

7. What is a arrow function in JavaScript?

Arrow functions provide a more concise way to write functions. They are often used for short, simple functions and are especially common when working with array methods. For example:

const square = (x) => x * x;
console.log(square(3));
// Output: 9

Arrays and Objects:

1. How do you create an empty array in JavaScript?

Answer: You can create an empty array using var myArray = [] or var myArray = new Array().

2. How do you add an element to the beginning and end of an array?

Answer: Use unshift() to add an element to the beginning and push() to add an element to the end of an array.

3. How do you iterate over the properties of an object?

Answer: You can use a for...in loop or the Object.keys(obj) method to iterate over an object's properties.

4. What is JSON, and how is it related to JavaScript objects?

Answer: JSON (JavaScript Object Notation) is a text-based data interchange format. It is similar in structure to JavaScript objects and can be easily converted between JSON and JavaScript objects.

5. How do you clone an object in JavaScript?

Answer: You can clone an object using methods like Object.assign({}, obj) or the spread operator {...obj}.

ES6 Features in JavaScript:

1. What is destructuring in ES6, and how is it used?

Answer: Destructuring is a way to extract values from arrays and objects. For example:

var [firstName, secondName] = ["John", "Peter"]; 
        
console.log(firstName);//"John" 
console.log(secondName);//"Peter" 

2. What are arrow functions in ES6?

Answer: Arrow functions provide a concise syntax for writing functions. They do not have their own this binding and are often used in callback functions.

3. Explain the let and const keywords in ES6.

Answer: let and const were introduced in ES6 for block-scoped variables. let allows reassignment, while const does not. We can assign a new value to let but we can't assign a new value to const because they are defined as constants.

4. What is the spread operator in ES6, and how is it used?

Answer: The spread operator (...) allows you to expand an iterable (e.g., an array) into its individual elements. It can be used for array manipulation and object spreading.

5. What is a Promise in ES6, and how is it used for asynchronous operations?

Answer: Promises are a way to handle asynchronous operations in JavaScript. They represent a value that might be available now, in the future, or never. Promises have then, catch, and finally methods for handling success, failure, and cleanup.

DOM Manipulation in JavaScript:

1. What is the DOM in the context of web development?

Answer: The Document Object Model (DOM) is a programming interface for web documents. It represents the page's content so that it can be manipulated and modified with programming.

2. How do you select an element by its ID in JavaScript?

Answer: You can use document.getElementById("elementId") to select an element by its ID.

3. What is event delegation, and why is it useful?

Answer: Event delegation is a technique where you attach an event listener to a parent element to listen for events on its child elements. It reduces the number of event listeners and improves performance.

4. How do you create a new element and append it to the DOM?

Answer: You can use the document.createElement() method to create a new element and then use appendChild() or other methods to add it to the DOM.

5. Explain the difference between innerHTML and textContent.

Answer: innerHTML sets or returns the HTML content of an element, while textContent sets or returns the text content, escaping HTML tags.

Asynchronous Programming in JavaScript:

1. What is the event loop in JavaScript, and how does it work?

Answer: The event loop is a key part of JavaScript's concurrency model. It handles asynchronous operations and ensures that JavaScript remains non-blocking.

2. How do you make an AJAX request in JavaScript?

Answer: You can use the XMLHttpRequest object or the newer fetch API to make AJAX requests to a server.

3. What is a callback hell, and how can it be avoided?

Answer: Callback hell, also known as the "pyramid of doom," occurs when you have deeply nested callback functions. It can be avoided using techniques like Promises, async/await, or named functions.

4. Explain the purpose of the setTimeout() function.

Answer: setTimeout() is used to schedule the execution of a function or code block after a specified delay (in milliseconds).

5. What is a Promise in JavaScript, and how does it help with asynchronous operations?

Answer: A Promise represents a value that might be available now, in the future, or never. It provides a clean and structured way to handle asynchronous operations, making code more readable and maintainable.

Object-Oriented Programming in JavaScript:

1. How do you create an object in JavaScript?

Answer: You can create objects using object literals, constructor functions, or class syntax (ES6).

2. What is prototypal inheritance in JavaScript?

Answer: In JavaScript, objects inherit properties and methods from other objects. This inheritance is based on prototype chains, where an object's prototype is another object.

3. What are constructor functions in JavaScript?

Answer: Constructor functions are used to create objects based on a blueprint. They are invoked using the new keyword.

4. Explain the concept of encapsulation in JavaScript.

Answer: Encapsulation is the practice of bundling data (variables) and methods (functions) that operate on that data into a single unit, often referred to as a class in object-oriented programming.

5. What are getters and setters in JavaScript, and why are they used?

Answer: Getters and setters are special methods used to access and modify object properties. They provide control and validation over property values.

Error Handling in JavaScript:

1. How do you handle errors in JavaScript?

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

2. What is the purpose of the throw statement?

Answer: The throw statement is used to throw a user-defined exception. It can be caught and handled using try...catch.

3. What is the difference between throw and throw new Error()?

Answer: throw can throw any value, while throw new Error() is often used to create custom error objects with a message.

4. Explain the finally block in a try...catch statement.

Answer: The finally block is executed whether an exception is thrown or not. It is often used for cleanup operations.

5. What is the purpose of the Error object in JavaScript?

Answer: The Error object is a built-in object that provides information about an error. It can be used to create custom error types.

Scope and Closures in JavaScript:

1. What is scope in JavaScript?

Answer: Scope refers to the context in which variables are declared and accessed. JavaScript has local , global, function and block scope.

2. What is variable shadowing in JavaScript?

Answer: Variable shadowing occurs when a variable declared in an inner scope has the same name as a variable in an outer scope, effectively hiding the outer variable.

3. Explain lexical scoping in JavaScript.

Answer: Lexical scoping, also known as static scoping, means that the scope of a variable is determined at the time of its definition based on the code's structure, not where it's executed.

4. How do you create a private variable in JavaScript?

Answer: Private variables can be created using closures. Variables declared within a function are not accessible from outside the function, effectively making them private.
In ES6 JavaScript, you can create private variables using a feature called "private class fields." This allows you to define private variables within a class. Here's how you can create a private variable in ES6:

class MyClass {
    #privateVariable; // Declare a private variable
  
    constructor() {
      this.#privateVariable = 0; // Initialize the private variable
    }
  
    incrementPrivateVariable() {
      this.#privateVariable++; // Access and modify the private variable
    }
  }
  
  const myInstance = new MyClass();
  myInstance.incrementPrivateVariable();
  console.log(myInstance.#privateVariable);

5. What is the "this" keyword, and how is it determined in JavaScript?

Answer: this refers to the current execution context. It is determined by how a function is called. In a method, this refers to the object it's called on. In a function, this is the global object (e.g., window in a browser) or undefined in strict mode.

Promises and Async/Await in JavaScript:

1. What is a Promise in JavaScript, and how does it help with asynchronous operations?

2. How do you create a new Promise in JavaScript?

Answer: You can create a new Promise using the Promise constructor, which takes a resolver function with resolve and reject callbacks.

3. What are the states of a Promise in JavaScript?

Answer: A Promise can be in one of three states: pending (initial state), fulfilled (resolved with a value), or rejected (resolved with an error).

4. How do you catch errors in async functions?

Answer: You can use a try...catch block inside an async function to catch errors that occur during asynchronous operations.

5. Explain the purpose of the await keyword in JavaScript.

Answer: The await keyword is used within an async function to pause execution until a promise is resolved, and it returns the resolved value.

Modules and Imports in JavaScript:

1. What are ES6 modules, and how do you export and import them?

Answer: ES6 modules are a way to organize and share code. You can export variables, functions, or classes using export and import them using import.

2. What is the default export in an ES6 module?

Answer: The default export is the primary export of a module. You can have only one default export in a module, and it doesn't require curly braces when importing.

3. How can you import only specific functions or variables from a module?

Answer: You can import specific items from a module using curly braces and specifying the names of the items you want to import.

4. What is the difference between import ... from and require in Node.js?

Answer: import ... from is the ES6 module syntax and works in modern browsers and environments that support ES modules. require is the CommonJS module system used in Node.js.

5. How do you export and import an entire module as an object?

Answer: You can export multiple items from a module and import them all as properties of an object. For example, import * as myModule from "./module";.

Event Handling in JavaScript:

1. How do you attach an event listener to an element in JavaScript?

Answer: You can use the addEventListener method to attach an event listener to an element. For example, element.addEventListener('click', handlerFunction).

2. What is event propagation in JavaScript, and how does it work?

Answer: Event propagation refers to the order in which events are processed. It consists of two phases: capturing phase and bubbling phase. Events can be captured at the root and then bubble up to the target element.

3. How can you prevent the default behavior of an event in JavaScript?

Answer: You can use the event.preventDefault() method within an event handler to prevent the default behavior of an event, such as form submission or link navigation.

4. What is the purpose of the event.stopPropagation() method?

Answer: The event.stopPropagation() method is used to stop the propagation of an event to parent elements in the DOM. It prevents the event from reaching other event listeners.