JavaScript Questions and Answers

Introduction

JavaScript is a versatile programming language essential for modern web development. It allows for creating interactive and dynamic web content. Its broad ecosystem, support for client-side interactivity, and compatibility across browsers make it indispensable for web developers.

To help you prepare for your JavaScript developer interview, we've compiled a list of essential interview questions and answers. This guide will cover a range of topics from basic concepts to more advanced features of JavaScript.

What is JavaScript?

JavaScript is a simple, interpreted programming language with object-oriented features. It is used to add interactivity to static HTML pages. JavaScript is integrated into web browsers like Netscape and Internet Explorer.

Different Data Types in JavaScript

JavaScript supports the following data types:

• Undefined
• Null
• Boolean
• String
• Symbol
• Number
• Object

List Some Features of JavaScript

• Interpreted Language: No need for compilation; executed directly by the browser.
• Cross Platform: Works the same on all operating systems.
• Object-Oriented: Uses objects to represent data and code.
• Asynchronous Processing: Supports async-await and promises for handling asynchronous operations.

Advantages of JavaScript

• Superior Interaction: Makes static web pages interactive.
• Quick Response: Allows for updates without reloading the page (e.g., form validation).
• Rich User Interface: Enhances the look and feel of web apps.
• Frameworks: Includes many libraries and frameworks for building various applications.

Is JavaScript Case-Sensitive?

Yes, JavaScript is case-sensitive. Keywords, variables, function names, and identifiers must be consistently capitalized.

Name the Company Which Developed JavaScript

JavaScript was developed by Netscape.

How Do You Create an Object in JavaScript?

Using the object literal syntax:

var emp = {
  name: "John",
  age: 19
};

How Do You Construct an Array in JavaScript?

Using the array literal syntax:

var a = [];
var b = [1, 2, 3, 4, 5];

Can You Pass an Anonymous Function as an Argument to Another Function?

Yes, you can pass anonymous functions as arguments to other functions.

Differentiate Between == and === Operators

== (Equality Operator): Compares values, performing type coercion if necessary. === (Identity Operator): Compares both value and type without type conversion.

var a = 7;
var b = "7";
(a == b)  // Returns true
(a === b) // Returns false

Differentiate Between var and let Keywords

var: Introduced in the early days of JavaScript, has function scope. let: Introduced in 2015, has block scope.

Define Scopes of a Variable in JavaScript

Global Variables: Accessible throughout your JavaScript code. Local Variables: Accessible only within the function where they are defined.

List a Few Built-In Methods and Their Values

JavaScript Variable Naming Conventions

• Reserved keywords should not be used as variable names.
• Variable names should not start with a number.
• Variable names are case-sensitive.

How Does the typeof Operator Function?

The typeof operator returns a string indicating the type of its operand.

Define Undeclared and Undefined Variables

• Undeclared Variables: Variables that are not declared at all.
• Undefined Variables: Variables that are declared but not initialized.

What Are the Escape Characters in JavaScript?

Escape characters are used to display special characters:

\n – Newline \r – Carriage return \t – Horizontal tab \v – Vertical tab \b – Backspace \f – Form feed

Define a Prompt Box

A prompt box is used to get user input. It provides a text box for the user to enter information.

Differentiate Between slice and splice

Define the Various Types of Error Constructors Supported by JavaScript

JavaScript has several error constructors:

• EvalError: Related to the eval() function.
• InternalError: Indicates internal engine errors.
• RangeError: Occurs when a numeric value is outside its valid range.
• ReferenceError: Indicates dereferencing an incorrect reference.
• SyntaxError: Related to syntax errors in code.
• TypeError: Occurs when a variable's type is not valid.
• URIError: Related to invalid URI parameters.

How Is JavaScript Code Debugged?

Modern browsers have integrated debuggers accessible via the F12 key. You can also use code editors like Visual Studio Code for debugging.

Differentiate Between window and document

