Top 40 JavaScript Interview Questions and Answers for 2021

JavaScript is an open-source programming language. It is designed for creating web-centric applications. It is lightweight and interpreted, which makes it much faster than other languages. JavaScript is integrated with HTML, which makes it easier to implement JavaScript in web applications.

This article provides you with a comprehensive list of common JavaScript interview questions that often come up in interviews with great answers to them. It will also help you understand the fundamental concepts of JavaScript.

We have grouped the questions into the following categories:

• Beginner JavaScript Interview Questions
• Intermediate JavaScript Interview Questions
• Advanced JavaScript Interview Questions

Beginner JavaScript Interview Questions

1. What do you understand about JavaScript?

Fig: JavaScript Logo

JavaScript is a popular web scripting language and is used for client-side and server-side development. The JavaScript code can be inserted into HTML pages that can be understood and executed by web browsers while also supporting object-oriented programming abilities.

2. What’s the difference between JavaScript and Java?

JavaScript	Java
JavaScript is an object-oriented scripting language.	Java is an object-oriented programming language.
JavaScript applications are meant to run inside a web browser.	Java applications are generally made for use in operating systems and virtual machines.
JavaScript does not need compilation before running the application code.	Java source code needs a compiler before it can be ready to run in realtime.

3. What are the various data types that exist in JavaScript?

These are the different types of data that JavaScript supports:

• Boolean - For true and false values
• Null - For empty or unknown values
• Undefined - For variables that are only declared and not defined or initialized
• Number - For integer and floating-point numbers
• String - For characters and alphanumeric values
• Object - For collections or complex values
• Symbols - For unique identifiers for objects

4. What are the features of JavaScript?

These are the features of JavaScript:

• Lightweight, interpreted programming language
• Cross-platform compatible
• Open-source
• Object-oriented
• Integration with other backend and frontend technologies
• Used especially for the development of network-based applications

5. What are the advantages of JavaScript over other web technologies?

These are the advantages of JavaScript:

Enhanced Interaction

JavaScript adds interaction to otherwise static web pages and makes them react to users’ inputs.

Quick Feedback

There is no need for a web page to reload when running JavaScript. For example, form input validation.

Rich User Interface

JavaScript helps in making the UI of web applications look and feel much better.

Frameworks

JavaScript has countless frameworks and libraries that are extensively used for developing web applications and games of all kinds.

6. How do you create an object in JavaScript?

Since JavaScript is essentially an object-oriented scripting language, it supports and encourages the usage of objects while developing web applications.

const student = {

    name: 'John',

    age: 17

}

7. How do you create an array in JavaScript?

Here is a very simple way of creating arrays in JavaScript using the array literal:

var a = [];

var b = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];

8. What are some of the built-in methods in JavaScript?

Built-in Method	Values
Date()	Returns the present date and time
concat()	Joins two strings and returns the new string
push()	Adds an item to an array
pop()	Removes and also returns the last element of an array
round()	Rounds of the value to the nearest integer and then returns it
length()	Returns the length of a string

9. What are the scopes of a variable in JavaScript?

The scope of a variable implies where the variable has been declared or defined in a JavaScript program. There are two scopes of a variable:

Global Scope

Global variables, having global scope are available everywhere in a JavaScript code.

Local Scope

Local variables are accessible only within a function in which they are defined.

10. What is the ‘this’ keyword in JavaScript?

The ‘this’ keyword in JavaScript refers to the currently calling object. It is commonly used in constructors to assign values to object properties.

11. What are the conventions of naming a variable in JavaScript?

Following are the naming conventions for a variable in JavaScript:

• Variable names cannot be similar to that of reserved keywords. For example, var, let, const, etc.
• Variable names cannot begin with a numeric value. They must only begin with a letter or an underscore character.
• Variable names are case-sensitive.

12. What is Callback in JavaScript?

In JavaScript, functions are objects and therefore, functions can take other functions as arguments and can also be returned by other functions.

Fig: Callback function

A callback is a JavaScript function that is passed to another function as an argument or a parameter. This function is to be executed whenever the function that it is passed to gets executed. 

13. How do you debug a JavaScript code?

All modern web browsers like Chrome, Firefox, etc. have an inbuilt debugger that can be accessed anytime by pressing the relevant key, usually the F12 key. There are several features available to users in the debugging tools.

We can also debug a JavaScript code inside a code editor that we use to develop a JavaScript application—for example, Visual Studio Code, Atom, Sublime Text, etc.

14. What is the difference between Function declaration and Function expression?

Function declaration	Function expression
Declared as a separate statement within the main JavaScript code	Created inside an expression or some other construct
Can be called before the function is defined	Created when the execution point reaches it; can be used only after that
Offers better code readability and better code organization	Used when there is a need for a conditional declaration of a function
Example: function abc() {     return 5; }	Example: var a = function abc() {     return 5; }

15. What are the ways of adding JavaScript code in an HTML file?

There are primarily two ways of embedding JavaScript code:

• We can write JavaScript code within the script tag in the same HTML file; this is suitable when we need just a few lines of scripting within a web page.
• We can import a JavaScript source file into an HTML document; this adds all scripting capabilities to a web page without cluttering the code.

Intermediate JavaScript Interview Questions

16. What do you understand about cookies?

Fig: Browser cookies

A cookie is generally a small data that is sent from a website and stored on the user’s machine by a web browser that was used to access the website. Cookies are used to remember information for later use and also to record the browsing activity on a website.

17. How would you create a cookie?

The simplest way of creating a cookie using JavaScript is as below:

document.cookie = "key1 = value1; key2 = value2; expires = date";

18. How would you read a cookie?

Reading a cookie using JavaScript is also very simple. We can use the document.cookie string that contains the cookies that we just created using that string.

The document.cookie string keeps a list of name-value pairs separated by semicolons, where ‘name’ is the name of the cookie, and ‘value’ is its value. We can also use the split() method to break the cookie value into keys and values.

19. How would you delete a cookie?

To delete a cookie, we can just set an expiration date and time. Specifying the correct path of the cookie that we want to delete is a good practice since some browsers won’t allow the deletion of cookies unless there is a clear path that tells which cookie to delete from the user’s machine.

function delete_cookie(name) {

  document.cookie = name + "=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";

}

20. What’s the difference between let and var?

Both let and var are used for variable and method declarations in JavaScript. So there isn’t much of a difference between these two besides that while var keyword is scoped by function, the let keyword is scoped by a block.

21. What are Closures in JavaScript?

Closures provide a better, and concise way of writing JavaScript code for the developers and programmers. Closures are created whenever a variable that is defined outside the current scope is accessed within the current scope.

function hello(name) {

  var message = "hello " + name;

  return function hello() {

    console.log(message);

  };

}

//generate closure

var helloWorld = hello("World");

//use closure

helloWorld();

22. What are the arrow functions in JavaScript?

Arrow functions are a short and concise way of writing functions in JavaScript. The general syntax of an arrow function is as below:

const helloWorld = () => {

  console.log("hello world!");

};

23. What are the different ways an HTML element can be accessed in a JavaScript code?

Here are the ways an HTML element can be accessed in a JavaScript code:

• getElementByClass(‘classname’): Gets all the HTML elements that have the specified classname.
• getElementById(‘idname’): Gets an HTML element by its ID name.
• getElementbyTagName(‘tagname’): Gets all the HTML elements that have the specified tagname.
• querySelector(): Takes CSS style selector and returns the first selected HTML element.

24. What are the ways of defining a variable in JavaScript?

There are three ways of defining a variable in JavaScript:

Var

This is used to declare a variable and the value can be changed at a later time within the JavaScript code.

Const

We can also use this to declare/define a variable but the value, as the name implies, is constant throughout the JavaScript program and cannot be modified at a later time.

Let

This mostly implies that the values can be changed at a later time within the JavaScript code.

25. What are Imports and Exports in JavaScript?

Imports and exports help in writing modular code for our JavaScript applications. With the help of imports and exports, we can split a JavaScript code into multiple files in a project. This greatly simplifies the application source code and encourages code readability.

calc.js

export const sqrt = Math.sqrt;

export function square(x) {

  return x * x;

}

export function diag(x, y) {

  return sqrt(square(x) + square(y));

}

This file exports two functions that calculate the squares and diagonal of the input respectively.

main.js

import { square, diag } from "calc";

console.log(square(4)); // 16

console.log(diag(4, 3)); // 5

Therefore, here we import those functions and pass input to those functions to calculate square and diagonal.

26. What is the difference between Document and Window in JavaScript?

Document	Window
The document comes under the windows object and can also be considered as its property.	Window in JavaScript is a global object that holds the structure like variables, functions, location, history, etc.

27. What are some of the JavaScript frameworks and their uses?

JavaScript has a collection of many frameworks that aim towards fulfilling the different aspects of the web application development process. Some of the prominent frameworks are:

• React - Frontend development of a web application
• Angular - Frontend development of a web application
• Node - Backend or server-side development of a web application

