Interview Questions on JavaScript
Tags: javascript, career, webdev, codenewbie
Published: 2022-02-14 08:22:57

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. 

```javascript
// 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? 
![Questions](https://media.giphy.com/media/7TkybIBHcnC8pviJXj/giphy.gif)
Comment down below the answers to these!
```javascript
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-

```javascript
{
  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. 
```javascript
console.log(this)
```
In an object method, **this** refers to the object.
```javascript
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.
```javascript
function myFunction() {
  return this;
}
```
**this** in Event refers to the element that received the event.
```javascript
<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.

```javascript
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.
```javascript
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.

```javascript
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](https://twitter.com/Neo_kaizerr) and [LinkedIn](https://www.linkedin.com/in/sobhandash/).