50+ Essential Javascript Interview Questions

Tim Buchalka

Udemy Instructor

JavaScript is an object-oriented scripting language that has evolved from a means to manipulate static HTML and CSS websites into the backbone of today’s most dynamic and interactive websites. Its popularity has increased in recent years because it has branched from just a browser-based language to numerous development frameworks like React, Angular, and Vue. As a result, there are usually plenty of JavaScript development jobs on the market.

Facing your first JavaScript job interview isn’t so daunting. If you know how to write code and build complete front-end applications in JavaScript, you should have no problem answering the questions they will ask during the interview. Still, it’s important to prepare for the interview questions as much as possible before the interview. You never know if they will ask questions irrelevant to your daily work or frameworks you rarely use.

We have compiled a list of the most common interview questions you may face at your next JavaScript interview to help you. A quick review of them will refresh your knowledge of the language and give you confidence that you can supply the correct answers.

53 frequently asked JavaScript interview questions

This is a long list of questions, and an interviewer will most likely only ask some of them, but it doesn’t hurt to test yourself on each one. The more questions you know the answer to, the more confidence you will have walking into the interview.

1) What is JavaScript?

As mentioned above, Javascript is no longer just a lightweight language. It has become a powerful, object-oriented, interpreted programming language that adds dynamic capabilities to HTML pages. All the popular web browsers use it as a scripting language. It also is used in the backend to create services in platforms like NodeJS.

The Complete Javascript Course for Developers

Last Updated January 2021

53 lectures
Beginner Level

4.6 (395)

Learn JavaScript Quickly. This JavaScript Class Will Teach You JavaScript Fundamentals And Is Beginner Friendly | By Tim Buchalka’s Learn Programming Academy, Charles E. Brown

Explore Course

2) How do you add JavaScript to a web page?

You can embed JavaScript directly into a web page using script tags, like the example below:

<head>
<title>Your Page Title</title>
<script language="JavaScript" type="text/javascript">
[Your JavaScript code here]
</script>
</head>

You can also link in to the HTML file, like in this example:

<head>
<title>Your Page Title</title>
<script type="text/javascript" src="YourJavaScriptFile.js"></script>
</head>

3) How do you add comments to JavaScript?

You can add either line comments or block comments to JavaScript.

// This is a line comment. It must stay on one line.

/* This is a

block comment. It can

span as many lines as you’d like.*/

4) Are there still local and global variables?

In modern JavaScript, the designations of global and local variables have become more exact. By definition, a global variable can be accessed from anywhere within the program and have “global scope” or global visibility within the program. Local variables are temporary variables that only have a scope within the function that generated them and have “local scope.”

// How to declare a local variable

In older versions of JavaScript, you declared a variable using the keyword “var”. In modern JavaScript, “var” has been replaced with the keyword “let”. Because of this, the distinction between global and local variables becomes more sharply defined. You declare a variable using “let”:

let myFirstName = “John”;

If a variable is not within a function, an if block, or a loop, the variable is global in scope.

5) What data types does JavaScript support?

The data types supported by JavaScript are:

Undefined
Null
Boolean
String
Symbol
Number
Object

6) Is JavaScript a case-sensitive language?

Yes, JavaScript is a case-sensitive language. When you name a variable, you must use the exact case to access that variable again. For that reason, like most case-sensitive languages, it is standard practice to use camelback notion where everything is in lowercase except mid-word capitalization. For example:

let myFirstName = “Mary”;

8) What is the difference between Java and JavaScript?

Java is an object-oriented, compiled programming language designed to run in the Java Virtual Machine. JavaScript is an object-oriented, interpreted scripting language designed to run in the browser or JavaScript engines like NodeJS.

9) What is the difference between null and undefined in JavaScript?

A variable is undefined when you declare it without an assigned value, like below:

var x;

Null actually has to be assigned to a variable:

var x = null;

10) What does this mean in JavaScript?

The this keyword in JavaScript references the object in which the function is operating.

11) How do you create an object in JavaScript?

