If you're embarking on a journey into the world of web development or you're looking to solidify your foundational knowledge of JavaScript, you've come to the right place. This ebook is your ultimate guide to acing JavaScript interviews and building a strong foundation in this versatile language.

The Importance of Basic Concepts

Job interviews can be daunting, especially when it comes to technical roles like web development. As a beginner, you may feel overwhelmed by the prospect of answering challenging questions about JavaScript, a language known for its intricacies and nuances. However, there's good news: interviews are an opportunity to showcase your skills and knowledge, and mastering the basics is key to your success.

Before diving into complex topics, it's crucial to have a solid grasp of the fundamentals. Companies often start with basic questions to gauge your foundational knowledge via QnA Interview Portals before the face-to-face interview. These questions may seem straightforward, but they serve as a litmus test for your understanding of JavaScript's core principles.

Why This Ebook?

This ebook has been meticulously crafted to help you navigate the often treacherous waters of JavaScript interviews. Whether you're preparing for your first interview or looking to reinforce your knowledge, our collection of 50 essential questions and answers covers a broad spectrum of JavaScript concepts.

By revisiting and revising these basic concepts, you'll:

• Build Confidence: A strong foundation instills confidence, making it easier to tackle more complex questions during interviews.
• Stand Out: Well-rounded knowledge sets you apart from other candidates and demonstrates your commitment to excellence.
• Succeed in Interviews: With a solid understanding of JavaScript fundamentals, you'll be better equipped to handle interview questions and make a lasting impression on potential employers.

Download the Full Ebook

Before we delve into the questions, you can download the complete ebook for an in-depth understanding of JavaScript interview topics. Click here to download the ebook.

Now, let's get started with 300+ JavaScript interview questions and answers that will lay the groundwork for your success in interviews and your career as a developer.

What is the difference between ‘==’ and ‘===’ in javascript?
Both are comparison operators. ,“==” is used to compare values whereas, “ === “ is used to compare both value and types.
Example:

var a = 10;
var b = '10';
(a == b); //true
(a === b); //false

What is the output of the following?

 A. 12<13<19 
 B. 19>12>2 
 C. 19>12>0

A => true

Evaluation starts from left to right. 12 < 13 is true. Now our expression looks like true < 19.True is evaluated as 1 and 1 < 19 is true. Hence the result is true.

B=>  false

From the left, 19 > 12 is true. New expression is true > 2. As we saw previously too that true evaluates as 1. 1>2 is false. Hence 19>12>2 evaluates to false.

C => true.

From left, 19 > 12 is true. New expression is true > 0. i.e. 1>0 is true. Hence 19>12>0 evaluates to true.
Explain implicit type coercion in javascript.
Automatic conversion of value from one data type to another, when operands of the expression are of different data types is known as type coercion.
Example:

let a = 1;
let  b = '1';
b + a; //returns  “11”
a - b; //returns 0

Explain NaN in javascript.
NaN in javascript refers to ‘not a number’. This indicates that a variable is not a valid number. Javascript also provides isNaN() method to check if the value of a variable is NaN.

What is the data type of NaN ?
Number.

What is JSON ?
JSON is a text-based data format that follows Javascript’s object syntax. JSON is an abbreviation of Javascript Object Notation. It is usually used when you want to transmit data across a network.

How do you convert JSON data to string and vice versa ?
Parsing:Parsing: i.e. from string to JSON

JSON.parse(text);

Stringification:

JSON.stringify(object);

Explain splice() and slice() methods in javascript and list their differences.
slice( )
slice() is an array method that returns selected elements in an array as a new array object. slice method won't mutate the original array but it returns the subset as a new array.
Syntax:

array.slice(start, end)

Example:

const arr = ['Apple', 'Bat' , 'Cat', 'Dog', 'Elephant'];
arr.slice(1,3) // returns ['Bat' , 'Cat']
arr.slice(0,4) // returns ['Apple', 'Bat', 'Cat', 'Dog']
arr.slice(2) //returns ['Cat', 'Dog', 'Elephant']

splice( )
splice() is an array method that either adds/removes items to/from an array, and then returns the removed item. splice method modifies the original array and returns the deleted array.
Syntax:

array.splice(start, deletecount, item1, item2 …… itemX)
Example:
const arr = ['Apple', 'Bat' , 'Cat', 'Dog', 'Elephant'];


arr.slice(1,3) // returns ['Bat' , 'Cat']
arr.slice(0,4) // returns ['Apple', 'Bat', 'Cat', 'Dog']
arr.slice(2) //returns ['Cat', 'Dog', 'Elephant']

Is javascript a statically typed language or a Dynamically typed language?
Javascript is a dynamically typed language. What we mean by that is, type of the variables are checked during the runtime. It is also called a loosely typed language, variables in js are not associated with any type. It can hold the value of any data type.

let k = 12;
k = 'This is a string';

Explain Higher Order Functions in javascript.
Higher order functions are a result of functions being first-class citizens in javascript. Function that take in other functions as arguments and/or return a function are called higher order functions.
Example:

function HOF(fn) {
 fn();
}