• window: The global object representing the browser's window.
• document: Represents the HTML document loaded in the browser.

Define Arrow Functions in JavaScript

Arrow functions offer a concise syntax for writing functions:

const welcome = () => {
  console.log("I am console!");
};

Give Some JavaScript Frameworks and Their Uses

• React: Frontend development for building user interfaces.
• Angular: Frontend development for building web applications.
• Node.js: Backend or server-side development.

Define Event Bubbling and Event Capturing

• Event Bubbling: The event starts from the innermost element and bubbles up to the outermost element.
• Event Capturing: The event starts from the outermost element and trickles down to the target element.

Define Ways to Empty an Array in JavaScript

// Set the length to 0:
var x = [1, 2, 3, 4];
x.length = 0;
 
// Reassign to an empty array:
var x = [1, 2, 3, 4];
x = [];
 
// Use the splice method:
var x = [1, 2, 3, 4];
x.splice(0, x.length);

Define Ways to Remove Duplicates from a JavaScript Array

// Using filter Method:
let arr = [1, 2, 2, 3];
let uniqueArr = arr.filter((value, index, self) => self.indexOf(value) === index);
 
// Using for Loop:
let arr = [1, 2, 2, 3];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}

What Is an Immediately Invoked Function Expression (IIFE)?

An IIFE is a function that runs as soon as it is defined. It is often used to create a private scope for variables:

(function() {
  console.log("I am an IIFE");
})();

How Does the bind() Method Work?

The bind() method creates a new function that, when called, has its this keyword set to the provided value:

function greet() {
  console.log("Hello, " + this.name);
}
const person = { name: "John" };
const greetPerson = greet.bind(person);
greetPerson(); // "Hello, John"

Differentiate Between call() and apply()

• call(): Invokes a function with a given this value and arguments provided individually.
• apply(): Invokes a function with a given this value and arguments provided as an array.

What Is a Promise in JavaScript?

A Promise is an object representing the eventual completion or failure of an asynchronous operation:

let promise = new Promise((resolve, reject) => {
  // asynchronous operation
});
promise.then(result => console.log(result)).catch(error => console.log(error));

What Is the Event Loop in JavaScript?

The event loop is a mechanism that allows JavaScript to perform non-blocking operations by executing asynchronous tasks after the main execution thread has completed.

How to Handle Asynchronous Operations in JavaScript?

Asynchronous operations can be handled using:

• Callbacks
• Promises
• Async/Await

Define JavaScript Closures

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

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
let counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

How Does JavaScript Handle Object Properties?

JavaScript handles object properties as key-value pairs. You can access and modify object properties using dot notation or bracket notation:

let obj = { name: "Alice", age: 25 };
console.log(obj.name); // Alice
console.log(obj["age"]); // 25

Explain JavaScript's Prototypal Inheritance

JavaScript uses prototypal inheritance, where objects inherit properties and methods from other objects through their prototype chain.

How to Create a Class in JavaScript?

You can create a class using the class keyword:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log("Hello, " + this.name);
  }
}
const person = new Person("John", 30);
person.greet(); // Hello, John

Define async and await Keywords

• async: Declares a function as asynchronous.
• await: Pauses execution until a Promise is resolved or rejected.

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

How to Check for NaN Values in JavaScript?

You can check if a value is NaN using the Number.isNaN() method:

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(123)); // false

What Are the Differences Between null and undefined?

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

How to Create a Singleton in JavaScript?

A Singleton ensures a class has only one instance and provides a global point of access:

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

How Do You Perform Deep Copy in JavaScript?

You can perform a deep copy using methods like JSON.parse(JSON.stringify(obj)):

let obj = { name: "Alice", details: { age: 25 } };
let copy = JSON.parse(JSON.stringify(obj));

What Is the this Keyword in JavaScript?

The this keyword refers to the context in which the function is called:

• In a method, this refers to the object that owns the method.
• In a function, this refers to the global object or undefined in strict mode.
• In an arrow function, this is lexically bound to the surrounding context.

