🎯 JS Interview Checklist - Part 1 (Basics)

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Prepping for your next interview ❓ I have the perfect checklist for you. Go through this and you are ready to rock 💃


  • Basic knowledge of how the web works
  • Familiar with HTML/CSS, JS (especially ES6+ syntax)

🧰 Array Methods

Most commonly asked: map, filter, find, reduce, forEach

❓ Examples of usage, solve a problem

// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']

const ans = words.filter((word) => word.length > 6)

console.log(ans) // ['interview', 'javascript']

I recommend doing the exercise yourself first to test your knowledge.

Comment your solutions⬇️

Generally, a follow up to this: can you do it without the array method?

let newArr = []

for (let i = 0; i < words.length; i++) {
  if (words[i].length > 6) {

❓ Difference between map and forEach

  • map returns a new Array, forEach doesn't
// Return a new array where even numbers are multiplied by 2 
let arr = [1, 2, 3, 4, 5, 6, 7]

function consoleEven(arr) {
  let data = arr.map((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data)  // [1,  4, 3, 8, 5, 12, 7]
function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
  • method chaining can be done in map but not forEach
// we are converting the new array back to original
function consoleEven(arr) {
  let data = arr
    .map((num) => (num % 2 === 0 ? num * 2 : num * 1))
    .map((item) => (item % 2 === 0 ? item / 2 : item / 1))


Note: map and forEach don't mutate the original array

❓ Polyfill of map

This is an advanced concept. We will cover this in Part-2

✔️ var, let and const

❓ Difference between, scope


❓ Output

var a = 3
var a = 4
let b = 3
let b = 4
const c = 3
const c = 4

console.log(a) // 4
console.log(b) // Syntax Error
console.log(c) // Syntax Error

Note: Good idea to know different types of error

🚩 Hoisting

JavaScript's default behavior of moving declarations to the top.

function and var declarations are hoisted

Note: var declaration is hoisted - not the value

❓ Output/Explain the error

function consoleNum() {
  var num = 10

consoleNum() // undefined

// Why? Also, why undefined & not error

// This is how runtime sees this
  var num
  num = 9

✔️ == vs ===

== converts the operand to the same type and then compares them

=== depicts strict equality check. It checks for same type and same content

❓ Output

let a = null
let b

console.log(a == b) // true
console.log(a === b) // false

// why?

console.log(typeof a) // object
console.log(typeof b) // undefined

Note: Always a good practice to explain your answers.

✔️ this

To explain it properly will require another article. Here, I just list some key things.

this refers to the object that the function belongs to, in simpler terms, points to the owner of the function call (left of the dot)

Its value depends on how it is invoked.

❓ Implicit vs Explicit Binding

Implicit binding is when you invoke a function in an object using dot notation.

function myFunc() {

const obj = {
  bool: true,
  myFunc: myFunc,

Explicit binding is when you force a function to use a certain object as its this.

Ways to do that: call-bind-apply.png

❓ Output

const myData = {
  name: 'Rajat',
  city: 'Delhi',
  displayStay: function () {
    console.log(this.name, 'stays in', this.city)

// create an object yourData and try to use displayStay
const yourData = {
 name: 'name',
 city: 'city'

// answer

Note: For an arrow function, it depends on the lexical scope, that is to say, the outer function where the arrow function is declared.

✔️ Async and defer

Async and defer are boolean attributes which can be loaded along with the script tags. They are useful for loading external scripts into your web page.

❓ Difference between

🏢 Asked by big corporations like Amazon, Walmart, and Flipkart

Best explained through pictures:

18-async-defer.png 19-async-defer.png 20-async.png 21-defer.png

If there are multiple scripts which are dependant on each other, use defer. Defer script are executed in the order which they are defined.

If you want to load external script which is not dependant on execution of any other scripts, use async.

Note: Async attribute does not guarantee the order of execution of scripts.

💾Local and session storage

❓ Difference between

localStorage: Data persists even after closing your session

sessionStorage: Data is lost when your session is over, ie, on closing the browser on the tab

// save
localStorage.setItem('key', 'value')
// get saved data
let data = localStorage.getItem('key')
// remove saved data
// Same for sessionStorage

⏱️ Timers - setTimeout, setInterval, clearInterval

setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

setInterval() does the same for specified intervals.

Finally, clearInterval() is used to stop the timer.

❓ Output

  setTimeout(() => {
  }, 0)

  // output

A slightly trickier one:

  for (var i = 1; i <= 5; i++) {
    setTimeout(function () {
    }, i * 1000)

// output

Short explanation: when setTimeout comes again into the picture, the entire loop has run and value of i has become 6

Now, let's say we want the outcome to be 1 2 3 4 5, what to do?

var ➡️ let

Why this will work? var is globally scoped but let is locally scoped so for let a new i is created for every iteration.

If you had trouble solving these outputs - don't worry. Subscribe for Part-2 where we will cover the event loop and other advanced topics.

Shoutout to 🗣️ Akansha for an informative session @ roc8 that enabled this blogpost. Check her page.

Share and comment if you found this helpful.

PS I have some sick threads 🧵🔥 on Twitter

Interested in reading more such articles from Rajat Gupta?

Support the author by donating an amount of your choice.

Recent sponsors
Saanvi Jain's photo

Amazing article🙌

Rajat Gupta's photo

Thank you!

Shubham Kumar's photo

Awsome,Great work Really helpful

Rajat Gupta's photo

Thank you. Glad it is useful!

Kushank Sriraj's photo

Very informative! Thanks for sharing!

I learned about hoisting, async and defer. Looking forward to the polyfill example 👍

Rajat Gupta's photo

Thank you. I am glad it was useful. Working on the next one 💪

Maddy's photo

Amazing. It will be really helpful.

Rajat Gupta's photo

Glad to know that!