Common Javascript Interview Question and Answer

Common Javascript Interview Question and Answer

1. What is the difference between undefined and null?

In Javascript, a variable that is declared but not defined then we get value undefined. And a function that does not return a value will also return undefined. We also get undefined when trying to get an array element and/or object property that doesn’t exist.

where, null is an object, a value that can be assigned intentionally to a variable for empty values and errors that return undefined.

• Both null and undefined are falsy values.
• undefine == null //true, undefine === null //false

2.What is the difference between == and === Equal Operator in JavaScript

JS has strick equality(===) and type converting equality(==) comparison. Strict comparison (e.g., ===) checks for value and type of two variable. And Abstract comparison (e.g. ==) checks for value equality and it automatically converts one type into another and return value based upon content equality.

0==false // true, because false is equivalent of 0 but

0===false // false, because both operands are of different type

2==”2" // true, auto type convertion, string converted into number but 2===”2" // false, since both operands are not of same type

3. What is Closures in JS?

Closures is an ability of a function to remember the variables and functions that are declared in its outer scope.Simply, a closure gives access to an outer function’s scope from an inner function.

4.What is difference between bind, call and apply?

call() - calls the same function with a provided ‘this’ value and arguments provided one by one. i.e. call(this [, arg1, arg2,…])

apply() - calls the same function with a provided ‘this’ value and arguments provided as an array. i.e apply(this [, [arg1, arg2,…]])

bind() - returns a new function whose this value is bound to the provided value. i.e. function.bind(this)

For remember: Call for comma — “CC” and apply for array — “AA”

5.What is event bubble?

If we have a lot of elements handled in the same way, then instead of using an event handler to each of them — we put a single handler on their common div. The element that causes the event is called the target element and can detect it using event.target.

6.what is the difference between regular function and arrow function in javascript

Arrow functions are kinda like a new version of regular functions, but they have a few key differences.

// ES5 Regular function
let double = function(n) { return n * 3}  
alert( double(3) ); // 9
// ES6 Arrow function
let double = n => n * 3; 
alert( double(3) ); // 9

Unlike regular functions, arrow functions do not have their own this and argument binding. Also, arrow functions are only callable and not constructible, where regular functions are constructible and callable. A regular function can have duplicate named parameters but Arrow functions can never have duplicate named parameters.

7. What’s the difference between var, let and const keywords?

In JavaScript, there are three keywords available to declare a variable, and each has its differences. Those are var, let and const.

Variables declared with var keyword are function scoped meaning that when a variable is created in a function, everything in that function can access that variable.

Variables declared with let and const keywords are block scoped. What this means that the variable can only be accessed on that block {} on where we declare it.There is also a difference between let and const we can assign new values using let butconst declared variables can't be reassigned.

8.What is a callback function? Why do we need it?

A callback function is a function passed into another function as an argument. This function is invoked inside the outer function to complete an action.

The callbacks are needed because javascript is an event driven language. That means instead of waiting for a response javascript will keep executing while listening for other events. So callbacks are used in a way to make sure that certain code doesn’t execute until the other code finishes execution.

9.What is Hoisting?

Hoisting is a JavaScript behavior commonly known for making variables and functions available for use before the variable is assigned a value or the function is defined. In effect, it puts variable, function, and class declarations to the top of their scope (the global scope or a function) before execution. In actuality, JavaScript only hoists declarations, not initialization.

10.What is an event bubble? What are the benefits of event delegate?

Event bubbling is the propagation of an event from its origin towards the root element. In other words, if an event occurs on a given element, it will be triggered on its parent as well and on its parent’s parent and all the way up, until the HTML element. If any of these elements has one or more registered listeners, they will be called. Therefore, the bubbling effect is only noticeable when at least one ancestor of the event’s origin has a listener for the same type of event. Otherwise, the propagation will happen silently, since there’s no listener to be called.

The event delegation is a useful pattern because we can listen for events on multiple elements using one event handler. By doing this, you gain the following benefits:

• Simplifies initialization and saves memory: no need to add many handlers.
• Less code: when adding or removing elements, no need to add/remove handlers.
• DOM modifications: we can mass add/remove elements with innerHTML and the like.
• The document object is available immediately.