Frontend Interview Experience (Unacademy) - Javascript and React JS Interview Questions

Summary

This video script details a front-end developer's interview experience at an Indian unicorn company, focusing on JavaScript and React.js. The candidate shares the interview process, including four rounds, and discusses technical questions on topics like array functions, variable declarations, event delegation, and implementing debounce in React. The script also covers CSS box model concepts and creative ways to center a div. The final round delves into cultural fit and problem-solving approaches, offering insights into the candidate's thought process and preparation strategies.

Takeaways

• 😀 The video discusses the interview process for a front-end developer role at an Indian unicorn company, focusing on JavaScript and React.js questions.
• 🔍 The candidate contacted a hiring manager on Twitter with a resume, portfolio, and project links to secure the interview opportunity.
• 📝 The interview consisted of four rounds, covering JavaScript, React.js, and HR/cultural fit, with the first two rounds dedicated to technical JavaScript questions.
• 🛠️ The video provides detailed explanations and code examples for various JavaScript concepts, such as the differences between 'map' and 'forEach', 'null' vs 'undefined', and event delegation.
• 📚 It covers how to approach common interview questions, like explaining the difference between 'let', 'const', and 'var', and the behavior of 'setTimeout' in loops.
• 🤔 The interviewee shared their thought process and strategies for answering complex questions, such as implementing a custom 'Array.flat' method and understanding 'call', 'apply', and 'bind'.
• 💡 Technical questions also included creating a 'compose' function for function evaluation and a polyfill for 'Promise.all', showcasing the candidate's ability to work with asynchronous JavaScript.
• 🎨 Design-related questions tackled the CSS box model and various methods to center a div, reflecting the importance of CSS knowledge in front-end development.
• 🔄 The concept of debouncing was introduced as a technique used in UI development to enhance performance, with a practical implementation example provided.
• 👥 The final HR/cultural round focused on the candidate's approach to problem-solving, teamwork, and cultural fit within the company.
• 📈 The video serves as a comprehensive guide for individuals preparing for front-end developer interviews, offering insights into technical and behavioral aspects of the process.

Q & A

What was the basis of the interview for the front-end developer role at an Indian unicorn company?

The interview was completely based on JavaScript and React.js questions.

How did the interviewee get the opportunity for the interview?

The interviewee contacted a hiring manager on Twitter, providing his resume, portfolio, and deployed projects along with source code links.

What was the interview process like for the front-end developer role?

The interview process consisted of four rounds, with the first two focusing on JavaScript, the third on React.js, and the fourth being an HR or cultural round.

What is the difference between the 'map' and 'forEach' array functions in JavaScript?

The 'map' function creates a new array with the results of calling a provided function on every element in the array, while 'forEach' performs the operation on each array element but does not return a new array.

What is the primary difference between 'null' and 'undefined' in JavaScript?

'null' is an actual value that represents no value, whereas 'undefined' means a variable has been declared but not initialized.

How does event delegation work in the context of an e-commerce site with a list of products?

Event delegation involves adding an event listener to a parent element and using it to handle events for child elements, avoiding the need to add individual event listeners to each child.

What is the concept of array flattening and how was the interviewer's question about it answered?

Array flattening is the process of transforming a nested array into a single-level array. The interviewee initially used the 'concat' and 'spread' operators to flatten one level and then wrote a custom 'flat' method to handle multiple levels of nesting.

What is the difference between the 'let' and 'const' keywords in JavaScript?

'let' allows for re-declaration and re-assignment within the same block scope, while 'const' cannot be re-declared or re-assigned and must be initialized at the time of declaration.

Can you explain the concept of 'closures' in JavaScript and how they were hinted to solve a problem in the interview?

Closures are functions that have access to the outer (enclosing) function's scope chain. The interviewer hinted at using closures to solve a problem related to printing output in a specific order using 'var' instead of 'let'.

What are the differences between the 'call', 'apply', and 'bind' methods in JavaScript?

The 'call' method calls a function with a specified 'this' value and arguments provided individually, 'apply' does the same but takes arguments as an array, and 'bind' creates a new function that, when called, has its 'this' keyword set to the provided value, with a given sequence of arguments preceding them.

What is the purpose of the 'Promise.all' method and how was the task of implementing its polyfill approached?

'Promise.all' takes an array of promises and returns a single promise that resolves when all of the input promises have resolved or rejects if any of them reject. The polyfill implementation involved using a 'for' loop to resolve each promise individually and collecting their results in an array.

How were React.js lifecycle methods explained in the context of class components and functional components?

For class components, methods like 'componentDidMount', 'componentDidUpdate', and 'componentWillUnmount' were demonstrated. For functional components, the 'useEffect' hook was used to replicate the same lifecycle behaviors based on the presence of dependencies in the hook's argument.

What are some common ways to center a div in CSS?

Three common methods mentioned are using 'top' and 'left' properties with 'transform', using 'flexbox' with 'justify-content' and 'align-items', and using 'display grid'.

What is the CSS box model and how does it relate to the properties of an HTML element?

The CSS box model is a concept that defines the rectangular boxes for elements using 'width', 'height', 'padding', 'border', and 'margin'. It represents the area that a block-level element occupies in the document.

What is debouncing and how was it demonstrated in the script?

Debouncing is a technique used to delay the execution of a function until a certain amount of time has passed without any new events being triggered. It was demonstrated by creating a debounced function that logs the input value to the console after the user has stopped typing for a specified delay.

Outlines

00:00

📝 Interview Experience at Indian Unicorn

The speaker details their journey of landing and going through an interview for a front-end developer position at an Indian unicorn company. They recount how they initiated contact with a hiring manager via Twitter, showcasing their resume, portfolio, and project source code. The interview process comprised four rounds, focusing on JavaScript, React.js, and HR/cultural fit. The speaker demonstrates coding examples in VS Code, starting with explaining the differences between 'map' and 'forEach' JavaScript array functions, and their various use cases.

05:02

🔑 JavaScript Concepts: 'null', 'undefined', and Event Delegation

The speaker explains the difference between 'null' and 'undefined' in JavaScript, emphasizing that 'null' is an actual value representing 'nothing', while 'undefined' indicates a declared but uninitialized variable. They also discuss the concept of 'event delegation' in JavaScript, illustrating how to add an event listener to a parent element to manage events for child elements, which is beneficial for performance and memory usage, especially on an e-commerce site with many product listings.

10:03

📚 Advanced JavaScript Questions: Array Flattening and Project Discussion

The interviewee is asked to flatten an array, initially explaining how to achieve one level of flattening using the concat and spread operators. They then proceed to write a custom 'flat' function that can handle arrays nested to a specified depth, demonstrating recursion. Following this, the speaker discusses their projects with the interviewer, explaining their tech stack choices and the reasoning behind using certain databases and front-end technologies.

15:04

🔄 Understanding 'var', 'let', and 'const' with setTimeout

The speaker discusses the differences between 'var', 'let', and 'const' in JavaScript, focusing on scoping rules and the ability to redeclare and reinitialize variables. They use a 'setTimeout' example to illustrate how these keywords behave differently, particularly highlighting the common mistake of expecting 'var' to have block scope leading to unexpected results when used inside loops.

20:06

🤝 JavaScript Function Manipulation with call, apply, and bind

The speaker explains the use of 'call', 'apply', and 'bind' in JavaScript for manipulating the context ('this' value) of functions. They demonstrate how 'call' and 'apply' can be used to invoke functions with a specified context and arguments, while 'bind' creates a new function with a preset context, allowing for partial application and delayed invocation of the function.

25:07

🎼 Compose Function and Promise.all Polyfill

The speaker is tasked with writing a 'compose' function, a utility often used in functional programming to evaluate a sequence of functions from right to left. They also implement a polyfill for 'Promise.all', explaining how it works by running multiple promises in parallel and resolving when all promises have settled. The custom implementation handles both successful resolutions and failures, aggregating results or rejecting early upon any promise failure.

30:08

🌀 React.js Lifecycle Methods and Component Centering Techniques

The speaker discusses React.js lifecycle methods, explaining 'componentDidMount', 'componentDidUpdate', and 'componentWillUnmount' in the context of class components, and how to replicate similar behavior in functional components using the 'useEffect' hook. They also address a common interview question about centering a div on a webpage, presenting three methods: using 'top' and 'left' with 'transform', utilizing 'flexbox', and employing 'css grid'.

35:09

📏 CSS Box Model and Debouncing Function in React

The speaker explains the CSS box model, detailing the properties of 'width', 'padding', 'border', and 'margin' that define the space an element occupies. They demonstrate how these properties are visualized in browser dev tools. Additionally, they introduce the concept of debouncing, a technique used to delay the execution of a function until a certain amount of time has passed without any new events, exemplified by search bars on e-commerce sites like Flipkart.

40:09

🏆 Concluding the Interview with HR and Cultural Fit Discussion

The speaker concludes the interview experience by discussing the final HR and cultural fit round, which focused on their approach to problem-solving, team dynamics, and cultural integration within the company. They encourage viewers to like, subscribe, and share the video, and express openness to creating more interview-related content based on audience feedback.

Keywords

💡Front-end Developer

A front-end developer is a software engineer who specializes in the client-side of web applications, focusing on user interface design and interactivity. In the video, the interviewee is discussing their experience interviewing for a front-end developer role at an Indian unicorn company, which is a privately held startup company valued at over $1 billion.

💡JavaScript

JavaScript is a high-level, interpreted programming language commonly used for enhancing web pages with interactive elements. The video script revolves around an interview process for a front-end developer role that heavily emphasizes JavaScript proficiency, as evidenced by the interview questions and the interviewee's use of JavaScript to demonstrate various concepts.

💡React.js

React.js, often simply referred to as React, is a popular JavaScript library for building user interfaces, particularly single-page applications. The interviewee mentions that the interview was based on React.js questions, indicating its importance in the front-end development field and its relevance to the job role they interviewed for.

💡Map vs. ForEach

The terms 'map' and 'forEach' refer to two different array functions in JavaScript. The interviewee explains that 'map' creates a new array by transforming each item of the original array, while 'forEach' iterates over the array without creating a new one. This distinction is important for understanding array manipulation in JavaScript, as demonstrated in the video.

💡Null and Undefined

In JavaScript, 'null' represents the intentional absence of any object value, whereas 'undefined' means a variable has been declared but not yet assigned a value. The interviewee discusses these concepts to clarify the differences between them, which is crucial for understanding variable states in JavaScript programming.

💡Event Delegation

Event delegation is a technique in JavaScript where an event listener is attached to a parent element instead of individual child elements. This approach is used to handle events for multiple elements efficiently. The interviewee explains this concept by demonstrating how to use event delegation to handle clicks on a list of products.

💡Array Flattening

Array flattening is the process of transforming a nested array (an array containing other arrays) into a single-level array. The interviewee is asked to flatten an array during the interview, showcasing their ability to manipulate arrays in JavaScript, which is a common task in front-end development.

