JavaScript coding interview questions and Answers

hoistedVariable = 3;
console.log(hoistedVariable); // outputs 3 even when the variable is declared after it is initialized	
var hoistedVariable;

Example 2:

hoistedFunction();  // Outputs " Hello world! " even when the function is declared after calling

function hoistedFunction(){ 
  console.log(" Hello world! ");
} 

Example 3:

// Hoisting takes place in the local scope as well
function doSomething(){
  x = 33;
  console.log(x);
  var x;
} 

doSomething(); // Outputs 33 since the local variable “x” is hoisted inside the local scope

Note – Variable initializations are not hoisted, only variable declarations are hoisted:

var x;
console.log(x); // Outputs "undefined" since the initialization of "x" is not hoisted
x = 23;

Note – To avoid hoisting, you can run javascript in strict mode by using “use strict” on top of the code:

"use strict";
x = 23; // Gives an error since 'x' is not declared
var x; 

var x = 2;
var y = "2";
(x == y)  // Returns true since the value of both x and y is the same
(x === y) // Returns false since the typeof x is "number" and typeof y is "string"

• Since the beginning, the keyword ‘var’ has been used in JavaScript programming whereas the keyword ‘let’ was added in 2015.
• The keyword ‘Var’ has functional scope .
• At any place in the function, the variable specified with var can be accessed but in ‘let’, the scope of the variable declared with the ‘let’ keyword is limited to the block in which it is declared .
• Let’s start with block scope. In ECMAScript 2015, let and const are hoisted but not initialized.
• Referencing a variable in a block before declaring it will result in a ReferenceError because the variable is in a “temporary dead zone” from the beginning of the block until the declaration is processed.

6. Explain implicit type coercion in javascript.

Implicit type coercion in javascript is to automatically convert a value from one data type to another. This happens when the operands of an expression have different data types.

• String coercion

String coercion occurs when using the ‘ + ‘ operator. When a number is added to a string, the number type is always converted to string type.

var x = 3;
var y = "3";
x + y // Returns "33" 

Example 2:

var x = 24;
var y = "Hello";
x + y   // Returns "24Hello"; 

Note – ‘ + ‘ operator when used to add two numbers, outputs a number. The same ‘ + ‘ operator when used to add two strings, outputs the concatenated string:

var name = "Vivek";
var surname = " Bisht";
name + surname     // Returns "Vivek Bisht" 

Let’s understand both the examples where we have added a number to a string,

When JavaScript sees that the operands of the expression x + y have different types (one is a number and one is a string), it converts the number to a string and then performs the operation. Since after conversion, both variables are of type string, the ‘ + ‘ operator creates the concatenated string “33” in the first example and “24Hello” in the second example.

Note – Type coercion also takes place when using the ‘ – ‘ operator, but the difference while using ‘ – ‘ operator is that, a string is converted to a number and then subtraction takes place.

var x = 3;
Var y = "3";
x - y    //Returns 0 since the variable y (string type) is converted to a number type

• Boolean Coercion

Boolean coercion occurs using logical operators, ternary operators, if statements, and loop checking. To understand Boolean coercion in if statements and operators, we need to understand the values ​​true and false.

Truthy values are those which will be converted (coerced) to true. Falsy values are those which will be converted to false.

All values except false, 0, 0n, -0, “”, null, undefined, and NaN are truthy values.

If statements:

Example:

var x = 0;
var y = 23;
        
if(x) { console.log(x) }   // The code inside this block will not run since the value of x is 0(Falsy)  
        
if(y) { console.log(y) }    // The code inside this block will run since the value of y is 23 (Truthy)

• Logical operators:

Logical operators in JavaScript, unlike operators in other programming languages, do not return true or false. They always return one of the operands.

OR Operator ( | | ) – If the first value is true, the first value is returned. Otherwise, the second value is always returned.

AND Operator ( && ) – If both values ​​are true, the second value is always returned. If the first value is false then the first value is returned or if the second value is false then the second value is returned.
Example:

var x = 220;
var y = "Hello";
var z = undefined;
        
