Interview Questions on JavaScript

In this part of JavaScript basics, I will be sharing some commonly asked questions on JavaScript interviews. I have personally been asked these a number of times.

TOC:

1. What's Arrow Function
2. What is the difference between == and === operators
3. What is scope in JavaScript
4. What is this keyword
5. What is the difference between Call, Apply and Bind

What's Arrow Function?

The arrow function was introduced in ES6 2015 edition. It works like the traditional function expression and is compact. However, it also looses many properties due to this, For Ex- We can't use "this" or "super" keyword, hence not suitable to be used as methods. We can't use it as constructors, or the use of call, bind and apply is also not suitable.

// Traditional Anonymous Function
function (a){
  return a * 100 / 10;
}

// 1. We can remove the "function" keyword
(a) => {
  return a * 100;
}

// 2. The curly braces can also be removed
(a) => a * 100 + 10 ;

// 3. Same with the parenthesis 
a => a * 100 % 10 ;

What is the difference between == and === operators

The difference is really simple. "==" matches the values of its two operands while "===" matches with the values as well as the type.
How about some questions?

Comment down below the answers to these!

console.log(undefined === null)
console.log(1+2+"3" == 33)
console.log(1+5+"3" === 53)

What is scope in JavaScript

There are 3 scope in Javascript Block scope, Function scope, Global scope. ES6 introdced let and const keywords which in turn brought the Block Scope to life. Block scope is invoked when a variable is declared within two curly braces, {}.
If you know any programming language then function scope and global scope is a no brainer. In JavaScript Global scope can be invoked by declaring the variable outside of the function or a block. I'll let you in on a secret, I used to think that "var" keyword is the only way to invoke global scope, turns out var, let and const act all the same when outside of a function or a block. Ex-

{
  let x = 2;    //Block Scope
}
// x can NOT be used here

function myFunction() {
  const progLang = "JavaScript";   // Function Scope
}

let progLang2 = "Python";    //Global Scope
// code here can use progLang2

function myFunction() {
// code here can also use progLang2
}

What is this keyword?

this keyword refers to an object. However which object its referring depends on how the keyword is invoked. this when used Alone refers to the global object.

console.log(this)

In an object method, this refers to the object.

const person = {
  firstName: "Neo",
  lastName : "Anderson",
  id       : 257,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
fullName : function() {
  return this.firstName + " " + this.lastName;
}

By default this in function refers to global object. and in strict mode its undefined.

function myFunction() {
  return this;
}

this in Event refers to the element that received the event.

<button onclick="this.style.color='blueviolet'">
  Click to Change Color!
</button>

Methods like call(), apply(), and bind() can refer this to any object they are bound to.

What is the difference between Call, Apply and Bind

Now to use any of these, the keyword "this" is necessary.

Call(): The call() method invokes a function with a given 'this' value and arguments provided one by one. call() sends arguments in a comma separated manner.

let movie1 = {name: "Star Wars", part: "3"}
let movie2 = {name: "The Matrix", part: "4"}

function status(ques1, ques2){
  console.log(ques1 + " " + this.name + " " + this.part + ", " + ques2)

status.call(movie1, "Did you watch?", "How was it?")
//Did you watch? Star Wars 3, How was it?
status.call(movie2, "Did you watch?", "How was it?")
//Did you watch? The Matrix 4, How was it?
}

Apply(): It invokes the function and allows you to pass in arguments as an array.

let movie1 = {name: "Star Wars", part: "3"}
let movie2 = {name: "The Matrix", part: "4"}

function status(ques1, ques2){
  console.log(ques1 + " " + this.name + " " + this.part + ", " + ques2)

status.apply(movie1, ["Did you watch?", "How was it?"])
//Did you watch? Star Wars 3, How was it?
status.apply(movie2, ["Did you watch?", "How was it?"])
//Did you watch? The Matrix 4, How was it?
}

The call and apply methods are pretty interchangeable and depends on how you want to call the function.

Bind(): The function returns a new function, allowing you to pass in an array and any number of arguments. bind() will have this set to the first parameter passed to it.

let movie1 = {name: "Star Wars", part: "3"}
let movie2 = {name: "The Matrix", part: "4"}

function status(ques1, ques2){
  console.log(ques1 + " " + this.name + " " + this.part + ", " + ques2)

let s1 = status.bind(movie1)
let s2 = status.bind(movie2)

s1("Did you watch?", "How was it?")
//Did you watch? Star Wars 3, How was it?
s2("Did you watch?", "How was it?")
//Did you watch? The Matrix 4, How was it?
}

Do let me know your thoughts and follow my Twitter and LinkedIn.