💡Let, Const, and Var

In JavaScript, 'let', 'const', and 'var' are keywords used to declare variables. 'Let' and 'const' are block-scoped, meaning their scope is limited to the block in which they are defined, whereas 'var' is function-scoped. The interviewee discusses the differences between these keywords, highlighting the importance of scope in JavaScript.

💡Set Timeout

Set timeout is a JavaScript function used to delay the execution of a function or a code snippet until a specified amount of time has passed. The interviewee discusses a common interview question related to 'set timeout', explaining the output of a provided code snippet and the implications of variable scoping in JavaScript.

💡Promise.all

Promise.all is a JavaScript method that takes an array of promises and returns a new promise that resolves when all of the input promises have resolved, or rejects if any of them reject. The interviewee is asked to implement a polyfill for 'promise.all', demonstrating their understanding of asynchronous JavaScript and promise handling.

💡React Lifecycle Methods

React lifecycle methods are hooks into the lifecycle of a React component. They include methods like 'componentDidMount', 'componentDidUpdate', and 'componentWillUnmount'. The interviewee explains these methods in the context of class components and functional components, showing how to manage component behavior at different stages of its lifecycle.

💡CSS Box Model

The CSS box model is a fundamental concept in web design that describes the rectangular boxes that are generated for elements in the document tree. It includes properties such as width, height, padding, border, and margin. The interviewee discusses the box model, explaining how these properties combine to form the layout of HTML elements.

💡Debouncing

Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, which can lead to performance issues. The interviewee demonstrates how to implement a debounce function in React.js, which is particularly useful for handling events like typing in a search bar, where you want to limit the rate at which a function is executed.

Highlights

Interviewee secured a front-end developer role at an Indian unicorn company through a cold contact on Twitter.

Interview process included four rounds with a focus on JavaScript, React.js, and HR/cultural fit.

The first round involved explaining the difference between JavaScript's map and forEach functions.

Null and undefined were distinguished based on initialization and type in JavaScript.

Event delegation was explained as a technique to add event listeners to a parent element rather than multiple children.

The interviewee demonstrated a custom array flattening method in JavaScript.

The let and const JavaScript keywords were compared in terms of scoping and re-declaration.

The output of setTimeout in a loop was discussed, highlighting the difference between var and let in scope handling.

Call, apply, and bind methods were explained for manipulating function context in JavaScript.

A polyfill for the JavaScript compose method was created to evaluate a sequence of functions.

The interviewee implemented a polyfill for Promise.all to handle multiple promises.

React.js lifecycle methods were explained for both class and functional components.

Multiple methods for centering a div in CSS were presented, including transform, flexbox, and grid.

The CSS box model was described, detailing width, padding, border, and margin properties.

A debouncing function was implemented in React.js to delay actions until typing has stopped.

The interview concluded with an HR and cultural fit round, focusing on problem-solving and team dynamics.

Transcripts

a few months ago i interviewed for the

role of front-end developer at an indian

unicorn an academy the interview was

completely based on javascript and

react.js questions so that's why in

today's video i'm gonna discuss the

whole process on how i got the interview

and all of the questions that were

involved in the interview process so i

contacted one of the hiring managers on

twitter and provided him with all of the

relevant stuff while cold contacting

like my resume portfolio and my deployed

projects along with the source code

links and that is how i got this

opportunity the recruiter got on a call

with me the same day and he evaluated my

projects and resume etc and decided to

move forward with my application he

explained me about the whole interview

process including the number of rounds

and what topics they are going to be

so this interview process had four

rounds first two being on javascript the

third one on react.js and the fourth one

was the hr or cultural round

so let's go on and discuss the questions

from the first round which was more of a

screening round

so i've opened vs code over here with

html css and javascript file so when we

go on and run this

you're gonna see that you get a very

important message over here

now let's go back to our javascript

files and start with our first question

so the first question was what is the

difference between map and for each

so to explain this we're gonna take an

array

with let's say two five three four some

random values now first of all what are

map and for each these both are array

functions to loop through the items of

the array so if i go on and say a r r

dot

and we're gonna provide a callback over

here so just like this

and now we can perform any operation on

this array so let's say return

ar

plus 2. so what this will do is it's

going to return the whole array with two

added to each item of the array it's not

going to modify the original array

whereas if we do this for each this

performs like a normal for loop but this

doesn't return anything just like map

does so if i go on and say

const map result

and const

for each

result

and go on and console.log both of these

now let's go to our browser

and open the console so we get an array

in the result of the map so it returned

us the array but didn't modify the

original array so it returned us a new

array with all of the items

having a plus two

but the for each didn't return us

anything so both of these functions have

a different use case let's say if we

want to modify this array so what i'm

going to do i'm going to take the index

and i'll say

so what this will do is it will modify

the original array so

let's say i'm going to add 3 to it and

now i'll

console log this array

this was the array from the map and this

was the modified array which was arr our

original array now this was the first

difference now the second difference is

that you can chain stuff on map so i can

say dot and something we can let's say

if we want to do dot filter and do some

operation inside this filter so we can

do that with map but in forage since it

doesn't return any array we cannot chain

other methods after it so these two are

the difference that came to my mind at

that time so obviously there can be more

differences as well if you know any

other differences between map and forage

let others know in the comments below

alright so the next question was the

difference between null and undefined so

how i gave an answer for this is first

of all i told the interviewer that null

is an actual value but undefined means