What Are the Different Types of Function Declarations?

// Function Declaration:
function myFunction() {}
 
// Function Expression:
const myFunction = function() {};
 
// Arrow Function:
const myFunction = () => {};

What Is the Use of bind() Method?

The bind() method creates a new function with a specified this value and initial arguments:

function greet(greeting) {
  console.log(greeting + ", " + this.name);
}
const person = { name: "Alice" };
const greetPerson = greet.bind(person, "Hello");
greetPerson(); // Hello, Alice

What Is the new Keyword in JavaScript?

The new keyword creates an instance of a constructor function or class. It sets the this value to the new object and returns the new instance:

function Car(make, model) {
  this.make = make;
  this.model = model;
}
const myCar = new Car("Toyota", "Corolla");

How to Handle Errors in JavaScript?

Errors can be handled using:

• try...catch: For synchronous code.
• catch in Promises: For asynchronous code.
• finally: Executes code regardless of the outcome.

try {
  throw new Error("Something went wrong");
} catch (error) {
  console.error(error.message);
} finally {
  console.log("This always runs");
}

What Is event.target?

The event.target property returns the element that triggered the event:

document.addEventListener('click', function(event) {
  console.log(event.target); // Logs the clicked element
});

Explain JavaScript Closures with Examples

Closures are functions that retain access to their lexical scope even when the function is executed outside that scope.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

What Are Higher-Order Functions?

Higher-order functions are functions that take other functions as arguments or return functions as their result.

function filter(arr, callback) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i])) {
      result.push(arr[i]);
    }
  }
  return result;
}
const isEven = num => num % 2 === 0;
console.log(filter([1, 2, 3, 4], isEven)); // [2, 4]

How to Optimize JavaScript Code Performance?

JavaScript code performance can be optimized by:

• Minimizing DOM manipulation
• Using efficient algorithms and data structures
• Debouncing or throttling events
• Leveraging asynchronous programming
• Minimizing synchronous blocking code

What is asynchronous programming in Javascript?

Asynchronous programming in JavaScript allows you to perform long-running tasks without freezing the entire program. This is typically managed using callbacks, promises, or async/await syntax. The event loop schedules these callbacks to run once the long-running tasks are complete.

What are the different iterable values in JavaScript?

The different types of inbuilt iterable values in Js are :

• Arrays
• Strings
• Maps
• Sets

Is Javascript a case-sensitive language?

JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. The while keyword, for example, must be typed “while”, not “While” or “WHILE”.

• To avoid case-sensitive errors, you can use the same case for all references to the same identifier. For example, "userName" and "username" are not the same in JavaScript.

What is the difference between Object.freeze() and const?

• const: Prevents reassignment of variables but does not make objects immutable.
• Object.freeze(): Makes an object immutable, preventing changes to existing properties or adding new ones. When to use each:
• Use const for declaring variables that should not be reassigned.
• Use Object.freeze() when you want to ensure that an object's properties cannot be changed.

const number = 5;
number = 10; // Error: Assignment to constant variable.
 
const obj = { name: "Alice" };
obj.name = "Bob"; // This is allowed.
obj = { name: "Charlie" }; // Error: Assignment to constant variable.
 
const person = { name: "Alice", age: 30 };
Object.freeze(person);
 
person.age = 31; // This will not work.
person.city = "London"; // This will not work either.

What are Promises in Javascript?

In JavaScript, a Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It's a way to handle asynchronous operations in a more organized and readable manner compared to traditional callback functions.

Key aspects of Promises:

• States: A Promise can be in one of three states:
  • Pending: The initial state, neither fulfilled nor rejected.
  • Fulfilled: The operation completed successfully, and the Promise has a value.
  • Rejected: The operation failed, and the Promise has a reason for the failure (usually an error object).