HOF(function () {
 console.log("In Higher order Fn");
});

What are immediately Invoked Functions in JavaScript?
An Immediately Invoked Function ( known as IIFE and pronounced as IIFY) is a function that runs as soon as it is defined.
Syntax:

(function(){
   //Do something
})();

What are the possible ways to create objects in JavaScript?
There are many ways to create objects in javascript as below

Object constructor:
The simplest way to create an empty object is using the Object constructor. Currently this approach is not recommended.

var object = new Object();

Object's create method:
The create method of Object creates a new object by passing the prototype object as a parameter

var object = Object.create(null);

Object literal syntax:
The object literal syntax is equivalent to create method when it passes null as parameter

var object = {};

Function constructor:
Create any function and apply the new operator to create object instances,

function Person(name){
   this.name=name;
   this.age=21;
}
var object = new Person("IronMan");

Function constructor with prototype:
This is similar to function constructor but it uses prototype for their properties and methods,

function Person(){}
Person.prototype.name = "IronMan";
var object = new Person();

ES6 Class syntax:
ES6 introduces class feature to create the objects

class Person {
   constructor(name) {
      this.name = name;
   }
}
var object = new Person("IronMan");

Singleton pattern:
A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don't accidentally create multiple instances.

var object = new function(){
   this.name = "IronMan";
}

What is a prototype chain?
Prototype chaining is used to build new types of objects based on existing ones. It is similar to inheritance in a class based language.
The prototype on object instance is available through Object.getPrototypeOf(object) or proto property whereas prototype on constructors function is available through Object.prototype.

What is a first class function?
In Javascript, functions are first class objects. First-class functions means when functions in that language are treated like any other variable.
For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. For example, in the below example, handler functions assigned to a listener

const handler = () => console.log ('This is a click handler function');
document.addEventListener ('click', handler);

What is a first order function?
First-order function is a function that doesn’t accept another function as an argument and doesn’t return a function as its return value.
What is a unary function?
Unary function (i.e. monadic) is a function that accepts exactly one argument. It stands for a single argument accepted by a function.
Let us take an example of unary function,

const unaryFunction = k => console.log (k*20);

What is the currying function?
Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument.
Let's take an example of n-ary function and how it turns into a currying function,

const sum = (a, b, c) => a + b + c;
console.log(sum(1,2,3)) //6
const unarySum = function(a) {
   return function(b) {
       return function(c) {
           return a + b + c;
       }
   }
}
unarySum(1)(2)(3) //6

What is the purpose of the let keyword?
The let statement declares a block scope local variable. Hence the variables defined with let keyword are limited in scope to the block, statement, or expression on which it is used. Whereas variables declared with the var keyword used to define a variable globally, or locally to an entire function regardless of block scope.
Let's take an example to demonstrate the usage,

let counter = 30;
if (counter === 30) {
 let counter = 31;
 console.log(counter); // 31
}

console.log(counter); // 30 (because the variable in if block won't exist here)

What is the Temporal Dead Zone?
The Temporal Dead Zone is a behavior in JavaScript that occurs when declaring a variable with the let and const keywords, but not with var. In ECMAScript 6, accessing a let or const variable before its declaration (within its scope) causes a ReferenceError. The time span when that happens, between the creation of a variable’s binding and its declaration, is called the temporal dead zone.
Let's see this behavior with an example,

function somemethod() {
   console.log(counter1); // undefined
   console.log(counter2); // ReferenceError
   var counter1 = 1;
   let counter2 = 2;
 }

Explain toLocaleString() method in JavaScript
Return a string value of the current number in a format that depends on the browser’s locale settings

Explain toUpperCase() method in JavaScript
toUpperCase() converts text to uppercase.

const str = "random";
str.toUpperCase(); //'RANDOM'

Explain valueOf() method in JavaScript
valueOf() returns the primitive value of the specified object.

How can you convert string to Number using unary plus?

+"5" // 5 (string to number)
+"" // 0 (string to number)
+"1 + 2" // NaN (doesn't evaluate)
+{} //NaN

Explain various types of error constructors supported by JavaScript

• Generic error constructor: The Error constructor is responsible for creating an error object. Instances of the error objects are thrown when runtime errors occur.
  • EvalError: Creates an error instance regarding the global function eval().
  • InternalError: Creates an error instance regarding an internal error in the JS engine
  • RangeError: Creates an error instance regarding a numeric variable or parameter that is outside of its valid range.
  • ReferenceError: Creates an error instance regarding de-referencing an invalid reference
  • SyntaxError: Creates an error instance regarding a syntax error occurring while parsing code in eval().
  • TypeError: Creates an error instance regarding a parameter or variable not of a valid type.
  • URIError: Creates an error instance regarding when invalid parameters are passed to the decode URI() or encodeURI()

What are the common tools used for minification

There are many online/offline tools to minify the javascript files,

1. Google's Closure Compiler
2. UglifyJS2
3. jsmin
4. javascript-minifier.com
5. prettydiff.com

Download the Full Ebook

Before we delve into the questions, you can download the complete ebook for an in-depth understanding of JavaScript interview topics. Click here to download the ebook.