JavaScript Interview Questions: A Not-So-Brief Overview To Help You Prepare

javascriptifelseJavaScript is a general-purpose, object-oriented scripting language used to take websites a step up above boring HTML and CSS, by creating dynamic, interactive page elements.

If you’re an aspiring web developer facing your first JavaScript-related interview, or even if you’re an amateur coder looking for an extensive refresher, join us as we go over some of the most common JavaScript interview questions and answers.

New JavaScript developers looking for a more ground-up approach might also like to check out a JavaScript For Beginners course or two.


What is JavaScript?

JavaScript is a prototype-based, interpreted scripting language used in client-side web development to add interactivity to browser-based pages.


How do you add JavaScript to a web page?

If the amount of JavaScript you need to add is minimal, you can insert it directly on the page using the <script language=”JavaScript” type=”text/javascript”></script> tag in between the HTML <head> element.

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

[Your JavaScript code here]

</script>
</head>

If you need to add a large amount of JavaScript to your webpage, you can code in a separate JavaScript file and link to it within the HTML.

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

How do you add comments in JavaScript?

There are two ways to add comments in JavaScript, as line comments and block comments.

Examples:

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

x = 12;

/* This is a
block comment example. It can
span as many lines as you'd like.*/

Explain the difference between a local and a global variable, and how to declare each one.

In JavaScript, global variables can be accessed from anywhere within the program, and are described as having “global scope,” or global visibility within the program. Local variables are temporary variables that only have a scope within the function that generated them, described as having a “local scope.”

// How to declare a local variable
var localVariable = "LocalVariableExample"

// How to declare a global variable
globalVariable = "GlobalVariableExample"

What are the different JavaScript data types? Give example of each.

There are seven data types in JavaScript. These are:

  • Undefined
  • Number
  • String
  • Boolean
  • Object
  • Function
  • Null
//Undefined

var x;

//Number

var x = 3;

//String

var x = "Example string."

//Boolean

var x = true;
var y = false;

//Object

var newPuppy={
name: "Akira",
haircolor: "golden",
breed: "Shiba Inu",
id: 327
};

//Function

function yourFunctionName()
{
insert code here
}

What is the difference between a value that is undefined and a value that is null?

A variable is undefined when it’s been declared without an assigned value.

Example:

var x;

The variable x has been declared, but no value has been assigned to it.

Null is actually an assignment value, and is used to attribute an empty value to a variable.

var x = null;

You can also empty a variable by setting its value to null.

In effect, this makes null an object, and undefined a type. JavaScript will initialize a variable with no assignment value as undefined, by default, but it will never set an unassigned variable as null.


Explain the this keyword in JavaScript.

The this keyword in JavaScript is used to reference the object in which the function is operating.


Explain inheritance in JavaScript.

As an object-oriented, class-free 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.

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.

Explain how timers works 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): 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 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): 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.

Example based on the clearInterval() guide from W3Schools.com.

// Creates a script that displays the current time, counting up, continuously.
// Clicking the button will stop the time.

<button onclick="myStopFunction()">Stop the clock!</button>

<script>
var myVar = setInterval(function(){myTimer()},1000);

function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

function myStopFunction()
{
clearInterval(myVar);
}
</script>

Is JavaScript case sensitive?

Yes, absolutely. For example, the function getElementById is not the same as the function getElementbyID. Keeping your capitalization consistent is important.


Explain the different types of pop-up boxes you can create in JavaScript.

There are three main types of pop-up boxes in JavaScript: alert boxes, confirm boxes, and prompt boxes.

  • Alert Box: Used to confirm that a user understands a vital piece of information before proceeding. The user must click OK to exit the box.
window.alert("Alert text here.");
  • Confirm box:a Used when user verification is required. It will return TRUE if the user clicks OK, and FALSE if the user clicks CANCEL.
window.confirm("Confirm text here.");
  • Prompt box: Used if the user needs to input something before proceeding. When the user inputs a value and presses OK, the prompt box will return the input value. If the user clicks CANCEL without inputting a value, the input value will return as null.
