Top JavaScript Interview Questions and Answers (2024)

Acing a JavaScript interview is important for both freshers and experienced developers. Preparing JavaScript interview questions can ultimately increase your chances of cracking interviews.

Whether you are a fresher looking for your first job or an experienced developer, it is good to understand the types of interview questions. And help you to answer those questions effectively.

In this article, you will get to know all types of common and practical JavaScript interview questions.

JavaScript Interview Questions for Freshers
- Common JavaScript Interview Questions for Freshers

JavaScript Interview Questions for Freshers

For freshers, having a solid grasp of fundamental JavaScript concepts is essential. Entry-level positions typically require candidates to demonstrate their understanding of basic syntax, data types, and essential functions. A strong foundation shows that you are prepared to tackle more complex problems as you gain experience.

Common JavaScript Interview Questions for Freshers

What is hoisting in JavaScript?
- Hoisting in JavaScript allows variables to be used before declaration. Let's see the following code first:
```
// Accessing `counter` before declaration
console.log(counter);
```
- The above code will result in Uncaught ReferenceError: counter is not defined. It means that the counter variable is not declared yet. So let's declare the counter variable.
```
// Accessing `counter` before declaration
console.log(counter); // Output: undefined

// Declaring `counter` after its use 
var counter; 
```
- The above code will not produce the error: Uncaught ReferenceError: counter is not defined. Because JavaScript hoisted the counter variable.
- var, let and const all are hoisted in javacsript. However, let and const behave differently.
Difference between var and let keyword in JavaScript.
- You can use both var and let to declare a variable.
- var is used to declare function scoped variable. While let is used to declare block-scoped variable.
Is JavaScript a statically typed or a dynamically (loosely) typed language?
- JavaScript is a dynamically typed language. JavaScript checks the type of variable during run-time. For example:
```
// data type of variable `name` is string
var name = "Arun";
// now data type of variable `name` is number
name = 34
```
- In the above code, if you assign the value Arun to the name variable. Then JavaScript automatically assigns the data type string to the name variable.
- And when you assign the value 34 to the name variable. Then JavaScript automatically assigns the data type number to name variable.
What are the different data types in JavaScript?
- Primitive Types: String, Number, BigInt, Boolean, Undefined, Null, Symbol
- Non-primitive Types: Object, Array, function (it is also an object)
What is NaN property in JavaScript?
- NaN is a type of number and stands for "Not a Number".
- You can check whether a variable is a number or not using the function isNaN().
Explain pass-by value.
- Let's consider the following example.
```
// initializing value of a
let a = 3;

// assigning variable a to variable b (pass by value)
let b = a;
b = 4;

console.log(a) // Output: 3 
console.log(b) // Output: 4
```
- In the above code, you are assigning variable a to variable b.
- But when you change the value of variable b. It doesn't change the value of a. Because JavaScript copies the value of variable a to the variable b. That is called the pass-by value.

Explain pass-by reference.

Let's consider the following example:

const mobileAccessories = {
    charger: "Type-C",
    earPhone: "Bluetooth Neckband",
    cover: "Transparent Silicon"
};

console.log(mobileAccessories); // Output: {charger: 'Type-C', earPhone: 'Bluetooth Neckband', cover: 'Transparent Silicon'}

// Assigning mobileAccessories to mobileAccessoriesCopy (pass by reference)
const mobileAccessoriesCopy = mobileAccessories;

mobileAccessoriesCopy.charger = "Micro USB";
mobileAccessoriesCopy.cover = "Transparent Plastic";

console.log(mobileAccessories) // Output: {charger: 'Micro USB', earPhone: 'Bluetooth Neckband', cover: 'Transparent Plastic'}

In the above code, you are assigning the mobileAccessories object to the mobileAccessoriesCopy object. And when we change the properties of the mobileAccessoriesCopy object, JavaScript will also change the properties of mobileAccessories object. That is called passing by reference.

What is the use of a constructor function in JavaScript?

You can use the constructor function to create objects in JavaScript. For example:

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

Now, you can create multiple object that has the properties name, age, and gender using new keywords and Person constructors. For example:

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

var detailsOfArun = new Person("Arun", 24, "Male")
console.log(detailsOfArun);

var detailsOfAruni = new Person("Aruni", 22, "Female")
console.log(detailsOfAruni);

Explain Implicit Type Coercion in JavaScript.

JavaScript automatically converts the data types of value. that is called implicit type coercion.
- String Coercion: When you use + operator. JavaScript will convert the value of type number to the value of type string. For example:
```
let a = 5;
let b = "8";
console.log(a + b); // Output: 58
```
- Equality Coercion: When you use == operator, it will converts both variable to the same type before comparing them. For example:
```
let age = 18;
let rollNo = "18";

// Convert both variable to sam data type before comparing
console.log(age == rollNo); // Return true
```
What is an Immediately Invoked Function in JavaScript?

A function that is invoked immediately as soon as you define, is called IIFE (Immediately Invoked Function Expression). For example:
```
(function() {
console.log ("I am an IIFE");
})();
```
Explain Higher Order Functions in JavaScript.
- A function that takes a function as an argument is called higher-order function.
- A function that returns a function is also called higher-order function.
Explain the this keyword.
- When you use this only as shown below, this refers to the global object. For example:
```
let a = this;
console.log(a); // Output: window
```
- When you use this inside a function as shown below, this refers to the global object. For example:
```
function sayHello() {
console.log("Hi there!");
console.log(this);
}

sayHello();
```

Explain call(), apply() and, bind() methods.

Consider an example below:

const person = {
    name: "Arun",
    sayHello: function() {
        console.log(`Hello ${this.name}`);
        }
    };