In modern JavaScript, there are several ways to create an object. You can even use, like Java, the keyword “new”. However, in the background, JavaScript uses an object notation called JSON, which stands for JavaScript Object Notation. At its simplest. you can create an object in JavaScript by using JSON as follows:

var customer = {
    name: "John Doe",
    age: 32
};

12) How do you create an array in JavaScript?

You can create an array in JavaScript by using the object literal, like the example below:

var emptyArray = [];
var populatedArray = ['a', 'b', 'c', 'd', 'e'];

13) How many types of functions are there in JavaScript?

There are two types. A function in JavaScript is a named function when it’s assigned a name on creation using the function keyword. A function is an anonymous function when it’s not given a name on creation.

14) What is the difference between var, const, and let?

As mentioned above, “let” has become the way to declare a variable. The keyword “const” declares a variable whose value will not change. However, you might still come across applications that use “var” in legacy code. Here are the three possibilities, but, again, there are almost no reasons to use “var” any longer:

var – Variables defined with this keyword process before the execution of the JavaScript.
let – You can reassign variables defined with this keyword. They also can only be used in the block they are defined in.
const – You cannot reassign variables defined with this keyword. The keyword stands for constant.

15) What is inheritance in JavaScript?

As an object-oriented scripting language, JavaScript uses prototypal or differential inheritance instead of the classical inheritance you will find in class-based programming languages like Java and C#. In programming, differential inheritance is when one object gains the properties of another object.

In basic terms, differential inheritance works by assuming objects are all derivatives of other generic objects, setting these objects apart based on their differences.

ES6 and later versions of the JavaScript languages use class-based inheritance, but this usually compiles into prototypical JavaScript in order to work in all browsers.

Example:

// Create and define Adult.
function Adult() {}
Adult.prototype.speak = function(){
  alert ('I am an adult!');
};
Adult.prototype.workDay= function(){
  alert ('I have to go to work.');
};
// Create and define Student.
function Student() {
  // Call the Adult function.
  Adult.call(this);
}
// Tell Student to inherit Adult.
Student.prototype = new Adult();
Student.prototype.constructor = Student;
// Change the workDay method.
Student.prototype.workDay= function(){
  alert('I have to do my homework.');
}
// add speakGoodbye method
Student.prototype.speakGoodbye= function(){
  alert('I am going to the library. Goodbye.');
}
var studentA = new Student();
studentA.workDay();
studentA.speak();
studentA.speakGoodbye();
// To check for inheritance:
alert(studentA instanceof Adult);
// Returns true.
alert(studentA instanceof Student);
// Returns true.

16) What is the difference between == and ===?

The double equal sign == checks for equality. The triple equal sign === checks for both equality and type.

17) What are the different boolean operators in JavaScript?

The difference is as follows:

&& is the “and” operator
|| is the “or” operator
! is the “not” operator

18) What does the isNaN() function do?

The isNaN() function determines whether a value is not a number or an illegal number. If the argument is not a number, the isNaN() function will return true. A variable can also return NaN (Not a Number) if it needs to evaluate an expression that should return a number but fails to do so.

19) Can you use an anonymous function as a parameter for another function in JavaScript?

Yes. An anonymous function can be assigned to a variable and then passed as a parameter to another function.

20) What JavaScript method calls a function for each element in an array?

The forEach method calls a function for each element in an array.

var list = [1,2,3,4];
list.forEach(function(element){
    console.log(element); // Will log each element on a new line.
});

21) What kind of type system does JavaScript use?

Javascript uses dynamic typing and supports automatic type conversion.

22) What kind of looping functions does JavaScript support?

JavaScript supports three types of looping functions:

For loops
While loops
Do-while loops

There are also several more specialized loops, such as forEach.

23) What kind of conditional statements does JavaScript support?

These are the conditional statements supported by JavaScript:

If
If-else
If-else if-else
Switch

24) What is the HTML DOM?

Once a web page loads, your browser generates something called a DOM, or Document Object Model, of the page. The DOM acts as a programming interface for HTML, which defines HTML properties, events, and methods. It also refers to HTML elements as objects.