• Methods:
  • then(): Used to handle the successful completion of a Promise. It takes two callback functions as arguments: one for the fulfilled state and one for the rejected state.
  • catch(): Used to handle the rejection of a Promise. It takes a callback function as an argument that is executed when the Promise is rejected.
  • finally(): Used to execute code regardless of whether the Promise was fulfilled or rejected.
• Chaining: Promises can be chained together, allowing you to perform a sequence of asynchronous operations in a more readable way.

Benefits of using Promises:

• Improved readability: Promises allow you to write asynchronous code that is more structured and easier to understand.
• Error handling: Promises provide a clear way to handle errors using the catch() method.
• Chaining: Promises can be chained together to perform a series of asynchronous operations in a sequential manner.

What is currying in JavaScript?

Currying is a functional programming technique in JavaScript where a function that takes multiple arguments is transformed into a sequence of functions, each taking a single argument. Currying transforms a function with multiple arguments into a series of nested functions:

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

Benefits of Currying:

• Code reusability: Create specialized functions by partially applying arguments.
• Improved readability: Break down complex functions into smaller, more focused ones.
• Enhanced composability: Combine curried functions to build more complex logic.
• Partial application: Pass a subset of arguments to a function, creating a new function that accepts the remaining arguments.

Key points to remember:

• Each function in the curried sequence accepts one argument and returns another function, except for the last function, which returns the final result.
• Currying relies heavily on the concept of closures.
• It's a powerful technique for creating flexible and reusable functions in JavaScript.

What is Strict mode in JS?

Strict Mode in JavaScript is a feature introduced in ECMAScript 5 that allows you to opt into a restricted variant of the language. It enforces stricter rules and eliminates some silent errors, helping you write cleaner and more secure code.

"use strict";
 
x = 10; // Throws an error, as 'x' is not declared
 
function myFunction() {
  "use strict";
  y = 20; // Throws an error, as 'y' is not declared
}

What is the difference between a null, undefined, and undeclared variable in Javascript?

In JavaScript, these three terms represent different states of a variable:

• Undeclared Variable: This refers to a variable that has not been declared using var, let, or const keywords. Attempting to access an undeclared variable will result in a ReferenceError.
• Undefined Variable: This refers to a variable that has been declared but has not been assigned any value. It has the value undefined.
• Null Variable: This refers to a variable that has been declared and explicitly assigned the value null. It represents the intentional absence of any object value.

// Undeclared variable
console.log(x); // ReferenceError: x is not defined
 
// Undefined variable
let y;
console.log(y); // undefined
 
// Null variable
let z = null;
console.log(z); // null

What is Callback hell?

Callback hell, or the "Pyramid of Doom," occurs when multiple nested callbacks make code difficult to read and maintain. Using promises or async/await can help avoid this problem.

Imagine you need to perform three asynchronous tasks in sequence, each depending on the result of the previous one. Using callbacks, your code might look like this:

doTask1(function(result1) {
  doTask2(result1, function(result2) {
    doTask3(result2, function(result3) {
      console.log(result3);
    });
  });
});

As you can see, the code becomes deeply nested and forms a pyramid-like structure, also known as the "pyramid of doom." This makes it difficult to follow the flow of the code and handle errors effectively.

Problems with Callback Hell:

• Readability: The nested structure makes code hard to read and understand.
• Maintainability: It becomes challenging to add new features or fix bugs in such code.
• Error Handling: Error handling becomes cumbersome and often leads to messy code.
• Debugging: Debugging nested callbacks can be a nightmare.

doTask1()
  .then(result1 => doTask2(result1))
  .then(result2 => doTask3(result2))
  .then(result3 => console.log(result3))
  .catch(error => console.error(error));

Solutions to Callback Hell:

• Promises: Promises provide a cleaner way to handle asynchronous operations.
• Async/Await: Async/await is a syntactic sugar built on top of promises, making the code look more like synchronous code.

async function doTasks() {
  try {
    const result1 = await doTask1();
    const result2 = await doTask2(result1);
    const result3 = await doTask3(result2);
    console.log(result3);
  } catch (error) {
    console.error(error);
  }
}
 
