Forem: Rajat Gupta

🧑‍🏫 Unacademy Interview Experience - Software Engineer, Web

Rajat Gupta — Sun, 27 Jun 2021 04:17:13 +0000

I have joined Unacademy as Software Engineer, Web. I am a final-year BTech student. I will be graduating next month or so.

In this article - I will share how I got the opportunity, interview experience, tips, and the resources that helped me.

🐣 First Contact

It all started when one of my articles went viral. The article in question: https://dev.to/rajatetc/js-interview-checklist-part-1-basics-10k6. I had shared the article on LinkedIn. An Unacademy recruiter liked my article. So, I cold DM'ed him for a chance to interview.

To my delight - he said that he has already checked out my portfolio - resume, projects, and articles and will get back to me if any relevant openings come up.

After one week or so - I did a follow-up. To my good fortune - they had started hiring for a junior role. The recruiter explained everything related to the rounds over a call and scheduled the first round.

🥊 The Rounds

JS Fundamentals (~ 1 hr)
Frontend with React (~ 1 hr)
Senior Engineering Manager (~ 30 m)
Culture ( ~ 30 m)

Platform: Google Meet

Coding Environment: CodeSandbox

✔️ JS Fundamentals

It started with a simple intro. Then we quickly jumped to JS questions. The questions revolved around the concepts of closures, setTimeout, this, async/await, and promises.

For the output-based questions: the interviewer first gave a simple question and then added more complexity to it.

There was no DS/Algo but there were questions like writing the Promise.all() method from scratch to test problem-solving skills. The interviewer gave hints or directed me whenever I got stuck.

🌋 Frontend with React

This took place after a few days. There were two interviewers in this round. One was just shadowing the whole process.

The questions ranged from basics like what is React, state, hooks, class components to coding a counter, cleanups, and custom hooks.

In the end - the interviewer also asked JS questions on this, objects, new operator, and the event loop. There were questions on performance optimizations like debounce and throttle as well.

Take-home assignment: After this round - there was supposed to be a take-home assignment. But I shared the projects I had built and they were impressed enough to skip it.

After two days, the next two rounds took place on the same day.

🧑🏻‍💼 Senior Engineering Manager

This round was with employee #9 at Unacademy. Now, we are 5000+.

It was more of a discussion on how I approach problems, team dynamics, and culture fit. It started with technical questions on what I had done in my previous internship and optimizations in my projects.

Questions related to culture fit like what worked in the previous internship and what didn't were peppered in between. He also asked what I would like to work on.

👘 Culture

It was again more of a discussion. Questions related to behavior and situations like how will you react if the project you were working on for a few months gets shelved.

All the interviewers were very friendly. At no point - it felt like an interrogation. They guided me whenever I got stuck.

⚙️ What Worked For me

Building in public. All my projects are hosted online. They have proper readMEs and posted on relevant platforms like Linkedin. This caught their attention in the first place and allowed me to skip the take-home assignment.
Doubled down on strengthening my fundamental knowledge of JS and React. I had also prepped for CSS but that didn't come in my round 2. This helped me tackle the coding questions in the rounds.
Thoroughly researched the company - I had gone through their leadership principles, tech blog, videos, recent initiatives, and so on. I had also checked their product - analyzed the UI/UX and checked the lighthouse report for the website. I got positive feedback from every interviewer and they were impressed that I knew so much about the company.
Beforehand I had also prepared my intro, spoken out loud when coding during the process, and asked specific questions at the end. I also reached out to friends and mentors to make sure that I am not over-preparing or headed in the wrong direction.

Finally, I had an overall positive and high-energy approach to everything.

📚 Resources

In my journey to learn web development, I have perused many resources - ranging from documentation, videos, courses to articles, Twitter, and LinkedIn posts.

Here, I share some of the key resources:

Last but not the least, a shoutout to the 🚀 roc8 community for helping in the interview preparation.

If you have any questions - you can comment down below or DM me on Twitter.

💡Know The Differences Between Event Capturing, Bubbling & Delegation in JS

Rajat Gupta — Thu, 03 Jun 2021 03:21:39 +0000

Do you get confused 😵 about the order in which event listeners are invoked when you click on an element? Then this article is for you.