that the variable is declared but it's

not initialized yet so let me show you

so if we go on and console.log

type of

null

you're going to see that the type of

null is object but if we do the same

thing with the undefined

the type of undefined is undefined

because this is not an actual value so

if we go to the browser

type off is not defined oops

type

off just like that yeah you see the type

of null is object and type of undefined

is undefined now a lot of people get

confused between undefined and not

defined so let me show you what that

means

so if i go on and let's say let a

and i declared it just like this and let

me remove both of these

and i'm gonna console log a so you'll

see that i get undefined inside of it

just like this because it has been

declared but the value is not

initialized but we can go on and

initialize it with a value

which can be null so null can be an

actual value unlike undefined so yep you

see we get null over here but if we

don't declare a at all then this will be

not defined

yep you see a is not defined now the

follow-up question for this was the

interviewer gave me these two things so

he said null

equals undefined now triple equals

undefined and he asked me to tell the

output for both of these statements so

what do you think is going to be the

output for this one so the first

statement is going to be true and the

second one will be false do you know the

reason why because double equals just

compares both of these entities without

matching their types but this triple

equals or the strict equality compares

the types of both of these entities as

well so this was more of a question

related to double equals and triple

equals so yeah now you know the answer

the third question was to explain the

even delegation

so first of all let's understand what

even delegation is so let's say if we

have an e-commerce site with bunch of

products listed on it and we want to

perform an event when we click on a

particular product so we are not going

to obviously

add the event listener on all of these

products right on on each item of the

list because that will fill our web page

completely with these events and it's

going to take a lot of memory so what

even delegation does is we provide the

event listener to the parent and access

the child elements with the help of that

event so let's go on and find out in the

code i'm going to go to the index.html

and below this

below the h1 i'm going to add a simple

div with id of products and i'm going to

add a bunch of list items inside of it

and let's see if this is rendered or not

yup this is rendered

now what i'm gonna do i'm gonna go

inside the script

js file and

i'm gonna say document

dot

query selector and i'm going to select

this products

and then we're going to have an event

listener of click event

and a call back after it

just like that we're going to take an

event from inside of it and let's just

console log this event and see what do

we get when we click on it

oops that's my bad i put the script tag

over here

i should have put the script tag right

over here

so now

yep it's cleared anyway so if we click

on any of these items

you're going to see that we get this

pointer event object and inside of it

target

inside of the target

we're gonna have a tag name

yup tag name of li so now we can target

the li items inside of it and also you

can see we get this text content

offshored since we click on this shirt

list item right below this i'm going to

say if

event dot

target dot

tag

name

is equals to

li

triple equals

i mean window dot location

dot href

href will have

this path

so

hash and let's say the name

of the clicked product

so event

dot target dot id let's see now when we

click on this this is going to route us

to that page or like at least have the

product name inside of the url so if you

click on this yep you see we get this

hash wallet so this is what even

delegation is without adding event

listener to each specific list item we

just added it to the parent and we are

using it to click the other list items

now the next question that the

interviewer asked me was he provided me

with this array and he asked me to

flatten the array so what does

flattening an array means so when we

flatten the array it's gonna look

something like this without these nested

array inside of it so first of all he

asked me to flatten the array just one

level so there can be multiple levels

right so we can have an array inside of

another array so stuff like this so

he asked me to flatten this to just one

level so what i did was

i simply

let flattened

and

i added an empty array dot concat

and just spread this array inside of it

so

ar

and what this will do is it's going to

spread this array and then concat it

with this empty array which will result

in one level of flattening so if we go

on and console log this

and check

you're going to see we get a flattened

array but this is not flattened

obviously because this was nested inside

of this one so

it's fair

it worked as expected but then

interviewer asked me to write the custom

array flat method so if you don't know

there is a method inside of javascript

called array.flat

so if you go on and say um let me remove

this arr dot

flat

and now you can see in the browser it

flattened the complete array okay so we

are supposed to give this depth as well

so let's say we want to flatten this

array to the two levels because

obviously there are only two levels

inside of this so if i put two over here

yep you see the whole array has been

flattened so we are supposed to write a

custom flat function for our array so

let's

remove this for now and

add a function called custom

flat

this takes an array

and depth

which by default will be one now inside

this to store the result we're going to

have a result

array an empty result array and inside

of that i'm gonna

for each through this

now here i'm gonna check if the provided

item is an array or not so i'm gonna say

array

dot

is array so this checks if the provided

atom is arrow or not basically and i'm

going to check if the depth still

remains if we are supposed to go

further inside of this array so i'm

going to check if depth

is more than

zero so i'm going to explain don't worry

this will actually be a recursion

technique so

we're going to call this custom flat

again inside of it so what we'll do over

here is i'm going to say result

dot push

whatever we get from this custom

flat

and we're gonna provide it this

remaining array

i'll explain this again don't worry

and we're gonna remove the depth

by 1. otherwise if this is not an array

then obviously this is going to be a

single number so this is already been

flattened right so

i'm going to say else

result dot push

ar

and finally below this i'm gonna return

result

okay so let's see what's going on over

here

when we go on and console.log

custom flat and we provide it with our

array and depth uh let's say two and see

if this works or not yep this is working

as expected if i give this one or let's

say if you don't give the depth

uh yep it flattened it by one level okay

so let's see what's going on over here

we we have a result array which is empty

inside this we are mapping through the

complete array that is this array right

here so first of all it's going to

encounter one array so it's gonna check

if this is an array

yup it's an array and it's depth more

