22Jan 2023 by ganesh

JavaScript Interview Questions and Answers

In this article, We are going to learn and discussed about one of the most important JavaScript interview questions and answers.

What is hoisting in JavaScript and how does it work?

In JavaScript, hoisting is the behavior of moving variable and function declarations to the top of the scope at runtime. This means that variables and functions can be used before they are declared in the code.

When JavaScript is executed, the interpreter first looks for all variable and function declarations and “hoists” them to the top of their scope. This means that even if a variable or function is declared later in the code, it will still be accessible at the top of the scope. However, the value of the variable is not hoisted, only the variable’s declaration is hoisted.

For example, consider the following code:

console.log(x); // undefined
var x = 5;

The interpreter first looks for all variable declarations, finds “var x” and hoists it to the top of the scope. This is equivalent to:

var x;
console.log(x); // undefined
x = 5;

When it comes to function hoisting, it works the same way, the declarations are hoisted to the top of the scope, but the function definition is not. For example, consider the following code:

foo(); // "bar"

function foo() {
  console.log("bar");
}

The interpreter first looks for all function declarations, finds “foo” and hoists it to the top of the scope. This is equivalent to:

function foo() {
  console.log("bar");
}
foo(); // "bar"

It’s important to note that in JavaScript, variables declared with let and const are not hoisted, they are only available within the block they are defined and will raise a ReferenceError if accessed before they are declared. It’s good to be aware of the hoisting behavior in JavaScript, as it can lead to unexpected behavior if not handled properly.

Explain the difference between let and var in JavaScript.

Another import JavaScript interview questions and answers is difference between var and let. In JavaScript, var and let are both used to declare variables, but they have some key differences in their behavior.

The main difference between var and let is their scope. Variables declared with var have function scope, meaning they are only accessible within the function they are declared in. If a variable is declared with var outside of any function, it is accessible globally. Variables declared with let have block scope, meaning they are only accessible within the block they are declared in. This includes if-else statements, for-loops and other block statements.

For example:

if(true) {
    var x = 5; 
}
console.log(x); // 5

In the above example, x is accessible outside the if block because it was declared with var.

if(true) {
    let y = 5; 
}
console.log(y); // ReferenceError: y is not defined

In above example, y is not accessible outside the if block because it was declared with let.

Another difference between var and let is the way they handle hoisting. Variables declared with var are hoisted to the top of the scope, meaning they can be accessed before they are declared in the code. Variables declared with let are not hoisted and will raise a ReferenceError if accessed before they are declared.

let also allows you to use the same variable name within the same scope. This is not allowed with var, and it will be overwritten.

let x = 5;
let x = 10; // this will raise an error
var y = 5;
var y = 10; // this will not raise an error and y will be 10

In above example, y is not accessible outside the if block because it was declared with let.

What is closure in JavaScript and how does it work?

In JavaScript, a closure is a function that has access to variables in its parent scope, even after the parent function has returned. Closures are created whenever a function is defined inside another function.

A closure allows a function to “remember” the context in which it was created, and to continue to access the variables in that context even after the function has finished executing. This is achieved by creating a “snapshot” of the environment in which the function was created, and keeping that snapshot alive for as long as the closure exists.

Here is an example of a closure:

function outerFunction(x) {
    let innerFunction = function(y) {
        return x + y;
    }
    return innerFunction;
}

let add5 = outerFunction(5);
console.log(add5(3)); // 8

In this example, outerFunction creates a closure by returning the inner function innerFunction. The inner function has access to the x variable in the parent scope, even after outerFunction has returned. This means that we can store the returned function in a variable (add5), and call it later with a different argument (3) and it will still have access to the x variable from the original call to outerFunction.

Closures are useful in JavaScript for a variety of purposes, such as:

      • Creating private variables, by keeping data hidden inside a closure and exposing only a public API.
      • Implementing function factories, which return a new function with a specific behavior.
      • Creating closures that can be passed around and used later, as in the example above.
      • Implementing function currying and partial function application.

It’s important to note that closures keep the scope chain alive, and if the closure is not used or stored in a variable, it can cause memory leaks. It’s also good to be aware of the closure behavior when working with loops, as it can lead to unexpected behavior if not handled properly.

Explain the difference between == and === in JavaScript.

In JavaScript, == and === are both comparison operators, but they have different behaviors.

== (loose equality) compares the values of two operands for equality, after converting them to a common type. This means that it performs type coercion if the operands are of different types. For example, ‘5’ == 5 would return true, because the string ‘5’ is coerced to the number 5 before the comparison.

