Most common 10 interview question in javascript

Q. 01: What’s the difference between Null & Undefined?

Ans: Null means empty or non-existent value which is used by programmers to indicate “no value”. null is a primitive value and you can assign null to any variable. null is not an object, it is a primitive value. For example, you cannot add properties to it. Sometimes people wrongly assume that it is an object because of the type of null returns “object”.

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, such as JavaScript has a global variable undefined whose value is “undefined” and type of undefined is also “undefined”.

Remember, undefined is not a constant or a keyword. undefined is a type with exactly one value: undefined. Assigning a new value to it does not change the value of the type undefined.

Q. 02: What is the difference between triple equals(strict equality operator) and double equals (equality operator) in JavaScript?

Ans: The strict equality operator will compare both the value and data type. If the value is the same but the type is not, the equality will evaluate as false.
For example:
50=== "50" //output: false

However, the equality operator instead, will evaluate to true. Because the equality operator will be converted to the same data type (if they are not already) before the values of the operands are compared.
50=== "50" //output: true

Q. 03: Explain the “this” keyword.

Ans: The “this” keyword refers to the object that the function is a property of. The value of the “this” keyword will always depend on the object that is invoking the function.

const obj = {
    name:  "Saddam",
    getName: function(){
    console.log(this.name);
  }
}
        
obj.getName(); //output: Saddam

the getName function is a property of the object obj, therefore, this keyword will refer to the object obj, and output will be “Saddam”.

Q. 04: Explain Closures in JavaScript.

Ans: The ability of a function to store a variable for further reference even after it is executed, is called Closure.

function person(){
  const bioData = {name:"Saddam", age:28};

  return function(){
    console.log(bioData.name + " is "+ "awesome");
  }
}
const initialiseClosure = person();
initialiseClosure();//Output:Saddam is awesome

The function person() gets executed and returns a function when we assign it to a variable. the returned function is then executed when we invoke initialiseClosure.The line of code above outputs “Saddam is awesome” and this is possible because of closure.

Q. 05: What is DOM?

Ans: DOM (Document Object Model)is a programming interface for HTML and XML documents.When the browser tries to render an HTML document, it creates an object based on the HTML document called DOM. Using this DOM, we can manipulate or change various elements inside the HTML document.

Q. 06: What is an event bubble?

Ans: Event bubble is one of the awesome features in JavaScript using the feature we can manipulate DOM more smartly. It propagates an event from the lowest element to upward element like bubbling. It’s a type of event propagation. Event bubble works with following way

• First, it captures an event to the target element.
• After that, it will search an event to its parent element
• In that way, it propagates an event from the lowest to the highest element in the DOM

So when the event of its target element occurs it will execute all of the events of its parent element.

Example:

<form onClick={alart(‘FORM’)}>
<div onClick={alart(‘DIV’)}>
<button onClick={alart(‘BUTTON’)}></button>
</div>
</form>

Q. 07: What are the benefits of event delegate?

Suppose we have a list of items in a DOM element and we want to remove or modify the item individually by the event handler. In that case, we can use the same class for every item in the list, and using for loop we can add an event listener to every element in the list. By using this technique we can modify or delete any item from the list. But it is a less optimum and memory-consuming process because when we set an event handler to every item in the list it will reserve a reference for every element in the memory. That is unacceptable.

To avoid the problem, if we set an event handler to the parent element of these items event bubble can capture the event handler by bubbling and when we will click an item to modify or delete the event bubble will capture the handler of the parent element and execute it to its child elements. So the process of declaring an event handler to the corresponding parent element to reduce memory consumption is called event delegation.

Example:

<div id=”container”>
  <h2>Fruits list</h2>
  <ul id=”list”>
    <li id=”item”>Mango</li>
    <li id=”item”>Banana</li>
    <li id=”item”>Apple</li>
    <li id=”item”>Jackfruit</li>
  </ul>
  <button id=”addFruit”>Add Fruit</button>