than zero

yep by default it was one if we haven't

provided depth

so it was more than zero yep that's fine

so we went in and did result dot push

now it went again inside of it and this

time

array is this one this is the array and

depth is zero this time

right so now it went again inside of

over here array.forage and

it mapped through this one and two so

first of all it was one so it checked if

this is an array no this is not an array

so it went over here else result dot

push err so it pushed one into the

into this array so one then comma again

it looped through this item to it was

not an array again so it posed it again

inside of it so two

so it returned this complete object now

obviously this uh array is emptied so

it's going to return this result so it

returned this one comma 2 and we spread

it inside of result.push so this result

was the parent result the original

result where we were adding our answer

so it got added 1 comma 2.

now then again this is going to be the

same case with 3 comma 4 and it's going

to add 3 comma 4 inside of it so

similarly it's going to go much deeper

as it encounters more and more arrays

and flattens the complete array until

the job is done so yeah i hope

i was clear enough to explain this

custom flat function so let's move on to

our next question

so next interviewer asked me to show him

all of my projects so i already had

shared my portfolio with him so i'm

gonna go to my portfolio over here

which is this one

looks good isn't it the tutorial for

this portfolio site is coming soon on

our channel so make sure you're

subscribed to the channel with bell

notifications turned on

so i showed him all the projects one by

one and he liked this project a lot the

chat app with mindstack the tutorial for

which i've already created on my channel

so you can click the link in the

description or i button above to learn

how you can also build this project with

monstack so he asked questions like why

did you use a particular tech stack why

did you use this database and this

front-end technology and stuff like that

and that was it for round one

so for the first question of round two

the interviewer asked me the difference

between where let and const keywords so

first thing that i could think of was

that where is functional scoped and

let and const are block scoped so what

does that mean

let's go and find out so if i create a

block over here

and

let's have a var equals um

let's say hello

and if i try to console log it

to check if the scope belongs outside of

this block or not so yep we get this

hello over here but what if we change

this to let

it says a is not defined

but what if we change it to const

it's again going to say that a is not

defined it's because the scope of these

const and let keywords is only inside of

this these two curly braces so if i

let's say move this inside of over here

yup we get this hello but

that is not the case with where

now the next difference that i came up

with was related to declaration

so if i remove this and let's say right

where a

equals

five and now if i go on and say where a

again

equals 10

then that's completely fine it's not

going to give us any error

but

if we write let equals a and we try to

redeclare that

we're gonna get this error that

identifier a has already been declared

and the same case is with const as well

yep identifier a has been already

declared but what about initialization

let's check let's find out

so we've already seen that where

obviously can be initialized twice so

that's not a problem but if we make this

let and let me remove let from over here

since it cannot be declared twice so can

let be initialized again let's see

yes it can be initialized it doesn't

give us any error but what about const

assignment to a constant variable this

gives us an error so const cannot be

re-initialized

it cannot be re-declared or initialized

but let can be re-initialized now one

more major difference is that if we

remove this

value from here and let's say where a

then it can be declared without adding a

value inside of a right yep we can do

that

can we do that with let

yup we can do that as well but can we do

that with const

it gives us an error missing initializer

in the cons declaration so you cannot

declare const like this you have to

provide a value to it

so nowhere right now the second question

for round two was an output based

question on set timeout so the interval

provided me with this code snippet and

obviously we're gonna run this over here

so he asked me what is going to be the

output for this

so let's think about it most people will

think that since we are console logging

over here we are running a loop over

here for loop and we are console logging

each of these values inside of over here

after one second each so most people

will think that the output is going to

be this 0

1

2

is it let's find out

it is 3 3 times let's refresh the page

so 3 3 and 3 after one second each so

why is this happening this is because of

where

so what where does this we just

discussed in our previous question

so where doesn't have a block scope

where has a function scoped so what's

happening over here is

first time this runs

where value is zero but this is not

going to be printed right away because

set timeout only runs after the complete

code has ran successfully right so this

is not going to run so we have a

reference to that i variable in our

memory so we have a reference over here

let's say

okay then again the i is one

then we again have a reference to the i

variable

just like that and then i is 2 then we

again have a reference to i variable and

then the third time the value of i is 3

but if we obviously we won't go inside

of over here since it says that i has to

be less than 3 so we're not going to run

inside of it we come out of this loop

and then

set timeout has finished its time and

now our

js engine is going to print all of these

values so last time the js engine

encountered the value of i it was 3. now

here js engine is referring to the

current value of i so the current value

of i was 3 so it's going to print 3 3

and 3

just like that

now what's the solution for this

you may have guessed it right the

solution for this is using a let instead

of where

let's see the output

0 1 2 yes so what's happening over here

is let is block scoped so first of all

let's value was zero so it has the

completely different scope so in this

scope the value of i was zero so it's

gonna print it later on

then again

the second value of i was one so again

after the complete code has run

successfully it's going to look into the

scope of that i variable and when it

looks into all the three scopes it's

going to find 0 1 and 2. so this is the

logic behind this question so actually

this was the follow-up question that the

interviewer asked i just explained it to

you in one go so these were two

different questions that the interviewer

asked when we asked first to tell him

the output of the first with where and

then he asked me how we can print 0 1 2

so then i went on and explained him with

let

so this was the question but few of the

interviewers extend this question even

more they're going to say you're not

allowed to use let you're going to have

to use where instead of lit and you have

to

print 0 1 2. you have to give this

output

how are we going to do that so this is a

task for you all

i'm going to give you a small hint it's

