JavaScript Interview Questions- Beginner, Intermediate, Advanced

javascript

JavaScript has evolved from a simple scripting language to a powerhouse that stimulates the dynamic interactivity of the modern web. For tech interviews, JavaScript is often a focus point for assessing a developer’s skill. Here are some of the common beginner, intermediate, and advanced JavaScript questions:

Beginner JavaScript Interview Questions

List of beginner-level JavaScript interview questions.

How can you declare a variable in JS?

Answer:

In JavaScript, you can declare a variable using one of three keywords: var, let, or const. The choice of which keyword to use depends on the intended scope and whether the variable’s value will change over time.

Using var (traditional variable declaration, function-scoped):

var myVariable = “Hello, World!”;

Let and const have replaced the var keyword due to some issues with scoping.

Using let (block-scoped variable declaration, reassignable):

let myVariable = “Hello, World!”;

Let declares block-scoped variables, meaning they exist only within that block.

Using const (block-scoped variable declaration, constant value):

const myVariable = “Hello, World!”;

The “const” keyword declares variables, and their values cannot be reassigned once set; they are also block-scoped.

Variables can also be declared without an initial value. For example:

let myVariable;

In this case, the variable declares but does not assign a value, and its initial value will be undefined.

What are Immediately Invoked Function Expressions (IIFE)?

Answer:

An IIFE is a function that is defined and executed immediately after creation. It helps create a private scope for variables.

(function() {

    console.log(“I am an IIFE!”);

  })();

How can you declare an array in JavaScript?

Answer:

In JavaScript, you can declare an array using the following methods:

Using Array Literal:

const myArray = [1, 2, 3, 4, 5];

Using the Array Constructor:

const myArray = new Array(1, 2, 3, 4, 5);

Creating an Empty Array:

const emtpyArray = [];

What are JavaScript Objects?

Answer:

In JavaScript, objects are a fundamental data type that allows you to store and organize data in a key-value pair format. There are several ways of creating JavaScript objects:

Object Literal:

const person = {

    firstName: “John”,

    lastName: “Doe”,

    age: 30,

    isStudent: false,

  };

Using the Object Constructor:

const person = new Object();

person.firstName = “John”;

person.lastName = “Doe”;

person.age = 30;

person.isStudent = false;

Does JavaScript have a Boolean data type?

Answer:

Yes, JavaScript has a Boolean data type. The Boolean data type represents two values: true and false. Conditional statements and expressions often use Booleans, where the result can be either true or false.

How so you create a cookie using JavaScript?

Answer:

// Function to set a cookie

function setCookie(name, value, daysToExpire) {

    const expires = new Date();

    expires.setTime(expires.getTime() + daysToExpire * 24 * 60 * 60 * 1000);

    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;

  }

    // Example: Setting a cookie named “user” with value “John Doe” that expires in 7 days

  setCookie(“user”, “John Doe”, 7);

Intermediate JavaScript Interview Questions

List of intermediate-level JavaScript interview questions.

What is the difference between == and === check in JS?

Answer:

Loose Equality (==):

The loose equality operator (==) compares values for equality after performing type coercion, if necessary.

If the operands are of different types, JavaScript will attempt to convert one or both of the operands to a common type before making the comparison.

Example:

‘5’ == 5;      // true (String ‘5’ is coerced to a Number)

null == undefined; // true (null and undefined are considered equal)

Strict Equality (===):

The strict equality operator (===) compares values for equality without performing type coercion.

If the operands are of different types, the comparison will return false without attempting to convert the operands.

Example:

‘5’ === 5;     // false (String ‘5’ is not equal to Number 5)

null === undefined; // false (null is not the same as undefined)

What are callback functions?

Answer:

In JavaScript, a callback function is a function that is passed as an argument to another function and is executed after the completion of some asynchronous operation or at a later time. Callbacks are a fundamental concept in JavaScript, especially in environments where operations such as fetching data from a server or reading a file are non-blocking and need a way to handle the result when it becomes available.

What is the difference between null and undefined?

Answer:

undefined:

undefined represents the absence of a value in a variable. If you declare a variable but do not assign it a value, it automatically receives the value undefined.

Programs often use the default value of function parameters when they are not provided.

It also serves as the default value for object properties that haven’t received a value.