</div>
<script>
document.getElementById(‘addFruit’).addEventListener(‘click’,function(){
  let newItem = document.getElementById(‘list’);
  let newList = document.createElement(‘li’);
  newList.innerText = ‘Added New Fruits’;
  newItem.appendChild(newList);
})
document.getElementById(‘list’.addEventListener(‘click’,function(e){
  e.target.parentNode.removeChild(e.target)
}))
</script>

Q. 08: What are the differences between var, let, and const?

var, let, and const have different approaches to assignment, hoisting, and scope — so we’ll cover each one separately.

i) Assignment

The most basic difference is that let and var can be re-assigned while const cannot. This makes const the best choice for variables that don’t need to change, and it will prevent mistakes such as accidental re-assignment. Note that const does allow for variable mutation, which means that if it represents an array or an object, these can change. You just can’t re-assign the variable itself.

Both let and var can be re-assigned, but — as the following points should make clear — let has significant advantages over var , making it a better choice in most, if not all circumstances where a variable needs to change.

ii) Hoisting

Similar to the difference between function declarations and expressions (discussed above), variables declared using var are always hoised to the top of their respective scope, while variables declared using const and let are hoisted, but if you try to access them before they’re declared, you will get a ‘temporal dead zone’ error. This is useful behavior since var can be more prone to errors, such as accidental re-assignment. Take the following example:

var x = "global scope";function foo() {
  var x = "functional scope";
  console.log(x);
}foo(); // "functional scope"
console.log(x); // "global scope"

Here, the result of foo() and console.log(x) areas we expect. But what if we were to drop the second var ?

var x = "global scope";function foo() {
  x = "functional scope";
  console.log(x);
}foo(); // "functional scope"
console.log(x); // "functional scope"

Despite being defined within a function, x = "functional scope" has overridden the global variable. We needed to repeat the keyword var to specify that the second variable x is scoped only to foo() .

iii) Scope

While var is function-scoped, let and const are block-scoped: in general, a block is any code within curly braces {} , including functions, conditional statements, and loops. To illustrate the difference, take a look at the following code:

var a = 0; 
let b = 0;
const c = 0;if (true) {
  var a = 1;
  let b = 1; 
  const c = 1;
}console.log(a); // 1
console.log(b); // 0
console.log(c); // 0

Within our conditional block, the globally-scoped var a has been redefined, but the globally-scoped let b and const c have not. In general, making sure local assignments stay local will make for cleaner code and fewer mistakes.

Q. 09: What are the differences between normal function and arrow function?

Ans: Understanding the differences between regular and arrow functions helps choose the right syntax for specific needs.

this the value inside a regular function is dynamic and depends on the invocation. But this inside the arrow function is bound lexically and equals to the outer function.

arguments the object inside the regular functions contains the list of arguments. The arrow function, on the opposite, doesn’t define arguments (but you can easily access the arrow function arguments using a rest parameter ...args).

If the arrow function has one expression, then the expression is returned implicitly, even without using the return keyword.

Last but not least, you can define methods using the arrow function syntax inside classes. Fat arrow methods bind this value to the class instance.

Anyhow the fat arrow method is invoked, this always equals the class instance, which is useful when the methods are used as callbacks.

Q. 10:What are the usages of forEach, map, filter?

.forEach:

.forEach(), is used to execute the same code on every element in an array but does not change the array and it returns undefined. Example:

let food = ['mango','rice','pepper','pear'];
food.forEach(function(foodItem){
    console.log('I want to eat '+foodItem);
});

.map():
.map() executes the same code on every element in an array and returns a new array with the updated elements. Example:

et cost = [100,400,300,700];
let newCost = cost.map(function(costItem){
    return costItem / 10;
});
console.log(newCost);

.filter():
.filter() checks every element in an array to see if it meets certain criteria and returns a new array with the elements that return truthy for the criteria. Example:

let cost = [100,400,50,40,700];
let smallCost = cost.filter(function(costItem){
    return costItem < 200
});
console.log(smallCost);