=== (strict equality) compares the values of two operands for equality without converting them to a common type. This means that if the operands are of different types, the comparison will return false. For example, ‘5’ === 5 would return false, because the string ‘5’ is not equal to the number 5.

In general, it’s considered best practice to use === for comparison in JavaScript, because it eliminates the potential for unexpected behavior caused by type coercion.

Here’s an example that demonstrates the difference between == and ===:

let x = '5';
let y = 5;

console.log(x == y);  // true
console.log(x === y); // false

In above example, we have two variables x and y with different types, x is a string and y is a number. When we use the == operator to compare the values of x and y, JavaScript converts the string ‘5’ to the number 5 before the comparison, so the comparison returns true.

On the other hand, when we use the === operator to compare the values of x and y, JavaScript doesn’t convert the string ‘5’ to the number 5 before the comparison, so the comparison returns false because the operands are of different types.

let a = 0;
let b = false;

console.log(a == b);  // true
console.log(a === b); // false

In this example, we have two variables a and b with different types, a is a number and b is a boolean. When we use the == operator to compare the values of a and b, JavaScript converts the boolean false to the number 0 before the comparison, so the comparison returns true.

On the other hand, when we use the === operator to compare the values of a and b, JavaScript doesn’t convert the boolean false to the number 0 before the comparison, so the comparison returns false because the operands are of different types.

In both examples, you can see that == can lead to unexpected results because of type coercion, while === compares values without converting them and checks for both value and type equality.

What are the different types of data types in JavaScript

JavaScript has several data types, which can be broadly categorized into two main types: primitive and non-primitive.

Primitive data types

      • Number: represents numeric values, can be a decimal or a floating point number.
      • String: represents a sequence of characters.
      • Boolean: represents a true or false value.
      • Undefined: represents a value that has not been assigned.
      • Symbol: A new data type introduced in ECMAScript 6, used as an identifier for object properties.

Non-primitive data types

      • Object: represents a collection of key-value pairs.
      • Array: represents an ordered collection of values.
      • Function: represents a block of code that can be executed.
      • Date: represents a specific date and time.
      • RegExp: represents a regular expression
      • Map and Set: introduced in ECMAScript 6, they are used to store collections of key-value pairs and unique values respectively.

What is a callback function in JavaScript?

In JavaScript, a callback function is a function that is passed as an argument to another function and is executed after the outer function has completed. It is a way to pass a function as a value and execute it later, often in response to an event or a specific condition.

Callback functions are used extensively in JavaScript, particularly when working with asynchronous code. They allow you to specify what should happen once an asynchronous operation completes, without blocking the execution of the rest of the code.

Here is an example of a callback function:

function doSomething(callback) {
    let result = 'Something was done';
    callback(result);
}

function handleResult(result) {
    console.log(result);
}

doSomething(handleResult); // prints 'Something was done'

In above  example, the doSomething function takes in a callback function as an argument and executes it after completing its own task. The handleResult function is passed as a callback and is executed after doSomething has completed, with the result of that function being passed as an argument.

Callback functions are also used in many JavaScript methods and libraries, such as

    • setTimeout
    • setInterval
    • Array.prototype.forEach
    • Array.prototype.map
    • Array.prototype.filter

They are also used in event-driven libraries and frameworks like jQuery, Angular, React and Vue.

How do you handle errors and exceptions in JavaScript?

In JavaScript, errors and exceptions can be handled using the try-catch statement. The try block contains the code that might throw an error or exception, and the catch block contains the code that will be executed if an error or exception is thrown.

Here is an example of a try-catch statement:

try {
    let x = y; // y is not defined
} catch(error) {
    console.log(error);
}

In above example, the try block contains a line of code that throws a ReferenceError because the variable y is not defined. The catch block catches the error and logs it to the console.

You can also use the finally block after the catch block, this block will be executed regardless of whether an exception is thrown or not.

try {
    let x = y;
} catch(error) {
    console.log(error);
} finally {
    console.log('This will be executed regardless of whether an exception was thrown or not.');
}

Another way to handle errors in JavaScript is by using the throw statement. The throw statement allows you to create custom errors and throw them when certain conditions are met.

function divide(x, y) {
    if (y === 0) {
        throw new Error('Cannot divide by zero');
    }
    return x / y;
}

try {
    console.log(divide(5, 0));
} catch(error) {
    console.log(error); // 'Error: Cannot divide by zero'
}

In this example, the divide function checks if the divisor (y) is equal to zero and throws a custom error if it is. The try-catch statement catches the error and logs it to the console.