null:

The programmer explicitly assigns null to indicate the absence of a value or that a variable has no object value.

Developers often use it when they expect a variable to hold an object reference and intentionally communicate the absence of an object.

What are higher-order functions?

Answer:

In JavaScript, a higher-order function is a function that takes one or more functions as arguments or returns a function as its result. Treating functions as first-class citizens in the language closely ties to the concept that functions can be passed around and manipulated like any other data type.

Is JavaScript a statically typed language or dynamically typed language?

Answer:

JavaScript is a dynamically typed language. At runtime, the program determines the data type of a variable, and the variable’s type can change during program execution.

In contrast, dynamically typed languages allow variable types to be declared at runtime, and the program’s execution determines the variable’s type, which may change during the program’s execution. In JavaScript, you don’t explicitly declare the data type of a variable; instead, the interpreter determines the type dynamically.

For example, in JavaScript:

let x = 5; // x is initially of type number

x = “Hello”; // x is now of type string

Here, JavaScript initially assigns a number to the variable x, but later, it is assigned a string value

What is ‘this’ keyword in JavaScript?

Answer:

In JavaScript, the ‘this’ keyword is a special keyword that refers to the current execution context, which is determined by how a function is called. The value of ‘this’ is not fixed; it depends on how a function is invoked.

Advanced JavaScript Interview Questions

What are tagged template literals?

Answer:

Tagged template literals are a feature in JavaScript that allows you to process template literals (string literals with embedded expressions) with a function, called a tag function. When you use a tag before a template literal, the tag function calls with the literal’s template and the evaluated values of the expressions, enabling you to manipulate or process the string in a customized way.

Here’s a basic syntax of a tagged template literal:

function myTagFunction(strings, …values) {

  /*strings is an array of the raw strings

  values is an array of the evaluated expressions

  Process the strings and values as needed*/

}

const result = myTagFunction`This is a ${“tagged”} template literal!`;

In this example:

myTagFunction is a custom tag function.

The tag function receives the template literal with its raw strings and the evaluated expressions as separate arguments.

Explain event propagation in JavaScript.

Answer:

JavaScript event propagation involves how the DOM hierarchy transmits events. There are three phases of event propagation: capturing phase, target phase, and bubbling phase. When an event occurs, these phases determine the order in which event handlers execute.

Capturing Phase:

The event starts from the root of the DOM tree and goes down to the target element. This phase is called the capturing phase. During the capturing phase, event handlers registered on ancestor elements invoke, starting from the root and moving toward the target.

Target Phase:

The target element invokes event handlers that it has registered. The target element invokes event handlers that it has registered.

Bubbling Phase:

The event then bubbles up from the target element back to the root. This phase is called the bubbling phase. During the bubbling phase, event handlers on ancestor elements invoke, starting from the target and proceeding towards the root.

What is array destructuring in JavaScript?

Answer:

Array destructuring is a feature in JavaScript that allows you to unpack values from arrays or iterable objects into distinct variables. It provides a concise and expressive way to assign values from an array to variables in a single line.

Here’s an example to illustrate array destructuring:

const colors = [‘red’, ‘green’, ‘blue’];

// Destructuring assignment

const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // Output: ‘red’

console.log(secondColor); // Output: ‘green’

console.log(thirdColor);  // Output: ‘blue’

What is ecma script in JavaScript?

Answer:

ECMAScript (European Computer Manufacturers Association Script) is the standard upon which JavaScript is based. A scripting-language specification created to standardize JavaScript ensures that various web browsers and platforms can implement it consistently.

What is JavaScript hoisting?

Answer:

During the compilation phase, the JavaScript language exhibits a behavior called hoisting, wherein it moves variable and function declarations to the top of their containing scope. You can use variables and functions in your code even before declaring them.

What is the difference between innerHTML and innerText?

innerHTML:

The innerHTML property is used to get or set the HTML content (including tags) of an element. If you use innerHTML to set content, it will replace the existing content of the element.

innerText:

The innerText property gets or sets the text content of an element. Unlike innerHTML, it deals only with the text content and does not include HTML tags.

Here are some of the resources for you to help you with your JavaScript journey:

Leave a Comment

Your email address will not be published. Required fields are marked *