window.prompt("Prompt box text","Default value");

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

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


What are the different boolean operators in JavaScript?

    • && – the “and” operator.
    • || – the “or” operator.
    • ! – the “not” operator.

What is an array? Demonstrate how you would create an array in JavaScript.

An array is a variable that can store multiple values. Instead of listing items individually, each with their own variable, you could create an array to group them all together.

Example:

// List of students, each stored in a single variable.

var student1="Claire";
var student2="Barry";
var student3="Rebecca";

// An array object named myStudents to hold student names.

var myStudents=new Array(); 
myStudents[0]="Claire";       
myStudents[1]="Barry";
myStudents[2]="Rebecca";

// A condensed version of the same array.

var myStudents=new Array("Claire","Barry","Rebecca");

To access an element in an array, you must reference its index number.

Example:

// To access the student with the name of Claire from our myStudents array...

var name=myStudents[0];

// To access the student with the name of Rebecca from our myStudents array...

var name=myStudents[3];

// To modify the value of an element in our myStudents array...

myStudents[2]="Chris";

What does the isNaN() function do?

The isNaN() function is used to determine whether a value is not a number, or an illegal number. If the argument is not a number, the isNaN() function will return TRUE.


What kind of looping functions does JavaScript support?

JavaScript supports for loops, while loops, and do-while loops, but not foreach loops.


What kind of conditional statements does JavaScript support?

        • if statement
        • if – else statement
        • if – else if – else statement
        • switch statement

How would you create a radio button in JavaScript?

<form>
Radio button:
</form>

How would you create a script that detects which radio button is selected, and notifies the user?

<script>
function youSelected(button) {
alert('You selected '+button.value+'.');
}
</script>

<input type="radio" name="number" value="the first button"
onchange="youSelected(this)">#1<br />

<input type="radio" name="number" value="the second button" 
onchange="youSelected(this)">#2<br />

<input type="radio" name="number" value="the third button"
onchange="youSelected(this)">#3

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 as 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. W3Schools.com has a useful image demonstrating the hierarchy of HTML DOM objects:

html dom w3schools

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

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.

The document can be further processed and the results of that processing can be incorporated back into the presented page.

This is an overview of DOM-related materials here at W3C and around the web.


What is event bubbling, and why is it beneficial to use?

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.


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 is actually executed. You can use onDocumentReady to execute code as soon as the DOM is loaded instead.


Explain closure in JavaScript.

In JavaScript, it’s possible to have functions within functions. Closure refers to the system by which inner functions have access to the variables used in the outer function, even after the outer function has executed completely.


Explain how to handle errors in JavaScript.

You can handle runtime exceptions by using try and catch 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.

try
  {
  // The code you want to test goes here.
  }
catch(err)
  {
  // The code you want to use to handle the runtime error goes here.
  }

Do you use a JavaScript framework or library?

There is no right or wrong answer to this question, as it’s referring to the interviewee’s personal preferences and coding practices. It is useful, however, to be aware of the different JavaScript framworks and libraries, such as JQuery, for when an interviewer does pose this question to you.

Recruiters want to know that you are well-versed in the world of JavaScript, and not just someone who understands the technical aspects of the language. You might understand the syntax of the language, but are you immersed in its culture? What are your thoughts on open source JavaScript libraries? Have you created your own?

It’s not enough to be good at your job, you need to enjoy it too. People who enjoy their jobs the most tend to be better at what they do, so demonstrating to the interviewer your personal experience with JavaScript, beyond all the classes you’ve taken and standard coding exercises you’ve done, is going to make you look like an awesome, enthusiastic candidate!


If you’re unfamiliar with the different JavaScript libraries available, start learning! JQuery is a popular choice, and Udemy offers plenty of helpful beginner oriented classes for it. Learn the JQuery fundamentals here!

Looking for more JavaScript help? Try out some introductory courses: