This content is a transcript of a technical interview covering various JavaScript, React, HTML, and CSS concepts, focusing on practical application and understanding of core principles.
Mind Map
คลิกเพื่อขยาย
คลิกเพื่อสำรวจ Mind Map แบบอินเตอร์แอคทีฟฉบับเต็ม
so proin should we start with the
interview yes yes can okay uh so write a
function okay and write any string you
want write console log and write any
outside okay or instead of okay you have
written string right uh write abc
dot instead of in console log in console log
log
yes yes write abc dot okay uh write do XY
XY
z z and you have called the function uh
after calling the function
right okay uh ABC do XY
Z okay equals to
400 okay okay and after that write ABC
do XYZ is equals to 200 XY equals to 200
again and tell me what will be the
so
XY so here I think XY Z will be the
methods of the function right so we are
accessing ABC doxyz is equal to 400 ABC
300
not I think it will be undefined because
of the
hting undefined uh it will print that's
it yeah yeah because of the hting
because we did not assign any kind of uh
so only only one time undefined it will
print you mean to say yeah here because
we are accessing only one time right
yeah so we are calling two times I guess
yeah we are calling two times yeah we
are calling first here and second here
yeah so it will print one times
undefined you want to no one time
undefined and second time you're calling
the function right yeah so uh it will
take 400 and again I think it will be
overd by to 200 oh yeah so okay so first
time undefined second time we'll get 200
I think okay so undefined and 200 will
be the output you meant to say yeah okay
out if you want if you want you can
remove as well it depends on you okay
yeah uh so uh there are three uh phases
of event propagation do you know no sir
I'm not okay no worries no
worries okay okay
okay
uh write const numbers write an array
with any write any four
elements okay and and numbers you have
written so number uh on the next line
write numbers of
100 number Square yes write
500 okay and uh print it console log of
numbers and tell me what will be the out
okay in this case uh we have an array of
1 2 3 4 yes and uh so now the length of
the array is 0 1 to 3 like yeah the
length of the AR is four currently and
we are directly pushing the 500 into the
100th index so I think uh the the 100th
Position will be assigned with 500 and
remaining uh elements will be empty
items I think I guess okay so do you do
you think is it the right way putting at 100
100
index 500
value yeah but uh we are actually uh
just pushing the value beyond the limit
yeah so is it valid yeah it's valid but
we'll get an empty items okay okay yeah
I just wanted to ask like whether it is
valid or not yeah it is valid but we'll
get an empty items empty items at yeah
every position yeah from fifth position
to from 99th position we'll get an empty
items okay and uh in the 100 index we we
are assigning 500 so at the 100 index
the array will be at the 500 value okay
so remaining all I think it will be
filled with an Mt okay okay fine fine
fine fine okay you can comment this all
out and write console log
100 okay and what will be the output
output
okay so here uh type of type of 100 uh
actually a type of 100 is a number okay
and that number will be printed as a
string in the console I guess so we we
should get a string as an output because
uh if we currently if we for example if
we remove this and if we directly just
consol the type of 100 yeah I guess it
will will uh we we can see the output as
a number okay so again that number uh I
think it will be generated as a string
so again uh so the result of this will
be a number as a string so again we are
just taking the type of a string I think
it will be string sir the output will be
string okay okay
out okay write an ARR
right with one element you have to write
want yeah and before that string write triple
triple
Dot and on next line print that ARR ER
out okay we have assigned a string to an
operator I guess the output will be this
only are you
sure I'm not sure but uh so these all so
I'm assigning my name to my name here
yeah are thinks this entire element was
only one element okay and we are
currently spreading that element yeah
destructuring yeah destructuring only
that element because see if we uh do
like this for example array might think
a different characters are present in
the array so but we are only assigning
the string as as only one element inside
the array you have a word there yeah
exactly we have a word here inside the
array and we are just restructuring that
array uh I guess uh the output uh yeah
we we'll get only this as an as a
result okay it can't
destructure the string can't be
destructured me to say yeah because uh
we have only one word here right so I
guess so if we have two elements for
example uh it can be destructured but I
I'm not aware whether it can be
destructured with the one element inside
this oh okay yes yes yeah yeah okay do
you know about
parent yes
what it does like it it basically
converts uh into a number okay yeah then
parent as a string write uh 10 +
2 10 no no inside that one string only
10 + 2 uh just copy this pass in console
l just copy this yes and again copy this
I will tell you one more okay for second
yes write it capital if you can yep FM
m7f and you told me it will be converted
into number okay so now tell me the
three so we
um actually we are uh involving the
expression inside only one string so
this is not two uh these are strings but
these are not a separate strings okay um
we are actually
uh see uh the thing is like uh this is
not a two different types of strings
right so this is not a two strings we
are only uh calculating this expression
inside one string okay so 10 as a string
plus as a string two as a string so
so
okay what will
happen so I think it might take the last
value I guess it will take the last
yeah that's what I'm saying so okay
first one you are not
sure yeah first one I'm not sure but uh
I think the remaining two yeah alphabets
are un through
inv so F and
system can you zoom a little if you can
okay first one you are not sure what
one I think we'll get an error for both
of these cases if I'm not
wrong okay
error yeah why because it can't be
converted into integer yeah because yeah
because uh there are strings in Dred in
this right the string can be converted
into number so but that that string uh
should be uh
convertible to a number because F and so
they are not converted into number yeah
exactly so if a particular string can't
be converted so you will receive
error not [Music]
[Music]
sure so suppose uh if you
check whether you know is an right
what's the role of
of
so is n n is an N so yeah he is not a
number yes so what it
does basically it checks whether the
given expression is uh is a spring or
not basically if we try to access number
okay okay yeah yeah so if I for example
if I uh give uh so if I try to give this
uh for pass so we might get uh it's not
a number because uh this this expression
can't be converted to a number and we'll
get is's not a number for this
expression okay you will get not a
number right he's not a number he's none
is an N so if you put that provin in is
an n and you print it so what it will
you will
N don't put there don't that's a separate
separate
question okay is a
n okay uh write
write
Prine and if you put that in console log
receive don't run it h yeah yeah I'll
not answer
yeah we'll get true sir you will receive true
true
so now you can comment this out or you
can remove this out okay now what will
be the second what do you think you will
receive error or if you try to convert
into a number it may not receive number
yeah because
F so if you can't convert it into a
number then you will receive error or
you may receive not a
number yeah will get not a he he's not a
number he's n is an is a function where
no no no we'll get not a number and then
not a number so I'm not saying whether
you will receive uh this [Music]
[Music]
two n like it it won't receive a number
I'm not saying but if you're saying that
you won't be able to receive the integer
or a
number yeah because see only seven is
involved it can be converted to number
so I'm not talking about seven so coming
to talking coming to this F
and M so this cannot be converted into a
number right so in that case what we
what what will be the output your asking
right yes you told me that it won't be
able to convert into a number and you
won't receive a number and that's why
you will receive error so what I wanted
to say is if you won't be able to
convert into a number so it will receive an
an
N yeah okay so
but I'm not saying that it won't receive
the number or not but as you told that
it won't receive a number so the
resultant of that of not receiving a
number will be NN I wanted to say but
you were saying error but I wanted to
rectify that you will receive n now it's
up to you whether it will receive a
number or not you can tell me no because
uh see if we for example if we try to
use parcent and if we give uh any value
inside that parent parcent price to
convert the entire value into the number
or it gives a name because here seven
can be converted okay but F and N can't
be converted so in this case we might get
get NN
NN
okay okay and the third
one yeah third one is also same I guess
okay so second and third one will be NN
okay and the first
one yeah first one that's what not sure
yeah yeah I'm not sure okay
out you can pull your terminal a bit up
if you want you can drag s 10 79 yep
okay yeah so I think it is just taking
the first values but what about the
second and third
what's happening there yeah because see
now I got the uh now I got a clear bit
idea yeah so uh uh previously I was
saying it might take the last value
right so in this case it is just trying
to access the first value so the first
digit is 10 here the first digit is
seven yes so it is directly accessing
these both numbers and converting into a
number yes but in this case the M cannot
be converted because the m is placed at
the starting right but in said that
there is seven right so yeah ins said
that so if if the first value I think if
the first value cannot be converted into
a number it it may give a name so the
result yeah ised like that only here
okay yeah that that
was yeah now I got a bit idea because
previously I was thinking it might take
the last value yeah so I'm wrong I'm
wrong with that it is taking the first
value and it is whether that can be
converted into a number so if it is it
may print the number so if not but it
won't go to the remaining num so it only
checks the first yeah okay you got it
out okay uh write a console
log okay and inside that uh write an
array whatever elements you want you can
write three elements whatever yep okay
fine uh do map apply this
map do map
uh write for number
number
number uh
write if number greater than
than zero
zero
okay y uh and on the next line right
two n into do okay and and and yep uh
tell me what will be the output and why
yeah uh so uh see map basically uh gives
a separate array so uh it will give the
another array so we are checking uh we
have one and two inside this array and
we are just mapping so if this each
element is greater than zero we are
returning nothing so if this condition
is false we are just multiplying the
number with two so because this this
condition is true we won't get anything
as output because this condition is
true okay so this condition is true we
we are returning nothing here so if this
is false we are returning number into
two okay so because see one and two are
greater than zero at any yeah so this
condition will always false yeah so this
is true we are nothing we are rning
nothing so we are just empty so if this
condition is f it will go to the next
line and it may print the number into
two okay so what will be the output now
nothing we won anything sir so empty
console I okay so if it doesn't return
anything so it will receive empty you
say it doesn't return anything then
tried so you told me empty it will
remain empty you understand yeah yeah okay
okay
so okay there a question just hold on
just hold on you you can commment this
out yeah we will come to this and uh
write write a
function okay and write
write
return okay that's it and uh call this
function and what you will receive the
contr yeah okay
yeah okay so this is a function and we
are ning nothing else we might get
undefined sir
so so here it is returning nothing thing
and you are saying
undefined yeah yeah I guess see uh
basically this is also a function right
so yeah we might get undefined sir I'm
sorry I'm sorry for that here also we
might get undefined undefined are you
sure because yeah yeah undefined yeah
I'm sure okay so here in function you
will receive undefined that because we
are not rning any kind of thing right so
we are not rning anything so you will
rece we might get yeah okay okay you can
remove this out
then okay
okay now you will receive what only
undefined that that's
it undefined is a falsy value so if we
console. log undefined undefined is a
falsy Val so we might get false you will
get the result okay yeah we'll get a
result uh for sure we we might
get so the code uh this condition is
true we are returning
nothing yes sir we might get undefined only
only
undefined can you show me in the
comments what you will receive and then I
I
can so see basically uh we just the
checking the whether the number is
greater than zero so if that is if the
if the number is greater than zero we
are rning nothing okay nothing yeah so
yeah if this condition is false the this
statement might get printed but this
you might
nothing for this what you will receive
output yeah for this line for this line
no I want full console okay okay okay
okay yeah yeah this line won't get
executed so we can just leave this line
so for this console
DOL we returning nothing we might
get see first I thought uh we might get
or okay I may EAS you out okay the array
has two
elements okay okay what map will
do it gives an another array it won't
mutate the original array map basically
tries to uh create an another array of
that okay so on the first element what
it will happen it will return if num
greater than zero first it will take one
yeah it will take one and it Compares
with zero zero greater than zero and it
will return nothing
nothing
yeah then that's it or
like only for the first element it will happen
happen
no it checks for the entire number so
what now there are two elements I told
you that we might get one and two one and
and
you greater than zero
return return true true
yeah so I told you undefined
yeah you are nearer but tell me the
exact output now yeah undefined so if we
go a little bit deep undefined is
considered as a faly value so faly is
zero nothing
but I'm
not but we must get under Define because
we are not returning anything inide this
yeah Define there are two elements that
I can say so if you undef UND yes
yes undefined actually was yeah yeah it
was undefined undefined yeah yeah so
we'll get the undefined printed same
equal to the length of the array right yeah
yeah
so no it will loop on each map will
iterate on each yeah yeah exactly yeah
it works same as a 4 each Loop
yeah another another array but for won't
for mutates the original array but map
won't mutate the original array yeah
yeah okay
fine okay write a function
okay and write console log of whatever
you want XY Z yeah you can write
yep okay okay and write it in scope now
scope how you saying sir I'm sorry like
how you written console log of proven in
scope right similar function in
scope okay you're trying to access this
function another inside the another
function no no no no no right Li okay
block scope okay block scope okay yes yes
okay and yeah just call it outside and
tell me what will be the
nothing tell me what will be the
output I think we might get our function
AB C is not
declared because uh it is written inside
the function so this function has a high
priority inside the block scope and we
are accessing the function inside
outside the outside the scope
actually okay so I'm pretty sure with
the variables but I'm not sure with the functions
actually so where where can be called
outside also but I'm not sure with the
functions I think a function ABC is not
declared will get as the output ABC is not
not
declared yeah because we are just
accessing inside the block scope right
okay just because you are written
writing in Block scope you are not able
to access you to say so functions can be
hoisted right yeah yeah functions can be
hoisted so it means functions can be
accessible outside of the block scope
also are you sure no so so no one second
one second so we we'll not get the apcs
not declared as the
output functions
ABC so ABC is declared inside the
bracket the scope and we just conso Lo
ABC we might get PR as the output so not
ABC is not decleared are you
sure yeah because functions are
hosted in
JavaScript so that scope it doesn't mean
anything you me
so it only behaves as a
rare variable I
think so you are sure you meant to say
Pro will get printed yeah I guess okay
okay fine fine
it's yeah that's right basically okay uh
okay write you
stct write
usct will this affect anything no sir it
won't effect no are you sure yeah I'm
then okay do you know about the windows
scope window scope yeah yeah I have a
basic idea see uh Windows scope is
nothing but basic if we assign a
variable without any kind of keywords
and all so that we be directly going uh
going into the window object inside the
global scope I guess so okay okay so you
meant to say they are hosted yeah they
directly uh going into the window object
that is global global scope yeah so they
are hosted right yeah yeah so Global
scope uh it behaves like a w I guess it
behaves like a where but it so there is
no difference you me to say where and if
you write Windows
scope okay I'm asking this so you're
asking whether it is hosted or not yeah
in Windows SC y okay I'm not aware of
that okay okay no it is okay you can
output see basically
uh we are using strip mode here yeah so
the same as we just discussed here I think
strict mode so if we don't use strict
mode this can be converted as a global
variable with the V
keyword and
uh no with the V keyword it won't be but
yeah Global yes yeah if we so if we W
because basically they are different
where can be hosted exactly yes yes yes
yeah where can be hosted but uh so here
we are not declaring anything so we are
not using where let or const yes so and
again we are using ustri so if we for
example if we want use ustri here yeah
so this can be converted as a global
yeah so A and B becomes as a global
scope but we are using UST here so we
uh we might get an error sir you might
get an err are not de yeah
adisha yeah why because of you stct yes
so uh ustri strictly checks uh whether
so usts I think in UST mode this cannot
be converted AS Global I guess UST
cannot be converted as a global so UST
particularly checks whether the aable
variables are declared with any kind of
keyword yes yes yeah so it s for that
because so we are using ustri here and
we we are not assigning any kind of
keywords here besid A or B so UST
any so UST checks basically uh UST
basically sees if any of the keyword is
present or not so here there is there
are we are not declaring these variables
with any kind of keyword so we might get
basically usct uh it allows you to have
a right practice like you should be
having uh exactly yes yes with let where
yeah yeah let yes so it's a strict
checking yeah it's a strict checking so
we might get an error here so as I told
so what about the values you are passing
yes basically uh it gives high priority
for the inside uh inside a block scoped
variables okay so this won't be taken as
the over return values because we
already have so I'm Notting I'm not I'm
talking for example I'm talking without
the ustrip so for example we we can
assume that here we don't have ustp so
this can be converted into Global and uh
these values will be written we get
these values only we'll get as an output
because see uh basically where uh this
uh this will get high priority inside
the bracket because these variables are
inside the scope and we are having 100
and 200
yeah I think this won't be get affected
inside the function sir so we'll get
this values only but in this case we'll
get an error here you'll get an error
yeah you have written comma or plus
return arguments of
zero comma right plus plus okay yeah
that's what I'm saying yeah that's what
say yeah so you meant to say it
will a and a = to 100 and B = to 200 it
won't take exactly so without use St
we'll get the output as 300 300 okay
yeah yeah because uh
this us you will receive exactly error
error error error yeah because ustri
chly stricks for the keyword we should
assign the variables with any kind of
keyword where let all con so in this
case we are not we are assigning without
uh the keyboards so we might get an
error here so without H St we'll get 300
as an output because this console.log
won't be printed because in in a
function if we if we write any kind of
expressions or values out next to the
return so the function thinks this is
the last line okay so yeah so after
return won't be uh any line won't get
executed or okay so you will receive err
output no no no we we will not get an
error so this will get undefined I think
okay okay they're undefined and on the
return on the return then uh if we have
UST strict uh we definitely get an error
so if we don't have UST strict we'll get
300 as an output okay no UST strict will
be there so now what will be the output
now yes we will get an error sir because
yeah okay so if you remove UST strict
you will receive output as 300 and
undefined yeah okay after okay I thought
after return statement any statement
doesn't work I thought yeah yeah exactly
yeah but you told me
undefined yeah I was thinking like uh no
no first I said no sir this this
statement won't get executed totally so
undefined will appear or not no no no
will not appear I guess not sure this
won't this statement won't get executed
no sir this line won't get up here okay
it was say okay fine so okay so this
code won't uh
execute yeah right now because uh we'll
get an error here okay so now what will
be the output you will receive error you
me to say yes yes now we get we'll
then yes sir so arguments arguments uh
ARG write return arguments WR uh a don't
write args WR AR
arguments arguments okay yes yes
yes yeah can I run this and you will
receive error right yeah run this yeah
yeah so these values are overwriting
with this one okay okay so you got it
right yeah yeah I got it sir so they
they are overwriting by these values yes
if you had written where then it would
have taken that yeah yeah yeah because
yeah yeah I got it
okay so it directly going into the
global object but it is not assuming it
as a v so it is in a global object so it
these are over written by they they
won't be taken 100 to 100 because of uh
yeah yeah exactly they are not defined
with yeah I got it I got I got it yeah
thank you thank you for this okay can
you tell me the uh any mutable array
examples mutable AR examples yes um you
know firstly what what is mutable
yeah yeah so changing the original yep
yep modifying the original yes so in
examples for each for each for what for
each does so basically for each mutates
the original AR for each only used for
iteration purpose yeah yeah iteration
but we won't get a separate array as map
so far is used only for iteration okay
uh so you're asking about the array
methods right yes array methods so shift
method uh is it mutable Arrow no no
shift yes yes it's it's a mutable Arrow
yes sure so shift yes I guess so shift
and shift is used to add elements from
starting I guess shift and
shift yeah and
slice slice slice yeah slice slice and
slice is nothing but uh no no no okay
you know it right slice
slice or not yes okay
okay so if you slice not sure of that
but okay okay what slice does so we can
get uh slice or give the particular
values from starting index to ending
index so we can mention that no no
what's the function of it uh splice
you're asking slice or splice
splice splice yes okay so if we want to
remove remove particular element from
the particular index so uh we can use
splice method that okay for removing
only it is used for removing or adding
also for removing adding okay that's it
yeah you you can remove it or you can
add it yeah you can't replace it yeah we
can replace I think we can replace it
yeah okay so I don't know whether that
mutates or not I guess okay and what
slice method does slice method for
example there are four elements in an
array we particularly want from second
index to last index so we can use SCE
method and we can retrieve that values
from the array okay from the array we
can access a certain portion you exactly
yes yes yes okay fine fine yeah you know
about find method right exactly yes I
know what it does so uh we can find a
particular value using uh a find method
okay so the number so for example uh if
you can find uh with the uh names or of
particular expression using find method
so if the number is greater than two or
something yeah so we can use this kind
of expression okay so Suppose there is a
array 1 2 3 4 5 6 7 8 and we are
applying greater than four okay in find
method so what it will return the output
guess repe question hello uh maybe got
stuck okay so what I was saying uh the
find method is there okay and uh
there are array elements 1 2 3 4 5 6 7 8
okay and you are applying a find
condition with a condition greater than
four greater than four okay so so we
will get 5678 sir 5678 are you sure yeah
uh so okay uh you can do and show me the output
5678 right yes yes sir okay uh run this then
yeah so it iterates over the each
element and it checks whether the number
is greater than four or not yes please
don't put on the yeah yeah so I'm
confused whether this number
particularly checks for one number or it
gives all the numbers which one number
you want to say no no one
so see uh
like I'm I I'm guessing we'll get output
as a 5678 567 okay yeah because uh these
filter condition if we apply in filter
condition num greater than four so what
it will provide then so it it it gives
an another array uh satisfying this
condition so 56 78 it will provide
exactly and filter condition is also
please don't put that yeah yeah yeah so
filter and condition what I didn't
that's what I didn't R the program
because I'm I'm very much sure that the
output is
wrong I'm very much sure the output is
wrong so that's why I did TR this
condition so that's what uh I'm running
in my so see the filter also does the
same thing so uh so both both are same
yeah yeah so both are not same see find
find method is so for example we can
assume that we have a four array of
objects so in each object we have ages
so if we want to particular if you want
to find particular name with a
particular age so we can use find method
but this is a kind of filter method yeah
okay so okay for a particular element if
you want to find exactly yes yes so if
see if we if we if we do like this yeah
so we'll get four sir four okay you will
receive four yeah in fine and if you
write the same
condition please don't
put okay so if we write filter with this
condition don't you won't receive four
as a output with Filter condition filter
basically removes removes out the
elements sir see basically filter
filters the AR yeah so so it filters the
array and it gives the another array as
a result Okay so containing only that
one so okay so you told me 56 78 will be
the output right now you can't uh like
you told me 56 78 right in fine no yeah
that's what I'm So yeah so the filter
also doing this sir so that's not I
didn't run the program I'm pretty sure
that the output is wrong so this is this
is yeah so this is for sure find is only
particularly to finding only one kind uh
one element uh from the find method sir
okay so find you can't uh you can't do
greater than for human to say like you
have to find out the one element only
else we can't apply the condition human
so if you want if if I want to use if I
want to get more elements as a result I
can use filter method sir yeah that
answer but inside find method if we
apply num greater than four yeah so I'm
coming to so so if you want to find the
particular index of four like that we
can use find index but coming to find
and uh so we are just uh so previous was
like this sir this is the condition yes
yes find number greater than four so
basically it is filtering out all the
numbers I guess 5 6 7 8 will not get as
an output sir so
what yeah that's what I think five will
be coming as an output because it retes
it retrieves only one element uh me okay
yeah okay took you five minutes to check
no no no that's what that's why I didn't
R the program I'm pretty much because
see filter also do the same and why why
find method is what find method is doing
so that's what basically that's what I
was thinking so it it only checks the
particular number so if five is greater
than four so why will I get 678 as an
output so that's why I was confused
there okay yeah so yeah yeah so if you
want more elements we can use filter I'm
sorry I wasted a lot of time for this
okay no worries no worries no worries
yeah okay write map
condition here yes okay okay and tell me
what will be the output yeah we can get
another array with this sir another
array means yeah basically we'll get
result of uh see map AR checks for the
entire elements 1 2 3 so number greater
map this is also doing the same thing
over here so it will be
filtering out right 5 6 7 8 will be the
output yeah I'm guessing that only sir
definition of map method it goes
herewhere yeah see map basically uh give
the result of uh map basically tries to
imute the original array and give
this another array as a result yeah so
yeah also it is doing the same thing so
it will give 56 78
yeah yeah and filter if you apply then
yeah it is also doing the same thing I'm
not sure with the map method so I don't
want to waste more time okay okay okay
you can learn this then
then
yeah oh okay I I I I I seriously thought
the solution but I was not sure so this
condition will apply on each element
exactly okay okay okay in the mapod okay
okay uh we'll move to react GS okay uh
can you tell me can you tell me the
difference between react and Angular
JS react and angular yes okay basically
uh I didn't work on angular so I'm not
aware much of angular coming to you must
be awaring aware of Frameworks yeah
basically yeah yeah so basically react
Works uh with the help of hooks sir so
like before starting react GS you didn't
compare any other Frameworks with react
GS or like you just
had an idea that react react is more
familiar n and react is more familiar to
use so it can be familiar like uh
familiar in the sense it can be less
comp complexity compared to another
Frameworks or angular or views okay so
yeah so I was comparing uh so what is
what so react basically runs with the
help of hooks and State Management okay
okay yeah so this cannot be done in
angular of us if I'm not wrong okay and
uh the this react is a framework right
no no it's a library sir it's a library
okay so angular and VJ are Frameworks so
coming to react is a library okay and uh
you do you know the difference between
framework and Library yeah so see uh
basically Library contains modules
framework contains libraries so inside
libraries we may have n number of
modules so but inside one Library we
only have modules okay so can you tell
tell me the difference between uh use
memo and use callback use memo and use
callback okay so these are M used for
the performance optimization in the
websites so for example uh if you want
to uh prevent a component uh if if you
want to prevent a comp see let's say for
for example I have a complex calculation
inside one function so I know the result
uh after every render I know the result
is same so why should the component
render every time so in this kind of
cases I can use use memo to prevent
unnecessary renders to reduce the
perform to increase the performance
optimization so what use call back does
so basically use use memo Works only for
the expressions and values so use call
back only works with the functions so if
we want to prevent a function from the
render an unnecessary render we can use
use call back okay okay we have a
particular derived state or if you have
a particular value or the calculation so
it's not a function it's just a
calculation or it's just an array of
objects or we can say just an initial
State passing to the component as props
so in
the okay
okay so uh you have worked on functional
right not class I have on function
function components okay uh
so so uh do you know life cycle methods
life cycle methods yes I'm not sure sir
I don't know that unmount mounting
updating yeah yeah yeah unmounting
mounting yes so these are the life cycle
methods okay so how you can do in uh
functional components mounting and
unmounting mounting updating say
basically uh uh I have worked on a
project called uh like I was switching
some of the movies with the help of API
okay so I want to uh see for example I
want to render create another component
okay so I want to render with a
particular expression is true or false
so if if the statement is true I want to
mount the component so there I can use
conditional rendering in the parent
component whereas and the main component
so that it basically renders or mounts
or unmounts based on the condition so so
yeah so it's it's Sim it's very nearer
to this okay but I guess yeah so I'm not
sure of that so we can mount or unmount
the particular component in the UI or
Dom with the with the help of a
particular condition so we can
conditional rendering we can
conditionally render whether whether the
component is mounting or not mounting
can you tell me the use can you tell me
the use effect
syntax okay can I write here yeah if you
can see it's fine if you can if you want
also yeah so this is the syntax okay so
us okay so dependency suppose uh okay if
you want to run on a prop change if you
want to run this call back function on a
particular prop change Suppose there is
a uh ABC Suppose there is a ABC State
change okay so this is the initial state
so uh we are passing this prop to this
component right so what you will do if
you want to just run this use I just
okay I can just uh access this prop as a
dependency got okay fine so what's the
difference between use State and user
have you worked on user Ed user yes yes
I okay so what's the difference I'm
sorry sir use red user and use State
okay so uh see basically use reducer is
a more easiest way to access the State
Management see if you want for example
uh there is ABC State and uh another
state there is called DBC so here
unnecessarily we are creating two kind
of H States variables over here and we
are increasing the memory so use reducer
basically works with the initial State
and the reducer function so we can
Define n number of State variables in
inside the switch cases and we can just
pass uh the dispatch function and we can
update the function inside the use
reducer itself so it basically uh
reduces the it basically increases the
performance optimization sir which use R
user okay okay so use reducer is much
more preferred human yes yes yes because
we can uh we can manage the entire
websites uh State inside a switch case
Okay okay so okay yeah we don't need to
create any any number of you state
variables so we can just assign uh all
the state variables inside the initial
State and we can pass that object as a
pro as a parameter to the US user hook
okay okay uh what's the difference
between uh Contex Redux context API
basically works for the smaller
application sir so context API is an
inbuilt version of the react but whereas
Redux is an external library for
managing Global State okay so it is also
similar to The Used reducer Redux works
are similar to The use reducer so uh uh
the difference is uh in Redux we need to
create a store uh for managing all kinds
of global state in that and we need to
import the modules so basically redex
works of as an external Library external
module so we need to import that and we
need to work coming to context API it is
an inbuilt version of react and we can
manage the state for the simpler and
smaller applications okay so prop do you
know what is prop trailing yes yes I'm
of so proping for example uh if we have
a main component as one and we have a uh
child component until six see if we if
you want to access the prop which is
passed at the one and the same ins so we
need to pass the props for the
entire also okay to prevent this we
actually use context API or redex to
manage the state globally so that can be
available with all all the every
component which is used inside yeah
exactly yes okay okay you haven't worked
with class right yeah yeah no no okay uh
see basically the time of starting uh
learning react only I was startingly
focusing on functional components more
uh there is a app.js file in react so
what's the role of app.js file so all
the uh main logic presents inside the
log app.js and uh we'll render that
app.js file inside the index.js okay
okay so that index.js helps to uh
connect uh start the server okay so the
basic code it is present you me to yeah
for example uh if we uh first create uh
uh create a project using CRM or a white
so basically the main logic we need to
write uh is uh inside we should write
inside app.js so that files r r render
inside the server so that is basically
present inside the index.js so this is
the format so if you want to remove
app.js as a main file we can create a
custom components that we want and we
can render that inside the
index.js okay uh can you tell me uh Js
firstly tell me what is js6 uh js6 uh
basically react is invented uh for the
purpose of jsx only so jsx is nothing
but we can write HTML JavaScript and
react inside one particular format so
previously without react uh we we can uh
we used to see HTML for separate file
CSS for separate file and JavaScript for
separate file right so jsx helps to
write all these particular statements
inside one particular component that is
called react okay so web browsers can
read jsx directly right web browsers yes
it can be read by the virtual D we do
render on the uh web page right so
exactly they are understandable with
browsers right I guess yeah yeah it may
be understandable but uh for uh
rerenders or for updating particular
components first a virtual Dom reads the
code base and after updating the virtual
Dom it directly Paints in the UI I guess
so Babel what's the role of bble then
Babel yes not sure what B is Sir uh you
don't know B compiler yeah okay no
worries no worries okay tell me the
difference between the real Dome and the virtual
virtual
Dome yeah real uh see uh uh for example
there are three states that are
frequently updating on every random so
uh uh our uh main updated values
directly won't be get affected into UI
so first the code uh that update happens
in the virtual Dom so after the virtual
Dom it gets printed in the UI yeah so
virtual Dom is nothing but the code can
be readable in the virtual Dom not in
the main do okay but uh what's the
functionality like what is the
speciality of why virtual Dom is
introduced we can go ahead with the real
Dom no no virtual Dom is is introduced
uh for capturing all the updates and all
the renders happening in the so can't
real D do okay so if we update if if the
real Dom directly takes the updates so
it cannot uh it cannot update the result
frequently right so that's what uh my guess
guess
is okay okay uh have you worked with
forms yeah so form validation how do you
do I with the controll elements yeah
with the controll elements we can uh uh
first of all uh let's see I have an name
and password two forms two input values
yeah so uh if we want to handle this
form using UST State uh I must create a
a variable for name and variable for
password okay and uh I need to provide
the value and onchange prop to the input
uh input tag so after that I need to
submit the form using onsubmit okay on
the form okay yeah so if I we can handle
the form easily and we can retrieve the
values so that are frequently changing
inside the props what are higher order
components in react higher order
components yes okay higher
component it I heard it but uh for now
I'm not able to remember that okay no
worries no worries do you know about
synthetic event in react synthetic event
yes no sir okay no it is no it is no it
is okay you have started working with
the Redux right yes so there is a
action exactly yes yes so what what's
that action
is action is nothing but uh what is the
type of an action for example I have a
basic counter here see have a counter
with increment and decrement values with
the buttons okay so I can uh I can just
provide the action type uh for example
action type as a string Inc so I can
give a particular type to increment and
I can give a particular type to
decrement so these are called as an
actions so with the help of actions I
can dispatch a function so what should be done there so okay so it contains
be done there so okay so it contains information you exactly exactly so what
information you exactly exactly so what what if I press increment so I need to
what if I press increment so I need to provide the logic inside the dispatch
provide the logic inside the dispatch function so that uh using the type
function so that uh using the type accessing the type in dispatch it it
accessing the type in dispatch it it updates the uh code okay uh do you know
updates the uh code okay uh do you know about just just yeah I heard it but I
about just just yeah I heard it but I didn't work I think it's a testing tool
didn't work I think it's a testing tool for react component testing components
for react component testing components right yes yeah so you I was about to
right yes yeah so you I was about to work on react texting tool and just also
work on react texting tool and just also so but till now I didn't worked on it
so but till now I didn't worked on it okay okay no worries uh do you know
okay okay no worries uh do you know about weback yes yes so basically uh uh
about weback yes yes so basically uh uh it's a it's similar to the CRM in white
it's a it's similar to the CRM in white right if I'm not wrong hearing for the
right if I'm not wrong hearing for the first time or like no no I heard it but
first time or like no no I heard it but uh I didn't went through it okay no it
uh I didn't went through it okay no it is then no it is no it
is then no it is no it is uh do you know about re react
is uh do you know about re react native yes yes so how react actually is
native yes yes so how react actually is different I have made a few projects
different I have made a few projects using react native also okay so how
using react native also okay so how react is different from react native uh
react is different from react native uh I can say in react we can directly
I can say in react we can directly access the index. CSS file so I'm
access the index. CSS file so I'm particularly talking about few examples
particularly talking about few examples that right so react native is mainly
that right so react native is mainly used for implementing Mobile Android and
used for implementing Mobile Android and iOS applications okay inside the mobile
iOS applications okay inside the mobile so uh I'm talking about uh so let's say
so uh I'm talking about uh so let's say I can say one example so in react we can
I can say one example so in react we can directly access the index.css file and
directly access the index.css file and we can use that file directly using uh
we can use that file directly using uh the index. CSS yeah but coming to react
the index. CSS yeah but coming to react native we cannot use that file directly
native we cannot use that file directly so we we need to use uh Styles object
so we we need to use uh Styles object okay inside the react native so we
okay inside the react native so we cannot access the index.css file
cannot access the index.css file directly inside the react native app and
directly inside the react native app and we can work we cannot work with that so
we can work we cannot work with that so there are few similarities yeah like
there are few similarities yeah like this and uh uh we need to use um
this and uh uh we need to use um particular uh inbuilt keywords for navig
particular uh inbuilt keywords for navig and all for viewing text and so there
and all for viewing text and so there are particular access for that okay uh
are particular access for that okay uh so have you worked with Progressive web
so have you worked with Progressive web apps no sir can you elaborate more can
apps no sir can you elaborate more can you elaborate more so that I can like it
you elaborate more so that I can like it is compatible with different devices
is compatible with different devices okay okay so okay Android or iOS also
okay okay so okay Android or iOS also yeah okay
yeah okay okay okay uh okay we will move to HTML
okay okay uh okay we will move to HTML uh okay
do you know about uh void elements in HTML wi elements
HTML wi elements yes no sir I'm not aware of that
yes no sir I'm not aware of that why okay okay no sir okay so Suppose
why okay okay no sir okay so Suppose there is a uh there is no closing tag
there is a uh there is no closing tag there is no closing tag okay yeah so
there is no closing tag okay yeah so what that element is known as then
what that element is known as then I think they're called as Mt tax empty
I think they're called as Mt tax empty tax so can you give me an example for
tax so can you give me an example for empty tax uh we can uh tell BR HR BR for
empty tax uh we can uh tell BR HR BR for breaking line HR for horizontal line
breaking line HR for horizontal line image image tag yeah so these are the
image image tag yeah so these are the empty
empty tags okay there is a data list tag and
tags okay there is a data list tag and there is a select tag have you heard of
there is a select tag have you heard of it yeah yeah I know about the select I
it yeah yeah I know about the select I guess I know about the data list also I
guess I know about the data list also I think it comes under the list TXS right
think it comes under the list TXS right yes unordered list ordered list data
yes unordered list ordered list data list yes have you worked on it no no I
list yes have you worked on it no no I didn't work on the data list but I guess
didn't work on the data list but I guess I I'm pretty sure it comes under the
I I'm pretty sure it comes under the list but I have worked yeah yeah in yeah
list but I have worked yeah yeah in yeah I didn't worked on the data list and all
I didn't worked on the data list and all I have worked only on o and ul and
I have worked only on o and ul and coming to select tag I have worked on
coming to select tag I have worked on the select tag so data is like uh it
the select tag so data is like uh it provides the options predefined options
provides the options predefined options for input Fields so Suppose there is so
for input Fields so Suppose there is so there are certain options
there are certain options so all for example value yeah so it
so all for example value yeah so it provides a certain options for that
provides a certain options for that particular input element so for that
particular input element so for that purpose we use data okay so max length
purpose we use data okay so max length length like this right yeah like for
length like this right yeah like for example like Suppose there is a value
example like Suppose there is a value and uh there are certain values that you
and uh there are certain values that you can select so those
can select so those options uh it helps us to provide data
options uh it helps us to provide data list okay uh so re what is the use of
list okay uh so re what is the use of required attribute required yes okay uh
required attribute required yes okay uh let's say for example I have one two and
let's say for example I have one two and three input tags okay so uh and there
three input tags okay so uh and there there is a submit button okay so if I I
there is a submit button okay so if I I filled first input tag and I fill second
filled first input tag and I fill second input tag and I did not fill third input
input tag and I did not fill third input tag if I press submit this form will get
tag if I press submit this form will get submitted because I did not provide any
submitted because I did not provide any kind of required attribute to any of the
kind of required attribute to any of the inputs so if I provide required to the
inputs so if I provide required to the particular input that is necessary and
particular input that is necessary and Dom will update us that please this this
Dom will update us that please this this field is required okay before okay so
field is required okay before okay so that is compulsion un okay yes yes that
that is compulsion un okay yes yes that is compulsion okay we can declare that
is compulsion okay we can declare that that compulsion using required attribute
that compulsion using required attribute attribute yeah yeah okay yeah so there
attribute yeah yeah okay yeah so there is a no validate attribute in HTML do
is a no validate attribute in HTML do you know about it validate no valid no
you know about it validate no valid no validate attribute no Val I'm not so
validate attribute no Val I'm not so what is this used for it is used for
what is this used for it is used for forms and all yes in forms we use
forms and all yes in forms we use like uh even if the input like okay it
like uh even if the input like okay it contains else it will fail the Val
contains else it will fail the Val validation okay okay yeah I got okay
validation okay okay yeah I got okay okay so whether this this input T must
okay so whether this this input T must be uh must filled with 10 values 10
be uh must filled with 10 values 10 characters so if if that is false or
characters so if if that is false or that will fail right yes okay uh so
that will fail right yes okay uh so there is HTML and there is xhtml so can
there is HTML and there is xhtml so can you tell me the difference between those
you tell me the difference between those to HTML is a document for the Dom so
to HTML is a document for the Dom so it's a document object model so it
it's a document object model so it provides a basic structure uh to the Dom
provides a basic structure uh to the Dom but I'm not xhtml I heard I heard of it
but I'm not xhtml I heard I heard of it but uh I didn't uh deeply V to it okay
but uh I didn't uh deeply V to it okay no worries uh we will move to CSS can
no worries uh we will move to CSS can you tell
you tell me
uh about the CSS combinators CSS combinators yes can you
combinators CSS combinators yes can you elaborate it more sir
elaborate it more sir okay noes uh can you tell me about Pudo
okay noes uh can you tell me about Pudo classes in CSS pseudo classes
classes in CSS pseudo classes yes I think that is uh can be writed as
yes I think that is uh can be writed as like this I'm not it helps us to yes
like this I'm not it helps us to yes like yeah with a single like with with
like yeah with a single like with with single we don't
single we don't try Okay so for example I have I'm
try Okay so for example I have I'm having a button okay so I can provide a
having a button okay so I can provide a style to this button and uh so if I want
style to this button and uh so if I want if I want another style only with the
if I want another style only with the hover effect so like if if that is
hover effect so like if if that is happen I can use like this
happen I can use like this sir so I can handle the hover events and
sir so I can handle the hover events and extra events so the these are called
extra events so the these are called SoDo elements okay so this H is called s
SoDo elements okay so this H is called s element
element okay so uh do you know how can we add 3D
okay so uh do you know how can we add 3D transformation using CSS 3D
transformation using CSS 3D transformation
transformation yes like you're saying the animations
yes like you're saying the animations right yes
right yes okay uh for setting the animation we can
okay uh for setting the animation we can use animation attribute in the parent
use animation attribute in the parent class like there are certain methods
class like there are certain methods like there is a rotate 3D have you
like there is a rotate 3D have you worked on it okay no no no I didn't work
worked on it okay no no no I didn't work on I was I just creating the basic tool
on I was I just creating the basic tool okay no it is okay so there is a certain
okay no it is okay so there is a certain property which helps us for image
property which helps us for image reflection in CSS do you know
reflection in CSS do you know about
about IM okay so uh image above the image
IM okay so uh image above the image right you're talking about that right
right you're talking about that right yes so for
yes so for reflection it's it's an overlay I think
reflection it's it's an overlay I think so certain property is there for it okay
so certain property is there for it okay um I think image overlay or image hidden
um I think image overlay or image hidden no display overlay right I think no no
no display overlay right I think no no okay something reflect kind of thing is
okay something reflect kind of thing is there reflect
there reflect something is there with a
something is there with a reflect do you have you worked on
reflect do you have you worked on it do you know about the difference
it do you know about the difference between flexbox and grid flexbox and
between flexbox and grid flexbox and grid yes yeah uh basically uh Flex box
grid yes yeah uh basically uh Flex box if we Flex box or grid are both are used
if we Flex box or grid are both are used for the responsiveness okay so main uh
for the responsiveness okay so main uh major people will prefer grid because
major people will prefer grid because inside grid we can manually uh manually
inside grid we can manually uh manually give how many columns and how many rows
give how many columns and how many rows we want inside the particular component
we want inside the particular component or inside the particular line or
or inside the particular line or something so yeah so then basically both
something so yeah so then basically both are used for uh responsiveness as I said
are used for uh responsiveness as I said so yeah okay so flexbox is a 2d yeah I
so yeah okay so flexbox is a 2d yeah I think it's a 2d are you sure yes sir and
think it's a 2d are you sure yes sir and grid
is grid works as a 3D I think 3D yeah but I'm not sure of that okay so
3D yeah but I'm not sure of that okay so 3D you told me 3D layout so
3D you told me 3D layout so rows are there okay column yeah rows are
rows are there okay column yeah rows are there columns are there yeah and what is
there columns are there yeah and what is the third layout as you told me that it
the third layout as you told me that it is a 3D layout okay so coming to row is
is a 3D layout okay so coming to row is one dimension and column is another
one dimension and column is another dimension yeah you told me 3D right yeah
dimension yeah you told me 3D right yeah so that's why I ask you what's the third
so that's why I ask you what's the third dimension we can just
ask no sir I'm not getting the point right now okay so uh and flex boox okay
right now okay so uh and flex boox okay grid is a 3D you told me right yeah and
grid is a 3D you told me right yeah and flex box
flex box is
is [Music]
[Music] 2D are you sure I know both works as a
2D are you sure I know both works as a responsive to the CSS but I did not
responsive to the CSS but I did not study in depth of this both yeah
study in depth of this both yeah okay but both both are used to manage
okay but both both are used to manage the columns and rows sir yeah for layout
the columns and rows sir yeah for layout purpose it's yeah for the layout purpose
purpose it's yeah for the layout purpose both are used to uh uh give a particular
both are used to uh uh give a particular proper layout to the structure yeah but
proper layout to the structure yeah but but in difference exactly yes yes I
but in difference exactly yes yes I guess in Grid we can manually Define uh
guess in Grid we can manually Define uh the number of colums or the number of
the number of colums or the number of columns and rows uh we want okay yeah
columns and rows uh we want okay yeah and with the using flexbox we can assign
and with the using flexbox we can assign uh the particular component to be Center
uh the particular component to be Center or uh to yeah to structure the proper
or uh to yeah to structure the proper layout so where we want and what we want
layout so where we want and what we want and we can use that using flex and come
and we can use that using flex and come to grid it is used mainly for creating
to grid it is used mainly for creating layout components yeah both are used for
layout components yeah both are used for the same purpose but there is a c both
the same purpose but there is a c both used for the same yeah yeah certain
used for the same yeah yeah certain difference so that okay fine no it is no
difference so that okay fine no it is no it is uh okay uh that's it for the
