Top 10 JavaScript interview questions 2021

1.Closures

A closure gives you access to an outer function’s scope from an inner function (Lexical Environment)

Example :

function init() {
   var name = ‘John-Mayer’;
   function displayName() {
      alert(name);
  }
  displayName();
}
init();

Read this official blog for a detailed answer : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

2.Prototypes in Javascript

With ES6, one can obviously use extends feature for inheritance. However, under the hood it still uses prototypical inheritance.

An example would better help understand this feature :

// Create a function
function Person(first, last, age, gender, interests) {
  
    this.name = {
      ‘first’: first,
      ‘last’ : last
    };
   this.age = age;
   this.gender = gender;
}
// Create two objects of type Person
let p1= new Person(‘John’, ‘Mayer’, 42, ‘male’, [‘music’, ‘skiing’]);
let p2= new Person(‘Pearl’, ‘Jam’, 52, ‘male’, [‘music’, life’]);

Now what if you want to add a new method named ‘singing’ to the Person object, so that the two objects already created p1 and p2 can use the new method ‘singing’

We do it using prototype property -

Person.prototype.singing = function() {
   alert(this.name.first + ‘ is the best guitarist!’);
};

Now we can call singing method in p1 or p2 object.

p1.singing();

methods added to the prototype are available on all object instances created from the constructor.

3.Hoisting

Hoisting is JavaScript’s default behavior of moving declarations to the top i.e. a variable can be used before it has been declared. Key thing to remember is — only declarations are moved to the top, not the initializations.

Example -

console.log(s) // s has not been initialized or declared will result in s is not defined error
console.log(s) // results in undefined error because var s is moved to top while initialization s = 6 is still the bottom line
var s = 6

4. setTimeOut output

What will be the output for the below code ?

for (var i = 0; i < 3; i++) {
   setTimeout(function() {
      alert(i);
    }, 1000 + i);
}

What is the output of the following code ?

It would be 3,3,3

Explanation : This output that we see is because of closures — where an inner function has access to the variables defined in outer scope.
The 2nd parameter in setTimeout function is the number of seconds after which the inner body for setTimeout would execute. for loop runs for i=0,1, and 2 — when i = 3 the for loop condition fails and loop doesn’t run. The for loop executes within 1 second and at the end the value of i = 3. The setTimeOut code block is run after 1,1.1 and 1.2 second — all of them trying to print the value of i which is 3 because the for loop has already executed.

5. Strict mode

Strict mode changes some previously-accepted mistakes into errors in js. (‘use strict’)

Example :

‘use strict’;
delete Object.prototype; // throws a TypeError

Same piece of code when run without strict mode returns false

6. == and === difference

== checks if the value matches while === also checks for types of the variables

7. pass by value or pass by reference

It’s always pass by value, but for objects the value of the variable is a reference.

Example 1 (Call by value) :

var a = {
   “singer”:”John Mayer”
}
console.log(a.singer) // will print John Mayer
// Again initialize new value to variable a
a = {
   “singer”:”Pearl Jam”
}
console.log(a.singer) // will print Pearl Jam

Example 2 (Call by reference) :

var a = {
   “singer”:”John Mayer”
}
var b = a;
b.singer = “Pearl Jam”
console.log(a.singer) // will print Pearl Jam because members of an object have been changed and the two objects a and b had the same reference, so the change persists.

8. call, apply, bind

As we know managing scope in javascript is complex and confusing — so we need to use different ways to bind the object to the methods

1. call — Used to bind an object to the method so that when this keyword is referenced inside a function, it can point to the passed object.
2. apply — Similar to call — only the values are passed as an array and not as individual parameters.

function add(c, d) {
   return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
add.call(o, 5, 7); // 16
add.apply(o, [10, 20]); // 34

3. bind — Creates a new function where this keyword usage refers to the value passed as parameter to bind. In bind, the method is not invoked immediately, it can be called later as a new function is created, while in apply and bind, the method is called immediately.

function f() {
   return this.a;
}
var g = f.bind({a: ‘vvk’});
console.log(g()); // vvk

Last 2 questions here have been discussed in separate articles, and are generally asked as advanced JS questions.

9. Debugging JavaScript applications in chrome

https://vivek-sinless.medium.com/debugging-javascript-applications-on-chrome-4022f9fe7808

10. Security in JavaScript

https://vivek-sinless.medium.com/security-in-javascript-applications-37ae3cfbf184