JavaScript relies on this DOM to alter the elements and attributes of a page and create the dynamic websites it’s known for. Here’s a useful image demonstrating the hierarchy of HTML DOM objects:

The official World Wide Web Consortium page for DOM defines it as:

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents.

You can process the document further and incorporate the results of that processing back into the presented page.

25) How do timers work in JavaScript?

With a timer, coders can set their code to execute at specific times, either once or at repeat intervals. There are three functions involved to set a timer in JavaScript:

setTimeout(function, milliseconds): This creates a timer that will call a function after a designated amount of milliseconds. This also generates an id value so the coder can access it at another time.

// Create a button that, upon clicking, executes the exampleTimer function.
<button onclick="exampleTimer()">Click here!</button>
// Define the exampleTimer function to create an alert box 2000 milliseconds after clicking.
<script>
function exampleTimer()
{
setTimeout(function(){alert("You did it!")},2000);
}
</script>

setInterval(function, milliseconds): This acts the same way as the setTimer function, only it repeats itself based on the number of milliseconds given.

// Create a button that, upon clicking, executes the example Interval function.
<button onclick="exampleInterval()">Click here!</button>
// The exampleInterval function will continue to create
// a new alert box 2000 milliseconds after one is closed.
<script>
function exampleInterval()
{
setInterval(function(){alert("You did it! Again!")},2000);
}
</script>

clearInterval(id): Used to stop a timer.

26) How do you remove an attribute from a JavaScript object?

Using the delete method will remove an attribute from an object.

var customer = { name: 'Tom Waits', age: 85}
delete customer.age
// customer will now be { name: 'Tom Waits' }

27) What type of pop-ups does JavaScript support?

There are three types:

Alert
Confirm
Prompt

28) How can you force another page to load in JavaScript?

By setting the location.href value, as shown here:

location.href=”http://google.com”;

29) What are escape characters?

In JavaScript, the backslash is an escape character. Escape characters allow you to use a special character inside a set of the same special character that wraps it. For example, when you want to use a double quote inside another set of double quotes, like so:

var x = “Bob yelled \”Get out of here!\””;

Without the escape characters in the line above, there would be a syntax error. With them, console logging the variable above will result in this:

Bob yelled “Get out of here!”

30) What are JavaScript cookies?

Cookies are small data files stored by a browser. Websites set them to store information about you. An example would be the cookie set when you choose “Remember Me” when logging into a website. The site will store a cookie in your browser as a token to identify you without requiring you to log in again.

31) How do you add an element to an array in JavaScript?

You use the push method of the array object:

var a = [1,2];
a.push(3);
// a now is [1,2,3];

32) How do you remove an element from a JavaScript Array?

There are two ways to do this, depending on whether you want to remove an element from the beginning or the end of the array. Pop removes an element from the end and shift removes an element from the beginning. Both methods return the element that they removed:

var a = [1,2,3];
var ele1 = a.pop();
// a will now equal [1,2] and ele1 will equal 3.
var b = [1,2,3];
var ele2 = b.shift();
// b will now equal [2,3] and ele2 will equal 1.

33) What is a callback?

A callback is a function that executes after another function has finished executing. It’s passed to the function as a parameter. Callbacks are necessary because JavaScript is an event-based language that can execute code asynchronously. Callback functions ensure that function calls occur in a specific order.

34) What are closures?

Closures form when you define a variable outside the current scope and access it from some inner scope. A simple way to use a closure is to define a JavaScript function inside of another JavaScript function.

35) What does a break statement do?

Break statements stop the execution of a loop in JavaScript.

36) What does a continue statement do?

Continue statements continue the next statement in a JavaScript loop.

37) How do you create a generic object in JavaScript?

You can create a new, empty JavaScript object using the object class.

var x = new object();

38) How do you find the type of a JavaScript object in code?

You do this using the typeof operator.

console.log(typeof 42);

// Will output “number”

39) How do you handle exceptions in JavaScript?