Also, this is a hot 🔥 question in JavaScript interviews.

📝Prerequisites

Basic HTML/CSS
Familiar with DOM Manipulation in JavaScript

When we want to modify the DOM - the normal flow of things is like this:

Select an element -> addEventListener('event', callback fn) -> What to do

Things get a little complicated when you have nested elements like:

<div> -> <li> -> <p>

If you attach an event listener to every element - what will be the order of execution?

Before we answer that, let's cover what is an event object

👨‍🏫Basics

Whenever we use an event handler function, a parameter is automatically passed to it. It contains some extra information. Generally specified as event, evt or e. This is the event object.

One of the most useful properties of an event object is target.

The target property of the event object is always a reference to the element the event occurred upon

Just remember this for now. It will make more sense when we take the examples below.

Let's come back to addEventListener() for a bit. You can actually pass a third argument to it - useCapture.

It's a boolean value. By default, it is set to false meaning browsers run the bubbling phase, basically, event bubbling is used. You can set it to true for running the capturing phase.

🎈 Event Bubbling

In the bubbling phase, browsers run the event handler on the element first (if it has one)
Then it moves to the next immediate ancestor (parent) element and does the same thing, and then the next until it reaches the <html> element

Let's understand it better with the help of an example.

Demo:

Create an index.html file with three divs like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Event Bubbling</title>
    <meta charset="UTF-8" />
  <style>
    div {
      min-width: 100px;
      min-height: 100px;
      padding: 30px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="grandparent">
    <div id="parent">
      <div id="child"></div>
    </div>
  </div>
  <body>
    <script src="src/index.js"></script>
  </body>
</html>

Select the elements and add a click event listener with a simple log function in index.js:

document.querySelector("#grandparent").addEventListener("click", () => {
  console.log("grandparent clicked");
});
document.querySelector("#parent").addEventListener("click", () => {
  console.log("parent clicked");
});
document.querySelector("#child").addEventListener("click", () => {
  console.log("child clicked");
});

Now, click on the div with #child and check your console. It will be:

child clicked 
parent clicked 
grandparent clicked

If you click on div with #parent:

parent clicked 
grandparent clicked

Notice the order of execution. See how it bubbles up.

⬇️ Event Capturing

Also known as Event Trickling is essentially the opposite of Event Bubbling.

Outer-most ancestor -> next element -> selected element

In the same index.js, give the third argument as true to all three elements like this:

document.querySelector('#grandparent').addEventListener(
  'click',
  () => {
    console.log('grandparent clicked')
  },
  true
)

Now, when you click on the child element, the console will be like this:

grandparent clicked 
parent clicked 
child clicked

Now, let's make it a little trickier, set the parent element to false and keep the others as true. What will be the output when you click on the child element?

grandparent clicked 
child clicked 
parent clicked

First, we have the capturing phase. grandparent is set to true so it is logged. parent is false so it is skipped. child is logged.

Now, in the bubbling phase - parent is logged.

❓ for you: What will happen if we put the child element to false as well? Comment your answer 👇

🛑e.stopPropagation()

Now, all this bubbling/capturing is a very expensive task (in terms of performance). More on this later when we cover event delegation

Also, it gets annoying at times.

How to stop it?

Remember, the event object from before? We can call a method on it - namely:
stopPropagation

So, if we write the child element like this:

document.querySelector('#child').addEventListener(
  'click',
  (e) => {
    console.log('child clicked')
    e.stopPropagation()

  },
  false
)

Can you guess what will happen when we click on it? Only child clicked will be logged.

✈️ Event Delegation

Suppose, you have a large application (like an e-commerce store) having a lot of events. Do you think it's a good idea to attach event listeners to every element?

It's not. It will consume a lot of memory. Not to mention the extra lines of code.

An efficient way of dealing with this problem is event delegation

Event delegation takes advantage of event bubbling. The idea is that if you want some code to run for any one of a large number of child elements, you set the event listener on the parent and have the events bubble up.

Let's understand this with the help of an example.

Demo:

Create a simple unordered list like this in index.html:

    <div>
      <ul id="category">
        <li id="oranges">oranges</li>
        <li id="apples">apples</li>
        <li id="bananas">bananas</li>
      </ul>
    </div>

Now, in index.js - only attach an event listener to <ul> element:

document.querySelector('#category').addEventListener('click', (e) => {
  console.log(e.target)
  }
})