28. What is the difference between Undefined and Undeclared in JavaScript?

Undefined	Undeclared
Undefined means a variable has been declared but a value has not yet been assigned to that variable.	Variables that are not declared or that do not exist in a program or application.

29. What is the difference between Undefined and Null in JavaScript?

Undefined	Null
Undefined means a variable has been declared but a value has not yet been assigned to that variable.	Null is an assignment value that we can assign to any variable that is meant to contain no value.

30. What is the difference between Session storage and Local storage?

Session storage	Local storage
The data stored in session storage gets expired or deleted when a page session ends.	Websites store some data in local machine to reduce loading time; this data does not get deleted at the end of a browsing session.

Advanced JavaScript Interview Questions

31. How do you empty an array in JavaScript?

There are a few ways in which we can empty an array in JavaScript:

• By assigning array length to 0:

var arr = [1, 2, 3, 4];

arr.length = 0;

• By assigning an empty array:

var arr = [1, 2, 3, 4];

arr = [];

• By popping the elements of the array:

var arr = [1, 2, 3, 4];

while (arr.length > 0) {

  arr.pop();

}

• By using the splice array function:

var arr = [1, 2, 3, 4];

arr.splice(0, arr.length);

32. What is the difference between Event Capturing and Event Bubbling?

Event Capturing	Event Bubbling
This process starts with capturing the event of the outermost element and then propagating it to the innermost element.	This process starts with capturing the event of the innermost element and then propagating it to the outermost element.

33. What is the Strict mode in JavaScript?

Strict mode in JavaScript introduces more stringent error-checking in a JavaScript code.

• While in Strict mode, all variables have to be declared explicitly, values cannot be assigned to a read-only property, etc.
• We can enable strict mode by adding ‘use strict’ at the beginning of a JavaScript code, or within a certain segment of code.

34. What would be the output of the below JavaScript code?

var a = 10;

if (function abc(){})

{

a += typeof abc;

}

console.log(a);

The output of this JavaScript code will be 10undefined. The if condition statement in the code evaluates using eval. Hence, eval(function abc(){}) will return function abc(){}.

Inside the if statement, executing typeof abc returns undefined because the if statement code executes at run time while the statement inside the if the condition is being evaluated.

35. Can you write a JavaScript code for adding new elements in a dynamic manner?

<script type="text/javascript">

function addNode() { 

    var newP = document.createElement("p");

    var textNode = document.createTextNode(" This is a new text node");

    newP.appendChild(textNode); document.getElementById("firstP").appendChild(newP);

}

</script>

36. What is the difference between Call and Apply?

Call	Apply
In the call() method, arguments are provided individually along with a ‘this’ value.	In the apply() method, arguments are provided in the form of an array along with a ‘this’ value.

37. What will be the output of the following code?

var Bar = Function Foo()

{

return 11;

};

typeof Foo();

The output would be a reference error since a function definition can only have a single reference variable as its name.

38. What will be the output of the following code?

var Student = {

  college: "abc",

};

var stud1 = Object.create(Student);

delete stud1.college;

console.log(stud1.company);

This is essentially a simple example of object-oriented programming.  Therefore, the output will be ‘abc’ as we are accessing the property of the student object.

39. How do you remove duplicates from a JavaScript array?

There are two ways in which we can remove duplicates from a JavaScript array:

By Using the Filter Method

To call the filter() method, three arguments are required. These are namely array, current element, and index of the current element.

By Using the For Loop

An empty array is used for storing all the repeating elements.

40. Can you draw a simple JavaScript DOM (Document Object Model)?

As you prepare for your upcoming job interview, we hope that these JavaScript Interview Questions have provided more insight into what types of questions you are likely to be asked. 

Master the complete JavaScript fundamentals, jQuery, Ajax, and more with the Javascript Certification Training Course. Check out the course preview

Get Ahead of the Curve and Master JavaScript Today

Are you wondering how you can gain the skills necessary to take advantage of JavaScript’s immense popularity now that you are familiar with JavaScript Interview Questions? We have got your back! We offer a comprehensive JavaScript Training Course, which will help you become career-ready upon completion. 

To learn more, check out our Youtube video that provides a quick introduction to JavaScript Interview Questions and helps in clearing doubts for your next JavaScript interview. If you’re an aspiring web and mobile developer, JavaScript training will broaden your skills and career horizons.

Do you have any questions for us? Please mention it in the comments section of this ‘JavaScript Interview Questions’’ article and we'll have our experts answer it for you.