going to use closures all right pause if

you're not yet following me on twitter

go to twitter.com push underscore eon or

click the link in the description down

below and hit that follow button right

now

i'm waiting for you

i'm still

waiting fine let's continue with the

video now the third question was to

explain call apply and bind so with call

apply and bind methods you can basically

manipulate the context for a particular

function so let me go on and show you so

i went ahead and created this object

over here where person which contains a

name variable and a function called

hello which is console.logging this dot

name says hello and thing which will

provide inside of this function so let's

go on and just uh let's uh

invoke this function person.hello

and i'm gonna let's say provide a world

over here

let's see what do we get

we get roadside coder says hello world

yep that's fair enough because this

this keyword is pointing to this person

object over here now let's see how call

works but before that i'm going to

create another object over here with

name pure chagawal so now what i'm going

to do i'm going to say hello dot

call

and i'm going to provide this this

object

so what call does is

call takes an object which is going to

become the context for this particular

function

and for the other parameters it takes

the arguments that this function is

going to take so i've provided the world

over here so now this should print

this name instead of this name

let's see

yep that's perfectly fine

now how is the apply different from call

so there's a very small difference so we

can say apply and instead of providing

params like this we just need to provide

them inside the array

and now over here this is going to be

provided to this thing over here and

let's see what do we get

yep this is what we were expecting now

what does bind do so bind doesn't take

this second param

it just takes a context and it returns

us a completely new function with this

context so i'm gonna say const new

person

and now this can be invoked

just like this

and you're gonna see uh oh okay we

didn't provide it the

argument which was this so we can say

world

yep that's that's what you were

expecting

yep so this was the difference between

call apply and bind now the next

question was on infinite carrying so if

you have seen my previous video on this

front-end interview series i was asked

the same question in the cast 24

interview so you can go ahead and watch

that video there i've explained this

question in a more in-depth way so link

will be in the description or i button

above so you can go and watch that video

now for the fifth function the

interviewer gave me these three

functions right here and he told me to

write a compose method basically a

polyfill for the compose method which

will evaluate all of these three

functions so if you don't know what

compose is basically what compose does

is

let's say if i write

const evaluate

there's going to be a compose function

oops

which is going to take all of these

functions right here so let's say add 5

subtract 2

multiply 4 so it took all of these three

functions and then it's going to return

another function which will take an

initial value

so i'm going to console.log evaluate and

it's gonna take initial value let's say

five so what this is going to do is it's

gonna take five and first of all it's

gonna send five to this multiply four so

five into four is twenty

now that one the result of this function

is going to be sent to this subtract 2

so 20 minus 2 is going to be 18 and the

result of this that is 18 is going to be

sent to add 5 which is going to be 23

over here and then it's going to be

returned

to us here and we are going to console

log 23. so this is the function that we

are supposed to write over here so let's

see how we can do that so i'm gonna

comment this out for now and i'll say

const

compose

so now what's the first thing that we

are supposed to do

we're supposed to take all of these

functions right so all of these

functions so i'm just gonna we don't

know how many functions the user is

going to supply us so i'm just gonna say

functions

yup so this is going to take the array

of all of these functions

now inside of it

i'm going to return another function

and this will take arguments for that

function for these functions and now

instead of this is going to be the main

logic of this compose

we're going to take all of these

functions

and we're going to reduce right so there

there are two types of such functions

one is compose and the other is pipe so

what pipe does is pipe evaluates from

left to right but compose evaluates from

right to left so i'm going to say

functions dot reduce

right

so we're going to reduce it from right

to left so it's going to take two things

first is going to be the argument which

was received from the previous function

and a function the actual current

function and i'm gonna say function and

provide that argument to that function

and it's going to have an initial value

which will be rx so if you can see we

have provided an initial value over here

so this is going to be rx just like that

um i believe this should work let's see

this should give us 23.

we're getting undefined why is that

oh it's because we're supposed to return

over here

yep

let's see yeah we get 23 as an output

so yeah this is what the compose

function is this is a really important

interview question and i would recommend

you to go and try the pipe as well now

the sixth and the last question for this

round was to implement promise.all now

what is promise.all let's see so before

uh explaining promise.all i'm going to

create a few promises

let's say first is going to be show text

which will show the text after given

number of time

and

let's just implement this now so so

promise dot all takes a bunch of

promises so first of all let's say show

text

and this is going to take a text like

hello

and a time which i'm gonna say let's say

one second

now the second promise that i'm gonna

give is promise dot resolve

resolve

and let's say hi

oh also this is going to be

an array oops

both of these promises are going to be

an array it takes an array of promises

and then we're going to add dot then

let's say value and whatever the value

that we get

so what this basically does is it takes

a bunch of promises

and it resolves all of them if all of

them are resolved it's going to return

an array with all of the resolved result

so in this case we are going to get

hello and high yup just like this

so it waited so let me show you so if i

refresh the page it's gonna wait for all

of the promises to get completed so it

waited one second for this to get

completed and then it printed both of

these promises together but what if one

of these promises fail

so i'm gonna say promise dot reject

buy

then what's going to happen then all of

these promises are going to fail any one

of these promises fails the complete

promise.all is going to get failed

so let's create the polyfill for this

i'm going to create a function

my promise

all

and

it's going to take a bunch of promises

as

the arguments

inside this i'm going to have a result

array it's going to be empty which will

contain the result for all of these

promises at the end now i'm gonna return

a new promise

which will take resolve

and reject

just like always

now inside this i'm gonna for reach