Notice e.target - as covered earlier, it is a reference to the element on which event happens. Now, when you will click on the <li> with #oranges. It will log:

<li id="oranges">oranges</li>

Finally, let's cover the pros and cons of using event delegation.

➕Pros

As discussed earlier, with event delegation - we have fewer event listeners and we save memory. Our applications are optimized.
Less code as we are not having an event handler on every child
It is easier to do DOM manipulation. Suppose, we are doing infinite scroll in our app. Now, we don't have to attach event listeners to every new element. As bubbling will happen and we can just have it on the parent.

➖Cons

Not all event gets bubbled up. Example: resize, focus, and blur.
Remember e.stopPropagation? If we use that anywhere in our code, bubbling won't happen from that point on.

And we are done 🏁

If you found this helpful - like, comment, and share.

📚References

Akshay Saini: https://www.youtube.com/channel/UC3N9i_KvKZYP4F84FPIzgPQ

MDN: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

The Art Of Making A Navbar 👩‍🎨

Rajat Gupta — Wed, 02 Jun 2021 18:37:35 +0000

Perhaps, after reading the title you are like - what's the art in it? Well, I for one, think that it takes skill to create simple components like a navbar. And eventually, if you want to create something amazing like Stripe's navbar - it is important to get the basics right.

If you are sold - let's start building the navbar.

We will follow the mobile-first design approach, ie, we will first design our website for the smaller screen and then set it up for a bigger screen.

Demo:

HTML

Let's begin by writing some HTML.

In this project, I will be using free icons from Font Awesome. We can easily use them by linking to the CDN or through download. We will be using the CDN.

The HTML will contain a <nav> for better accessibility. This div will act as a container for all things. In this div, we will place our links to various pages in our website, navbar toggle button, and social media icons.

Don't worry about all the class names for now. Their use will become more clear when we write some CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar Demo</title>
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
    <!-- styles -->
    <link rel="stylesheet" href="../src/styles.css" />
  </head>
  <body>
    <nav>
      <div class="nav-center">
        <div class="nav-header">
          <img src="./js-logo.svg" alt="logo" />
          <button class="nav-toggle">
            <i class="fas fa-bars"></i>
          </button>
        </div>
        <ul class="links">
          <li>
            <a href="home.html">home</a>
          </li>
          <li>
            <a href="about.html">about</a>
          </li>
          <li>
            <a href="contact.html">contact</a>
          </li>
        </ul>
        <ul class="social-icons">
          <li>
            <a href="https://twitter.com">
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li>
            <a href="https://linkedin.com"
              ><i class="fab fa-linkedin-in"></i
            ></a>
          </li>
          <li>
            <a href="https://github.com">
              <i class="fab fa-github"></i>
              </a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- javascript -->
    <script src="../src/index.js"></script>
  </body>
</html>

Points to note:

Don't forget to link the stylesheet, add the font awesome link, and finally the script source.
Be careful with the relative file paths. If you have the files in the same directory, use "./filename", if it's in a different folder, like src, use "../src/filename". Also, use file extension, for example, if it's a .css file - use filename.css and so on.

CSS

Now that we have our HTML in place, let's write some CSS.

Let's start with setting some variables. CSS variables work just like any other variable. We set a value and can use it anywhere.

You might ask why to bother with these variables. Well, if you are using a value say at 5 places in your program and you want to change its value. With the CSS variable, you can change the value at one place and it will be reflected all over. It will make more sense when we write the code.

:root {
  --transition: all 0.4s linear;
  --spacing: 0.1rem;
}

Now, we set some global styles. These are mainly for the look and feel of our website. You may skip this step - this won't affect the functionality.

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

