Common JavaScript Interview Question That You Need to Know

In this lesson, we are quickly going to know some common javascript interview questions that every javascript developer should know. let’s start,

What Is JavaScript?

JavaScript is the most popular web scripting language, used for both client-side and server-side development. Supporting object-oriented programming abilities, the JavaScript code can be inserted into HTML pages that can be understood and executed by web browsers.

What are Truthy and Falsy Values in JavaScript?

A truthy value is one that evaluates the boolean value true. which can also be expressions, statements, and values. Some truthy values to keep in mind:

• -1,10 (or other negative and non-zero numbers)
• {} (empty objects)
• [] (empty arrays)
• function () {}, () => {} (functions, including empty functions)
• non-empty strings (like “false”, ‘ ‘ — including strings with just whitespace)

Other values are considered falsy values. a value that evaluates to the boolean value false expressions, statements, and values can evaluate to the false boolean value and will therefore be considered a falsy value. Some falsy values to remember:

• null
• undefined
• NaN
• false
• 0 (or other forms of the number 0, -0, 0.0 )
• empty strings ('', "", etc)

What is the difference between null & undefined?

Undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value. It implies no object or null string, no valid boolean value, no number, and no array object. Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

What do you understand by NaN?

NaN is a short form of Not a Number. Since NaN always compares unequal to any number, including NaN, it is usually used to indicate an error condition for a function that should return a valid number. When a string or something else is being converted into a number and that cannot be done, then we get to see NaN.

What is the difference between the operators ‘==‘ & ‘===‘?

The main difference between “==” and “===” operator is that formerly compares variable by making type correction. if you compare a number with a string with numeric literal, == allows that, but === doesn’t allow that, because it not only checks the value but also the type of two variable if two variables are not of the same type “===” return false, while “==” return true.

Explain Scope in javascript?

In general terms, the scope will let us know at a given part of code, what are the variables and functions that we can or cannot access.

There are three types of scopes in JavaScript:

• Global Scope
• Local or Function Scope
• Block Scope

Global Scope

Variables or functions declared in the global namespace have global scope, which means all the variables and functions having global scope can be accessed from anywhere inside the code

var global = "Hello Global Scope";
function globalMessage(){
  return global; // can access global Variable since it's written in global space
}

function globalMessage2(){
  return globalMessage(); // Can access globalMessage function since it's written in global space
}

globalMessage2();  // Returns Hello Global Scope

Function Scope

Any variables or functions declared inside a function have local/function scope, which means that all the variables and functions declared inside a function, can be accessed from within the function and not outside of it.

function functionScope(){
  var a = 2;

  var multiplyBy2 = function(){
    console.log(a*2); // Can access variable "a" since a and multiplyBy2 both are written inside the same function
  }
}
console.log(a); // Throws reference error since a is written in local scope and cannot be accessed outside

multiplyBy2(); // Throws reference error since multiplyBy2 is written in local scope

Block Scope

Block scope is related to the variables declared using let and const. Variables declared with var do not have block scope. Block scope tells us that any variable declared inside a block { }, can be accessed only inside that block and cannot be accessed outside of it.

{
  let a = 12;
}

console.log(a); // Gives reference error since a cannot be accessed outside of the block

for(let i=0; i<5; i++){
  // do something
}

console.log(i); // Gives reference error since i cannot be accessed outside of the for loop block

Scope Chain

JavaScript engine also uses Scope to find variables. Let’s understand that using an example:

var a = 32;

function functionScope(){
  var b= 16;
  var scopeChain = function(){
    console.log(b); // Does not find b inside scopeChain Function, so looks for variable inside favFunction, outputs 16
  }

  var scopeChain2 = function(){
    console.log(a); // Does not find a inside scopeChain2 Function,         so looks for variable inside favFunction and does not find it, so   looks for variable in global scope, finds it and outputs 32
  }

  scopeChain();
  scopeChain2();
}


functionScope();

What are closures in JavaScript?

A closure is the combination of a function and the lexical environment within which that function was declared. i.e, It is an inner function that has access to the outer or enclosing function’s variables. The closure has three scope chains

1. Own scope where variables defined between its curly brackets
2. Outer function’s variables
3. Global variables

Let’s take an example of the closure concept,

function closure(str){
  const message = function(str2){
   console.log(str + ' ' + str2);
  }
  return message;
}
const closureFunction = closure('I am Closure');
closureFunction('hello '); //Output: hello I am Closure
closureFunction('hi.'); //output: hi I am Closure

Explain bind(), call() and apply() in JavaScript?

We use to call, bind, and apply methods to set the ‘this’ keyword independent of how the function is called. Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the function immediately, and modify the context.

bind()

This method returns a new function, where the value of ‘this’ keyword will be bound to the owner object, which is provided as a parameter. Example with arguments:

const normalPerson = {
   firstName: 'Rahim',
   lastName: 'uddin ',
   salary: 15000,
   chargeBill: function(amount){
      this.salary = this.salary - amount;
      return this.salary;
   }
}
const heroPerson = {
    Name: 'Hero',
    lastName: 'Balam',
    salary: 25000
}
const heroBillCharge = normalPerson.chargeBill.bind(heroPerson);
heroBillCharge(2000)
console.log(heroPerson.salary); // 23000 ( 25000 - 2000 )

call() and apply()

The function .call() and .apply() are very similar in their usage except a little difference. .call() is used when the number of the function’s arguments are known to the programmer, as they have to be mentioned as arguments in the call statement. On the other hand, .apply() is used when the number is not known. The function .apply() expects the argument to be an array.

The basic difference between .call() and .apply() is in the way arguments are passed to the function. Their usage can be illustrated by the given example.

const normalPerson = {
     firstName: 'Rahim',
     lastName: 'uddin ',
     salary: 15000,
     chargeBill: function(amount, tax){
        this.salary = this.salary - amount - tax;
        return this.salary;
     }
}
const heroPerson = {
     Name: 'Hero',
     lastName: 'Balam',
     salary: 25000
}
// .call()
normalPerson.chargeBill.call(heroPerson, 1000, 50);
console.log(heroPerson.salary); // 2350 
// .bind()
normalPerson.chargeBill.apply(heroPerson,[30000,1000])
console.log(heroPerson.salary); // 21000

What is the purpose of the ‘This’ Keyword in JavaScript?

The JavaScript ‘this’ keyword refers to the object it belongs to. This has different values depending on where it is used. In a method, this refers to the owner object and in a function, this refers to the global object.

const check= {
  prop: 18,
  func: function() {
    return this.prop;
  },
};
console.log(check.func());
// expected output: 18

Explain event loop in JavaScript?

The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, gives us the illusion of multi-threading. Let’s take a look at what happens on the back-end.

The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

The event queue is responsible for sending new functions to the track for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution.

Whenever an async function is called, it is sent to a browser API. These are APIs built into the browser. Based on the command received from the call stack, the API starts its own single-threaded operation.