const anotherPerson = {name:"Pratap"};

// borrow function sayHello from person object
// And apply it to the object `anotherPerson` using call method
person.sayHello.call(anotherPerson); // Output: Hello Pratap

// borrow function sayHello from person object
// and apply it to the object `anotherPerson` using apply method
person.sayHello.apply(anotherPerson); // Output: Hello Pratap

// copy sayHEllo function from person object
// And use it for anotherPerson
person.sayHello.bind(anotherPerson); // Output: ƒ () {console.log(`Hello ${this.name}`);}

In the above code, you can see both the call() and apply() methods are using sayHello function from the person object. And Apply sayHello function to the anotherPerson object. Just like you borrow a pen from your friends.
On the other hand, the bind() method copy the sayHello function from person object. And you can use it later. Just like you copy the homework from your friend's notebook to your notebook.

What is currying in JavaScript?
- Consider that you have a friend who loves ladoos. You know they'll always share two ladoos with you, but they like to give them one at a time. Here's how it works in code:
```
function addTwoNumbers(x1) {
    return function (x2) {
        return x1 + x2;
    }
}

const add10 = addTwoNumbers(10); // Stores the first laddoo (10)

add10(15); // Now you have the second laddoo (15), and LADOO TIME! (returns 25)
```
- In the above example, addTwoNumbers(10) acts like your friend giving you the first laddoo (the value 10). It returns a new function that "holds" this value and waits for the second one.
- Then, when you call add10(15), it's like receiving the second laddoo (the value 15) and finally enjoying both together (resulting in 25).
Explain Scope and Scope Chain in JavaScript.

There are generally two types of scope:
- Global Scope: The variable and functions that are accessible from anywhere in your code, have global scope
- Local Scope: The variable and functions that exist inside a functions, have local scope. You can access the inside the function only.
- Now, consider an example to understand the scope chain in JavaScript:
```
function outerFunction() {
    const outerVar = "outer value";
    
    function innerFunction() {
        const innerVar = "inner value";
        // You can access outerVar from outer function's scope
        console.log(outerVar);
    }
    
    innerFunction();
}

outerFunction();
```
- In the above example, when you print the outerVar variable inside innerFunction, then JavaScript first checks the outerVar variable inside local scope (i.e. innerFunction).
- Then, JavaScript moves to the function outerFunction to find the variable outerVar. When JavaScript finds the variable, then JavaScript prints the variable outerVar to the console. And that's how a scope chain works.

Explain Closures in JavaScript.

Consider the following example:

function outerFunction() {
    const outerVar = "outer value";
    
    function innerFunction() {
        const innerVar = "inner value";
        // You can access outerVar from outer function's scope
        console.log(outerVar);
    }
    
    return innerFunction;
}

// call outer function and store it to variable `returnInnerFunction`
const returnInnerFunction = outerFunction();

returnInnerFunction();

In the above example, you call outerFunction and store it to variable returnInnerFunction.
And you know that function outerFunction is already executed. Still when we run the function returnInnerFunction. JavaScript remembers the scope of the variable outerVar (i.e. returnInnerFunction can access the variable outerVar).

What are object prototypes?
- Object prototypes are like human DNA, as they contain all the necessary properties and functions for objects.
- When you create an array in JavaScript, the array inherits all its properties and methods from its array prototypes, Just like how children inherit their characteristics from parental DNA. For example:
```
var arr = ["1","2"];
console.log(arr.length);
```
- In the above example, you didn't define the property length explicitly. But JavaScript didn't show any error. Because JavaScript has built-in prototypes with these properties. Similar to how humans inherit characteristics from DNA.
What are callbacks?
- When you pass one function as an argument to another function. Then, it is called callbacks.
```
function greet(name, callback) {
    console.log("Printing...");
    setTimeout(()=>callback(name),1000);
}

function printMyNameAlexa (name) {
    console.log(`Hey ${name}`);
}
// calls `greet` function And 
greet("Arun", printMyNameAlexa);
```
- In the above example, you pass the function printMyNameAlexa as an argument to the function greet. In this scenario, the function printMyNameAlexa is considered a callback function because the function greet calls (call-back) the function printMyNameAlexa.

What is recursion in a programming language?

Recursion is process in which a function call itself again and again.

function decreaseNumber(n) {
  if (n >= 0) {
    console.log(n);
    // Recursion: call decreaseNumber
    // inside decreaseNumber repeatedly
    decreaseNumber(n - 1);
  }
}

// print the numbers line by line
// 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0
decreaseNumber(10);

In the above example, the decreaseNumber function takes a number 10 and recursively calls itself until 10 becomes zero.

What is DOM?

The Document Object Model (DOM) is a tree-like structure that helps the browser in rendering HTML pages. The DOM stands for Document Object Model. For example:

<!DOCTYPE html>
<html>

<head>
    <title>DOM Tree</title>
</head>

<body>
    <h1>I am a heading</h1>
    <p>I am a paragraph.</p>
    <button>Follow Me</button>
</body>

</html>

In the above example, html tag helps the browser to determine the document type as HTML and then render all the HTML tags accordingly by creating a DOM tree.

      html
  ______|______
 |             |
head          body
 |       ______|______
title   |      |      |
        h1     p    button

Which method is used to retrieve a character from a certain index?
- You can use charAt method in JavaScript to get the character at given index. For example:
```
var stringChars = "Quedemy";

// get character for index 3
console.log(stringChars.charAt(3)); // Output: d
```
- In the above example, you use charAt method that gets the character at index 3.

Adding more questions tomorrow...

Top JavaScript Interview Questions and Answers (2024)

Table of Contents

JavaScript Interview Questions for Freshers

Common JavaScript Interview Questions for Freshers