doTasks();

Both promises and async/await provide a more structured and readable way to handle asynchronous operations, avoiding the pitfalls of callback hell.

What is the difference between 'Pass by Value' and 'Pass by Reference'?

• Pass by Value: JavaScript passes a copy of the value, so changes within the function don’t affect the original variable.
• Pass by Reference: JavaScript passes the reference, so changes within the function affect the original object or array.

What is the difference between map() and filter()?

• map(): Transforms every element in an array and returns a new array.
• filter(): Returns a new array containing elements that pass a test.

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

• map(): Returns a new array after applying a transformation function.
• forEach(): Iterates over an array but does not return a new array.

What is the difference between Pure and Impure functions?

• Pure functions: Always return the same result for the same input and don’t have side effects.
• Impure functions: May produce different results for the same inputs and can have side effects.

What is the difference between for-in and for-of?

• for-in: Iterates over the property names (keys) of an object or array.
• for-of: Iterates over the values of an iterable, like an array.

What are the differences between call(), apply(), and bind()?

• call(): Calls a function with a specific this context and arguments individually.
• apply(): Similar to call() but takes arguments as an array.
• bind(): Returns a new function with a specific this context and optional arguments.

List out some key features of ES6?

• Arrow functions
• Template literals
• Destructuring assignment
• let and const
• Promises
• Modules
• Classes and inheritance
• Spread and rest operators

What’s the spread operator in JavaScript?

The spread operator (...) allows elements of an iterable (array, object) to be expanded.

What is the rest operator in JavaScript?

function sum(...args) {
  return args.reduce((acc, val) => acc + val, 0);
}

The rest operator (...) collects multiple elements into an array, commonly used in function parameters.

What are DRY, KISS, YAGNI, SOLID Principles?