nav {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

Small Screen Layout

Now, let set up styles for the small screen. We will set up the layout using flexbox. The way it will work is that on the small screen - we will have a nav header container that will contain the logo and toggle button. We will set up functionality through JS that such that when we click on the button - the links will be displayed. By, default links will not be displayed. Also, social icons will not be displayed on the small screen.

.nav-toggle {
  font-size: 1.5rem;
  color: black;
  background: transparent;
  border: transparent;
  transition: var(--transition);
  cursor: pointer;
}

.nav-toggle:hover {
  transform: rotate(90deg);
}

.links a {
  color: grey;
  font-size: 1rem;
  display: block;
  padding: 0.5rem 1rem;
  transition: var(--transition);
  letter-spacing: var(--spacing);
  text-transform: capitalize;
}

.links a:hover {
  background: black;
  color: white;
  padding: 1rem;
}

.social-icons {
  display: none;
}

.links {
  height: 0;
  overflow: hidden;
  transition: var(--transition);
}

.show-links {
  height: 7rem;
}

Points to note:

We are using the transition and spacing variables.

Big Screen Layout

Now, we will set up a big-screen layout using media queries such that when the screen size goes above 800px - we will change our layout.

Now, we will use the nav center class. Within the nav center container - we will first show the logo, then the links, and finally the social media icons.

@media screen and (min-width: 800px) {
  .nav-center {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }
  .nav-toggle {
    display: none;
  }

  .nav-header {
    padding: 0;
  }

  .links {
    height: auto;
    display: flex;
  }

  .links a {
    padding: 0;
    margin: 0 0.5rem;
    font-size: 1.2rem;
  }
  .links a:hover {
    padding: 0;
    background: transparent;
    color: black;
  }

  .social-icons {
    display: flex;
  }

  .social-icons a {
    margin: 0 0.5rem;
    transition: var(--transition);
    color: gray;
  }

  .social-icons a:hover {
    color: black;
  }
}

We had height : 0 for links which we change to height: auto. And for social media icons, we had display: none which now becomes display: flex

We are done with the CSS. You might have noticed:

.show-links {
  height: 7rem;
}

This is the class we will use to toggle our links on a smaller screen through JS. By default, we have height as 0.

Javascript

We select the nav toggle button and the links container. We add a click event listener on the nav toggle button and add show-links class using the inbuilt toggle method. The way it works is basically if the class is not there it adds it on click and vice-versa. The class will give height to the container if present. I recommend opening up the console and see how the class gets added and removed to the DOM.

const navToggle = document.querySelector('.nav-toggle')
const links = document.querySelector('.links')

navToggle.addEventListener('click', function () {
  links.classList.toggle('show-links')
})

Alternatively, we can set up if statements instead of the toggle method like this:

  if (links.classList.contains("show-links")) {
    links.classList.remove("show-links");
  } else {
    links.classList.add("show-links");
  }

And we are done. If you encounter any issues - you can check out the code sandbox link at the start.

Configure Environment Variables in Create React App & Netlify

Rajat Gupta — Wed, 02 Jun 2021 13:41:23 +0000

Environment Variables are essential for the security of your web application. There is a good chance that you are using GitHub to host your project publically. Within that project, if you are using an external API - you are probably using an API key. Now, if you are directly writing that API key in your code - you are sharing it on GitHub.

Everyone can use it. They can access your sensitive information. They can exhaust your API Key's rate limit which can even cost you money. Environment Variables (env var) help prevent that.

So what exactly is an env var? To put it simply, it's a variable whose value is set outside the program. And it can be used inside a program through reference.

There are many ways to create an env var. In this article, we will focus on using it in Create React App and Netlify.

Using Create React App

In create-react-app, we first need to create a .env file in the root folder (not src!) with the variable name starting with REACT_APP_

It will look something like this:

REACT_APP_API_KEY=fjfjsd23u4fjld

Note: There are no spaces between the variable, equality sign and the value.

Now, you can directly access the env var in your app using process.env.REACT_APP_API_KEY

Here's a demo:

Now, add .env to your .gitignore file

And we are done (at least the first part). You can push your code to GitHub and your API key will not be exposed.

Using Netlify

Now, if you are using Netlify to deploy your app - the API key is not available. Your app will not work as you expect. We need to set the same env var in Netlify as well.

When you deploy your website to Netlify, click on Show Advanced and add a new variable.

If you have already deployed your website, go to Site settings > Build & deploy > Environment > Environment variables and click on Edit Variables and add your env var.

And we are finally done. Now, our API key is secure. This is the basic setup, for more use-cases, please refer to:

Create React App To Fetch & Display Data From API

Rajat Gupta — Wed, 02 Jun 2021 12:12:13 +0000

A developer has to work with APIs a lot. Fetching data and displaying it is essentially our bread-and-butter. In order to learn this crucial skill, we will create a small app using create-react-app and Random User API

The final project will look like this:

Code:

API

Let's first have a look at the API. Go to https://randomuser.me/api/

By the way, I recommend using JSONView
for better formatting.

If you are using JSONView - the JSON will look something like this:

There are a lot of properties. We will be using some of them in our project.

Note: every time we refresh - we get a random user. We will be using this functionality as well in our project.

Setup

I assume you have installed create-react-app. Now, in your App.js get rid of everything. Let's set up some imports. We will be using react-icons for this project.

Install using:

npm -i react-icons

After installation, add this:

import React, { useState, useEffect } from 'react'
import {
  FaEnvelopeOpen,
  FaUser,
  FaCalendarTimes,
  FaMap,
  FaPhone,
  FaLock,
} from 'react-icons/fa'

We will be using the hooks and icons in the project.

Variables

Save the URL we navigated to before in a variable. The default image will be used before we set the random user.

  const url = 'https://randomuser.me/api/'
  const defaultImage = 'https://randomuser.me/api/portraits/men/23.jpg'

Now, let's set up some state variables inside the App component.

  const [isLoading, setIsLoading] = useState(true)
  const [randomPerson, setRandomPerson] = useState(null)
  const [title, setTitle] = useState('name')
  const [value, setValue] = useState('random person')

isLoading for showing loading when we are fetching the data, randomPerson to store the data, title for displaying the property, and finally value for the value

Fetch

Now, let's create a fetchRandomFunction to get the data from API. This will be an async function. We will use the inbuilt fetch method to get the data using async/await syntax.

 const fetchRandomPerson = async () => {
    setIsLoading(true)
    const response = await fetch(url)
    const data = await response.json()
}

We pass in the URL in the fetch method, the response is stored in the response variable which is then finally resolved into an object (data here) using .json()

Destructure

If you do a console.log(data), you will see data similar to the one we saw when we analyzed the API above. Inside the function, let's destructure some of the properties relevant to us. And finally set it to our state variable randomPerson

    const {
      phone,
      email,
      login: { password },
      name: { first, last },
      dob: { age },
      picture: { large: image },
      location: {
        street: { number, name },
      },
    } = person

    const newPerson = {
      image,
      phone,
      email,
      password,
      age,
      street: `${number} ${name}`,
      name: `${first} ${last}`,
    }

    setRandomPerson(newPerson)
    setIsLoading(false)
    setTitle('name')
    setValue(newPerson.name)

Note:

Some of the properties are nested, so we have to destructure accordingly, for example, the password is inside the login. Learn more about destructuring here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
In the newPerson object, with ES6, if the property name is the same as value, we can get away with writing only once, ie, image: image can be written as an image
We have set isLoading to false at the end when data has been fetched successfully.

useEffect

Now, that we have our function. Let's set up our useEffect hook.

  useEffect(() => {
    fetchRandomPerson()
  }, [])

Note: The empty dependency means that it will run only once.

JSX

In this tutorial, we won't be covering CSS. Please grab the index.css file from the code link and paste it as it is if you want the same styles.

The HTML structure will be roughly like this - we will have a container in which the title and value will be displayed on the upper side and buttons below. Buttons will be used to change the title and value.

    return (
    <main>
      <div className='block bcg-black'></div>
      <div className='block'>
        <div className='container'>
          <img
            src={(randomPerson && randomPerson.image) || defaultImage}
            alt='random user'
            className='user-img'
          />
          <p className='user-title'>my {title} is</p>
          <p className='user-value'>{value}</p>
          <div className='values-list'>
            <button className='icon' data-id='name'>
              <FaUser />
            </button>
            <button className='icon' data-id='email'>
              <FaEnvelopeOpen />
            </button>
            <button className='icon' data-id='age'>
              <FaCalendarTimes />
            </button>
            <button className='icon' data-id='street'>
              <FaMap />
            </button>
            <button className='icon' data-id='phone'>
              <FaPhone />
            </button>
            <button className='icon' data-id='password'>
              <FaLock />
            </button>
          </div>
        </div>
      </div>
    </main>
  )

We are almost done. Now let's set up an event listener so that as soon as the mouse hovers over a button - the title and the value change.

For this, we will use the title and value state variables we set up before. We also need to create a new function handleValue. Notice, in the JSX, we have set up data-id, we will use this to get the value dynamically. Note, you can name it whatever you like, it just needs to start with data-

To every button add:

onMouseOver={handleValue}

The button will look like this:

 <button className='icon' data-id='name' onMouseOver={handleValue}>
     <FaUser />
 </button>

The function:

  const handleValue = (e) => {
    if (e.target.classList.contains('icon')) {
      const newValue = e.target.dataset.id
      setTitle(newValue)
      setValue(randomPerson[newValue])
    }
  }

When the event target has a class named .icon, the function takes up the value stored in its dataset object (which we set with data-id) and sets it equal to the title. After that we are using it as a dynamic object key to get the value from randomPerson object.

If you are not sure about dynamic object keys, I recommend watching this tutorial: https://youtu.be/_qxCYtWm0tw

Let's also add a button to fetch a new random user.

 <button className='btn' type='button' onClick={fetchRandomPerson}>
 {isLoading ? 'loading...' : 'random user'}
 </button>

And our application is complete. We have successfully fetched and displayed data from an API.

🎯 JS Interview Checklist - Part 2 (Advanced)

Rajat Gupta — Wed, 02 Jun 2021 06:13:29 +0000

You have covered the basics ✅

Now, you are ready to impress the interviewer with some advanced concepts 👨‍🔬

Let's get started.

If you haven't read Part-1: https://dev.to/rajatetc/js-interview-checklist-part-1-basics-10k6

📚 Polyfills

❓ Most commonly asked: map, bind

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

Let's implement it for map

// this - array
// this[i] - current value
Array.prototype.myMap = function (cb) {
  var arr = []
  for (var i = 0; i < this.length; i++) {
    arr.push(cb(this[i], i, this))
  }
  return arr
}

const arr = [1, 2, 3]
console.log(arr.myMap((a) => a * 2)) // [2, 4, 6]

bind

let name = {
  first: 'Rajat',
  last: 'Gupta',
}
let display = function () {
  console.log(`${this.first} ${this.last}`)
}

Function.prototype.myBind = function (...args) {
  // this -> display
  let obj = this
  return function () {
    obj.call(args[0])
  }
}

// let displayMe = display.bind(name)
let displayMe = display.myBind(name)

displayMe() // Rajat Gupta

But this is the basic implementation, suppose we have parameters in our display & displayMe function

let display = function (city, country) {
  console.log(`${this.first} ${this.last} from ${city}, ${country}`)
}

Function.prototype.myBind = function (...args) {
  let obj = this
  // get the args except the first one
  params = args.slice(1)
  return function (...args2) {
    obj.apply(args[0], [...params, ...args2])
  }
}

let displayMe = display.myBind(name, 'Delhi')
displayMe('India') // Rajat Gupta from Delhi, India

➰ Event Loop

A very ❗important topic to understand asynchronous behavior.

Instead of providing a half-baked explanation here, I recommend watching this video if you haven't already:

🔒 Closures ❗important

❓ Explain, output Q, advantages, disadvantages

You have probably used it without even realizing it.

This section will have a lot of fancy words - so bear with me. We will cover them one by one.

Function bundled together with its lexical environment forms a closure

Okay, what is lexical environment❓

It is essentially the surrounding state - the local memory along with the lexical environment of its parent.

Whaaat? 🤯 I know it's a bit of a doozy. Let's understand it with an example.

function x() {
  var a = 7
  function y() {
    console.log(a)
  }
  return y
}

var z = x()
console.log(z) // [Function: y]
z()

When x is invoked, y is returned. Now, y is waiting to be executed. Kind of like a loaded gun waiting to be shot! 🔫

So, when we finally invoke z - y is invoked. Now, y has to log a so it first tries to find 🔍 it in the local memory but it's not there. It goes to its parent function. It finds a there.

Voila❗There you have it - this is closure.

Even when functions are returned (in the above case y) they still remember their lexical scope (where it came from)

Totally, unrelated quote for kicks 👻:

They may forget what you said - but they will never forget how you made them feel - Carl W. Buehner

I swear the rest of the article is legit 🤞 Keep reading.

Advantages 😎

Currying

let add = function (x) {
  return function (y) {
    console.log(x + y)
  }
}

let addByTwo = add(2)
addByTwo(3)

Data Hiding/Encapsulation

Suppose, you want to create a counter application. Every time, you call it - the count increases by 1. But you don't want to expose the variable outside the function. How to do it?

You guessed it - closure❗

function Counter() {
  var count = 0
  this.incrementCount = function () {
    count++
    console.log(count)
  }
}

console.log(count) // Error: count is not defined
var adder = new Counter()
adder.incrementCount() // 1

Disadvantages 😅

Overconsumption of memory or memory leaks can happen.

For example, the closed-over-variable will not be garbage collected. As even if the outer function has run, the returned inner function still has a reference to the closed-over-variable.

Note: Garbage collector basically removes unused variables from the memory automatically.

🤝Promises ❗important

❓ Syntax, explanation, output Q

Again, a very very important topic.

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

It is in one of these three states:

pending: initial state, neither fulfilled nor rejected
fulfilled: operation was completed successfully
rejected: operation failed

const promise = new Promise((resolve, reject) => {
  let value = true
  if (value) {
    resolve('hey value is true')
  } else {
    reject('there was an error, value is false')
  }
})

promise
  .then((x) => {
    console.log(x)
  })
  .catch((err) => console.log(err))

Note: resolve and reject are just conventional names. Call it pizza🍕 if you like

Instead of then/catch - we can also use async/await

async function asyncCall() {
  const result = await promise
  console.log(result)
}

asyncCall()

One of the advantages of promises is that it is a much cleaner syntax. Earlier, it used to be a callback hell 🌋

Now now, there is a lot more than this to Promises. Covering it in depth will require a separate blog post. Let me know in the comments if you want that.

👪 Prototypes, Prototypal Inheritance

❓ Syntax, explanation

You may have noticed the keyword prototype from the polyfill example.

From the emoji - you might think this is like the inheritance in other languages like C++. But it's not.

Whenever we create anything (object, function) in JS - JS Engine automatically attaches that anything with some properties and methods

All this comes via prototypes

__proto__ is the object where JS is putting it all

Let's take some examples. Fire up your consoles!

let arr = ['Rajat', 'Raj']
console.log(arr.__proto__.forEach)
console.log(arr.__proto__) // same as Array.prototype
console.log(arr.__proto__.__proto__) // same as Object.prototype
console.log(arr.__proto__.__proto__.__proto__) // null

All this is called a prototype chain

We can do the same with objects and functions as well.

We will always find Object.prototype behind the scenes. That's why you may have heard - everything in JS is nothing but an object 🤯

Prototypal Inheritance

let object = {
  name: 'Rajat',
  city: 'Delhi',
  getIntro: function () {
    console.log(`${this.name}, ${this.city}`)
  },
}

let object2 = {
  name: 'Aditya',
}

Note: Don't modify prototypes this way. It's just for understanding. The right way to do it: https://javascript.plainenglish.io/how-prototypal-inheritance-works-in-javascript-and-how-to-convert-it-to-class-based-inheritance-632e31e6350d

object2.__proto__ = object

By doing this, object2 gets access to the object's properties. So, now we can do:

console.log(object2.city)

This is prototypal inheritance.

Coming back to the polyfill of bind from before:

Function.prototype.myBind = function () {
  // code
}
// now we can access this method whenever we create a new function
function a() {
  // code
}

console.log(a.__proto__) // will have myBind method

⚡Performance Optimization

Debouncing
Throttling
Caching
Code Splitting
Bundling, Minification
Server-side rendering

Note: Generally not asked to freshers 👶 but good to know 📝

Let's cover debouncing and throttling.

⛹️‍♂️Debouncing

Another favorite of interviewers.

Let's understand it by creating a search bar.

Demo:

Create a simple input field in index.html

<input type='text' id='text' />

Now, index.js. Don't forget to add it to index.html

const getData = (e) => {
  console.log(e.target.value)
}
const inputField = document.getElementById('text')

const debounce = function (fn, delay) {
  let timer
  return function () {
    let context = this
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(context, arguments)
    }, delay)
  }
}