through all of these promises

so promises the promises that we receive

over here promises dot

for each

and now for each promise so i'm gonna

take a single promise over here along

with the index

i'm gonna do some things

so i'm gonna resolve each of the

promises so promise dot then

and i'm gonna take the result

and if this gets successfully resolved

i'm gonna add the result

to our result array so result.push

is going to be um let me rename this to

res

i think that's better

so res

i'm gonna add this to our result array

and now i'm going to check if all of

these promises are resolved now so i'll

say if

index

is equals to

promises

dot length minus 1 oops

length

minus 1. so if this is all of the

promises are resolved so i'm going to

resolve the complete thing

so resolve oops

resolve

the result

just like that but if any of any one of

these have failed i'm gonna check

so this was dot then and after this

is going to be dot catch

if any one of these promises have failed

then i'm going to instantly fail it and

i'm going to reject

with the error

just like that

um i believe this should be it let's

let's find out

i'm gonna provide it with my promise all

and let's see if this works or not so

this should fail

with yep as expected it should fail but

what if we remove this failing condition

this should give us hello and high

yup we get both of these result in our

array so yeah that was what the

interviewer was expecting from me and

this concludes our round two of the

interview process

so the third round was on react.js so

the first question for this round was to

explain the lifecycle methods in

react.js both by using class components

and functional components so i went on

to explain it with the class component

first so

let's let me move this function right

here

and i'm gonna add a class app

extends

react dot

component and inside of this class i'm

gonna have let's say a render so now the

first life cycle method is component

dead mount

so what does component mount do

so let me write it componented mount

and component mount basically runs when

our app is rendered for the first time

when our component is rendered for the

first time so i'm gonna console.log over

here

component dead mount oops

component mount runs

so let's see

let's open the console

and you can see the component mount runs

for the first time

so basically we use component in mount

for use cases like when we want to fetch

the data from an api or let's say when

we supposed to provide some initial

value to some state and stuff like that

then there is component date update so

for that um let's say

let's i'm going to create another

component over here

so

create a new directory called components

and inside of it i'm going to create a

new file called let's say

counter dot js

and this counter is going to have this

simple class component with a number

prop that i'm going to send to it so

what i'm going to do here is i'm going

to create a local state

so state

and this will have a num of zero state

when we click on this button it should

increment this state let me first of all

import that component over here so i'm

gonna add

some fragments and inside of it i'm

gonna import

the counter

just like that and it's gonna take this

num

so this counter had which prop

number prop

so i'm gonna provide number

to be this dot state dot num

so it's obviously zero times right now

when we click on this button it should

increment this so let me create a handle

click function for this so what this

handle click will do this will set our

state to plus one

so let me invoke this real quick over

here so on click

this dot

and click dot bind

this

so this should work let's try it out yep

this is working cool now let me

demonstrate component did update

so if i go inside this counter

so component did update takes a few

things first will be previous

props

and previous state so that we can

compare

our new state with the previous state or

new props with the previous props so i'm

sending this number over here right i'm

going to say whenever this number

changes that is whenever this prop gets

updated do something basically do a

console log or something like that so

i'm going to say if

previous props dot

number

is not equals to the current

that is this dot props dot

number

then let's say let's console log

componented update

runs

so yeah let's see

if we refresh our app

component in mount runs okay fine if we

click on increment oh you know what i'm

what i'm going to do i'm just going to

bring this

in this component itself so that you can

see the life cycle of this component

yeah

so

i'm gonna remove this component now

now notice

when i render this component let me

clear this console when i enter this

component it's gonna render component

mount runs but whenever the prop changes

you're gonna see component it update

runs every time every single time so

this is what componented update does

whenever the props gets updated or state

gets updated

now there's a third lifecycle method

which is component will unmount so

component

will unmount so this will basically run

when the component is removed from our

app or when basically when it's

unmounted

so um

runs

okay cool

so

whenever we do anything this doesn't run

at all but when we remove this component

you're gonna see

component will unmount runs yep so these

three were the lifecycle method

obviously there are more lifecycle

methods but these three are the main

major lifecycle methods in react these

basically define the complete life cycle

of a particular component from mounting

to updating to getting unmounted

okay so now let's see how we can

implement this by using functional

component

so i'm gonna go inside of over here i'm

gonna

remove this counter class and i'll just

say function

counter

and basically create a simple functional

component and this takes a number prop

and i'm going to return

cool

so whoop

my bad

so this is what a simple functional

component is if we go and increment this

yep it runs

so how do we use lifecycle methods

inside of it so to use lifecycle methods

inside of a functional component we use

a hook called use effect

so use effect takes a callback

and has our

array of dependencies so first of all

when we write anything inside of this

with the array of dependency as empty

is it component

yeah let's um let's clear this console

and mount this component again so if i

remove this and mount this again you see

component is mounted it's going to be

run just one single time because the

array of dependency is empty we click on

increment nothing happens

cool so how do we update this

whenever we so if we write anything

inside of over here so let's say if we

write number inside of over here

whenever the value of number changes

this is going to run so i'm just going

to say component is updated

let's see

yep you can see the updated values going

up

number of times it's getting updated

it's going up yep that's that's what we

were expecting

so this is component dead update with

functional component now how do we

implement component will unmount with

functional components so for unmounting

we just say

return um return

and we return an empty function

with

let's have a console log here

this is unmounted

let's see if this works or not let me

clear this up

and now if i

go on and remove this

you're gonna see this is unmounted so

this is how you implement all of the