x | | y    // Returns 220 since the first value is truthy
        
x | | z   // Returns 220 since the first value is truthy
        
x && y    // Returns "Hello" since both the values are truthy
        
y && z   // Returns undefined since the second value is falsy
        
if( x && y ){ 
  console.log("Code runs" ); // This block runs because x && y returns "Hello" (Truthy)
}   
        
if( x || z ){
  console.log("Code runs");  // This block runs because x || y returns 220(Truthy)
}

• Equality Coercion

Enforcing equality takes place when using the ‘==’ operator.

As we said The ‘ == ‘ operator compares values, not types.

Although the above statement is a simple way to explain the == operator, it is not entirely correct.

In fact, when using the ‘==’ operator, coercion takes place.

The ‘==’ operator converts two operands to the same type and then compares them.

Example:

var a = 12;
var b = "12";
a == b // Returns true because both 'a' and 'b' are converted to the same type and then compared. Hence the operands are equal.

Coercion does not take place when using the ‘===’ operator. Both operands are not converted to the same type in the case of ‘===’ operator.

Example:

var a = 226;
var b = "226";

a === b // Returns false because coercion does not take place and the  operands are of different types. Hence they are not equal. 

var a = 23;
var a = "Hello World!";

isNaN("Hello")  // Returns true
isNaN(345)   // Returns false
isNaN('1')  // Returns false, since '1' is converted to Number type which results in 0 ( a number) 
isNaN(true) // Returns false, since true converted to Number type results in 1 ( a number)
isNaN(false) // Returns false
isNaN(undefined) // Returns true

var x = 2;

In the above example, we have created a variable x and assigned it the value “2”. Behind the scenes, the “=” (assignment operator) allocates space in memory, stores the value “2” and returns the location of the allocated memory space. Hence, the variable x in the above code points to the memory space location instead of pointing directly to the value 2.

Assign operator behaves differently when dealing with primitive and non-primitive data types,

Assign operator dealing with primitive types:

var y = 234;
var z = y;

In the example above, the assignment operator knows that the value assigned to y is a primitive type (numeric type in this case), so when the second line of code runs, where the value of y is assigned to z, the operator The assignment operator takes the value of y (234) and allocates a new space in memory and returns the address. Therefore, variable z does not point to the location of variable y but points to a new location in memory.

var y = #8454; // y pointing to address of the value 234

var z = y; 
     
var z = #5411; // z pointing to a completely new address of the value 234
     
// Changing the value of y
y = 23;
console.log(z);  // Returns 234, since z points to a new address in the memory so changes in y will not effect z

From the above example, we can see that primitive data types when passed to another variable, are passed by value. Instead of just assigning the same address to another variable, the value is passed and new space of memory is created.

Assign operator dealing with non-primitive types:

var obj = { name: "Vivek", surname: "Bisht" };
var obj2 = obj;

In the above example, the assign operator directly passes the location of the variable obj to the variable obj2. In other words, the reference of the variable obj is passed to the variable obj2.

var obj = #8711;  // obj pointing to address of { name: "Vivek", surname: "Bisht" }
var obj2 = obj;
    
var obj2 = #8711; // obj2 pointing to the same address 

// changing the value of obj1
        
obj.name = "Akki";
console.log(obj2);
        
// Returns {name:"Akki", surname:"Bisht"} since both the variables are pointing to the same address.

From the above example, we can see that while passing non-primitive data types, the assigned operator directly passes the address (reference).

Therefore, non-primitive data types are always passed by reference.

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

To understand IIFE, we need to understand the two sets of parentheses that are added while creating an IIFE :

The first set of parenthesis:

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

When running javascript code, whenever the compiler sees the word “function”, it assumes that we are declaring a function in the code. Therefore, if we do not use the first set of parentheses, the compiler will throw an error because it thinks that we are declaring a function and according to the function declaration syntax, the function should always have a name.

function() {
  //Do something;
}
// Compiler gives an error since the syntax of declaring a function is wrong in the code above.

To remove this error, we add the first set of parenthesis that tells the compiler that the function is not a function declaration, instead, it’s a function expression.

