Top 10 Javascript Interview Questions That Every Javascript Developer Should know

  1. null vs undefined?

What is null?

null is supposed to be something that does not exist.

How can we get a null value?

For getting the null value we need to explicitly declare it.

Example:

const name = null;
console.log(name); // null

What is undefined?

undefined means a variable that has been declared but not defined.

How can we get an undefined value?

If we declared a variable but don’t set any value, then we will get undefined. Don’t understand? See the example below-

const name;
console.log(name); // undefined

Suppose, we declared a function but we don’t return anything from this function, then we will get undefined.

const testFunction = (num1, num2) => {
const sum = num1 + num2
}
const result = testFunction(10, 12);
console.log(result); // undefined

2. “==” vs “===”?

Double Equal:

When we use double equal for comparing, then it converts two values into a common type and then compares two values.

Example:

const num1 = 10;
const num2 = '10';
console.log(num1 == num2); // return true

It returns true because javascript converts these two values into a common type and then comparing.

Tripple Equal:

When we use triple equal for comparing two values, then it checks two values and their types. It doesn't change their types. If two values and types become the same, it returns true. Otherwise, return false.

Example:

const num1 = 10;
const num2 = '10';
console.log(num1 === num2); // false

3. What are truthy and falsy values in Javascript?

In Javascript, all values are truthy unless they are defined as falsy (false, NaN, null, undefined, “”, 0).

Example:

const name = 'rakib';
if(rakib) {
console.log('I am truthy')
}else {
console.log('I am falsy')
}
//output - I am truthy

But if we write any falsy values inside the condition then see what’s happens?

if(NaN) {
console.log('I am truthy')
}else {
console.log('I am falsy')
}
// output will be - I am falsy

Because NaN is a falsy value.

4. What is the scope in Javascript?

First of all, we all need to know what is the scope?

Scopes are the way to define where the variables or other resources are accessible.

Global Scope:

The area outside all the functions is considered as a global scope. And the variables that are defined inside the global scope can be accessible in any other scopes.

const num1 = 10;
console.log(num1); // output - 10.
const sum = (num2) => {
return num1 + num2; // num1 is accessible here
}
console.log(sum(20)); // output - 30;

Local Scope:

A variable declared inside a function becomes local to the function and it is considered as a local scope. Every function has its own scope. We can use the same variable in different functions.

// This is global scopefunction test1() {
// local scope
const name = 'Rakib';
function test2() {
//local scope
}
}
// global scopefunction test3() {
const name = 'Rakib';
// local scope
}

Function scope:

When we declare a function inside a function we can within the functions. We can’t access the variable outside the functions. We can only declare a function scope variable by using the var keyword.

function testFunction() {
var name = 'Rakib';
console.log(name); // output - Rakib
}
testFunction();
console.log(name); // It will throw an error.

Block Scope:

Generally, a block scope is an area within if conditions, for, while loops. We can say that a variable that is defined inside the curly braces “{}” is called block scope. Using let and const variable we can declare block scope.

function testFunction(condition) {
if(condition) {
var name1 = 'Rakib'; // funcion scope
const name2 = 'Shehab'; // block scope
let name3 = 'Sakil'; // block scope

console.log(name1); // Rakib
console.log(name2); // Shehab
console.log(name3); // Sakil
}
console.log(name1); // Rakib
console.log(name2); // It will throw an error.It can't be accessible outside block scope console.log(name3); // It will throw an error.It can't be accessible outside block scope}

5. What is clousers:

A clousers is a function that captures variables from its lexical scope. In simple words, clousers remembered the variables from the place where it is defined, no matter where it is executed.

Example:

function outerFunction() {
const outerVariable = 5;

function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const testInnerFunction = outerFunction();
testInnerFunction();

Here innerFunction() is executed outside of its lexical scope.

innerFunction() still has access to outerVariable from its lexical scope, even being executed outside of its lexical scope.

In other words, innerFunction() closes over ( captures, remembers) the variable outerVariable from its lexical scope.

In other words, innerFunction() is a closure because it closes over the variable outerVariable from its lexical scope.

6. How to understand ‘this’ keyword in Javascript?

How JavaScript Implicit Binding Works:

Implicit binding covers most of the use-cases for dealing with this keyword. In implicit binding, you need to check what’s to the left of the dot(.) operator adjacent to a function at invocation time. This determines what this is binding to.

Example:

const userInfo = {
name: 'Rakib',
address: 'Bangladesh',
getName: function() {
console.log(this.name);
}
};

userInfo.getName();

Here this.name is going to log Rakib in the console because to the left of the dot(.) operator adjacent to the function getName(), we see the userInfo object.

Let’s see another example:

const userInfo = {
name: 'Rakib',
address: 'Bangladesh',
getName: function() {
console.log(this.name);
}
};
const anotherUser = {
name: 'Sakil';
}
anotherUser.getName();

Here this.name is going to log Sakil in the console because to the left of the dot(.) operator adjacent to the function getName(), we see the anotherUser object.

7. Asynchronous Javascript setTimeOut():

This function executes a particular block of code once after the specified time has passed away.

It takes a callback function as a first parameter and it is required.

As a second parameter, it takes the number of milliseconds to wait before executing the code. If omitted, the value 0 is used. And it is optional.

It takes an unlimited optional parameters.

Example:

console.log('rakib');
setTimeOut(() => {
console.log('Hello world!')
}, 3000);

Here, at first, rakib will log will be log in the console. And after 3 seconds, Hello world will be logged in to the console.

8. Asynchronous Javascript setInterval():

This function executes a particular block of code perfectly after a set period of time.

It takes a callback function as a first parameter and it is required.

The intervals (in milliseconds) on how often to execute the code. If the value is less than 10, the value 10 is used And it is optional.

It takes an unlimited optional parameters.

Example:

console.log('rakib');
setInterval(() => {
console.log('Hello world!')
}, 3000);

Here, at first, rakib will log will be log in the console. And every after 3 seconds, Hello world will be logged in to the console.

9. How javascript code is executed:

Everything in JavaScript happens inside an “Execution Context”. Whenever a JavaScript program is run an execution context is created.

var count=10;  // line1 
function double(n){ // line2

var result = n * n; // line3
return result; // line4
}

var result1=add(4); // line5

when we run the above code, a global execution context (GEC) is created. It is created in two phases:

Creation Phase or Memory Creation

In this phase, javascript allocates the memory to all the variables and functions present in the program. The variables are stored with the value undefined and the function is stored with all the code present in that particular function. For the above code, the variable number is stored with the value undefined and the function add is stored with value b/w the {…} curly braces. The result1 is also a variable so it is stored with the value undefined.

Code Execution Phase

In this phase the main execution takes place and the javascript runs through the code line by line. Now the number value is changed from undefined to 10. Then it moves to the next line as there is nothing to execute it moves to line 5. In line 5 function invocation takes place. When a new function is invoked a new execution context is created within the GEC.

Now the again above process is repeated with the two phases but for only the add function. After the function is executed completely, the execution context created for that particular function will get deleted automatically.

Now, when the whole javascript program is executed completely the GEC will also get deleted.

10. What is DOM?

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.

A Web page is a document. This document can be displayed in the browser window. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

Web Developer (MERN Stack)