inputField.addEventListener('keyup', debounce(getData, 300))

First, we have selected the input and added an event listener to it. Then we created a debounce function which takes a callback function and delay.

Now, inside the debounce function we create a timer using setTimeout. Now, this timer's job is to make sure - the next call for getData only happens after 300 ms. This is what debouncing is.

Also, we use clearTimeout to remove it. Don't want too many of them hanging out there taking up memory space!

Phew! Lots of theory. Let's do a fun challenge. You must have seen the countdown before a game starts (it goes like 10, 9, 8, .... with some delay in between). Try to write a program for it.

Answer

let count = 10

for (let i = 0; i < 10; i++) {
  function timer(i) {
    setTimeout(() => {
      console.log(count)
      count--
    }, i * 500)
  }
  timer(i)
}

Were you able to solve it? Did it differently? Let me know your solution.

🛑 Throttling

Let's take an example again. Suppose, on every window resize event - we call an expensive function. Now, we want it such that the expensive function will only be executed once in the given time interval. This is what throttling is.

Create anindex.html and an index.js with the following code:

const expensive = () => {
  console.log('expensive')
}

const throttle = (fn, limit) => {
  let context = this
  let flag = true
  return function () {
    if (flag) {
      fn.apply(context, arguments)
      flag = false
    }
    setTimeout(() => {
      flag = true
    }, limit)
  }
}
const func = throttle(expensive, 2000)
window.addEventListener('resize', func)