The second set of parenthesis:

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

From the definition of an IIFE, we know that our code should run as soon as it is defined. A function runs only when it is invoked. If we do not invoke the function, the function declaration is returned:

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

// Returns the function declaration

Therefore to invoke the function, we use the second set of parenthesis.

• Developers do not allow duplicate arguments.
• In strict mode, you will not be able to use JavaScript keywords as parameters or function names.
• The ‘use strict’ keyword is used to set strict mode at the start of a script.
• Strict mode is supported by all browsers.
• Engineers will not be allowed to create global variables in “strict mode”.

function higherOrder(fn) {
  fn();
}
   
higherOrder(function() { console.log("Hello world") });  

function higherOrder2() {
  return function() {
    return "Do something";
  }
}      
var x = higherOrder2();
x()   // Returns "Do something"

12. What is the difference between exec () and test () methods in javascript?

test () and exec () are RegExp expression methods used in javascript. 

// Traditional Function Expression
var add = function(a,b){
  return a + b;
}

// Arrow Function Expression
var arrowAdd = (a,b) => a + b;

// Traditional function expression
var multiplyBy2 = function(num){
  return num * 2;
}
// Arrow function expression
var arrowMultiplyBy2 = num => num * 2;

var obj1 = {
  valueOfThis: function(){
    return this;
  }
}
var obj2 = {
  valueOfThis: ()=>{
    return this;
  }
}

obj1.valueOfThis(); // Will return the object obj1
obj2.valueOfThis(); // Will return window/global object

var variable1 = 23;

let variable2 = 89;

function catchValues(){
  console.log(variable1);
  console.log(variable2);

// Both the variables can be accessed anywhere since they are declared in the global scope
}

window.variable1; // Returns the value 23

window.variable2; // Returns undefined

function varVsLetFunction(){
  let awesomeCar1 = "Audi";
  var awesomeCar2 = "Mercedes";
}

console.log(awesomeCar1); // Throws an error
console.log(awesomeCar2); // Throws an error

{
  var variable3 = [1, 2, 3, 4];
}

console.log(variable3); // Outputs [1,2,3,4]

{
  let variable4 = [6, 55, -1, 2];
}

console.log(variable4); // Throws error

for(let i = 0; i < 2; i++){
  //Do something
}

console.log(i); // Throws error

for(var j = 0; j < 2; i++){
  // Do something
}

console.log(j) // Outputs 2 

const x = {name:"Vivek"};

x = {address: "India"}; // Throws an error

x.name = "Nikhil"; // No error is thrown

const y = 23;

y = 44; // Throws an error

function extractingArgs(...args){
  return args[1];
}

// extractingArgs(8,9,1); // Returns 9

function addAllArgs(...args){
  let sumOfArgs = 0;
  let i = 0;
  while(i < args.length){
    sumOfArgs += args[i];
    i++;
  }
  return sumOfArgs;
}

addAllArgs(6, 5, 7, 99); // Returns 117
addAllArgs(1, 3, 4); // Returns 8

// Incorrect way to use rest parameter
function randomFunc(a,...args,c){
//Do something
}

// Correct way to use rest parameter
function randomFunc2(a,b,...args){
//Do something
}

function addFourNumbers(num1,num2,num3,num4){
  return num1 + num2 + num3 + num4;
}

let fourNumbers = [5, 6, 7, 8];


addFourNumbers(...fourNumbers);
// Spreads [5,6,7,8] as 5,6,7,8

let array1 = [3, 4, 5, 6];
let clonedArray1 = [...array1];
// Spreads the array into 3,4,5,6
console.log(clonedArray1); // Outputs [3,4,5,6]


let obj1 = {x:'Hello', y:'Bye'};
let clonedObj1 = {...obj1}; // Spreads and clones obj1
console.log(obj1);

let obj2 = {z:'Yes', a:'No'};
let mergedObj = {...obj1, ...obj2}; // Spreads both the objects and merges it
console.log(mergedObj);
// Outputs {x:'Hello', y:'Bye',z:'Yes',a:'No'};