lifecycle methods with the help of

functional components in react

now the next question for this round is

one that is asked a million times in

these web developer interviews are you

ready

drum roll please

ways to center a div yes this was the

question that was asked in this round

and i was never more prepared for a

question than this question i was

waiting my whole life for the

interviewer to ask me this question so

let's go on and find out how many ways

does roadside coder know to center a div

so i'm gonna go and open the html file

and over here let's say inside of this

body i'm gonna have a div

and inside of the div i'm gonna just put

this h1 tag

let's go inside of the style.css

um you know what i'm gonna put it right

over here

i'm just gonna say div

and let me just give it some background

color for now

let's give this color probably so for

body i'm gonna do

is this

width

to be hundred percent

and

height

height to be hundred percent

okay cool now to center this div three

ways came to my mind first one was by

using top and left

so um let's say top fifty percent

and left

fifty percent

oh and i'm gonna give position to be

absolute

now to align it back to the center i'm

gonna say transform

translate and i'm going to translate

back by 50

on both

axis

oh i mean mine is 50

[Applause]

second method

to center our div will be by using

flexbox

so i'm gonna remove all of this thing

and i'm gonna give it display

flex

yeah

now since we have given a display flex

i'm gonna give it justify content to

center

so it gets centered

at the middle horizontally centered and

then i'm gonna vertically center by

align items center

and this doesn't work because okay

height i'm going to give

100 vh

yup this works

great let's jump on to the third method

and the third method is by using

display grid so instead of display flex

i'm just going to add display grid

and it's not going to make any

difference so if i comment this out

oh okay but we're not concerned with

that so yeah so it we have centered it

successfully obviously they are there

can be more methods to center a div but

like these three were the methods that i

could remember at that time now the next

question for this round was what is css

box model

so let's find out

so since we have created this div

already i'm going to reuse this

so this div has

let's give this div some width

of

i don't know 200 pixel

oh

400

ah this is fine yeah four in pixel i'm

gonna give it some border

so border let's say five pixel

solid

black

okay i'm gonna give it some padding

of 20 pixels

and some margin

of 20 pixel

okay so these four are the properties

which combine to make the css box model

every single html element has these four

properties right so these four combine

to form a box element let me show you

that visually so if you go to inspect

and this div is selected right yeah this

div

so

over here in the computed you can see

these four properties so we gave it some

width of 400 pixels some padding of 20

pixels some border of 5 pixels and some

margin of 20 pixels so these four

combine to form the box model for our

html element

now the fourth and the last question of

this round was to implement a d-bounce

function in react.js

so what is d-bounce let's go and see so

if i go on and open

flipkart.com

so flipkart is an e-commerce website so

instead of here you can see there's a

search bar

right if you go on and search

let's say dslr camera

did you notice something

when i stopped typing after a few

millisecond the result came so if i

let's say remove this just when i stop

typing only then these results get

updated so let's say if i type hats

see or let's say jackets

after i'm done writing jackets it

fetches all of these results so this is

called debouncing in debouncing when we

write something inside the search only

after we have stopped typing only after

a few milliseconds or however time which

we want to keep inside of the debounce

it's going to perform some action i'm

going to close this now and

i'm going to create an input tag here

and whenever we type inside this input

tag i want only after one second when

i'm stopped typing it should print in

the console so

i'm gonna

go over here and create

const

my d bounce

now this d bounce take two things first

thing is going to be a function or a

callback and second thing is going to be

a delay

so i'm gonna first set a timer over here

let timer

and then i'm going to return a function

which is the debounced version of the

function

that we got

and sort of this first of all i'm gonna

check

if there's something inside of the timer

if the timer is still running

then clear timeout

and i'm going to provide the timer id

and after this i'm going to set that

timer if there's nothing inside the

timer then i'm going to say set timeout

and this set timeout will have the d

that we provided the delay

and start the set timeout we're gonna

run that function so call back with the

arguments args

just like this so let me explain this

once again so let's say if we are typing

something inside of this input box and

it came it comes over here so a timer is

initialized right so over here

it's gonna check if the timer is

initialized or not so it was not

initialized

so

it created this set timeout of let's say

um let's say one second so it's it has

created this set timeout of one second

that it's going to only run after one

second but one second didn't get

completed and user again typed anything

inside of the input box then again this

will run and it's gonna check if there's

something inside the timer then clear it

out and this is going to run until user

stops the typing and then this set

timeout will get to run completely

so let's test this out

i'm going to create a const

handle

change

and my d bounds oops my d bounce and

this will take two things first is going

to be a function and other will be the

delay so i'm gonna give one second of

delay

so this d bounce i'm just gonna say

console.log and this will take an event

event dot target dot value so this comes

from here input so i'm gonna say on

change and i'm gonna provide handle

change

yup so this should work let's see let's

clear this up

and if i'm tapping anything nothing

happens but when i stop

yes it prints after one second so this

is what debounce is all about

so yeah i'm typing anything over here

yep and we can provide it any time that

we like one second two second five

second it's your choice so this is how

you create a polyfill for rd bounce so

yeah that was round three based on

react.js and ui stuff and round four was

basically an hr plus cultural round this

round was more of a discussion on how i

would react in different situations and

approach problems and team dynamics

culture fit etcetera and that concludes

all of the rounds for our interview if

you like this video give this video a

huge fat thumbs up and subscribe to the

channel with bell notification turned on

and if you would like me to make more

such interview videos just let me know

in the comment down below and share this

video with your friends so that they can

also get benefit from these questions