10 Critical JavaScript Interview Questions you will be Asked: With Proper Explanation

Hello there, I am Mehzad Galib, a junior front-end web developer from Bangladesh. If you are reading this article, I am sure you are a JavaScript developer who may not landed his first developer job. In a job interview, an employer must ask you about the questions I am about to discuss. I will give short answers about every questions I mention. So, let’s jump into it:

1. Differentiate Between Null and Undefined:
This is a popular interview question for a JavaScript Developer. To answer briefly, Null is a non-existent value, it can be set anywhere before setting up an actual value for variables. Null can be assigned to a variable. On the other hand, we can get undefined with various ways:

Case A. Accessing a variable before setting up its value:

let person;
console.log(person);   // returns undefined

Case B: If a function explicitly doesn’t return anything:

function personSalary(salary){
console.log(salary)
}
personSalary(45)   // personSalary() doesn't return anything, so it will return undefined

Case C: If we don’t pass a function parameter but call it Anyway:

function add(a, b){
return a + b
}
add(54);   // returns undefined because add() needs 2 parameters

Case D: If we want to access an object property which is not there:

const person = {name: 'ahmed', salary: 450};
console.log(person.address)   
// will return undefined because person object has no property as 'address'

Case E: If we set a variable value ‘undefined’:

let people = undefined;
console.log(people)   // returns undefined

Case F: Index out value from an Array:

const nums = [45,35,69,74,22]
console.log(nums[11])  
// nums array don't have an 11th index value, so it will return undefined

Here is an Image that can conclude this debate:

2. What are the “Truthy” and “Falsy” values in JavaScript:

In JavaScript, “Truthy” values are basically values that return the boolean equivalent “true” and “falsy” values return “false”. In general, truthy values can be anything valid, like valid expression or rational variable which means something that we can operate with. On the other hand, falsy values are not valid expressions in JavaScript. Falsy expressions in JavaScript are: false, undefined, null, 0, NaN and empty string(“ “).

3. Difference between double equal(==) and triple equal(===)

Double equal (==) is a loose type of equality in JavaScript that only checks value of both ends. On the contrary, Triple equal(===) is a strict type of equality that checks both type and value of both ends. A code example can make things clear:

console.log(7 == '7')   
// the above will return true, because both 7 and '7' has the same numeric value
console.log(7 === '7')
// the above will return false, because 7 and '7' is not the same data type, one is number and another is a string.

4. Global Scope vs Block Scope:

In the code environment, global scope is outside of any function or condition, or we can say — any block. Anyone can access or modify any global variable within a program. Block scope is the opposite, we cannot access or modify a local scoped variable outside a block like function or condition.

5. Differences Between Bind, Call and Apply:

In short, the “call” and “apply” method sets the “this” keyword and calls the function immediately. But the bind method only creates a copy of a function and binds the “this” keyword, we can call the copy of function anywhere we desire.

But call and apply method is not exactly similar, they have a little difference. The call method requires passing arguments one by one in the desired function, but apply method takes the arguments as an array.

Examples are as follows: for call method

const customer1 = {name: 'ahmed', occupation: 'teacher'};

function greetings(msg){
console.log(`${msg} ${this.name}`)
}
greetings.call(customer1, 'hi')
// call method immediately invokes the function, returns 'hi ahmed', takes argument one by one

For apply method:

const customer2 = {name: 'jamal', occupation: 'soldier'};
function greetings(msg1, msg2){
console.log(`${msg} ${this.name} ${msg2}`)
}
greetings.apply(customer2, ['Hello', 'How are you?']); // output Hello Jamal, How are you?

For Bind method:

let customer3 = { name: 'Natalia', email: 'nat@hotmail.com' };
function greeting(text) {
   console.log(`${text} ${this.name}`);
}

let helloNat = greeting.bind(customer3);

helloNat('Hello'); // returns 'Hello Natalia' 

6. Understanding the “This” keyword:

The “This” keyword in JavaScript is basically the object it refers to. It has different values depending on where it is used.

Alone, this refers to the global window/object.

In a function(non-strict mode) this refers to the global object also.

In a function(strict mode) this returns undefined.

In a method of a class/function, this refers to owner object.

In methods like call and apply, this refers to any object.

In event handling, this refers to the element that received the event.

7. What is the purpose of the “New” keyword:

The “New” keyword basically creates a plain and simple JavaScript Object of Class. The syntax is: new constructor[([arguments])]

function Bike(name, year, speed){
this.name = name;
this.year = year;
this.speed = speed;
}
const yamaha = new Bike('Yamaha', 1998, 60)
// a new object of class Bike has been created

8. Differences between Var, Let, Const keyword:

In the earlier version of JavaScript, there was only one way to declare a variable, which was “var”, shorter form of the entire variable keyword. But JavaScript ES6 presents two new special keywords which is more powerful and descriptive.

i. The “let” keyword is used to declare something which may update later in the scope of function or loop or any conditional statement.

ii. The ‘const” keyword is used to declare some value which will not change in the scope. Both of these keywords are used in local scope, and known as local scope variable.

iii. The “var” keyword is also used to declare a function, but it is global scoped, and hoisted by the program to the top.

9. What is Template Literals:

Templates are used to write some variable embedded as like string, and useful to declare some dynamic value within the template. It’s like the string method but better. Templates are written within the ``(back tick) signs found on the left of “1” key.

const name = 'ahmed'
const age = 56;
let statement= `${name} is ${age} years old`; 

10. JavaScript Spread Operator:

The spread operator basically takes an iterable item(either an array or an object) and expands it to a list of items. We can use the spread operator to use items of an array or object to another array or object, even in some mathematical functions. The basic syntax is […array]

const arr1 = [12,35,356,89,554]
const arr2 = [54,68,59,21]
const combined = [25, ...arr1, 63, ...arr2]
console.log(combined)
// will return [25,12,35,356,89,554,63,54,68,59,21]

Thanks for reading this article, hope it will help you in future. Good luck!!!