Almost the same as debouncing. The key difference is the flag variable. Only, when it's true - we are invoking the callback function. And it is set to true inside the setTimeout . So the value is true only after the desired time limit.

So, what's the difference between debounce and throttling❓

Let's take the search bar 🔍 example from above. When we are debouncing the input field - we are saying that only fetch the data when the difference between two keyup events is at least 300 ms.

In the case of throttling, we make a function call only after a certain period of time. Suppose, you are searching for an encyclopedia in the search bar. Say, the first call is made on e and it took us 300 ms to reach p. The next call will be made then only. All the events in between will be ignored.

So, to summarize, debouncing - when the difference between two keyup events is 300 ms and throttling - when the difference between two function calls is 300 ms. Basically, the function is called after a certain interval of time.

And we are doneee 🏁

I hope this article was useful. Do like, share, and comment 👇

Until next time 👋

🗃️ References:

MDN Docs: https://developer.mozilla.org/en-US/
Akshay Saini: https://www.youtube.com/channel/UC3N9i_KvKZYP4F84FPIzgPQ
Coding Addict: https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA

🎯 JS Interview Checklist - Part 1 (Basics)

Rajat Gupta — Tue, 01 Jun 2021 12:15:03 +0000

Update: I recommend checking the v2 here: https://www.freecodecamp.org/news/javascript-interview-prep-cheatsheet/

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

📝Prerequisites

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) {
    newArr.push(words[i])
  }
}
console.log(newArr)

❓ 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]
}
consoleEven(arr)

function consoleEven(arr) {
  let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
  console.log(data) // undefined
}
consoleEven(arr)

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))
  console.log(data)
}

consoleEven(arr)

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() {
  console.log(num)
  var num = 10
}

consoleNum() // undefined

// Why? Also, why undefined & not error

// This is how runtime sees this
{
  var num
  console.log(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() {
    console.log(this)     
  }

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:

❓ Output

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

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

// answer
myData.displayStay.call(yourData)

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:

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
localStorage.removeItem('key')
// 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

  console.log('Hello')
  setTimeout(() => {
    console.log('lovely')
  }, 0)
  console.log('reader')

  // output
  Hello
  reader
  lovely

A slightly trickier one:

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

// output
6
6
6
6
6

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