YT YouTube2Text

YouTube2Text → Transcripts → Salesforce JavaScript Developer 1 certification series | Session 2

Salesforce JavaScript Developer 1 certification series | Session 2 — Transcript

by salesforce troop · 18,675 words · 2,515 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00hi guys nickel here welcome to
0:03Salesforce true this is the session 2 of
0:06our JavaScript certification series and
0:09today's topic is objects functions and
0:13classes and this section consists 25% of
0:17the overall exam so it's one of the
0:20important section from the exam point of
0:22view so let's move on to our agenda
0:27today we gonna cover a lot of thing
0:29because it consists 25% that that is
0:33very important to clear the
0:34certification so will first see arrays
0:37array methods then we'll learn about
0:39loopings in JavaScript we'll see the
0:41scoping then we'll see what is hosting
0:44or district mode this keyword in jeaious
0:47functions in J's arrow function closures
0:50object restructuring gate method and
0:52they'd objects object dot freeze spread
0:56and rest operator object prototype and
0:58prototype chain object inheritance class
1:01in class inheritance in JavaScript
1:04decorator and in the last we'll see
1:06modules exporting and importing so out
1:09of 21 topics you may get like questions
1:15from the 20 topics it's possible in the
1:17exam and let's move on to our first
1:21topic that is arrays so array is one of
1:26the most common data structure in all
1:28programming language so here also it's
1:31one of the important data structure but
1:35it's not a data type it's of object
1:37datatype remember this so an array is a
1:39special type of variable which can store
1:42multiple values using special syntax
1:44every value is associated with numeric
1:47index starting with 0 so air is always
1:49play with the index value and index
1:51start from 0 remember this has a
1:55JavaScript array can store multiple
1:57element of different data type in other
2:00programming language it's only allow of
2:02same data type I guess but in JavaScript
2:04you can mix and match the values in the
2:06array and in JavaScript we can create
2:09the array in two ways one is array
2:11literal and second with the array
2:12constructor
2:13so let's go to our playground and see
2:17this so I'll create a new tab here I'll
2:24click inspect element move it I'll
2:30select pencil I can perform anything on
2:33my console and I'll just remove errors
2:41oh yeah
2:42so we said Eric and creating to form
2:45forces array literal so in array literal
2:55like we did for object literals array
3:00literal it's the same with the different
3:02bracket notation so if I say they are
3:05and use these to break it this is the
3:08array literal and it's a one way of
3:12creating an array and a shortcut with an
3:14easiest way to create an arat so if I
3:16say a RL is an arat so this is the
3:20negation of array literal with this you
3:23can create a string array but all
3:28contain string only that's also possible
3:31you can create numeric array that
3:35contains only numeric values like 1 2 3
3:374 that is also possible
3:40you can create decimal Larry it is also
3:44possible and you can create a boolean
3:48area as well that is of all balloons in
3:53an array and as we said in JavaScript
3:56you can add any type of any data type in
3:59an array so here you can see I can add
4:03numbers string or if I want I can add
4:06boolean as well
4:07and now if I print mix the rate you can
4:10see has those values but you can create
4:14any form of array with any data type and
4:17when you create the array with this
4:19bracket notation we called it as an
4:22array literal and this is one of the
4:24easiest and best approach I would say
4:26okay
4:27let's see the second type of creating an
4:31array that is Eric instructor but Eric
4:38instructors with me know with every
4:40concept that we use new keyword with
4:44method so here array a should be capital
4:47and it's a function so this when we call
4:50this method and assigned to a variable
4:52called a VN n same empty array okay and
5:00in this case if you want to add a
5:02property suppose I want to create a
5:05string array I'll call this simply new
5:08Navy string array I give the variable
5:11name as a string array and now if I want
5:14to add a property I'll call it away the
5:19index number at which index I want to
5:21add the property so add at 0th index
5:24property value one if I enter and type
5:29my string array again you can see it has
5:32a one value or one element in inherited
5:36to one we have a scientist now this is
5:39one way of getting with the array
5:41constructor we can dynamically add some
5:44spaces to Eric instructor by passing a
5:47number to a constructor so it means
5:48create an array with the three blocks in
5:52it that will be an empty block so if I
5:55hit enter and I check numeric array it
5:59says empty Crossley so it has some
6:02spaces but other empty box no values
6:04assigned and if I check the length it
6:08shows three just there are three blocks
6:10available inside it and if I we want to
6:13fill this empty array in the same
6:15approach we know the index so in just
6:19pass the index number and pass the value
6:23so we I'm saying at 0th index assign a
6:26value one at index one assign a value to
6:31right in next to assign a value three so
6:35I'm assigning a value three now if I
6:38print my array
6:40you can see it has all three values one
6:42two three and the third approach of
6:46creating and constructor array is you
6:49can dynamically pass the value a
6:51directory that is this in the new array
6:55yeah I'm passing where you dynamically
6:59so it will take these values and assign
7:01to an array while creating an array so
7:05now if I hit enter and I print mixed
7:08array you can see it has all the value
7:11that we pass to this area so this is how
7:15we can create array using array
7:19constructor so let's go back to our
7:23slides so we have already seen an array
7:29in JavaScript can be defined
7:30initializing two ways array literal an
7:32array constructor we cover all different
7:34types of syntaxes as well
7:36let's move on to the next topic that is
7:42array methods so array methods are the
7:46method that you can perform on arrays so
7:49let's start looking into each method one
7:54by one so first method is push and we
7:57use push method to add one or more
8:00element at the end of an array just
8:03remember at the end of the array so
8:05whenever I call a push method I am
8:07adding an element to the end of the
8:10array similarly push method push and pop
8:15so you can make the rhythm push and
8:18pop-pop remove the last element from an
8:20array so let's go and see these two
8:22methods let's say I have an array X that
8:29has four values ABCD now if I want to
8:34add some element to the array X I need
8:37to say array dot means the X dot push
8:42the push is the method that runs only on
8:46array and if I want to add a value add
8:50an element each to the end of the array
8:53alcohol
8:53which method and if I am press enter it
8:58written gives me the total length of the
9:00arena so earlier it was for now it's
9:02five now if I press X again it shows me
9:08the updated array so it's like now it
9:12has five element and E is the last
9:14element that we have entered so this is
9:16push similarly if I want to pop an
9:21element I need to call the array dot pop
9:24and I need just me to call this method
9:27and this method will go to the array end
9:30and remove the last element so if I hit
9:34enter now it removes the last element if
9:37I print that array again it shows me
9:40again the four element only this is how
9:45pushing pops work both add and remove
9:49the value from the end of the array now
9:54the next method is shift and unshift so
9:57shift remove the first element and
10:00return the element and unship add the
10:03element in the front of the array so
10:05push and pop work from at the end of the
10:09array and shift and unshift work in the
10:12front of the array so let's go and see
10:15so now I have my x array ready that has
10:20four elements and as I said shift
10:24element shift method remove the first
10:27element so if I perform a shift
10:29operation on Eric eggs and hit enter it
10:34returns the element that he has removed
10:36and now if I print my Arabic it will
10:39show me only the remaining element that
10:41is BCB so shift element remove shift
10:46method remove the first element from an
10:48array
10:49similarly on shift method add element to
10:55the front of the area so I want to add a
10:57bag I'll pass the element and perform
11:02the unshipped operation on the same
11:03array and now if I hit enter it returns
11:06me the
11:07length of the new array and if I drink
11:11eggs again it gives me the updated array
11:14with the value 8 that we have just
11:16pushed to the front of the array so this
11:20is shift and unshift so it's very easy
11:23pushing pop 4 at the end of the array
11:26shift and unshifted in the front of the
11:28array then we can go to reverse as the
11:32name suggests with the reverse you can
11:34reverse the order of the array so right
11:37now my array is in vp CD order now if I
11:42want to perform a reverse operation I
11:46hit enter
11:49he just reverse my order from like ugly
11:55it was from left to right now it just
11:56turn your array now it's printing de CPA
11:59so this is how you can reverse an array
12:04now we have seen adding and removing the
12:09element from the front and end but if I
12:11want to add or remove an element from at
12:15a particular index in an array to solve
12:18this on that issue we have a method
12:20called splice so let's go and see the
12:23splice method now so I have the same
12:28array X that has ABCD values and if I
12:35want to remove an element from a
12:39particular index so I'll use a spice
12:42method and supplies method takes first
12:48argument as the starting index from
12:51where I want to start my removal or
12:54addition then it takes the second
12:57element as a number of elements you want
13:01to remove if I say one fun it means go
13:07to the array index one start from index
13:11Francis array starts with the index 0 it
13:14will come to the index 1 and then say
13:17remove the element 1 so it said
13:21total element you need to remove one so
13:24it removed be from here if I hit enter
13:27if I give true the length will be like B
13:30and C will go okay so I will get one and
13:35I hit enter and I print my ex back it
13:39returned a CD so it remove the one
13:42element from index 1 started with index
13:471 it's the correct statement and if I
13:50want to add something suppose I want to
13:53add something I'll go to the same method
13:55if the second path parameter is 0 it
13:58means I don't have anything to remove
14:00and if you add something after that it
14:03will add add that particular index where
14:07we have given in the start so if I say
14:10hooray you'll see splice see ok my
14:15second index is 0 so I don't have any
14:17lengths to remove so it go to the third
14:20parameter said I need to add this at
14:22index 1 so now our current status of the
14:26arrays it has three element a CD C is at
14:30index 1 but if I hit enter and print X
14:34again we will see hooray is at index 1
14:38and C and E's moved further so this is
14:45all about splice with which you can
14:47randomly add you can add and remove an
14:50element in a random index let's go back
14:56to our slides
14:58so next method is index off so index off
15:02is most commonly used method when we
15:04have to use any filtering in an array so
15:09this method returns an index of the
15:12first occurrence of the specified
15:14element in the array and similarly the
15:17last index return the last occurrence of
15:19the specified element in an array so
15:21let's go and see this so let's on the
15:27index of operation in the same array
15:29that is X we are using and now if I want
15:33to find
15:35the occurrence of element C in an array
15:39so I'll say index of oh is capital over
15:43here in the index of and I will say find
15:46the index of C whatever
15:50index you want to find you just pass the
15:52value here and if I hit enter it returns
15:54- so that is the second index 0 1 2 and
15:58if I enter G that is not available here
16:03it always return -1 so in fielding we
16:05usually check if this value is there an
16:07index is greater than equal to 0 it
16:12means the value is present similarly if
16:15I perform the last index of that returns
16:18the index of last occurrence of a
16:20specified element so if I create an
16:25another array that has repeated be okay
16:31and if I hit enter and now I perform the
16:35last index so index of gives me the
16:39first index and the last index of
16:44returns the index of the last of two
16:46ends of a specified element in an array
16:48so if I say find the last index of B so
16:54it start again from the left it find it
16:56here it's told that index 0 then it move
17:00on to 3 & 4 then it drop the index 0 and
17:04it pick the last indexes for any pretty
17:08fourth so this is how last index of
17:10works so let's go back to our slides
17:14then we have a join method slice method
17:17and concat method so join method return
17:20string of all the elements separated by
17:22a specified separator so let's go back
17:26let's see what it means I have again X
17:30as my array and if I want to join this
17:35edit or string I just need to say join
17:40the array without any space and if I hit
17:45enter
17:46it joint is air into a string and if I
17:50want to join this array with a specific
17:52separator suppose I want a hyphen in
17:56between all these values just past a
18:00separator in between the quotes and hit
18:03enter it joined that array with that
18:06particular separator and this is one of
18:10the coolest thing like you can add
18:13dynamically anything in between the air
18:15is when you are joining it and it's cool
18:20back to our slide next one is the slice
18:23method slicing splice is most confusing
18:27and in exam you can see our option a
18:31slice and splice both so just to make
18:34this topic clear slice always return a
18:39new array but supplies update the
18:43existing array so just remember this now
18:47we are talking about slice returns new
18:52Harry always returns a new array so if I
18:57have my array again here this time and
19:02if I want as we said
19:04slice always return a new array so to
19:06hold that new array we need a new
19:09variable and now if I say ice
19:14what slice will do it take first index
19:18means the starting in a sphere from
19:21where I need to start the slicing and I
19:24said start with the index one and cool
19:27till index 3 but here the catch is that
19:31last index that we said go to index 3 it
19:34will not remove the last index it
19:36removed the index before that so here
19:39what it does it start at the index 1
19:42that is a limit to and it goes to the
19:46index 3 that is 2 & 3 it goes here but
19:51it removes the element start with 1 to 2
19:55not the last element so the last element
19:59is not in
20:00and now if I hit enter and I paint new
20:04array it gives me the slice from index 1
20:10and I start with index 1 and goes to
20:14index 3 and apart from that now you see
20:18if I print the ARR bet it doesn't mutate
20:22or change anything in this existing
20:24array it just gives me the new copy and
20:27it's very helpful where you have to work
20:31with the immutability and this is a good
20:33practice to remove element from an array
20:38at a particular index so this is our
20:42next method is can cat so can get as
20:47name say t2 the concatenation of an
20:49array so let's go and see how the
20:52concatenation works so I have array X I
20:57have array why we are concatenated now
21:02to array so the Kinkaid matter said can
21:05create returns a new array by combining
21:07the value of an array that is specified
21:10as parameter with existing array values
21:13so it also returns a new array and it
21:20takes the first array in which you want
21:22to add or concatenate and add the concat
21:26operation and in Kinkaid you pass the
21:30another asset that you want to
21:32concatenate into an X so I want the
21:36y-values to be added into the X arrays
21:39and now if I hit enter and print C you
21:44can see you getting native I value to
21:47the eggs and now if I print X the values
21:50are remains in if I bring where the
21:52values are remains in so it's also not
21:55me reading the existing array let's move
21:59on to the next topic that is array
22:02methods continuation of the array method
22:04but these are some important method from
22:08the functional programming point of view
22:11so first is the map method
22:14so map loops over the array and return
22:18enumerate based on the value returned so
22:22let's see a very good example of map and
22:25it's one of the heavily used method in
22:27lwc suppose I have an array of objects
22:33so I have array and that has objects for
22:37objects and I hit enter now I have an
22:50array of objects if I print X it has
22:53four objects and you can see that now if
22:58I want to perform an map operation you
23:01just see the syntax very carefully the
23:05first you need to take the array then
23:08you have to add the method like we were
23:12doing map but here it takes the call
23:15that callback is a function pass as a
23:20argument to another function so if I'm
23:25creating another function in this map so
23:30this is a callback we have created now
23:34in function we pass parameter that is
23:40first parameter will be current item
23:44then you run the loop it takes the first
23:47item then second item then third item as
23:50a current element then we have a second
23:53parameter that is index and third
23:56parameter is actual array so index will
23:59start with 0 1 2 3 4 and actual array
24:02refers to the X so if you want something
24:05to see from X you can use the third
24:08parameter and as we said it always
24:11returns a new array and it's very
24:15helpful when you are creating a big list
24:17or a checkbox so it generates a new
24:20arrange you can build a new array based
24:23on your needs suppose I want a new array
24:26that has a
24:27keep property and key property is trend
24:32item dot name so I'm mapping all the
24:35names of key property and I want all the
24:41values to be mapped to loop and item dot
24:47it and I'm mapping all the A's to the
24:51value property and it generates a new
24:54array that has key n value so this is
25:01one of the beautiful example of this map
25:05just remember the syntax it always they
25:09current item then it takes index and it
25:12takes actual array and this gonna be the
25:15same approach for the rest of all
25:18methods just remember the syntax because
25:22in the exam they're gonna play around
25:23with the syntax and if you want to see
25:26this again I'll show you and will print
25:30what is current index every time
25:43what is indexed quickly I'll print it as
25:47well so that you will get a better
25:51understanding what each parameter is
25:56doing now if I enter you can see the
26:01current item is the first element that
26:03is an array and that is an object then
26:05it's index is zero and the actual error
26:08is that it should copy of X then second
26:12then third then fourth likewise it
26:14Canova so this is all about the map
26:18method so it's one of the most commonly
26:22used method to create a new array then
26:25we'll see the next method that is every
26:28every take the same same signature
26:32almost same except the method name again
26:36I'll create the same array and now I'll
26:41say X dot every every the method
26:46name it takes the same signature that we
26:48discuss and this signature is parent
26:57item index and it will array and it's
27:03not necessary to every time define all
27:06the parameters here you can ignore if
27:11you are not using just for the exam sake
27:13I am writing again and again and every
27:17method will check the condition that we
27:22mentioned in return for each element in
27:26an array so I want to check whether the
27:31age is greater than eight in all of the
27:36element in an array
27:37if this condition satisfied then it
27:41returns true otherwise it false so
27:44basically every returns true or false if
27:47every element in the array satisfy the
27:49condition so it says yes all the
27:53elements age is greater than eight
27:56if I say greater than 50 it returns
28:01false because it's not it even though if
28:04I say ten there are few greater than 10
28:10but not all that's why it's returning
28:12false so every checks each and every
28:17element so let's go back to the slides
28:23now the next method is filter again one
28:26of my favorite and heavily used method
28:29in the lwc programming or in javascript
28:34so we already have our array and all
28:39these methods that way this can right
28:41now all are generating a new copy it's
28:43not mutating the existing copy so the
28:47filter method returns new array with all
28:50elements that satisfy the condition so
28:53let's see what it means if you take the
28:55filter method it is same signature that
29:01we discussed and it also runs some
29:09condition and based on condition it will
29:14filter out the elements in an array so
29:18if I say current item dot age greater
29:22than equal to 20 what it does it run to
29:27run a loop along these all elements in
29:30an array and whichever the elements
29:33satisfy this condition it returns and
29:36create a new array so if I hit enter it
29:39filtered out all the elements from an
29:42array and gives me the Harrod that
29:45satisfy this condition so this is one of
29:47the easiest way to filter an array or
29:49array of objects let's move on to the
29:53next one next one is some method some
29:58method is almost similar to the every
30:02method the signature is same you just
30:04need to change the method name it also
30:07check the condition
30:09but in every it checks the condition of
30:12every element in an array and those
30:15conditions should be satisfied for all
30:17the elements here it says whether any
30:20one of the elements satisfy this
30:23condition if you just give me the truth
30:25so this is very helpful to test just to
30:29verify whether this element is present
30:32in an array or not so this is also one
30:35common method used in functional
30:39programming of JavaScript and now the
30:44next method also a very helpful that is
30:46sort and in all programming we need
30:49sorting and here the signature got
30:52changed little bit so sorting can mean
30:56ascending and descending we'll look into
30:58that so we have our X array the same
31:03array we'll add in the method name it
31:06will also take all that but this time
31:10the signature will be different it takes
31:14two values a and B it can be in any name
31:18so it's more like the first element and
31:19second element and internally it takes
31:22then second and third and third and
31:24fourth and the return will do the
31:30sorting of based on the age right now
31:32it's random 10 40 29 so if I say a dot H
31:37minus B dot H if we are subtracting from
31:43A to B it means we are trying to sort in
31:47the ascending order and if I said the
31:50new array it's in the ascending nine 10
31:5320 40 and the same signature if I
31:57reverse it pH - aah then it cannot do
32:04the sorting in the descending order this
32:09is okay with the number sorting but what
32:13will happen when I want to do the
32:17sorting for the string so to do that we
32:20have another trick
32:22and for that also the signature is
32:27almost same only the return will be a
32:31bit different so we'll say if a dot mean
32:34is greater than P dot me if it is true
32:40then return one if not then return then
32:46check whether e dot name less than P dot
32:52me and if she is then return minus one
32:57otherwise zero so it's more like our
33:02ternary operator a nested ternary
33:04operator I would say and now if I do
33:07this it sort your string in the
33:11ascending order now if I see here
33:15no it's ABCD but the same thing if I
33:19change I want e to be less than B and a
33:24to be greater than V and he hit enter it
33:28convert racine toward ascending order
33:30dcba
33:33so here is more like a comparator you
33:36already studied in the maths if it's one
33:37then it's present if it's - when it's
33:39not better than if zero it's equal so
33:44this is how sorting box on the string
33:47let's move on to the last two methods
33:50that is reduce and reduce right and in
33:53my exam this was the question based on
33:55the syntax of reduce because this is
33:58little bit tricky in excess compared to
34:01map filter and all so the reduced method
34:06reduce the error to a single value from
34:08left to right yes remember left to right
34:11reduce the array so suppose I have array
34:14of numbers and I want to perform the use
34:18method as I said reduce method reduce
34:22the area to a single value if I want to
34:24reduce it and by how I can reduce I can
34:29either by the summation or with the
34:31subtraction reduce method also take the
34:35function
34:36he's a callback as we discussed the
34:42callback always have the same index so
34:45the current item index and actual array
34:51but here the catch is the first argument
34:55is different rest all are same but the
34:59first argument here is I'm giving total
35:03you can give argument can be in any name
35:05that you want it's an alias so it's the
35:09initial value or the previous value
35:11returned from the function so when this
35:14reduced work
35:15what we're you gonna save your previous
35:19value so that is this argument here I
35:24keep total because I want to generate
35:26the total of the number and once the
35:30callback finishes you need to pass an
35:33initial value that initial value is to
35:36your initial variable that we have
35:40define here so if I initialize my total
35:43bit zero it start with zero okay so
35:46let's print as well my both values here
35:53total as well as a current value and I
35:59want to perform an operation that some
36:02my current value like first time it will
36:05come end in 30 and 50 so if I want to
36:09perform a summation it is always return
36:13and I will say total plus current item
36:19so we're here they're totally
36:23initialized with zero so first time it
36:24comes zero current value will be the 10
36:26then it's sum then it hold the total
36:30hold the previous value as well so now
36:32on the second loop total will be the 10
36:36and current item with pay the 30 then it
36:39comes 10 plus 30 it's 40 now total will
36:43hold the previous value so if I hit
36:45enter now you see total start with zero
36:48because we initialize
36:49current values 10 now total is holding
36:52the value 10 the current values 30 the
36:55total is holding the 40 so just remember
36:58this what the first argument here is
37:00it's holding the initial and the
37:03previous value often really of the
37:07function similarly there is another
37:10method called radius right that is
37:14almost similar it is also similar what
37:22it does here is you just need to change
37:28the method name reduce to reduce right
37:30and it starts a machine from right to
37:32left so 50 30 20 and the signature is
37:37remain same total current index actually
37:41and now if I print the total start with
37:44same zero but current value start with
37:4650 so if I hit enter so totally zero
37:50current value is 50 total is 50 current
37:5420 is 30 total is 80 and current release
37:5710 so this is how our reduce write works
38:01I know these are few are bit boring but
38:05you're you are very helpful from actual
38:08coding point of view and if you are very
38:10health important from the exam point of
38:12view from these method at least one
38:15method will be there in the exam either
38:17for the output either for the syntax so
38:21just make sure you play around with
38:23these methods and yeah and out of sort
38:28all method returns something so let's
38:33move on to the next topic
38:35so our next topic is looping in
38:38JavaScript so you all have worked with
38:43looping in other programming language
38:44here also for loop is their while loop
38:48to while loop is there but there are
38:50three more loops I don't know whether
38:53it's available in the other programming
38:54or not but let's see quickly the all
38:57loops and how it works in JavaScript
39:02I'll go to the playground again I'll
39:04create an array is alphabets array of
39:10object of alphabet now we will first
39:13learn the for loop for loop is one of
39:15the old way of writing the loop so the
39:20for loop says give me the initialization
39:24so I'll create a variable initialized it
39:27with value 0 and I have condition so I
39:32say run this loop and I is less than by
39:38array dot length and plus plus and then
39:46I'll say cancel large log alpha that is
39:52and we'll print the puppet in the loop
39:57and I'd say alphabets actual array go to
40:02the index and print the name so this is
40:05the ancient way of doing this this stuff
40:08now this loop is working alphabet is a
40:11alphabet is B and we looped all with a
40:14name so till now that was very good
40:18let's move on to the next loop that is
40:23for each I have this this alphabet is
40:27already declared here so we don't need
40:30to define it again and again all right
40:32so I'll just bring creat alphabets
40:36father is there it's okay now before the
40:40father each the syntax will be almost
40:43similar that you have seen for map and
40:45filter functions let's see for each n
40:50theta call back
40:52all that quickly ran right down legs
40:58actual array and in for each I can print
41:05console dot log alpha bet is in the same
41:12way with the pattern notation instead of
41:16alphabets I of name so instead here you
41:21everytime have a current item and you
41:23just need to print the name so once for
41:27each comes into the picture it gives us
41:29the more readability and easy to use we
41:32were saving the creation of extra
41:34variable like we were doing in for a for
41:38loop where we were creating every time I
41:39equal to 0 and then we are doing one
41:42expression as well like alpha by dot
41:44length we are calculating so that was a
41:46heavy operation so this gives us the
41:48freedom to write a clear and easy
41:50looping but it doesn't mean we stopped
41:54using for loop there was a condition
41:57when we have to use for loop over for
42:00each so the condition is I'll go back to
42:04the same loop that we run earlier and
42:11now I want to achieve
42:14if I find a particular element in an in
42:19the loop then stop the loop but to do
42:24that I'll say if alphabet
42:27I taught name equal equal to a so it
42:31means if alphabet name is there as soon
42:36as you find that alphabet name as a
42:38break the loop don't run the loop
42:40further so if I hit enter it just print
42:43first element that as soon as first
42:45element it you found a it started but
42:49that was not possible with the forage
42:51that's why whenever we have to break the
42:54loop we have to follow the or use the
42:57for loop so nests in es6 they launch
43:02another loops and that was far better
43:05than forage and for so that gives us the
43:09more concise way of writing it so i'll
43:13print my alphabets again just to make
43:15sure it's available alphabet is here now
43:17they introduced for off loop for of loop
43:21gives us a more readability easy to use
43:26so i'll say for
43:29for off in far-off loop you need to
43:32create a Lea's that is the current
43:35element and current element of the
43:40actual array that is alphabet so we are
43:43running the goop on alphabet and each
43:47element will come to the alphabet that
43:51is the Alice it can be anything
43:52and now if I print the same way that we
43:56were being earlier now if I hit enter
44:00now this syntax you can see how easy it
44:03is and this for off loop gives us the
44:08freedom to break the loop as well so it
44:12called the purpose of our porridge that
44:15was giving us that easy to write and
44:18concise way of writing the for loop for
44:20looping but here for off loop gives us
44:24both the freedom nice and cleaner syntax
44:27as well as you can break the loop so if
44:29I break it will work this was a third
44:33loop now let's move on to the fourth
44:35loop they love all the loops we
44:38discussed are working on array but in
44:42es6 they introduce our another loop that
44:45is called forth in foreign loop so in
44:50foreign loop works on an object suppose
44:52I have an object that is old car it has
44:59me Toyota model terrace in year 1996 so
45:04if I want to run a loop over this
45:07earlier we need to use object dot keys
45:10first we'll convert array to object and
45:12then we were running the loop but this
45:15time forum gives us a freedom to run the
45:17loop directly on the keys of an object
45:19so it all its syntax is similar to far
45:23off so I will say the key key here is
45:27make model n here so say a key from the
45:32actual array that is ultra and run the
45:37loop if I want to bring
45:41II and value so to face the value I can
45:45say from that key from the array past
45:50the key
45:50it gives me an value of that object so
45:56if I hit enter it gives me the key and
46:01value so I'll repeat it this loop again
46:04for in loop work on an object so it
46:09takes the actual object and the key of
46:12the object each key I would say the
46:15current key and now it print that
46:17current key we already know how to face
46:20the value from the object so you need to
46:22pass the key name to the object and it
46:25gives us the value so this is the
46:28another loop let's go to another to
46:32traditional loops called while loop so
46:34we already know the syntax of while loop
46:37I'll create a variable a and while loops
46:41we used while loops when testing for a
46:43condition before the first hydration of
46:45the loop so we test pair condition first
46:49before the hydration of the loop I'll
46:51say run the loop if a is less than 10
46:55and I'll bring both in that value say a
47:05in a every time and increment a as well
47:11so if I bring in the number and build
47:16the time it satisfy this condition this
47:18is pretty easy he will not go much into
47:20that apart from that there was another
47:23loop to boil and we were using that
47:25do-while when testing for a condition
47:27that is found after the first hydration
47:30of the loop so I have created an example
47:32to explain this better I have a variable
47:35num then I'll write the two so here we
47:41said it runs the condition
47:44it runs the hydration before taking the
47:47condition and it's indexes whatever you
47:50pass in the do it runs first and then it
47:53checks the condition in the why
47:56so I'll say no less than ten so this is
48:01the condition now I'll put my pictures I
48:06want to perform from operation prompt is
48:11English method that just prompt on the
48:13screen and I'll say run the prompt with
48:19the message please enter the number
48:20between 1 to 10 and whatever the number
48:24is at enter
48:25I'll store it in the num variable and
48:28the input will receive number but the
48:34number is in the string format so I'll
48:35convert quickly into a number parseint
48:40method will convert into integer and now
48:43I will hit enter now you see there is a
48:46pop-up this is recalled prompt and it's
48:49asking please enter a number between 1
48:50to 10 so if I enter 2 so 2 lies between
48:551 and 10 the Ingham input will be 2 of
48:58string we convert the 2 of string to
49:00number and now the condition run 2 is
49:02less than 10 yes then it will run the
49:05loop again so if I say ok then it again
49:09prompt me enter number I'll say this
49:12time 12 and now after running it come to
49:16the condition if condition fails it's
49:17comes out so just remember the for loop
49:21used only when we already knew the
49:23number of hydration and the while loop
49:26used only when the number of iterations
49:29are not exactly known so for you guys I
49:32just put this thing the for loop used
49:36only when we already knew the number of
49:38hydration and by loop used when the
49:40number of hydration are not exactly
49:42known let's move on to the next slide
49:48that is scopes scope scope is everywhere
49:54in JavaScript and it's one of the
49:56confusing topic for the few people so
49:58I'll try to make it easy as much as I
50:02can so scope in JavaScript refer to the
50:06current context of the
50:08which determine the accessibility of a
50:10variable to a JavaScript so in simple
50:14term it defines where we can use the
50:19variable or other way I can say scope
50:25tells whether the variable can be
50:27accessible or not there's a simple way I
50:31can say javascript has to scope global
50:34scope and local scope and by default in
50:37JavaScript root scope is the window
50:39object root scope is a global and any
50:43variable or function you create get
50:46attached to a window object so function
50:51have access to a variable present in the
50:53logo okay let's go and see how it works
50:57what is global scope what is local scope
51:03so we have two scope - global scope fun
51:07is a local scope so it says window is
51:13the root scope in our slide we talk
51:15window is the root scope so what is
51:18window fast window is object that is the
51:21root of our browser so whatever we
51:26create whenever we create a variable
51:28that is global so if I am creating a
51:30variable dummy I'll say it to me so this
51:40dummy variable scope is automatically
51:42attached to a window so if I say
51:45windowed dot Remy you can see the window
51:50is attached to a dummy is attached to a
51:53window so just remember root scope is
51:56window when there is no scope it
51:58automatically attached to her window
51:59property - window is an object so in
52:03browser window is the root in node.js
52:05the global is a book so we are not going
52:08right now in the node so let's start
52:11first with a scope we discuss there are
52:14two scope on his local scope and the
52:16global scope we'll talk about local
52:18scope first
52:20the local scope is a scope which the
52:26variable can access within this block
52:29scope only so we can say the block scope
52:32is a local scope I would say so block
52:36scope is local scope and block cope is
52:42the scope that is in between these two
52:44brackets so these two brackets comes
52:48with functions as well as a beta if
52:51block so let's see and let me read the
52:55function quickly if I create a function
52:59lot pillar and if I say let color in
53:08blue and I would say console dot log
53:17hello and now I'd call this function
53:22locally it prints blue because it's
53:25available in the local school and the
53:29same thing if I bring outside color it
53:33will throw an error because color is not
53:35available outside this block scope
53:38because local color is local to the lock
53:41color function so this is called local
53:43scope with respect to function and if I
53:47want to show you with respect to if
53:49block one if block by default that is
53:52always true it means it runs that if
53:54progress if I create color as pink it is
54:02also in the local scope and
54:07you can access the variable in the local
54:10scope here but you can't bring the same
54:14color outside the local scope so if I
54:19hit enter
54:19pink is print here for this control but
54:22the color is not defined in the outer
54:25scope so this is a local scope in a
54:28variable defined under the block level
54:33let's go and see the global scope
54:36so for global scope I'll say I'll create
54:41a variable and a function I create a
54:45variable outside the function that is
54:47color and now if I try to add this we
54:50can give it to the let as well that's
54:52also fine now if I try to access within
54:56the return or I want to access it in the
55:01function it will return the color so
55:04I'll say return sky color I call this
55:08function and it returns the color blue
55:11so as we are calling the variable that
55:17is defined in the global inside the
55:21block level it able to exist that so
55:23global variable is more like stars
55:25anybody can see that now there was a
55:31problem with global scope we should try
55:37avoiding or using the global scope that
55:40the term is called scope pollution so
55:46scope pollution is when we have too many
55:48global variable that exist in the global
55:51namespace or when we reuse variables
55:54across different scopes scope pollution
55:58make it difficult to keep track of our
56:01different variable and sets up for
56:03potential exit and I will show you a
56:05basic example I'll create a number 50
56:11that is in global scope
56:18then I'll create a function and here
56:27accidentally I override a global and I
56:34bring this number here and now I'll call
56:39this function log num and below this
56:44also I will bring this number this kind
56:48of question you may get in the exam as
56:50well so tell me what will print here and
56:55what will print here this kind of
56:56question will be in the exam so here we
57:01are
57:01accidentally overriding the global
57:05variable inside the local scope so
57:08when's the JavaScript start passing it
57:11set the number with 50 then it comes it
57:14call this method method method calls
57:17then we accidentally update the number
57:19200 no if I print num here it will print
57:22hundred and now if I print outside this
57:25function num is also hundred and this is
57:29one of our example of scope pollution we
57:31are accidentally someone update the
57:34global scope and it impacts the other
57:36functions as well for this small example
57:40you may think oh I can avoid this but
57:43suppose our program is off like 700 800
57:47lines where somebody has written another
57:49module based on the same variable but
57:51you are accidentally update that so that
57:54time it was an issue so this is called
57:57scope pollution let's go to our next
58:02very next light that is called hosting
58:05so hosting we discuss little bit in our
58:09session 1 but this time we'll understand
58:12what exactly hosting is and hosting is a
58:15JavaScript default behavior of moving
58:18declaration to the top of the current
58:20scope so by default in JavaScript 8 the
58:24declaration to the top not for the
58:27variable but for the functions as
58:29variables and course konsta cleared with
58:33LED or cons are not wasted that we
58:36already know now because let and cause
58:38introduced to a wide hosting mainly then
58:41in JavaScript only host declaration not
58:44initialization and function definition
58:48hosted only occur for function
58:50declaration not function expression okay
58:52let's see what this light means
58:55so we said wasting is JavaScript default
58:59behavior of moving the declaration to
59:02the to a top of the current scope so
59:04I'll create a variable called control
59:06dot rock forest and the variable is
59:12forest
59:14hello now I if I hit enter I'm accessing
59:20the variable before it's declare or
59:22initialize but JavaScript doesn't throw
59:26an error so this is because of wasting
59:30internally what JavaScript calls and the
59:35code get past is that sorry so it
59:40convert your code like this it takes all
59:46the variable declaration to the top and
59:49then it's initialize it that's why once
59:52it's declared and we know in JavaScript
59:56the variable declared with no values
59:58considered as assigned as undefined by
1:00:02the JavaScript engine so then we hit
1:00:04this forest it returns undefined let's
1:00:07see an another example of wasting with
1:00:09respect to function note now suppose I
1:00:14have a function or the first function
1:00:19and with in place I am calling message
1:00:23before variable declare and initialize
1:00:29this is a local variable because it's a
1:00:31it's inside the block scope so when I
1:00:36call this method
1:00:39who is fun
1:00:41it turns undefined but here also
1:00:45internally what Dow script Ellis which
1:00:49first a variable to the top of the
1:00:51function not outside the function
1:00:53remember to the top of the function and
1:00:55convert is Method I'll convert this code
1:01:03like this so it's by default be
1:01:05undefined
1:01:06it prints undefined and then it's
1:01:07initialize the value and these kind of
1:01:10question will be there to two or three
1:01:12question will be in the exam the other
1:01:16point that we discuss in the slide that
1:01:19we can't host a function expression so
1:01:22let me explain you quickly what is
1:01:23function expression when you have a
1:01:26function and that is assigned to a
1:01:31variable so when I try to call this
1:01:39function before assigning it to a
1:01:46variable we throw an error this is not
1:01:49defined because function expression
1:01:53never wasted but the same time if I say
1:01:57I have a function s and I try to call
1:02:01this function will run because function
1:02:05definition wastes remember function
1:02:08definition always host function
1:02:11expression ever host so this is the
1:02:15problem with a hosting and let's move on
1:02:23to the next topic strict mode then
1:02:28strict mode is a way to prevent the
1:02:33error in the JavaScript not fully but
1:02:36somewhat some errors you I would say so
1:02:39by enabling the strict mode we can
1:02:41eliminate some JavaScript silent error
1:02:43by changing them to throw error so to
1:02:46enable the strict mode you have to use
1:02:48you strip directive and which enable the
1:02:52strict mode in the JavaScript and with
1:02:55strictmode you can throw an error like
1:02:58the variable that are not defined with
1:03:01the where keyword it will not allow the
1:03:02leading of variable is not allowed to
1:03:04placate in a parameter in a function not
1:03:06at all so let's see quickly what it
1:03:10means to enable the split mode to just
1:03:13by you strict the top of your file or in
1:03:19the top of your function so it says
1:03:22whatever is below me so whatever below
1:03:27me we'll run the run in the strict mode
1:03:31by JavaScript so if I say X equal to
1:03:33three point one four because X is
1:03:38already defined xB B so it says xB B
1:03:46equal to three point one four is not
1:03:48defined because we are not appending of
1:03:51our keyboard with it so you strict will
1:03:54throw an error here okay let's see the
1:04:01another example I have used it again I
1:04:07have a variable 23 and I'm appending I
1:04:12am assigning a value 3.14 and I am
1:04:15trying to delete that takes 23 it will
1:04:18not allow it to meet lead of unqualified
1:04:20identifier in strict mode is not allowed
1:04:23the third point that we discussed you
1:04:26can not assign duplicate parameters so
1:04:32p1 p1 you undersigned in the strict mode
1:04:35so it will also throw an error duplicate
1:04:37parameters not allowed in the context so
1:04:41this is how you can avoid some of stick
1:04:46mode and I have few questions before
1:04:49going forward to for you guys to
1:04:53practice and that will similar sort of
1:04:59question you may get in the exam so this
1:05:02is the question number one you should
1:05:04practice and let me know like
1:05:08what can be the output of this
1:05:11particular snippet
1:05:13and put the answer in the comment I'll
1:05:17see if it's correct or not then I have
1:05:21second question it is also very
1:05:27important from the exam point of view
1:05:29and this test your knowledge of wasting
1:05:32how good you are with the hoisting so
1:05:39these two question you try to solve with
1:05:42saud yourself and reply me the answer in
1:05:46the comment of the video I'll check who
1:05:49is Right who is wrong and we'll discuss
1:05:51in the next session
1:05:53what should without put of these
1:05:55questions okay you can pause the video
1:05:58and can solve this that's alright let's
1:06:01move on to the next slide now this
1:06:05keyword ingests this is also very
1:06:07confusing topic for a few of the
1:06:09developers so this keyword refer to the
1:06:13object it belongs to it's a very general
1:06:15term this keyword belong to the object
1:06:17it belongs to and in JavaScript this
1:06:21totally different on the context so if
1:06:24you are using this in a method it refers
1:06:27to the owner of the object alone this
1:06:30refer to our global object that is
1:06:33window we just now see then in a
1:06:36function this refere also came to a
1:06:38global object that is window in a
1:06:41function in a strict mode if a function
1:06:43is in strict mode this is not pointing
1:06:46to a global object it point one define
1:06:48and if you have an even this refer to
1:06:53the element that received the email and
1:06:56you can explicitly bind the this to some
1:07:01method using a call and apply let's see
1:07:03all of these in the playground now
1:07:09so first is in a method this referred to
1:07:17the owner of the object this remember
1:07:19this and now I will create an object so
1:07:24here is a person object with the value
1:07:26trust me with the property first name
1:07:28last name ID and I have a method here
1:07:31and I'm using a disk within this method
1:07:35so according to our slide so this method
1:07:40referred to the owner of the method so
1:07:42who is the owner of this method that is
1:07:44a person object so if I print if I call
1:07:49person dot get full name this should
1:07:51print me this whole object again just to
1:07:55prove this point let's try this person
1:07:58not get full name and it brings you
1:08:04cancel this now you can see this is
1:08:06pointing to the owner of the method that
1:08:10is a person object so this is the first
1:08:12thing just remember this whenever you
1:08:15have an object and you are using this
1:08:17inside the method that this point to the
1:08:19actual object itself so the second point
1:08:27is is alone is global it means when you
1:08:37type this anywhere randomly it point
1:08:40directly to a window
1:08:42it's a window object so you can verify
1:08:46it whether this equal equal to window
1:08:49and it says true Third Point
1:08:59so this in a function represents the
1:09:02object that owned that function so if I
1:09:07have a function that is in the global
1:09:11global scope so if nobody is owning this
1:09:15function then this is pointing to a
1:09:18global scope that is window so if I call
1:09:22this function it point to a window
1:09:24object now the fourth point in an event
1:09:35is referred to the element that received
1:09:38that element received the event so to
1:09:42prove this and good my GS with an editor
1:09:46I'll create a button quickly here
1:09:49because to prove the event of an element
1:09:52I need some element on the screen so
1:09:54I'll create a button click this button
1:09:57you can see here
1:09:58a click button and I'll create a
1:10:01function ABC it receives some even if I
1:10:12have to print console dot log E and now
1:10:16add this method or this function to this
1:10:19button I'll add the click handler and in
1:10:24JavaScript it's called the function and
1:10:28past it is so according to our eggs in
1:10:32an event this refer to the element that
1:10:34received the even so according to our
1:10:39slide if I click this button it will see
1:10:43when even and it prints the element
1:10:48itself so if I click here it should
1:10:50print me the same thing in the console
1:10:52that we are printing here and if I click
1:10:56here now you can see it's printing the
1:10:58element which received the event so that
1:11:02is also be proved let's go back to our
1:11:06playground the next is the explicit
1:11:10function binding so if you want to
1:11:14change thus this for a particular
1:11:17function we can do it and we called it
1:11:19explicit function binding so I'll go
1:11:23back to the same first example where I
1:11:25have an object person that has first
1:11:29name last name ID and get full name as a
1:11:31method and when we were printing that
1:11:33this this was printing to the person it
1:11:38was the parent object now I'll create an
1:11:43another object called person one and now
1:11:48this person one is pointing to know
1:11:52where it is separating these two are
1:11:54independent method but I want the this
1:11:59inside the person object points to the
1:12:02person one object and this is we call it
1:12:05exploitive explicit function binding so
1:12:09engaged will call first person method it
1:12:15is get full name and we use a call
1:12:18method it is a function call function
1:12:21and calls makes the context and text
1:12:25means which context you want to bind to
1:12:28this method so I say just use person fun
1:12:35so once we call this now get full name
1:12:40it takes the first name as Salesforce
1:12:43and last name as Bev not the nickel and
1:12:47kagura so if I prayed enter now you can
1:12:50see it prints his first step so this is
1:12:53how we can explicitly change the binding
1:12:57let's see another example with the call
1:12:59because called not only bind the context
1:13:06but it also bind also past the argument
1:13:10so to show that I created a function
1:13:15here I created object same person but
1:13:18this
1:13:18my get full name is expecting some
1:13:21arguments and we'll see how we can pass
1:13:26the argument with her call all method I
1:13:29greatly the same another object that is
1:13:31independent right now no I use the call
1:13:37method I say that context would be
1:13:40person one and you can pass the argument
1:13:44after the context so the first parameter
1:13:45is context and then the rest all are the
1:13:51string or the argument that you wanna
1:13:53pass to this get fulness so now if I hit
1:13:57enter you will see first name and last
1:14:00name is taken from the context and E and
1:14:03P its expecting the argument so a and B
1:14:06will receive and the same thing if you
1:14:10want to do it there is another method
1:14:12called apply only difference between
1:14:16apply and call is apply passed the
1:14:21argument in that area form so if I pass
1:14:24it it runs in the same way but apply
1:14:30also to set the context but the argument
1:14:33should pass in the area format but in
1:14:35call it should be in the string format
1:14:37so this is the difference and this is
1:14:41how we can how this works in JavaScript
1:14:46so many this let's go to the next topic
1:14:55so the next topic is functions in GS we
1:14:59already seen many function let's cover
1:15:00this as well quickly so the first one is
1:15:05function declaration the function
1:15:08declaration is a normal function that we
1:15:10are seen from so long so it varies a
1:15:13function function mean it receives some
1:15:16pal it has some parameters we are
1:15:19performing some action and we are
1:15:20calling that function by the function
1:15:22name this is function declaration and we
1:15:24are calling it it's working fine then
1:15:27there is a function expression that also
1:15:30be already seen in Christine when a
1:15:33function is assigned to a variable and
1:15:36we call we call that function using the
1:15:39variable we call it function expression
1:15:42this is also simple let's move on the
1:15:46third one that you have not seen yet
1:15:49that is function concept that you can
1:15:50create a function using the function
1:15:52constructor as well so you can say you
1:15:55can create a fun and this is not very
1:15:57common good way but just you should
1:15:59aware of this we call the function
1:16:02constructor and function constructor
1:16:05will data argument parameters we define
1:16:12here and then we'll say return and the
1:16:15operation that we want to perform I said
1:16:17he multiplied B and now if I see Phung 4
1:16:25and 3
1:16:28funk and it performed that operation so
1:16:34this is a way to create a function not
1:16:36the recommended way but it's another way
1:16:38of creating a function using function
1:16:40constructor then there is a if he we
1:16:45called it does and one of the most
1:16:50commonly used design pattern for
1:16:52function in most like library mostly in
1:16:57jQuery and other library and let's see
1:17:00what is if he if he stands for
1:17:02immediately invoked function expression
1:17:04and it is the best way to execute
1:17:08function immediately as soon as it
1:17:10created let's see I create a function a
1:17:15comma B and this function returns he
1:17:22multiplied by P B now if I can't add
1:17:33require a function in sorry
1:17:36usually we create a function with the
1:17:38functioning but if I hit enter this
1:17:42function you need to call explicitly
1:17:44which you need to say ABC and you pass
1:17:48two comma three but I want a function
1:17:52that call itself immediately as soon as
1:17:55it comes in JavaScript so to do that
1:17:59and by the way this the function which
1:18:02is without a function name because it
1:18:04has an anonymous function so to do that
1:18:07in order to convert a function normal
1:18:10function - if he recreate an anonymous
1:18:14function first we wrap that function
1:18:17within these brackets and now you call
1:18:23this method and as we are expecting two
1:18:28values inside the function so we can
1:18:30pass that two and three now you see as
1:18:34soon as I hit enter it immediately
1:18:36invoke that function so this is one of
1:18:38the commonly used design pattern and
1:18:41it helped us from the scope global scope
1:18:45pollution says and now let's move on to
1:18:51the last one that is arrow function I
1:18:55have a separate slide for this so arrow
1:19:00function and one of the big hype of es6
1:19:05so let's see what is arrow function and
1:19:08the different way of writing the arrow
1:19:10function and you will get one question
1:19:13in the exam from the arrow function is
1:19:15really so I got two questions I guess so
1:19:20if I have a function ABC the returns
1:19:3442 number okay this is a function if I
1:19:37have to convert this function to an
1:19:39arrow function so in arrow function
1:19:42first you need to remove the function
1:19:44keyword then you need to if it is a name
1:19:52function I can say will create a
1:19:54variable and keep his bracket as it is
1:20:00if you want otherwise it's not necessary
1:20:03if there is no parameter here you can
1:20:06either keep empty or you can take any
1:20:09underscore anything bit as this in this
1:20:14part I will replace with this bracket
1:20:18especially at the place with the arrow
1:20:20and if there is no condition or
1:20:26execution is happening inside this
1:20:28bracket you are directly returning
1:20:30something you you can avoid the return
1:20:32statement and just pass 42 if I call ABC
1:20:37it returns we have 42 and we call this
1:20:41notation as arrow with no parameters
1:20:46okay now suppose I have a function same
1:20:51ABC a parameter X and you are returning
1:20:59X okay so now if I have to convert
1:21:05function with parameter into an arrow
1:21:07function it will be the same approach
1:21:11and say X because we are returning X
1:21:15directly you can ignore this bracket as
1:21:18well this is also a value index because
1:21:20only one parameter is there so you can
1:21:24remove this bracket and this will also
1:21:28work fine both is the or you if you want
1:21:34you can keep this bracket as well that's
1:21:36not an issue and if I call ABC with
1:21:41three it returns three so we have seen a
1:21:45arrow function without an parameter then
1:21:47we have
1:21:47with a single parameter let's see an
1:21:51arrow function with a multiple
1:21:54parameters so I'll create X comma Y and
1:21:59we'll perform some operation here X plus
1:22:01y so now if I have to convert this
1:22:10function into an arrow function I'll go
1:22:12with the same and see ABC this time
1:22:16there are two parameters so I have to
1:22:18define the curly bracket but before
1:22:23returning I am NOT doing any
1:22:24manipulation or any operation so I can
1:22:27return directly X plus y so this is a
1:22:32valid syntax here ABC is already defined
1:22:36so I'll say TABC one EPC one I'll say 2
1:22:45comma 3 so it returns of edit number the
1:22:48summation of 25 so we have seen without
1:22:52parameter with single parameter and with
1:22:54the multiple parameter now let's go and
1:23:02see I have some operation here that is
1:23:052z pin and i want to add that so now if
1:23:13we have to convert this function to an
1:23:16arrow function the Irbid will say maybe
1:23:22c2 and i will create in this as a
1:23:29function bracket and there are multiple
1:23:32parameter that's why I am in this packet
1:23:35in the arrow arrow notation right now I
1:23:39can't return directly because I need C
1:23:42to be there for that you need to define
1:23:45the curly bracket and do you need to
1:23:50define your let C equal to 10 and return
1:23:57this additive in this index if you
1:24:00compare you this removing a function
1:24:03keyword and just appending an arrow into
1:24:06the function so here it will perform the
1:24:12same way I will say two and three and
1:24:15see it's 15 2 + 3 5 + + 10 15 so this is
1:24:19with the block body so arrow function
1:24:22with a block body then another tricky
1:24:29question you may face in the exam is
1:24:31there is a function may be C that is
1:24:40returning an object or you will convert
1:24:48this into unsafe named mutual how you
1:24:56wanna convert this function to an arrow
1:24:58function will say ABC that will again
1:25:04create a ABC to NZ and I'll convert this
1:25:09function it returns directly but you
1:25:13can't give this return directly because
1:25:17arrow function consider this as a block
1:25:19and it will not work to solve this you
1:25:24need to put a bracket around the object
1:25:29so this gonna be the tricky one in the
1:25:32exam and if I say it return the object
1:25:37so these are the different different
1:25:39approach this is with the object literal
1:25:43now there was a problem before arrow
1:25:47function and this is just more of how we
1:25:52use arrow function just now we discussed
1:25:53but there was an issue without arrow
1:25:56function and that will discuss first and
1:25:59then we'll discuss how arrow function is
1:26:02solving that particular issue okay so
1:26:05I'll create an object
1:26:09Oh PJ and OB has a property called ID
1:26:19and that has a value 42 and I create a
1:26:24function or a method I would say not a
1:26:26function method counter and within the
1:26:29counter I'll bring the value of this and
1:26:35below that we print the value of
1:26:37function I'll create another function
1:26:40within that method and that's a valid
1:26:42scenario and within this function I am
1:26:49again printing that base and I'm trying
1:26:53to print this dot ID and I will say my
1:27:01ID is a liquid we I create an object
1:27:08object has a method counter and within
1:27:11the counter I'm printing that this and
1:27:13based on our this understanding this
1:27:15point to the object if this is used in
1:27:19the method so it print the object then
1:27:22within the same method I create another
1:27:24function and that is a function
1:27:27declaration ABC and here they should
1:27:30function declaration always point to a
1:27:33global object so this should be window
1:27:35and when I want to exist the ID it
1:27:40should bring it is printing undefined so
1:27:44I'll call that method just below this
1:27:47ABC and I will see ovj counter call this
1:27:52method so now you see my ID is undefined
1:27:58so one if we use this inside inner
1:28:03function it's loose its scope so to
1:28:09solve this problem before error function
1:28:13what we were doing was there is a method
1:28:16called point that help you to bind this
1:28:19to a function all in apply
1:28:23saw on Yelp but here it's buying that
1:28:26says that before that before that many
1:28:31people were using this approach as well
1:28:34they create another variable that that
1:28:37is a global and they assign base to that
1:28:40and they change it to that here this is
1:28:43one approach so if I print it says my DS
1:28:4842 so this is one approach and the
1:28:55recommended approach earlier given by a
1:28:58Java Script they said you can bind if
1:29:02you are going to inner function you can
1:29:04find this to that function and you can
1:29:10call that function so there is a bind
1:29:13method that bind this to a function and
1:29:16if I hit enter and call this method
1:29:19again it brings the ID of okay I forgot
1:29:26to change that this and I entered we
1:29:34call object or counter again you can see
1:29:37my ID is 42 and now all this is pointing
1:29:42to the current object so this is also
1:29:44pointing to the current object is also
1:29:46pointing to the current object and to
1:29:50solve these issues we come up with an
1:29:53arrow function so if I have the same
1:29:56method and I will convert this function
1:30:03when arrow function it solved my issue I
1:30:07don't need to bind or do anything
1:30:11because error function a piece of the
1:30:16period so you find now hit enter parent
1:30:25function not the parent object just
1:30:26remember this so arrow function take
1:30:28that this as of the parent function not
1:30:31the parent object and all
1:30:38object or counter now you see it's still
1:30:43trendy 42 and to solve this issue
1:30:46actually we introduced arrow function
1:30:49now we're not to use error function so
1:30:54if you have have an object with a method
1:30:57never convert an method to an arrow
1:31:03function the reason is just showing a
1:31:06minute obj dot counter and if I call
1:31:11this we are as I said arrow function is
1:31:16point to a parent function the parent
1:31:18function is not there so it pointing to
1:31:20a parent window but it's not pointing to
1:31:24a parent object so just remember this so
1:31:27this is all about arrow function we have
1:31:30seen different types of notation we have
1:31:31seen different types of use cases let's
1:31:37move on to the next topic that is
1:31:38closure closure closure is a design
1:31:44pattern commonly using all of the
1:31:47libraries and this is mostly important
1:31:51from the interview point of view if you
1:31:54are looking for a JavaScript job so
1:31:55closure is a pattern in which an inner
1:31:59function has an access to an outer
1:32:01function variable and argument so in
1:32:03exam or not in exam in interviews
1:32:06usually interviewer asks you to create
1:32:08show me an example of closure how you
1:32:10can access the outer function variable
1:32:14from the inner function variable so
1:32:17let's go and see a closure so I'll
1:32:23create a function called outer and say
1:32:31there is a variable in our current
1:32:33counter so this is the property local
1:32:39property of outer now I say return
1:32:43another function and give the name inner
1:32:51I'll return within the inner function
1:32:57down to this one I'll use this
1:33:01assignment operator and I will return
1:33:04counter so let me repeat what I have
1:33:11done here I created a function called
1:33:14outer and within that outer I'd here a
1:33:16local variable I'm emphasizing the local
1:33:19word here is a local variable counter
1:33:21and then I create a function that is
1:33:24returned by the outer function and the
1:33:28inner function incrementing the counter
1:33:30and returning the counter and this
1:33:34pattern is called closure in which when
1:33:39we run our outer function which returns
1:33:45inner function and now if I return in if
1:33:51I run the return function counter it
1:33:55starts giving me the value and it's
1:33:57always holding the outer function
1:34:02variable or function or any method or
1:34:05object so even though it's already done
1:34:09it's already execute this operation
1:34:11outer local variable should be destroy
1:34:13but if you are having a function that is
1:34:16return from an under the function the
1:34:19inner function hold the scope of the
1:34:21outer function and this design pattern
1:34:23we called it as crucial this is
1:34:26important concept from the interview
1:34:29point of view so let's move on to the
1:34:33next topic the next topic is object
1:34:36restructuring objective structuring is a
1:34:38new inner cleaner way of getting or
1:34:40extracting the values from an object or
1:34:43an array I will show you before D
1:34:47searching what we were doing so before
1:34:49restarting suppose I have an object
1:34:52employee and if I want to assign a value
1:34:57first name to a first mean variable last
1:34:59name to the last name variable what we
1:35:01were doing was
1:35:02we were creating the five variables and
1:35:05we were assigning it individually and if
1:35:07there are many we have to do the same
1:35:09process again and again you solve this
1:35:13issue not issue but to solve this
1:35:16tedious process we introduce these
1:35:19structuring so what restructuring says
1:35:22if you want the variable name same as
1:35:27the object property you just define it
1:35:31in the curly bracket and I will dispatch
1:35:38you later so if I say from employed D
1:35:43structure first name they should last
1:35:48name and B structure position so it
1:35:53create first name variable and assign a
1:35:57variable value employed got first known
1:35:59to the first name value the cash only
1:36:01here is the variable name and the
1:36:03property name for destructing should be
1:36:05seen if I print first moon sprinkle last
1:36:09name this is one way of restructuring
1:36:13another approach or another benefit in
1:36:17the district thing is if you don't have
1:36:18know whether the property will be
1:36:22available or not then you can suppose I
1:36:24am expecting a property C but that may
1:36:27not be available we can initialize it
1:36:30with any value at run time so now if we
1:36:38have a sign Tommy to the said if Z will
1:36:45not be available in the employee so if I
1:36:49prints it now you can see Tommy is
1:36:54coming because it's not available in the
1:36:56employee object so it dynamically assign
1:36:58that value that we want to assign with a
1:37:00equal to operator so this is another P
1:37:03this is the object restructuring that
1:37:05see the air it is searching quickly so
1:37:09for added restructuring because in array
1:37:13we don't have any property name
1:37:15so suppose I have an array eerr and if I
1:37:19want destructor it I can give any
1:37:25variable name that I want but it will
1:37:27always assign a value in the sequencer
1:37:29suppose I define a variable first it
1:37:31will take the first billion as I need to
1:37:33variable first the exact in region
1:37:35assign it to second variable third to
1:37:36third the fourth is not available you
1:37:39can do the same dynamic assignment here
1:37:42remember if I hit enter first will
1:37:45assign a and the fourth will assign the
1:37:48dynamic one and you can never look you a
1:37:51number in the array destructuring
1:37:54because number is not allowed in a
1:37:56variable so this is all about
1:37:59restructuring let's move on to the next
1:38:02topic that is object dot freeze
1:38:07so we forward to discuss this in the
1:38:09session one so I thought of let us
1:38:12discuss it today so object dot freeze
1:38:14method freeze an object so freeze means
1:38:18like you cannot change the value of the
1:38:20object you can't assign a value to an
1:38:23object you can't remove our property
1:38:25from an object so let's see an example
1:38:32so we create a MEK object called person
1:38:39five I'll give an unique in because it's
1:38:42a constant and if we already have seen
1:38:45in Const we have we can update the value
1:38:50so if I can name John to me we are able
1:38:54to updating it you know the person file
1:38:58value is updated for the name property
1:39:02but even though I want to create a
1:39:05constant in which objects also not
1:39:07allowed to update so to rescue that we
1:39:11have a method called object dot freeze
1:39:13in which you need to pass the object
1:39:19name that you want to freeze so now if I
1:39:22freeze % v so % 5 is freeze with the
1:39:26name nickel now if I say
1:39:29puts in five dot mean to John back and
1:39:35if I bring percent five again it's not
1:39:39updating anything which we mimic
1:39:43similarly if I want to delete something
1:39:46delete removing there is a delete or
1:39:48it'll say person five dot min and if I
1:39:55hit enter it returns false so it's it
1:39:58I'm not able to delete its freeze so
1:40:02this is all about freeze property can't
1:40:04delete you can't update and this is the
1:40:07right way to create a constant to
1:40:09foreign objects let's move on to the
1:40:14next topic that is date object will go
1:40:21through the data object quickly so dot
1:40:23and data object is used to work with
1:40:24dates in time and JavaScript will use
1:40:27browser timezone in display at time as a
1:40:31full text ring and we use new date
1:40:33method to create that it so if I type
1:40:38move it it gives me draw from date that
1:40:44is twelve seven twenty twenty so seven
1:40:48is July today it's Sunday and the time
1:40:51is ten forty seven so by this method you
1:40:56can get the current date in the string
1:41:00format there are other ways as well
1:41:03so other syntax is you can if you want
1:41:06to create your own date in JavaScript
1:41:10you can pass the details in this order
1:41:13start with year number the months
1:41:16minutes seconds milliseconds so if I
1:41:21want to create a date remember in
1:41:25JavaScript months start from 0 to 11 so
1:41:31I am defining a date called December 24
1:41:342018 and if I hit enter it generates a
1:41:38date December 24 2018
1:41:42similarly there is another approach by
1:41:47which you can create by passing the
1:41:49milliseconds in new great leaders pass
1:41:53the milliseconds in a single day we have
1:41:58maybe six back forty thousand
1:42:02milliseconds I guess and this is the
1:42:04number that we have in a single day
1:42:06maybe seconds if I convert and if I
1:42:09create a new date with these many
1:42:11milliseconds it generates our date from
1:42:17January 1 1970 and add the millisecond
1:42:22to this so in Javas JavaScript stores
1:42:26the date as a number of milliseconds
1:42:28since January 1 1970 UTC to universal
1:42:33time coordinate so this you'd need to
1:42:35remember the date starts if you define
1:42:39the date with milliseconds JavaScript
1:42:41stored that it starting from January 1
1:42:441970 but we passed a millisecond of one
1:42:47day so it issuing January 2 1970 there
1:42:52is another approach of creating the date
1:42:54you can pass it with a date string and
1:42:57each string you already know you can
1:42:58pass the date in a format October 13
1:43:022014 it have an end time so this is
1:43:05another way of creating the date I'm
1:43:08giving it a very high level you should
1:43:11know because it may be or may not be a
1:43:13question of in the exam now you already
1:43:16create the date using a new date method
1:43:19you read constructor and we'll save this
1:43:24into a variable I'll create some meaning
1:43:29date not the current it I'll I'll define
1:43:331950 11 24 so it is 24 December 1950
1:43:37month start from 0 to 11 so 11 is
1:43:41December here and print B so now I'll go
1:43:45back to slides so date method gives us
1:43:47the feature by which we can play with
1:43:49the dates so if you see these date it's
1:43:53so big and if you want
1:43:54at some particular value so this method
1:43:56will help you do this
1:43:58these methods are available to rescue so
1:44:02let's see the quickly few methods there
1:44:05if you want a full year out of this date
1:44:07you can call the cat fully either if you
1:44:10want only fully earth without what we
1:44:14call without a foundation of twenty so
1:44:18I'll say get here without a Venetian of
1:44:23nineteen sorry so it gives me the last
1:44:26two digit of the year and if I want
1:44:29months I can call month and month is
1:44:34eleven so remember mine start from zero
1:44:37to 11 if I say it be it would give me
1:44:41the date and another thing to remember
1:44:44they in JavaScript they start from zero
1:44:48to six so zero is a Sunday so that's why
1:44:51it's given zero apart from getting the
1:44:54value you can set that year as well a
1:44:56set of date as well if I want will set
1:45:00this particular time or particular
1:45:05date/time stamp I can change the say I
1:45:07can call the set year method and pasta
1:45:10here and now if I print B it change the
1:45:15year for the time stamp so now the date
1:45:18is twenty twenty twenty forty Sampath
1:45:21Thursday this is a very high level the
1:45:25date methods let's move on to the
1:45:27important topic that is called spread in
1:45:30rest operator so the spread operator
1:45:33introduced in es6 and spread operator
1:45:36allow us to spread the value of an array
1:45:38into a single augment element so earlier
1:45:44we have seen there are some methods in
1:45:47[Music]
1:45:49array like push and pop and those were
1:45:54mutating the data so spread operator
1:45:57helped us to get the new copy of the
1:46:01data in a cleaner way and it it is very
1:46:05helpful when you want to create a new
1:46:07copy of area or
1:46:08object if you want to concatenate the
1:46:10valuer properties you want to pass
1:46:12element of an array to a function as a
1:46:15separate argument or you can convert
1:46:17string to an array so with the same
1:46:20single operator spread operator you can
1:46:23achieve different things let's see how
1:46:26we can achieve this let's go back to my
1:46:32playground so will now play with spread
1:46:38operator I have an array so first we are
1:46:43learning how to create an eCopy so I
1:46:51will create an array X and if I want to
1:46:57create a new copy I'll say y equal to
1:47:01the syntax for spread operator this
1:47:04triple dot and I'll say spread my array
1:47:07and put into an array pad and assign it
1:47:13to Y so now Y is the new copy so how to
1:47:21prove that it's a new copy if I update X
1:47:23dot six at six index not I'll do push
1:47:33say six now if I print X it has six
1:47:40values and if I say bye while it still
1:47:43remains with the five values so this is
1:47:47how we can create a new copy of I it's a
1:47:49shallow copy now let's see how we can
1:47:53achieve concatenation using spread
1:47:56operators so again I have array X and if
1:48:04I want to assign to a variable provide
1:48:08with new value I can add property
1:48:15directly after the spread operator and
1:48:17it automatically concatenate that value
1:48:21to the array
1:48:22now if I hit enter now you can see why
1:48:29has the element six now let's see the
1:48:34third way how to pass element to n/a
1:48:41pass elements of an array to a function
1:48:44as a separate argument so suppose I have
1:48:48a function here ABC that expecting three
1:48:53parameters and now if I have a list of
1:48:59arguments in an array format and I want
1:49:03to call this method if I pass it arcs
1:49:07directly what it takes it considered
1:49:11array as a single argument and it append
1:49:13to it but I want it to spread it so you
1:49:18can spread that and now Fang will go to
1:49:21a2 will go to p3 will go to C and four
1:49:25and five is nobody is there to receive
1:49:27so these will be ignored now if I call
1:49:30it return 6 1 plus 2 Plus 3 6
1:49:34this is another way to pass element of
1:49:37an array to a function then another
1:49:41benefit of spread operator you can
1:49:44convert string to an array suppose I
1:49:49have string
1:49:50Mikal and if I want to convert into an
1:49:54array you just spread this under the
1:49:57array bracket and it split into an array
1:50:01so this is another benefit you can use
1:50:05from the spread operator let's move on
1:50:10to the rest operator so rest operator
1:50:12allow us to collect all remaining
1:50:14element into an array with rest
1:50:16parameter we can gather any number of
1:50:18argument in an array and rest parameter
1:50:21have to be at the last argument okay so
1:50:25I'll explain you what it means
1:50:27so
1:50:30the syntax is almost same rest and
1:50:34spread both used a triple dot the name
1:50:36depends how you are using that so till
1:50:40now we have seen spread operator but we
1:50:42call the spread operator as a rest
1:50:45operator when you call the triple dot in
1:50:49the function parameters so you are
1:50:54expecting some arguments here and you
1:50:57don't know how many it will come so what
1:50:59this triple dot here does it converts
1:51:03everything into an array so let's see an
1:51:10example of this so if I pass add one it
1:51:16was an array of fun if I add one into it
1:51:23converts those parameters to N and E and
1:51:29if I pass many it convert them to an
1:51:32many arguments then there was a point
1:51:36like rest operator always should be the
1:51:38last so I will tell you what it means
1:51:41suppose I have a function and I want to
1:51:50parameter as it is in the last should be
1:51:53the rest one like all remaining should
1:51:56convert into an array so whenever you
1:51:58use the rest in the function the rest
1:52:01should be always in the last and if I
1:52:06say console dot log C and if I call this
1:52:13function method now see I have any
1:52:19properties and he will map to X Y will
1:52:26map to hello will map to Y and rest will
1:52:30convert into an array and map to Z so if
1:52:35I print first console it should give me
1:52:37a hello and C should be the conversion
1:52:40of these rest property into inherit
1:52:42let's hit enter
1:52:43so you can see first give me a hello and
1:52:46rest gets converted into an array so
1:52:49this is what the rest operator is let's
1:52:53move on to the next topic next topic is
1:52:57object prototype and prototype chain so
1:53:03first what is prototype so prototype is
1:53:07an object that is associated with every
1:53:10function and objects by default so to
1:53:18get the better understanding of this
1:53:20let's go and play around with it so
1:53:23there will be our two terms here one is
1:53:25prototype and another will be underscore
1:53:29underscore proto they are almost same
1:53:34but we called differently based we are
1:53:38based on the context actually so just
1:53:40remember this I'll explain you the event
1:53:42to call prototype and meant to call
1:53:44underscore underscore proto okay so we
1:53:48know how to create an object we can use
1:53:54object.create method to create an object
1:53:57I want of it
1:54:00Oh to create an am passing explicitly
1:54:03null so I don't want this object to
1:54:05refer anything and if I hit enter and I
1:54:09print oh and it has no property so it's
1:54:15pointing to the null that is very simple
1:54:18approach then we know to create an
1:54:25object hitting object literal so I
1:54:28create an object equate property ID and
1:54:30me I hit enter and now you can see if I
1:54:39open this it has two property well and
1:54:42good but there is something underscore
1:54:45underscore attached underscore
1:54:47underscore proto attached to it and if I
1:54:51expand this
1:54:53it's constructor is the capital object
1:54:56so what it means is when we create an
1:55:00object using object literal it's
1:55:04creating using an object method only and
1:55:08that object method is attached to a
1:55:11another object that is called proto and
1:55:17let's go I'll explain it more about this
1:55:21and there is another way to create an
1:55:25array as well so if I create an array
1:55:28I'll see array array is we call it
1:55:33arrays and object so if I open with I'll
1:55:35see there is another proto is here and
1:55:38proto is pointing to an array
1:55:42constructor and the array constructor
1:55:45has another proto that is assigning a
1:55:49key into an object so this is also
1:55:51created using an object method that's
1:55:53why we call array as an object and there
1:56:00is a function as well and if I say
1:56:08console dot log entity my function name
1:56:16which should be directly to see that
1:56:20directory yeah yeah
1:56:22and now if I open my function function
1:56:27again have a proto and that proto has
1:56:31another proto and that proto is pointing
1:56:34to an object so we have seen I will go
1:56:39back to my whether we create a object
1:56:44using object or create any free pass the
1:56:47creation as a null it pointing to the
1:56:50null so it's a completely empty or
1:56:53object if I create an object with the
1:56:56object literal it will create an object
1:56:59that will point to an object prototype
1:57:01and that point object prototype refers
1:57:04to another so null is the condition we
1:57:06everything stops now if I create an
1:57:10airing air is created using an array
1:57:12constructor that is a li dot prototype
1:57:14and then array dot prototype point to an
1:57:17object dot prototype and that points
1:57:19panel and function dot prototype also
1:57:23point to the function constructor and
1:57:25then function concept a point to the
1:57:27object prototype and object prototype
1:57:29define to the none so what we have seen
1:57:33till now is there is a proto property or
1:57:36a object attached by default by an
1:57:39engine to every function or objects we
1:57:42create until enlists we don't want to
1:57:46create a how people don't want a
1:57:49prototype in that that's why DP define
1:57:51nozzle but by default every time of
1:57:54JavaScript engine attach a property
1:57:57called prototype to our object our array
1:58:01our function and we'll see what's the
1:58:06benefit of this prototype property let's
1:58:10go to the playground so before that I
1:58:23show you the difference when to call
1:58:25prototype and when to protons so
1:58:28prototype is a property of a function
1:58:32constructor so whenever we call a
1:58:34prototype it means I am referring to
1:58:38function constructor and if I say
1:58:41underscore underscore proto it is a
1:58:43property of n stands created from that
1:58:45constructor so it's more like proto is
1:58:48always there when you see the object and
1:58:50prototype is always there when you see a
1:58:52function constructor okay just for your
1:58:56reference I put it here now earlier when
1:59:01I have to create an object I will show
1:59:04you the benefit of prototype so this is
1:59:07object given by the engine but why he is
1:59:09giving us okay so earlier we have to
1:59:13create an object we write this literal
1:59:17notation
1:59:19is not useful raise a green definition
1:59:22my console crew another 12 change it to
1:59:25bar I have a variable object called user
1:59:30one that has property in methods well in
1:59:34good if I have to create an another
1:59:36object again I have to create the same
1:59:41properties and methods again and again
1:59:44so this is bit cumbersome process like
1:59:47if you have hundred percent or hundred
1:59:49user you want to write the hundred time
1:59:51the same object so to solve this problem
1:59:57it's better we create a prototype a
2:00:02blueprint that help us to create the
2:00:04number of users based on the values so
2:00:07further we will create a constructor
2:00:11function so constructor function
2:00:16whenever we called it constructor
2:00:18function before es6 we were not having
2:00:20the concept of class keyword so we were
2:00:22called constructor function as a class
2:00:24so we create a class and to make a
2:00:28better readability we keep the name of
2:00:31that particular function with the upper
2:00:35case and I'll create a constructor
2:00:41function here so that function receive
2:00:45some parameters and I am creating a
2:00:50blueprint like if first name comes it
2:00:52create a property first name assign that
2:00:54value create a last name age rule and a
2:00:58method get full name and now this will
2:01:01work as a blueprint and record it as a
2:01:05constructor function and from the
2:01:08constructor function we can create the
2:01:10instance instances nothing is an object
2:01:12so to create an object I'll say user 1
2:01:17equal to MU because new used with the
2:01:22constructor and he'll pass first name
2:01:27Nick last name
2:01:31then we'll pass the age that is
2:01:34expecting and then because if you'll not
2:01:35pass it will take consider it as an
2:01:38undefined and now I hit enter and I
2:01:42obtained user 1 so user 1 has all the
2:01:45properties and the methods age first
2:01:49name yet for name last name and rule and
2:01:52this is an easiest way to create now
2:01:56objects when writing a whole deck
2:01:59literal again and again I'll say naquan
2:02:01Kevon 24 I'll say engineer 1 and user 2
2:02:10this is also creating a unique object
2:02:14for me this approach was very good
2:02:17because we were able to get that but
2:02:20there is a redundant feature redundant
2:02:23things like real replicas repeating the
2:02:26method in the both objects while we are
2:02:29creating because this method should
2:02:32impact our performance if we have we are
2:02:36creating a hundred users and hundred
2:02:38users we are appending this method
2:02:40hundred times and this is a reusable
2:02:42function so it's better if we take it
2:02:45out but if we take it out how all
2:02:48objects get to know there is something
2:02:50so here comes the prototype to desk us
2:02:53so prototype is an object that is
2:02:56associated with every function and
2:02:58object by default in JavaScript so what
2:03:02we gonna do is we'll say we'll create
2:03:08function constructor without a method
2:03:11and we'll attach our all methods to our
2:03:16prototype of that constructor function
2:03:19so I will say it whenever we use
2:03:21prototype it means we are referring to a
2:03:24constructor function so prototype is an
2:03:28object at person constructor that is
2:03:31created by JavaScript and we are up and
2:03:33attaching our method to that and
2:03:41once we did this now I plan everything's
2:03:49great ideas and now we'll create our
2:03:53user user one now if I bring user one it
2:03:59will not show us the method but if I go
2:04:04to the proto you will see there is
2:04:06something automatically gets attached to
2:04:08the prototype so that is gratefulness
2:04:11and if I call this method it will
2:04:18returns a name very exactly like first
2:04:21name and the last name we are appending
2:04:22here and this is called prototype
2:04:26chaining as well when we call this
2:04:29method first it will come to the object
2:04:31it will see do I have something he said
2:04:34no then it will say go to my prototype
2:04:36they'll say I have something yes then
2:04:39return it if it's no it will go to the
2:04:41object prototype then if it's not find
2:04:44anything in object prototype go to the
2:04:45nut that's what this diagram is trying
2:04:47to show you it will go in the chain
2:04:50searching the values so this way we say
2:04:57if our lot of performance issues and
2:05:00most libraries are built on this
2:05:02prototype concept so now we have seen
2:05:05how we can attach a method to a
2:05:07prototype now we will see how we can
2:05:10achieve the prototype in headband so we
2:05:15can call it object inheritance as well
2:05:17so inheritance is once when one object
2:05:20get access to another object properties
2:05:22and method and every JavaScript object
2:05:26has a prototype property that we have
2:05:27seen which makes inheritance possible in
2:05:30JavaScript so before classes and all we
2:05:32were achieving the inheritance using
2:05:34prototype that's what we called it as a
2:05:37prototypal inheritance and let's go and
2:05:42see this how to create objects
2:05:46prototypal inheritance so to understand
2:05:50this I will create
2:05:53instructor any month animal will receive
2:05:56two parameters named in it this is a
2:05:59constructor function because I have to
2:06:01find e with the capital and I want to
2:06:05add one method to this animal so I'll
2:06:10add it to the prototype and the method
2:06:12name is eat and it will take that this
2:06:15dog meat is eating till here
2:06:18it's well and good we create a
2:06:19constructor we create a constructor
2:06:21method attached to a prop prototype now
2:06:26let's create another constructor dog and
2:06:31the ox is mean each breed and similarly
2:06:39will initialize here we'll say name
2:06:42equal to name this dot H equal to H and
2:06:52this dot feed were to bring this is how
2:07:01we can create another constructor
2:07:04function I create a dog with the capital
2:07:07D and if I want to attach some method I
2:07:13can attach it here for time being
2:07:15instead of prototype right now you can
2:07:18attach if we are not creating more
2:07:20instance we can create here itself till
2:07:23here it's okay but then I realized I
2:07:26already have a front constructor
2:07:28function that is using these two
2:07:31properties why should i recreate these
2:07:33two properties why not i inherit these
2:07:37properties from animal class i elsie
2:07:40class okay animal class so to do that
2:07:45we'll say okay but how will do so we'll
2:07:49say we'll call the constructor name
2:07:52he'll call the crawl method that we see
2:07:57earlier to set a context and here also
2:08:00will say the animal class that
2:08:06this is about class and I'm passing
2:08:11human and each that is required for the
2:08:14earth initialization okay so now if I
2:08:21hit enter and I'll greet our dog in
2:08:28stands now I'll call it v1 and I'll say
2:08:34CD one even has age Breedlove breed and
2:08:41him so it has everything and we said oh
2:08:44yeah it's inheriting so that's why we
2:08:46are able to see agent name let's confirm
2:08:50whether it's inheriting the prototype as
2:08:53well so prototype method is eat so if I
2:08:56say it's it's not inheriting it it's
2:09:01inheriting only the objects and method
2:09:04that attached to that particular
2:09:06constructor function not to the
2:09:08prototype to rescue this will say we'll
2:09:18say okay we inherit all the properties
2:09:21let's inherit methods use using object
2:09:27dot create so this is my constructor
2:09:31function and for constructor function
2:09:33I'll say it all dot prototype I'm saying
2:09:40said the prototype of dog which will
2:09:43create a object or create and we'll map
2:09:50the animal prototype to the dog
2:09:53prototype now if I hit enter and I'll
2:10:00say B - I'll create a new instance B 2
2:10:04and D 2 has v2 age you know now if I try
2:10:12to access its when you can see it's
2:10:16printing up message soon
2:10:19this is how we can inherit the
2:10:21properties and methods in JavaScript
2:10:25using a prototype inheritance we call it
2:10:29prototypal inheritance and let's go to
2:10:34the next slide where I'm explaining this
2:10:37in the diagram so first we create the
2:10:39animal constructor and the time we
2:10:42create the animal constructor if we
2:10:43automatically a prototype got created
2:10:46and to that prototype we create edit a
2:10:49it's method and animal prototype will
2:10:54automatically had a proto that is
2:10:55pointing to the object dot prototype and
2:10:57that object dot prototype pointing to
2:10:59the null okay and then we create our
2:11:02animal one instance and that instance is
2:11:06pointing to the prototype we are able to
2:11:08access that prototype then we create a
2:11:11dog constructor dog constructor has its
2:11:14own prototype and that prototype again
2:11:17pointing to the object type and when we
2:11:21add object or create animal dot
2:11:24prototype it break this the reference
2:11:27from direct object prototype to an
2:11:29animal prototype so now it access the
2:11:32animal prototype and the chain become
2:11:34dog prototype dot animal prototype dot
2:11:37object or prototype this is what it's
2:11:39happening internally and this is very
2:11:42confusing topic like it's very tough to
2:11:44explain or visualize it until unless you
2:11:47play around with it so let's go to the
2:11:51next topic now that is class is and I
2:11:54hope you guys are more comfortable with
2:11:55classes than the older way of
2:11:57inheritance class got introduced in the
2:12:01es6 so it was not earlier available a
2:12:04class is a type of function but instead
2:12:06of using the keyword function to
2:12:08initiate it like we were doing earlier
2:12:10for the constructor function we can use
2:12:12the class keyword as it is and the
2:12:15property are assigned inside the
2:12:16constructor method so let's go and see
2:12:23this
2:12:26so we say creating a class you need to
2:12:30use the class keyword or classroom I'm
2:12:32giving a green animal and if you want to
2:12:38refine or initialize some oh please you
2:12:42need to define a constructor and
2:12:43constructor will receive and initialize
2:12:46it constructor only initialize once and
2:12:50now if you want to add some methods you
2:12:54can add that below constructor this is
2:13:01my class that has name in each property
2:13:03and each has the function so if I hit
2:13:08enter
2:13:10last name is already declared okay
2:13:18animal one is my class Nino and now if i
2:13:23create an instance from animal one as
2:13:26animal one and i will print animal one i
2:13:30create the object internally it's
2:13:34working like a prototype only and if you
2:13:39see as i said the best performance is
2:13:43when you attach the method to a
2:13:45prototype when we create our class
2:13:49internally it's also assigning the each
2:13:51to a prototype and if i see animals one
2:13:56dot it's it's available animal one is
2:14:00hitting this is well and good so this is
2:14:03how we can create an instance create an
2:14:06object or instance so now if we have to
2:14:12do inheritance okay so for inheritance
2:14:16I'll create an another class called dog
2:14:20and dog has great property and I'm
2:14:25logging the breed dog is also available
2:14:29on the top one
2:14:36I'll hit enter and just give me a second
2:14:44and we'll create a new instance drop one
2:14:50drop one should be small not a big one
2:14:56sorry and if I bring dark one then you
2:15:04can see it's created a property and a
2:15:08method now we have two classes available
2:15:13one is animal and another is dog one and
2:15:18animal one now we want to inherit the
2:15:21properties from animal one to drop one
2:15:24so to inherit in JavaScript we use the
2:15:30keyword called extends and for that
2:15:39we'll say one if you walked on lwc you
2:15:44would have seen this keyword already say
2:15:47extends the property of animal and then
2:15:52we'll define our same constructor and
2:15:59the same constructor will expect name
2:16:02age and breed it initialized in the
2:16:05constructor and here we call a super
2:16:10method super method called the super
2:16:13constructor means the constructor of the
2:16:15parent that is animal constructor and
2:16:18you can pass the value if you want to
2:16:20pass so we want to pass an e- to the
2:16:22super constructor and we are
2:16:27initializing bang dog property as well
2:16:30so that is freed and we'll assign degree
2:16:36so now we extend the properties of
2:16:40animal we assign the properties to
2:16:43animal properties and now we'll create
2:16:46the same method log read here
2:16:51and if I hit enter it's working
2:16:56and now we'll create an instance of this
2:17:02so we'll create block 101 as the
2:17:11properties and the methods so each end
2:17:15names are inherited from the animal
2:17:17class and now you can see log grid is
2:17:23the method of dog but if I go further
2:17:28down to the next thing that is inherit
2:17:30from the animal class there is the eats
2:17:32also available so if I say trout one dot
2:17:36eats it returns draw one is eating so we
2:17:41successfully inherit the methods as well
2:17:44as property so this is how we inherit
2:17:48the properties and method in JavaScript
2:17:52using the class keyword let's move on to
2:17:56the next topic next topic is JavaScript
2:18:00decorator our decorator is simply a way
2:18:03of wrapping one piece of code with
2:18:05another and this is a concept you might
2:18:07well have heard previously as a
2:18:09functional composition or the
2:18:11higher-order function and decorator
2:18:14function takes target name and
2:18:15descriptive as an argument let's go and
2:18:17see in an example so this example also
2:18:21will work here only in my yes fiddle
2:18:27because I need a babble transpiler to
2:18:31support that JavaScript ik decorators so
2:18:37I'll create a class greet here I'll zoom
2:18:40it if you want it works good here so we
2:18:46have a class feet and I have a greeting
2:18:54method in this
2:18:57and I'll say return hello this is a very
2:19:10basic structure I create a class with a
2:19:12method and that method is returning
2:19:15hello and below that if I create an
2:19:19instance of this I'll say where ideally
2:19:23you should use cost but I'm using web so
2:19:27you agreed we are instigating an
2:19:31instance and below that we'll just bring
2:19:34that in the console repeating message
2:19:43and that's one this oh I forgot to add
2:19:51calling break it so let's learn it again
2:19:58so in the console you can see Hello is
2:20:01printed so this this is the basic rule
2:20:04but I want some functionality to add in
2:20:07the class that behave as a decorator but
2:20:13it's not allow you to recreate the what
2:20:17we call reassign a function so I'll say
2:20:22okay let's create a decorator call at
2:20:26the retreat only so I want this function
2:20:28to be read-only and you have seen these
2:20:31in effects as a or enabled or in lwc has
2:20:36added track at the rate api so that's
2:20:38more of adding a functionality without
2:20:41changing the underlying functionality of
2:20:43the class so we'll say we'll create a
2:20:47read-only and we'll create a function
2:20:50called read-only here and read-only is a
2:20:53decorator here as as mentioned in the
2:20:56slide will take target will take name
2:20:59will take descriptor the target is the
2:21:04target constructor and the name is
2:21:07simply the name of the method
2:21:09where you have a pencil greeting will be
2:21:11the name target will be the whole method
2:21:14this is constructor method and
2:21:16descriptor is the property in the value
2:21:21actually the dot o so let's say here and
2:21:27I'll see this critter has some default
2:21:33properties always one of the properties
2:21:35writable I'll say right if L should be
2:21:38false so avoid writing whenever a
2:21:43function or a method is decorated with
2:21:46read-only so and we'll say return this
2:21:52critter
2:21:53so whatever it comes you reassign it as
2:21:56it is and now our decorator is ready we
2:22:03already decorated the greeting method
2:22:05with the decorator and let's create
2:22:07another method now we'll try to override
2:22:14our greeting okay and let's say hooray
2:22:24and I'll bring this method again in for
2:22:32differentiation I'll say first one the
2:22:36second one now if I get run so first
2:22:45hello saying hello and second hello also
2:22:48it's saying hello even though we updated
2:22:50the greeting we are trying to reassign
2:22:52the function definition to the greeting
2:22:55method but it's not allowing as soon as
2:22:59I will remove this decorator and I hit
2:23:04run again it will override it so it's
2:23:10now you see the second dating is
2:23:12printing hooray and this is what Java
2:23:15Script decorator is there and it
2:23:17introduced in es 7 and decorators gives
2:23:21us the leaner way of writing of
2:23:23charity without touching the inner
2:23:25functionality of the class so let's go
2:23:32to another slide that is modules export
2:23:36in tears and you will get many questions
2:23:40on this so we have first we'll see
2:23:44exporting then we'll see importing so
2:23:47first is the named export named exposed
2:23:50our use when we have many exports per
2:23:52file and there are two way of mimics
2:23:54both exposed export individually and
2:23:57export together so I'll go to my slack
2:24:03glitz I created one project just to
2:24:04demonstrate this and I said there are we
2:24:12are talking about exporting so there are
2:24:14named export as well I have named export
2:24:23so named export is used when we have too
2:24:25many things to expose suppose and but by
2:24:31the way before that export is a keyword
2:24:33if you if you have suppose a property
2:24:37called programming list or array okay
2:24:41and if you want to export or you want to
2:24:44allow this property bit to be used in
2:24:48another file you you need to append the
2:24:50export keyword okay so we created one a
2:24:55named export as we said is useful when
2:24:58we have multiple export in a single file
2:25:01I create multiple export in a single
2:25:04file I create an array I create a
2:25:05function I create an object and I'll
2:25:10save this this is called name export and
2:25:14let's try to see first with the
2:25:18importance well and if I want to import
2:25:21this functionality in my programming I
2:25:23mean in my another file I'll use the
2:25:26input keyword as they are multiple
2:25:29export we create a curly bracket and
2:25:31we'll pass a function name here
2:25:41and from today we are exporting they are
2:25:47exporting from neutrals but yes I'll
2:25:52save this now let's see what it prints
2:25:56our control here I use a react project
2:26:02to demonstrate this because I don't have
2:26:04any project ready right now I am
2:26:10printing all these three above the
2:26:13return now you'll see it's returning
2:26:16exactly thing whatever we are exporting
2:26:18from there and but function is returning
2:26:21the function definition because I
2:26:23haven't hit the function calling so now
2:26:27the function calling hello sweater is
2:26:29printing so this is called name export
2:26:31and individual input we can export at
2:26:37the end as well if you remove export
2:26:40from here and you just say export
2:26:48together it means in the end queue a
2:26:51drag sport keyword and pass all the
2:26:53means you see here it still work
2:26:57totally fine the importing will be the
2:26:59same but there is a problem with this
2:27:06approach it's totally fine but there is
2:27:08a problem in the importing suppose there
2:27:10are a hundred properties that you are
2:27:12exporting you can't import hundred
2:27:14things at a time right so there is a vey
2:27:18called alias importing by which you say
2:27:22import stuff means everything as utils
2:27:28do you say whatever comes from the util
2:27:31file he'll consider it as a utils and
2:27:33I'll use it as you kill dart programming
2:27:36list utils dot and the soil utils from
2:27:42dot dope details so this is name inputs
2:27:48and I'll show you import a slide as well
2:27:52before that so we just demonstrate
2:27:55import with Elias and normal imports
2:27:58normal imports are with the curly
2:28:00brackets and the import with Elias are
2:28:03with the star this name can be anything
2:28:06that you want to use why I give the
2:28:08meaningful name util so utils we'll use
2:28:10that now let's go to these are the name
2:28:14export now let's go to the default
2:28:16export suppose I want one export from
2:28:22the file so we can create that
2:28:25particular property to our default
2:28:28export but for that you need to say
2:28:31export default this is a keyword and
2:28:34just return the object and within the
2:28:39object you can return your these
2:28:46properties as an object so I convert
2:28:51this property to the object now we are
2:28:54exporting the default object and you
2:28:58would have seen this spectrum in the lwc
2:29:00class export default class and now if
2:29:04you want to import something from the
2:29:05default you don't need any ideas or any
2:29:08color bracket you just give the
2:29:10meaningful name you want you can use
2:29:12your pills and now again you can because
2:29:18we convert that into an object and you
2:29:20can access those properties in utils our
2:29:22program at least you still dot so this
2:29:25is called the default export so there
2:29:29will be a question in the exam identify
2:29:32the default export identify the name
2:29:35export identify the export as a yes and
2:29:40I guess we are done for today's lecture
2:29:43I know it's pretty big but if I miss
2:29:47something you can highlight in the
2:29:50comment if I said something wrong you
2:29:52can correct me in the comments and if
2:29:54you have any doubt you can ask me in the
2:29:57comments and let me quickly go to the
2:29:59exam outline so today we covered
2:30:02object functions and classes and I give
2:30:05my best to cover everything that we that
2:30:09is mentioned in the exam guide so Vika
2:30:11covered decorators we covered modules we
2:30:15covered fundamental of class we covered
2:30:17object implementations we covered
2:30:19function implementation can we cover the
2:30:22scopes and everything in the block scope
2:30:24in the global scope and the func a date
2:30:28one I covered from the previous one so
2:30:30that also I covered I hope it was good
2:30:35for you and beneficial for your exam and
2:30:38thank you for your time have a great day

About this transcript

This page contains the full transcript of Salesforce JavaScript Developer 1 certification series | Session 2 by salesforce troop, generated from the public captions YouTube serves with the video. The transcript has 18,675 words across 2,515 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.