• DRY (Don't Repeat Yourself): Avoid code duplication.
• KISS (Keep It Simple, Stupid): Keep solutions simple.
• YAGNI (You Aren't Gonna Need It): Only implement what is needed.
• SOLID: Object-oriented design principles.

What is the Temporal Dead Zone?

The period when a variable is hoisted but not initialized, causing a ReferenceError if accessed.

What are the different ways to create objects in JavaScript?

• Object literals
• Constructor functions
• Object.create()
• ES6 Classes

What is the difference between Object.keys(), Object.values(), and Object.entries()?

• Object.keys(): Returns an array of the object's keys.
• Object.values(): Returns an array of the object's values.
• Object.entries(): Returns an array of key-value pairs.

What is the difference between Object.freeze() and Object.seal()?

• Object.freeze(): Prevents modification, addition, or deletion of properties.
• Object.seal(): Allows modification of existing properties but prevents adding or deleting properties.

What is a polyfill in JavaScript?

A polyfill is code that implements modern features on older browsers.

What is a generator function in JavaScript?

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

A generator function allows pausing and resuming execution using yield.

What is a prototype in JavaScript?

A prototype is an object from which other objects inherit methods and properties.

What is an IIFE (Immediately Invoked Function Expression)?

(function() {
  console.log('IIFE is called immediately');
})();

An IIFE is a function that is executed immediately after being defined.

What is CORS?

CORS is a security feature that allows or restricts cross-origin requests from different domains.

What are the different data types in JavaScript?

• Primitive: string, number, boolean, null, undefined, symbol, bigint
• Non-primitive: Objects, arrays, and functions.

What are the differences between TypeScript and JavaScript?

• TypeScript: Adds static typing, interfaces, and additional features.
• JavaScript: Dynamically typed scripting language.

What is Authentication vs Authorization?

• Authentication: Verifies user identity.
• Authorization: Determines what actions or resources a user is allowed.

What is the difference between null and undefined?

• null: Represents intentional absence of value.
• undefined: Indicates a variable has been declared but not initialized.

What is the output of 3 + 2 + "7"?

The result is "57" because numbers are added first, and then the result is concatenated with the string "7".

What is the difference between slice() and splice()?

• slice(): Returns a shallow copy of a portion of an array.
• splice(): Modifies the original array by adding or removing elements.

What is destructuring in JavaScript?

const [a, b] = [1, 2];
const {x, y} = {x: 10, y: 20};

Destructuring allows unpacking values from arrays or objects into distinct variables.

What is setTimeout in JavaScript?

setTimeout() is a function that delays the execution of a specified function.

What is setInterval in JavaScript?

setInterval() is a function that repeatedly executes a function at specified intervals.

What are Promises in JavaScript?

A Promise is used to handle asynchronous operations and represents a value that will be available in the future.

What is a call stack in JavaScript?

The call stack is used to track function calls in JavaScript execution.

What is a closure?

A closure is a function that retains access to its own scope, the outer function’s scope, and the global scope even after the outer function has returned.

What are callbacks in JavaScript?

Callbacks are functions passed as arguments to other functions and executed at a later time.

What are Higher-Order Functions in JavaScript?

Higher-order functions accept other functions as arguments or return functions.

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

• ==: Compares two values after performing type coercion.
• ===: Compares two values without type coercion (strict equality).

Is JavaScript a dynamically typed language or a statically typed language?

JavaScript is dynamically typed, meaning variables can change types at runtime.

What is the difference between IndexedDB and SessionStorage?

• IndexedDB: Stores large amounts of data, structured like a database.
• SessionStorage: Stores data temporarily during the session.

What are Interceptors?

Interceptors are middleware components used to modify HTTP requests or responses before they are processed by the application.

What is Hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of the scope before code execution.

What are the differences between let, var, and const?

• var: Function-scoped, can be re-declared.
• let: Block-scoped, cannot be re-declared.
• const: Block-scoped, cannot be re-assigned or re-declared.

What are the differences between Promise.all, Promise.allSettled, Promise.any, and Promise.race?

• Promise.all(): Resolves when all promises resolve or rejects when one rejects.
• Promise.allSettled(): Resolves after all promises settle.
• Promise.any(): Resolves when the first promise resolves.
• Promise.race(): Resolves or rejects as soon as the first promise settles.

What are the limitations of arrow functions?

• No this binding (inherits this from the surrounding scope).
• Cannot be used as constructors.
• Lack of arguments object.

What is the difference between find() and findIndex()?

• find(): Returns the first element that matches the condition.
• findIndex(): Returns the index of the first matching element.

What is tree shaking in JavaScript?

Tree shaking removes unused code from the final JavaScript bundle.

What is the main difference between Local Storage and Session Storage?

• Local Storage: Data persists across browser sessions.
• Session Storage: Data is cleared when the page session ends.

What is eval()?

eval() executes a string of JavaScript code.

What is the difference between a shallow copy and a deep copy?

• Shallow Copy: Copies only the top-level properties of an object.
• Deep Copy: Recursively copies all levels of nested objects.

What is the difference between undeclared and undefined variables?

• Undeclared: Variables that have never been declared.
• Undefined: Declared variables that haven’t been initialized.

What is event bubbling?

Event bubbling occurs when an event propagates from the target element up to the root of the DOM.

What is event capturing?

Event capturing occurs when an event is first captured by the outermost element and propagates down to the target element.

What are cookies?

Cookies are small data pieces stored in the browser to track session or user information.

What is the typeof operator in JavaScript?

The typeof operator returns the data type of a variable.

What is this in JavaScript and how does it behave in various scenarios?

this refers to the object that owns the function being executed and its value depends on how the function is called.

How do you optimize the performance of an application?

• Code splitting
• Image optimization
• Minimize DOM updates
• Avoid memory leaks
• Efficient algorithms

What is meant by debouncing and throttling?

• Debouncing: Delays the execution of a function until after a specified period of inactivity.
• Throttling: Limits the execution of a function to once per specified interval.