It’s important to handle errors and exceptions in JavaScript, as they can prevent your code from working correctly and can lead to unexpected behavior. By using try-catch statements, throw statements, and custom error objects, you can create robust and reliable code that can handle and recover.

What is the difference between null and undefined in JavaScript?

In JavaScript, null and undefined are similar in that they both represent the absence of a value, but they have different meanings and uses.

‘undefined’ is the default value of a variable that has been declared but has not been assigned a value. It means that the variable exists, but it has no value.

‘null’ is a value that can be assigned to a variable, it represents the intentional absence of an object value. It means that the variable points to no object.

let x;
console.log(x); // undefined
let y = null;
console.log(y); // null

In short, undefined is the default value of a variable that has not been assigned a value, and null is a value that can be assigned to a variable to indicate that it points to no object.

let x;
console.log(x == null);  // true
console.log(x === null); // false
console.log(x === undefined); // true

Explain the use of the 'this' keyword in JavaScript and its binding?

Implicit Binding: when a function is called as a method of an object, this refers to the object. In this example, this refers to the obj object, so this.name refers to the name property of obj.

let obj = {
    name: 'John',
    sayName: function() {
        console.log(this.name);
    }
};

obj.sayName(); // 'John'

Explicit Binding: when a function is called with the call, apply, or bind method, the this value can be explicitly set. In this example, the bind method is used to set the this value of the sayName function to the obj object.

let obj = { name: 'John' };
let sayName = function() {
    console.log(this.name);
}.bind(obj);

sayName(); // 'John'

new Binding: when a function is called with the new keyword, this refers to a new object that is created. In this example, this refers to a new object that is created when the Person function is called with the new keyword.

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

let john = new Person('John');
console.log(john.name); // 'John'

Explain the difference between synchronous and asynchronous code?

In JavaScript, synchronous code is code that is executed in a linear, step-by-step fashion, one line at a time. Each line of code is executed in the order that it appears, and the next line is executed only after the previous line has completed.

For example, consider the following synchronous code:

console.log('Start');
let result = doSomething();
console.log(result);
console.log('End');

In this example, the console.log(‘Start’) statement is executed first, then the doSomething() function is called, and finally the console.log(result) and console.log(‘End’) statements are executed. This code runs in a linear fashion, one line at a time, and nothing else can happen while it is running.

On the other hand, asynchronous code is code that can run in parallel with other code, without blocking the execution of the rest of the code. This is achieved by using callback functions, promises, and async/await.

For example, consider the following asynchronous code:

console.log('Start');
doSomethingAsync(function(result) {
  console.log(result);
});
console.log('End');

In this example, the console.log(‘Start’) and console.log(‘End’) statements are executed immediately, and the doSomethingAsync() function is called. This function runs in the background and does not block the execution of the rest of the code. Once it completes, it calls the callback function and passed the result as an argument, and the console.log(result) statement is executed.

What is a promise in JavaScript?

A promise in JavaScript is an object that represents the eventual result of an asynchronous operation. It provides a way to register callbacks to be called when the operation completes, whether it succeeds or fails.

A promise has a then method that can be used to register a callback function to be called when the promise is fulfilled (the operation succeeded), and a catch method that can be used to register a callback function to be called when the promise is rejected (the operation failed).

Here is an example of using a promise:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    let value = Math.random();
    if (value < 0.5) {
      resolve(value);
    } else {
      reject(new Error('Value is too high'));
    }
  }, 2000);
});

promise
  .then(value => console.log(value))
  .catch(error => console.log(error));

In Above example, the promise is created with a function that generates a random number after 2 seconds, if the number is less than 0.5 it will resolve the promise otherwise it will reject the promise. The then method is used to register a callback function that will be called when the promise is fulfilled, and the catch method is used to register a callback function that will be called when the promise is rejected.

Promises provide a more powerful and flexible way to handle asynchronous code than callbacks, they allow you to handle errors and chain multiple asynchronous operations together, they also have a finally method that can be used to register a callback function to be called when the promise is settled(resolved or rejected).

Promises are a fundamental part of JavaScript, and they are used in many areas of web development, including working with APIs, handling network requests, and working with asynchronous code in general.

How do you declare a variable in JavaScript?

In JavaScript, variables are declared using the var, let, or const keywords.

var keyword

The var keyword is used to declare a variable that can be reassigned a new value at any time. It is also function scoped, which means it’s accessible within the entire function where it’s declared.

var x = 5;
x = 10;

let keyword