You can handle runtime exceptions by using the try, catch, and finally statements. Run the code you want to test in the try block, and if a runtime error occurs, it will execute the code designated in the catch block. The code in the finally block executes whether or not there is an error.

Try{
    // Code you are executing
}
Catch(error){
    // Code to throw an exception
}
Finally{
    // Code that runs after either success or failure
}

40) What is the difference between Local storage and Session storage?

Local storage is stored locally in the browser without contacting the server with each change to the stored data. It persists between sessions unless it’s manually cleared. Session storage is like local storage, but it’s cleared when the browser is closed.

41) What are some JavaScript frontend frameworks and what to they do?

A JavaScript frontend framework is a set of JavaScript libraries that define a workflow and structure to a JavaScript web application. Here are some popular frontend frameworks:

42) What is the difference between window and document in JavaScript?

The JavaScript window object is a global object that comprises variables, functions, history, location, and other attributes. The JavaScript document object is a property of the window object.

43) What is event bubbling?

Event bubbling transfers events contained within the child node to the parent node. It’s a beneficial method because of its speediness, as it only requires the code to traverse the DOM tree one time.

44) What is the difference between window.onload and onDocumentReady?

The window.onload event won’t trigger until every single element on the page has been fully loaded, including images and CSS. The downside to this is it might take a while before any code actually executes. You can use onDocumentReady to execute code as soon as the DOM is loaded instead.

45) What is the blur method used for?

The blur method removes focus from an element in HTML.

46) How do you convert any base of a number to an integer in JavaScript?

First, you must represent the number in the non-decimal as a string. Then use the parseInt method to convert it to an integer. The first parameter is your non-decimal number, and the second is the base of the number.

// convert the hexadecimal value of FF
parseInt("FF", 16);
// returns 255

47) What are exports and imports?

Imports and exports allow developers to write modular JavaScript. Using these methods, a developer can break up a JavaScript project into multiple files.

48) What are the different types of errors in JavaScript?

The JavaScript errors are:

EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
AggregateError
InternalError

49) What is the difference between call and apply?

These methods work similarly. The call method will call a function with a given this value and separately-provided arguments:

theFunction.call(valueForThis, arg1, arg2, …)

The apply method does the same, but you must supply the arguments as an array:

theFunction.apply(valueForThis, arrayOfArgs)

Top courses in Development

Selenium WebDriver 4 With Java – Novice To Ninja + Interview

Lets Kode It

4.3 (9,789)

Learn To Program with Delphi and Object Pascal

Huw Collingbourne

4.7 (770)

Bestseller

SQL Server Essentials, from Scratch

Joey Blue

4.5 (1,462)

VB . NET with VS 2017 and Windows Forms

T O

4.2 (810)

ASP.Net Web Forms Live Project

Manzoor Ahmed

4.8 (605)

The Agile Samurai Bootcamp

Jonathan Rasmusson

4.5 (13,261)

Bestseller

More Development Courses

50) What is the unshift method?

The unshift method allows a developer to prepend a value to the beginning of an array:

var a = [2,3];
a.unshift(1);
// a will now be [1,2,3]

51) How do you assign properties to an object in JavaScript?

You can assign a property to a JavaScript object in two ways:

var a = {};
// using array syntax
a['firstName'] = 'John';
// the standard way
a.lastName = 'Doe';
// a will now be {firstName: "John", lastName: "Doe"}

52) What is strict mode in JavaScript and how can it you enable it?

Strict mode runs a restricted variety of JavaScript that limits the syntax you can use and turns some hidden errors into thrown errors. It can also provide more performance. You can enable it by adding the string literal “use strict” above the file:

“use strict”;

var a = ‘hi’;

53) How can you detect the operating system of the client machine with JavaScript?

Calling navigator.appVersion will return the operating system in JavaScript.

Conclusion

Reviewing the questions above is a great way to prepare for your next JavaScript interview. If you are rusty, they will refresh your memory and help you face the interview panel with confidence. It will be easier because you will know what to expect.