Frontend Interview Experience (Unacademy) - Javascript and React JS Interview Questions
Summary
TLDRThis 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
📝 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.
🔑 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.
📚 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.
🔄 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.
🤝 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.
🎼 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.
🌀 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'.
📏 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.
🏆 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.
Mindmap
Keywords
💡Front-end Developer
💡JavaScript
💡React.js
💡Map vs. ForEach
💡Null and Undefined
💡Event Delegation
💡Array Flattening
💡Let, Const, and Var
💡Set Timeout
💡Promise.all
💡React Lifecycle Methods
💡CSS Box Model
💡Debouncing
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
Ver Más Videos Relacionados
A react interview question on counter
Oracle Interview experience|2023 | Associate software Engineer | 19.18 LPA | Pihu | Aim2Crack
How To Crack Product Manager Interview | Career Path | Interview Tips | Product Management | UpGrad
Top 50 Accenture Interview Questions and Answers | Accenture Interview for Freshers | Simplilearn
Javascript Interview Questions ( Var, Let and Const ) - Hoisting, Scoping, Shadowing and more
java microservice telephonic interview of 10 years experienced
5.0 / 5 (0 votes)