The let keyword is used to declare a variable that can be reassigned a new value at any time. It is block scoped, which means it’s accessible only within the block where it’s declared.

let y = 10;
y = 20;

const keyword

The const keyword is used to declare a variable that cannot be reassigned a new value, it’s like a constant.

const z = 20;
z = 30; // throws an error

How do you declare a function in JavaScript?

Functions in JavaScript are declared using the function keyword. There are a few different ways to declare a function in JavaScript.

Function Declaration

A function is declared using the function keyword, followed by the function name, and a set of parentheses that contain the function’s parameters.

function add(x, y) {
    return x + y;
}

Function Expression

A function expression assigns a function to a variable. It’s similar to function declaration but instead of a function name, it’s assigned to a variable.

let sum = function(x, y) {
    return x + y;
};

Arrow Function Expression

A new way of declaring function introduced in ECMAScript 6, it’s a shorthand for function expression and it uses => (fat arrow) symbol instead of the function keyword

let multiply = (x, y) => x * y;

What is an object in JavaScript?

In JavaScript, an object is a collection of properties and methods that are used to represent real-world entities or abstract concepts. Objects in JavaScript are similar to objects in other programming languages, but they have some unique features and capabilities.

An object is defined using curly braces {}, inside which properties and methods are defined as key-value pairs. A property is a variable that belongs to an object, and a method is a function that belongs to an object.

let obj = { name: 'John' };

Objects in JavaScript are dynamic and can be modified at runtime, you can add, remove or modify properties and methods.

JavaScript objects are also versatile and can be used in various ways: as a simple data container, as a way to organize your code, for creating custom objects, for creating and using libraries, frameworks and many more.

What is the difference between a forEach loop and a for loop

A forEach loop is a method that is used to iterate over an array and execute a callback function on each element of the array, while a for loop is a traditional loop that allows for more flexibility and control over the iteration process. The main difference between the two is that a forEach loop only works on arrays and cannot be used to iterate over an object or other iterable, while a for loop can be used to iterate over any iterable. Additionally, a forEach loop does not provide access to the index or current iteration number, while a for loop does.

Here is an example of a forEach loop:

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

In above example, numbers.forEach is called on the numbers array, and a callback function is passed as an argument. This callback function will be executed on each element of the numbers array, in order. The output of this code will be:

1
2
3
4
5

As you can see, the callback function takes one argument, which is the current element that is being iterated over.

Here’s an example of a for loop:

let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

This loop starts by initializing a variable i to 0, and then continues to run as long as i is less than the length of the numbers array. In each iteration of the loop, the value of numbers[i] is logged to the console, and i is incremented by 1. The output of this code is the same as the previous example:

1
2
3
4
5

As you can see, both loops allow you to iterate over an array and access its elements. The main difference is that the forEach method provides a simpler syntax and it is only applicable for arrays and not for any other iterable, while the for loop provides more control over the iteration process, and it is more versatile, you can use it to iterate over any iterable.

How do you perform type coercion in JavaScript?

In JavaScript, type coercion refers to the automatic conversion of a value from one data type to another. This can happen in various ways, such as during mathematical operations, comparison operations, and when a value is passed to a function that expects a different data type.

There are several ways to perform type coercion in JavaScript:

  • Using the Number() function: This function converts a value to a number data type. For example, Number(“5”) will return the number 5.
  • Using the String() function: This function converts a value to a string data type. For example, String(5) will return the string “5”.
  • Using the Boolean() function: This function converts a value to a boolean data type. For example, Boolean(0) will return false
  • Using the + operator: This operator can be used to concatenate strings or to add numbers. For example, “5” + 5 will return the string “55” and 5 + 5 will return 10.
  • Using the == and === operators: The double equals == operator compares values after type coercion, === compares values without type coercion.
  • Using parseInt() and parseFloat(): These functions convert a string to an integer or a floating-point number, respectively.

Here’s an example of type coercion using the + operator:

let num1 = "5";
let num2 = 5;
let result = num1 + num2;
console.log(result); // Output: "55"

In this example, the + operator is used to concatenate the string “5” and the number 5, resulting in the string “55”.

It is important to keep in mind that type coercion can sometimes lead to unexpected results and it’s a good practice to be explicit with your types, and avoid using == operator and use === instead.

How does the 'apply' and 'call' methods differ in JavaScript?

Both apply() and call() are methods that can be used to call a function and set the value of this within that function. The main difference between the two is in the way that they pass arguments to the function.

call() takes in a function and a list of arguments separated by commas. For example:

let person = {
  name: "John Doe",
  greet: function(greeting) {
    console.log(greeting + ", " + this.name);
  }
}
person.greet.call({ name: "Jane Smith" }, "Hello");

n this example, the greet function is called using the call() method, and the this keyword within the function refers to the object { name: “Jane Smith” }. The first argument passed to the call() method is the context object and following are the arguments passed to the function.

On the other hand, apply() takes in a function and an array of arguments. For example:

let person = {
  name: "John Doe",
  greet: function(greeting) {
    console.log(greeting + ", " + this.name);
  }
}
person.greet.apply({ name: "Jane Smith" }, ["Hello"]);

In above example, the greet function is called using the apply() method, and the this keyword within the function refers to the object { name: “Jane Smith” }. The first argument passed to the apply() method is the context object and the second argument is an array of arguments passed to the function.

In summary, both call() and apply() are used to call a function and set the value of this, the main difference is that call() takes in a list of arguments separated by commas and apply() takes in an array of arguments.

What is NaN in JavaScript?

In JavaScript, NaN stands for “Not-a-Number” and represents the result of an undefined or unrepresentable value or operation. It is used to indicate that a value is not a valid number, and is often returned as the result of an operation that cannot be performed, such as the square root of a negative number or the division of zero by zero. Attempting to perform mathematical operations on NaN will usually also return NaN.

let x = 0/0;  
console.log(x);  // prints NaN

let y = Math.sqrt(-9);
console.log(y);  // prints NaN

let z = "hello" * 2;
console.log(z);  // prints NaN

In the first example, dividing zero by zero results in NaN. In the second example, finding the square root of a negative number results in NaN. In the third example, trying to multiply a string by a number is not possible and will also results in NaN

And, here’s an example of checking if a value is NaN:

let a = NaN;
console.log(isNaN(a)); // prints true
console.log(Number.isNaN(a)); // prints true

let b = "hello";
console.log(isNaN(b)); // prints true
console.log(Number.isNaN(b)); // prints false

In the above example, both isNaN(a) and Number.isNaN(a) will return true, because a is NaN. But when we check isNaN(b) and Number.isNaN(b) will return false because ‘b’ is not a number.

What are advantages of javascript?

JavaScript has several advantages, including:

  1. Easy to learn: JavaScript is a relatively easy language to learn, especially for those with experience in other programming languages. It has a simple syntax and is often used in conjunction with other languages such as HTML and CSS.

  2. Cross-platform compatibility: JavaScript can run on a variety of platforms including web browsers, servers, and mobile devices. This means that JavaScript code can be used to create web applications, desktop applications, mobile apps, and more.

  3. Dynamic and interactive: JavaScript is a dynamic language that allows for the creation of interactive and responsive web pages. It can be used to create complex user interfaces, animations, and other interactive elements that can enhance the user experience.

  4. Popularity: JavaScript is one of the most popular programming languages in the world, and it has a large and active community of developers who contribute to its development and share knowledge and resources.

  5. Support: JavaScript has a wide range of libraries and frameworks, such as jQuery, React, Angular, Vue.js, which make it easy to create web applications and help to improve development speed and productivity.

  6. Server-side capabilities: JavaScript is now not just limited to the client-side, it also can be used for server-side programming through technologies like Node.js.

  7. IoT applications: With JavaScript you can create IoT (Internet of Things) applications to control and monitor devices, sensors, and other physical objects connected to the internet.

  8. Machine Learning: JavaScript has libraries and frameworks that allow developers to implement machine learning algorithms in their applications.

What are object prototypes?

In JavaScript, an object prototype is a mechanism that allows one object to inherit properties and methods from another object. Every object in JavaScript has a prototype, and this prototype can be accessed using the __proto__ property.

When you access a property or method of an object, JavaScript first checks if that property or method exists directly on the object. If it doesn’t, then it will check the object’s prototype. If the property or method is still not found, it will check the prototype’s prototype, and so on, until it reaches the top-most prototype, which is the Object.prototype object.

For example, you can create a new object person and set its properties and methods,

let person = {
  name: "John Doe",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

You can also create another object, employee, which will inherit properties and methods from person by linking it to person using the prototype property.

let employee = Object.create(person);
employee.jobTitle = "Developer";

Now, when you access the properties and methods of the employee object, it will first check its own properties and methods, and if it doesn’t find them, it will check the person object’s properties and methods. 

console.log(employee.name); // "John Doe"
console.log(employee.jobTitle); // "Developer"
employee.sayHello(); // "Hello, my name is John Doe"