Discovering JavaScript

so let's get started well I was trying to think about how to really describe JavaScript if somebody fell off a cave into a cave let's say back about 20 years ago and they just rescued this person and the first question he asks is what's the most popular language you're gonna say well JavaScript of course and the person is going to be an absolute denial and I was thinking about how to describe JavaScript and the only way I can describe JavaScript is it's like this bad villain in a movie they keep killing him but he keeps coming back to life and that's amazing how javascript their surface so many different times well I'm gonna talk a little bit about what's really wrong with JavaScript to begin with well one of the very first problems with JavaScript is it's the inconsistencies of the language across different browsers we keep running into errors all the time and it's a very really poor name for a language think about this for a minute would you ever do this would you name your child after somebody who's popular in the neighborhood what a bad name for the language called Java however because it does become popular well there was a really a poor name it's a misunderstood language to a great extent and a lot of times people really fear this language but it's actually a pretty powerful this and there's one other problem I think we all run into you typically go take probably a course on how to program Java or C sharp or F sharp but how many times people actually take a course on JavaScript we feel kind of insulted if somebody says go take a course on JavaScript so how does morph most people learn JavaScript well you learn JavaScript by reading code on the web and most of the JavaScript code on the web is pure crap so we've been learning from really bad examples in fact I would say that's not true anymore that was ten years ago but people have shots are cured this now so we announced simply copy and paste the bad code now it's even worse than actually rewriting that code so we haven't really taken the time to learn this language really well and that's really a disservice to it but on the other hand javascript is actually quite a powerful language in fact it's a little too powerful for what it can actually do and it's a dynamically typed language but it's also weakly typed so once you get past running the code it's garbage in garbage out you better know what kind of objects you are dealing with otherwise you could get into really bad errors along the way it's extremely flexible and in fact very rarely do you have to really use a framework for mocking and stuff like that it's extremely easy to add methods to classes and and change methods as well at runtime it does provide functional style of programming but certainly it's not a purely functional language in fact anytime I've heard the word functional and JavaScript together usually people say JavaScript is a dysfunctional language not actually a functional language but it does have the functional style of programming in it so you can use higher-order functions and all those good stuff but one of the really cool things about this is you do have prototypal inheritance well most of the languages we are used to like for example Java C++ C sharp we use class-based inheritance well JavaScript on the other hand provides a prototype of inheritance and that's a lot of fun well let's you know if talking let's take a look at some examples and see what we can do with them but I want to start with some ground rules we have to be very careful about now there are a few things that we would think are optional in JavaScript but they're optional as in I will hurt you if you miss using it kind of optional so one of them is a semicolon let's take a look at an example here let's say we have a function called foo well in programming talks you always have to use a flu so I took care of that right here and let's say we have a variable or a parameter coming in I'm gonna say if n is less than let's say 5 I simply want to return in this case the end times 2 let's say and then otherwise I want to go ahead and say return and of course otherwise I'm gonna say else and what do I want to do in the case of L simply return and itself let's start with this little example and see what's going to happen in this particular code well this looks pretty innocent to begin with let's go ahead and call this function let's say foo and send a value of 6 well clearly you can see that it returned to 6 when we called this function on the other hand I'm gonna call this function one more time but this time I'm gonna send it 3 well of course 3 is less than 5 so we expect the 3 times 2 which is also a 6 but when I run this little code you can see it gives us an undefined in fact why did this actually give us an undefined well the reason is notice on line number 3 we don't have a semicolon well JavaScript says you didn't put a semicolon let me do you a favor and put the semicolon for you right it's very helpful language as you can see well what logic does JavaScript use well one another reminder you never use the word logic and JavaScript on the same line either so the point really in this case is JavaScript basically says I'm gonna take a look at this particular line of code oh it doesn't have a semicolon I want to decide whether I should put a semicolon or not so it looks a little ahead on the next line of code and says is this potentially could this be a standalone expression or statement well it turns out it can be standalone and so JavaScript says well since the can stand alone I'm gonna put a semicolon right here on the other hand though had I written this as return n times to notice that it does produce the right result because it doesn't make sense for a star to the stand alone so JavaScript does not put a semicolon here instead it puts a semicolon right here now of course this can be really annoying to say the least so it's better to really test the code properly and make sure we put semicolons and end in the expressions or statements properly otherwise we could get into real trouble with this language well then comes on one other really charming feature in the language so for example if you're writing JavaScript let's say you wanted to find a variable called local one equal seven and I want to print the variable let's say local one right here and I'm going to call this function let's say foo doesn't matter what value I pass to it and of course when I run this code you can see it printed seven but I'm gonna ask it to print local one right here you can see it gives me an error because I obviously cannot really access that variable local variable within the function I cannot access it right here so that seems to be really really good so far on the other hand I'm gonna go back to this code and say I'm gonna define local two equals let's say eight I'm gonna print local due right here and you can see that it's printing the value of local local two however notice that in this case I did not put var in front of local two so JavaScript looked as this code and says hey look venket forgot to put var in front of the variable what's the worst thing I can do to make them unhappy and of course you know the worst thing you can ever imagine as making Global's variable because that really hurts and so it decides to make this variable a global variable as you can see now of course where this becomes a lot of fun is when you write code like the following for example had you written I equal to zero I less than and I plus plus and of course in this case let's say you call another function let's say f1 and within the function let's say f1 let's say you also have yet another for loop this is called real fun right now because when you take this variable I that's a global variable I basically the short answer is you're screwed right try debugging this code it's going to be an entire afternoon there's a lot of fun so the only time you don't put var in your code is if you hate everybody that you work with otherwise always put the variable var because it makes variables global and becomes really annoying to work with so how do you really deal with it well one way to deal with this of course is let's go back to this code I say in this case local 2 equals let's say 8 you can see in this case it made this variable global well one way to avoid that is to say you know option use option basically option strict and you can say in this case you want to really use the option strict and you can see that it gives you an error saying you cannot use the variable because we haven't defined it and of course once you define it you get the error because you cannot access the variable outside so the point really is you can't definitely avoid the problem by using the option string and I strongly recommend that you write code JavaScript code using the option strict that's a really good idea so you can avoid these kinds of problems quite a bit in coding and doesn't slip through so easily so we saw a few problems here but let's continue a little bit further let's say I want to write a function how do you really write a function well I'm gonna say there are two and a half ways of writing a function well let's talk about the first way to write a function you probably seen this way quite often and that is you can say in this case function foo and then of course in this case I'm gonna simply say foo let's say are called so this is one way to write a function and of course you can call the function right here and that's a common way we have all seen functions being defined I'm not a huge fan of this approach and I'll tell you why I don't really like this whole lot well what if I were to say function foo one more time and in this case of course I'm gonna say in here let's say foo let's say redefined over here and of course I'm gonna call foo one more time now when I run this code of course the question on hand is what's the output going to be well I'll tell you what the output should be in my own opinion I want this to produce food called and I want this to produce who redefined but of course JavaScript and I rarely agree with each other so you can see in this case it produced a very different result now this is a complete mess but in our field we do something really well we mess up so bad but we give beautiful names for those mess if this call hoisting and so it doesn't feel that bad anymore so hoisting basically is it really is defining a variable at this point for the function but it's a two pass evaluation and so it really replaces the function with the newer definition and it starts messing things up so we'll get into some of these problems quite you know often if we write code like this well rather than defining a function this way we could actually define a function using the VAR keyword and I can say foo equals function for example here and this is the option that I actually prefer for a couple of different reasons the first reason I prefer this is first of all it doesn't have the hoisting problem like we did a few minutes ago and secondly this keeps it very consistent in the way you define functions whether it's anonymous function or a regular function you always create an anonymous function and assign it to a variable so that becomes a very consistent practice to write the code so in this case what case what I'm gonna do is simply say foo called let's go ahead and say that and I'm gonna call the function foo but here I'm gonna say function one more time but in this case I'm gonna say foo redefined right here and then of course I'm gonna go ahead and call the foo function one more time but notice unlike the previous example this produces the right result because you define the variable assigned it to a function and then you invoke that variable as a function and then you reassigned variable like you normally reassign variables so this is a very natural way of doing things there's nothing really surprising behind the code and in programming you really want to avoid surprises as much as you can because the more surprises the more errors we have in code as well so that makes it a lot easier to work with so that gives you an idea about the second way of writing code or writing functions and this is the way I really like to write functions as well most of the time but then I said there are two and a half ways of writing functions what is the other half way well sometimes people do the following they say foo equals bar foo equals function foo and then of course you can call the function one more time well why would anybody write the code like that well people writing this code usually work for this department called department of redundancy so you don't really have to do this so the point really is they would argue this gives you a nice way to deal with the recursive functions but most of those are really myths and special cases we really don't have to do this so I would encourage actually avoiding this case as well it's not really that much fun to work with so we saw some of the ways we can access define the functions but let's move on to talk about the parameters the functions actually take so for this let's take a look at an example of how we would be working with a function let's define a function called max for example and then I'm going to say this function has a a and B s two parameters and in this case I'm gonna say if a is greater than B I want to simply return a otherwise I want to simply return let's say the value of B so let's go ahead and try this max of let's say 1 & 2 well clearly it gave us a 2 on the other hand if I say max of let's say 3 and 1 it also gives us the value 3 which is correct so everything seems to be going right just fine but what if I call max this time but I send a 1 let's say 3 & 2 well now I'm passing three parameters wherein I have defined only two parameter variables at this point well if you were writing code in C++ Java or C sharp at this time you will get a very stern compilation error saying you are passing way too many parameters than what is expected but JavaScript will never ever scream at you javascript actually treats you like a guest in its house so it doesn't really complain in fact when you look at this you say wow that's awesome look at produce the right result well actually not so if you change this to a seven on the other hand you know it was just lying so in fact it exactly treats you like a guest in its house because if you put the coffee mug in the wrong place your host doesn't tell you you're stupid they just smiled to indicate that you're stupid that's kind of what JavaScript really does right so it doesn't really complain on your face but it misbehaves quietly behind the scenes but what's really happening in this case well what's happening in the case of JavaScript is unlike languages like Java and c-sharp where the number of parameters that a function can take is decided by the function declaration that's not the case in the case of JavaScript JavaScript the number of arguments we can pass to a function is decided by the color of the function not the way you are defined it so how many parameters can I send to a function as many as you want to send to a function that's as simple as that well in a way if you really think about it I could say for example maybe I know the name of the first two gentleman here in the front row but it would be really you know not right to say there's only two people in this room because I know these two people's name obviously there are several more people I just haven't gotten to know their name yet in a very similar way the parameter list can have as many parameters as you like to have except that you have given the names for the first two parameters as a and B in this case so just quickly to take a look at an example of this if I were to go back to this code and print out arguments well the word arguments is a keyword in JavaScript that refers to the arguments that a function is going to receive at the time of the call so in this case if a word call let's say max over here and two three let's say seven and five you can see in this particular case that the function is reporting those as parameters being passed in on the other hand if I change this to you know sending one more thing you can see that's expanding as well so in other words while you do have a name a and B it really doesn't matter these are just symbolic names for the first few parameters but the parameter list really is actually the arguments that you can actually pass so what you can do in this code is you can start writing something along these lines you could say large is equal to R Youmans for example and then you can take the first value zero and then you could say for instance in this case I equal to zero I less than argument start length I plus plus and then of course in this case you can say if large is less than arguments of I I can then say large is equal to arguments of I and you can see in this case we can write the code in a very generic manner and so if I were to of course I want to return the large finally so let's go ahead and return the large variable so in this case you can see if I called max with one and two like we did before that seems to be working just fine let's go ahead and call this with let's say three and one like we did before that's working as well but let's go ahead and call this with a one and let's say a three and a seven and you can see that's working as well so you can start using the arguments of course you may have to do a bit more error checking to make sure the arguments is not empty after all but you can put more logic after testing that piece of code but this shows us how the arguments actually works so the true nature of JavaScript is you can pass as many arguments to a function as you want to and that gives you ultimate freedom and flexibility in how you want to call the functions but this also leads us to one other thing which is a context variable that every function actually carries so in other words when you have a function every function has implicit this variable that it actually carries so within a function you can call upon the dis and sometimes it's assigned to something you would expect sometimes it's a saying to something you didn't expect that's when the fun really starts that every function has a dis reference and so it's a context object that you can actually use now of course it doesn't make a whole lot of sense to talk about this without really setting a context so I will talk about this in combination with the next one I'm gonna say how do you really call this function if you are really really interested in calling the function let's define a function called greet equals and I'm gonna say in this case I passed a name and within this I'm gonna say well hello and then say plus name and I'm going to call the greet function let's say greet and let's go ahead and say Jo right here and you can see that it says hello Jo well this is a very common way we are used to calling functions however there is one idea in JavaScript which is pretty different from how we are used to in Java EE sharpens language like C++ an even Ruby or most object-oriented languages for that matter well in most of the languages a function belongs to a class so you would say this is an instance function of this class well that's not the case in JavaScript in JavaScript you could be walking along the beach and you find this beautiful little function and you say hey you look really nice I want to own you and you can take ownership of a random function and make it part of your object if you wanted to well how do you do that let me show you an example of how you can actually do that so notice what I'm gonna do here in this code I'm gonna change this to quietly I'm gonna say this dart to uppercase now that's a pretty random little dis start to uppercase but let's see what that actually means in this context well when you call the greet function I am using the context object called this and then I'm calling a to uppercase on the context object so this function doesn't belong to any class or any object at the moment but quietly it wishes that it belongs to and so what you can do in this case is you would go to this function and say great and you don't want to call Joe like this because it's gonna miserably fail because there is no function call to uppercase on whatever that victim object that was associated with but instead what you can do is you can do a call over here and the first parameter I'm gonna say is hello and you can see how beautifully that became hello in all uppercase so what is the difference between directly calling this function versus using a call function well the call function well first of all functions are just objects in JavaScript and so you went to this function object and said hey function object I'm not just gonna call you I'm gonna first call you by attaching a context object to you this is an extremely powerful feature because you can take any function and you can give an association of the function to another context we're gonna see how this comes into play in just a few minutes so in this case we took hello as the context object now clearly if I call greet at this point and call hello and I'm gonna say howdy comma let's say J and over here and you can see in this case it became howdy Jane so we call exactly the same function twice but we have established a different context object each of the time so the call function takes n plus 1 parameters so if you have n parameters you would pass n plus 1 where the first parameter becomes your context object that you're gonna pass to this particular function now clearly while this is working just fine for us let's say we have names equal to and let's say in this case we have a collection of names let's say our good friends Tom and Jerry right here and I want to call this function how would I call this well we could say dart call and then sadly I would have to say in this case hi comma and the name square brackets 0 and the names square bracket 1 which is kind of silly if you really think about it and of course I have two names that I'm gonna pass n let's go ahead and change the function to say I want to pass two names in this case so I have a name 1 right here and named - and of course I could say name oneplus and let's say name - well if you notice in this particular example we called the Tom & Jerry as two parameters but I really don't want to take a wonderful array and start splitting them into these individual values which kind of doesn't really favor a good fluent code well thankfully we don't have to do this that's exactly what apply is for so apply and call has only one difference they both take the first parameter as the context parameter so notice in this case I said hi but apply takes an array of values whereas call takes discrete values so if you already have a collection of objects you can't really use the apply and pass the collection rather than having to split them into pieces so depending on what you're trying to do you can either use the call function or the apply function and you can use either one of them if you want to just pass an array use the apply if you want to just pass discrete values then use the call function it becomes very easy to work with it as you can see so we saw quite a few things already we saw how to set a context object using call how to set a context object using apply we saw that the context object itself is that this within the function we're going to put all of these together in what we're gonna see moving forward but let's take a quick break and talk about a few interesting things before we get back to that well you can use higher order functions very effectively so for example if you're using a collection of values let's say list is equal to let's say 1 2 & 3 and I want to either rate and print the values in this list well if I want to iterate and print the values in this particular list you could have said for VAR I equal to zero I less then list art length well this is very really boring we don't have to do this thankfully we can say let's start for each and we can then specify a function we can say here is an element and I can simply ask it to print the element out from this particular collection we could use a code like this a functional style I wish more people would write code like this in JavaScript because JavaScript has all the functional style functions in fact I would argue a JavaScript actually has some better functions than both c-sharp and Java actually have in terms of some of the beautiful things you can do with this well I don't want to just bring the values I want to print a double of the values well clearly we can do that easily here all I have to do is simply say math and given a function with the element e return e times two and you can see that in this case I'm actually printing the double of the values rather than just printing the values notice how concise the code is with the functional style that we can begin to write the code very easily but I don't want to print the double of all the values I want to print the double of only even values in the collection well very simple we can tag along one more function a filter function we're given an element I'm going to say return element mark two is equal to zero and you can see that in this case we are printing only the double of the even values in the collection so you can see that you can write pretty much a functional style of code in JavaScript nothing stops you from really making use of it in fact moving into JavaScript or Ekman script 2015 this is going to become only better because the way this code is going to change in X Muscatine is you're going to change this to a E and you're going to simply say in this case e Mar 2 is equal to 0 and the syntax becomes a lot lighter as you can see that is echo my script 2016 syntax so the code doesn't smell as much moving forward and you can also benefit from this also here as you can see this is again an external script syntax where you can say return the double of the value so you can see the code is becoming a lot lighter in terms of the syntax itself and likewise here also I can remove that function and I can simply put a little lambda or they call it as an arrow function and you can use that very readily as you can see the code becomes a lot more concise moving into atmosphere 2016 so this is a really a good direction to move forward and the code becomes very concise as you can see that you can from so we saw the functional style of code but I want to talk about one caveat we gotta be very careful when we work with JavaScript so if you ever talk about math or you know concepts in arithmetic you've got to be very careful when you're dealing with JavaScript so for example let's say a is equal to 1 and I'm gonna print the value of a you can see it's a 1 I'm gonna now say in this case ask for a variable B equals to 1 so in this case of course the value of B is a 1 as well I'm gonna now define C equals 1.0 and of course I'm gonna print the value of C as well and you can see that's the value that I printed but now I'm going to say hey JavaScript tell me something is a equal to B and JavaScript faithfully says of course it is great thank you now I'm gonna say is B is equal to C and JavaScript says of course it's true now this is where you get really wrong because you're mixing JavaScript and logic and now we are saying if a is equal to b and b is equal to c then of course a should be equal to C and JavaScript say is now right so you never show this to children because they will lose faith in every civilization in the world that we have really created so far right so you can see this is completely illogical but why and the reason for that is the double equals is absolutely messed up and if you look at code on the web including my own code most of it is absolutely wonk and the reason is our double equals does not do comparison it does comparison by converting types of objects which is not what you really want most of the time so how do you really fix it the first rule is do not use double equals anymore so instead what you do is you can use 3 equals if anybody asks you why tell them you're really cool because you like to use 3 equals rather than two equals well you can see in this case consistently says false for all of those things because obviously the type is different and the only time a triple equals is going to give you the right result is when the type is first of all the same and then the value is equal if the type is not the same it's going to give you a false to begin with so you don't have the mess that we ran into likewise if you want to use the not equals so for example if you were to say a is not equal to B notice it tells you false in this case but it should be really true because a is really not equal to B so in this case you want to use the X excuse me exclamation and two equals and that is basically the syntax for comparing not equals as well so that's the right syntax you really want to use three equals versus a exclamation and 2w equals that's basically syntax you want to use to do the comparisons and not comparison as well well we talked about a few pitfalls you got to be careful with but let's talk about functions as objects first of all and functions are really objects and objects could be functions as well so it treats that very interchangeably and of course these can have properties as well we already saw this a few minutes ago you are able to call the call method on the function you were able to call the apply method on the function so that uses a clue that functions are kind of like objects they carry a few methods or functions with it but I want to focus on creating an object right now well one of the really nice things I like about JavaScript is you don't need to create classes if you really want to create objects you can readily create objects very easily so let's take a look at an example here I'm gonna say Sam equals and I've created an object here I'm gonna say first name for Sam let's say that's our first name last name let's say in this case last name I'm gonna give for the Sam and I'm gonna say age is gonna be a little age value now you can see in this case I can print the variable Sam well that's object obviously I can call upon the age of Sam and print the age of Sam but I can also say Sam dot play and I can invoke a function on Sam as well so in this case go ahead and create a play function which is simply a function itself and I'm going to simply say let's say playing right here and you can see that I'm able to call that function on this particular object well we know this has JSON object so we can create JSON objects and easily pass them around so it's a very lightweight syntax it doesn't burden you to create classes before you can have objects so a lot of times I don't even bother creating classes I just create objects and float them around and that becomes a lot easier to work with so you can readily create objects but one really nice feature that you can have on these objects is the concept of prototype so what is a prototype well a prototype basically is an object think of this like a bag if you want to think about it so for example let's say you come to me and say hey can have a change for euros please well sure I can give you a change for euros because I've got some euros in my wallet I can give you change for euros but if I if you ask me can I have change for some dollars please I don't really have a reason to carry dollars this week I could say no to you but instead of saying no to you I'm gonna go and reach into this wonderful bag which carries every other junk that I own and if I reach into it I can get you the change for dollars so the point really is I have to really reach into my wallet but often time I can reach into my bag as well and you can think of this as a prototype so a prototype think of it as a backpack that every object carries around except that that prototype in JavaScript is really cool because that backpack has another backpack potentially and that keep going until there's no backpack so the point really is you can have a chain of these prototypes really nicely so notice what I'm gonna do here I'm gonna go to this particular object and Sam is really too young but let's get rid of the age for a minute and let's say in this case worker and I'm gonna say worker is equal to and right a function here let's go ahead and defined the function as a work function and in this case it's a function and it's simply going to say let's say a working now you can see I have a little Sam object on my hand and I'm going to go ahead and call a function let's say you Sam that's a really poor name for a function but anyway I'm gonna pass the object instance we'll call it a use function and I'm gonna pass the instance and I'm gonna say dry and let's say catch exception and I'm gonna print the details of the exception well in this case I'm gonna say instant dart work well you clearly can see our little Sam doesn't have a work method right now so I'm gonna call use and sense and Sam to it and you can see that it immediately says in start work is not a function so I got an error saying I don't have a function after all called work well it's clear that Sam doesn't have a work function but notice what I'm gonna do now I'm going to say Sam dart proto and then I'm gonna say equals and in this case I'm going to set the worker as the prototype if you will so what I just did is I took over Sam object and assign the prototype of the Sam to the worker object that we had right now so this is like attaching a backpack to little Sam and say here you go now I call the use function and pass the object Sam but notice this time it doesn't give us an error instead it says working now this is an extremely powerful concept as you can see why because I can also do the following a mock worker and then equal to I can say work and this could be a nice mark function I could create for instance and then I could say you know pretend to work this is a nice feature to have some days and then of course I can say Sam dart proto is equal to mark worker and you Sam in this case and you can see it says pretend to work so it's extremely simple to modify the prototype so testing becomes incredibly simple the minute we start engaging prototypes and I employee this lot of times when I do automated testing automated unit testing for JavaScript I often create a proxy object refer to my main object and then during testing I hijack functions on the main object by introducing a middle prototype so this becomes very convenient for doing automated testing of code that's a really powerful way to deal with things very quickly so this gives us an idea about how we can actually use the prototype on objects and benefit from that very powerfully but let's take this concept one more further down how about creating classes well let's create a class called car so I'm gonna say car function and there you go we created a class you say wait a minute you created a function no trust me we created a class if you don't believe me did you know this the uppercase C well that's a convention that JavaScript follows which is kind of silly but this is what is so beautiful right when you're a programmer you never look at code you see code and and these case differences are really really important for us programmers the non programmers would look at us and say you guys are weird but that's the world we live in and this means a lot to us well in JavaScript the case that you assign for a function decides whether it is a regular function or it's a class but actually let's be honest about this JavaScript doesn't have classes so what in the world is this well if I say a lowercase C I simply wrote a regular function if I put an uppercase C I simply wrote a factory function in other words this is nothing but a constructor that you are writing so in JavaScript you never write classes you always write a constructor and a constructor can produce the object for you now in this case of course I'm gonna say year and this start year equals the year value now you know where that this comes into play it's a context object on which I want to set this but how do I go about use I'm gonna say in this case let's call as car created let's go ahead and use this function I can say car like this but don't do this now note this javascript doesn't complain but what you just did here is you just call the constructor function directly and JavaScript kind of looks at you and says that's silly and it still lets you do stuff right it never ever complains as you know so this is really meaningless to call it this way but you could if you really wanted to it doesn't care but the way really you want to call this is you want to say car 1 equals new car 2015 and that's exactly what you want to do now if you say car 1 dot here you can see that object was created but you also have the year value in place but let's understand the meaning of this piece of code what does this new stuff really mean and it's actually very simple to think about it is a three-step process what just happened here and we already covered all the three steps so it should be very easy for us to understand what's going on in this code the very first step is memory is allocated for the instance let's call that call that inst so you have a little instance a memory has been allocated for that instance what does it do next the second thing it does is it calls in this case so calls what is it called well instant dot call well pardon me a card are called instance comma 2015 so it makes a call to the call method and passes that memory instance as a context object and says go ahead and run this in the context of that so now you know why on line number two this dot here is setting the object's parameter because that becomes the context object the third step here is instant start proto is equal to card art prototype so you can see what's the last step in this in this case it takes the object you created and assigns the prototype of the object to be the prototype of the function itself on the object it's called underscore underscore proto on the class well the constructor it's called fully spelled word prototype so there shows a few things for us when you create multiple objects the multiple objects actually share the same prototype and this is a very powerful concept because Java Script can create hundreds and thousands of objects but the objects actually share the prototype and that can be very efficient in memory as well and so this is called the prototype L inheritance so in Java and c-sharp we are used to class-based inheritance where a class inherits from another class in the case of JavaScript you have prototypal inheritance where an object inherits its stuff from a prototype instance this is a very powerful inheritance model class-based inheritance is rather static and very limiting prototypal inheritance he is extremely powerful and flexible it's really a shame that we don't use this really that often in a lot of languages but this is one of the most charming features of JavaScript is the prototypal inheritance that you have available in the object now let's talk about what this means when it comes to creating these objects so notice in this case I'm gonna create an object car 1 and you can see that I have a year for the car 1 but let's do something a little different I'm gonna say car dot prototype dart and I'm gonna say miles equal to 0 so notice how I created a little miles within the prototype and so this miles is part of the prototype and I'm gonna say car dot prototype dot Drive equals 2 function and in this case I'm gonna say that my drive function is going to take a distance over here and then of course say this start miles plus equal to distance I apologize I have to use miles because my brain is wired to miles and not kilometers so sorry your car is gonna be better than mine obviously it'll have kilometers than miles but mine sucks okay so right there is the miles value I'm gonna say well how does this really work let's talk about this for a minute and see how this is gonna behave right now so you can see I have a mild so have a drive all those good stuff but before we go any further let's save our car to equals new car 2017 well let's say 2016 it's a brand new car it's November we can have new cars great now I'm gonna say a output in this case car to dart year and clearly you can see that year values are different I'm gonna remove this message so we see less output on the screen so you can see those two ears being printed let's look at something else real quick I'm gonna say car one dart proto is equal to car let's say to dart proto well question for you what do you think is the answer to our faults I'll give you a clue it's either true or false what do you think true absolutely because remember the three steps we talked about when you create car one each prototype points two cars prototype when you create car two what does it do its prototype points two cars prototype so both of them have exactly the same prototype well wait a minute let's now ask the question car one dart miles is zero let's ask the question car to dart miles zero that makes sense so far now I say car one dot drive ten and I'm gonna ask for car one dart miles hey that's ten now I'm gonna say car to dart miles oh my goodness what do you think would you be happy if car two moved when car one mood that's called you do right that's not programming so our logic seems to be in trouble right because we just said the objects are shared but what do we do now let's understand this with a little example could you kindly volunteered for me would even be helpful you can see you can sit there and you can be happily sit there what's your name sir Alex you are my volunteer everybody knows this right you are accepting great so alex is my volunteer and Alex you're my prototype all right so here's my prototype is pointing to it what is your name sir what's your name Enbridge well our good friend comes to me and he says my god I'm in a rush could I please borrow a dollar from you he seems like a nice guy anybody can vouch for it okay all right so I propose being built up so here's my dollar for you pick it and about two hours goes by he comes back and returns my dollar thank you sir you're a nice person I put in my wallet so everything went fine but something else happened we now built a trust you are trustworthy right so two days goes by he comes to me and says you've been such a great help two days ago but I'm in real trouble could I please borrow hundred dollars from you right now trustworthy seems like but there's a problem I don't have hundred dollars on me what do you think I should do as my prototype Alex there we go I got it from Alex I give it to him here you go two days goes by guy is still trustworthy he gives me $100 can somebody suggest what should I do with this $100 keep it that's right does anybody have a problem with it I'm not looking at Alex obviously right well if you understood what I just did you understood how JavaScript works so in JavaScript this is a fundamental concept gets our B four sets are shallow so notice what I did when he came to me and said can I get hundred dollars from you please you know what I don't have hundred dollars gets our deeper I go to my prototype and say Alex could I can I have the money please well Alex may not have the money what is he gonna do go to his prototype right and behind them is a big Swiss bank so we all can get the money right but the sets are shallow which means when you come to set it I'm not gonna go any deeper I'm just gonna keep it so now when you go back and ask the question hey what does car do not miles notice the answer is still zero why because car drive drive said this start miles but what in the world is this this is a context object in this case the context object is the car object not the prototype so as a result it was set on the instance not on the prototype so that is the magic behind how JavaScript very efficiently shares the objects but it doesn't mess up the shared state because it goes people to get the objects when it doesn't exist but when you do a set it sets on the object never goes down to the prototypes please well actually you do you don't have it you actually have it this but the difference in at mask of 2015's functions and arrow functions both have a dis except that in the case of arrow function you are this is actually tied to the context of where you come from whereas these this are very different so it doesn't really solve this problem still this actually this is not even a problem this is a feature don't blame it as a problem okay so the point is it should behaves properly so the fact that this is out of bounds or context is a separate problem than this one well this takes us to the next level notice how this actually nicely deals with it so that gets our deeper and sets are shallow and that's basically how they're sharing happens whatever be nice to really take a look at this so how do we really understand this is actually working the way it's a poster so to understand this let's do the following I'm gonna go to this object and say hey object I want to examine your properties after all so I'm gonna say barb over here VAR and I'm gonna ask for the property on this object prop let's say prop in car one and I'm gonna simply print out the property that I have on my hand you can see it's a liar it tells that it's got properties so you can come to me and say Venkat are you rich and I would say of course I am because I've got Alex who in turn has a big bank behind him right but then you say Beckett are you really rich well that's a different story right so the point really is that I can actually look for all the properties but I can now say well but tell me is that really your property and so that's a very different question as you can see so if I go to the property plus and I'm gonna now ask it car one that has owned property prob you can see it's a false four-year I'm sorry miles and drive because those two properties actually come from the prototype and not from the real object itself on the other hand if I were to say car one dot drive ten and and now you can see that I've actually called the drive function on it now if I go back and ask the question or are you are these your properties notice how miles went from false to true and that's because remember sets are shallow so before the call of the drive function the property miles was in the prototype but when you call the drive function the property becomes property of the object and it's still in the prototype but it's also on the object so when you ask and use it your own property you can say it says true rather than saying false and that's when the set happened in the same time though had you created your car to sew car a to equals new car as we did before 2016 as you can see here but now in this case if I were to ask the same question of car two you will notice that in in here this is for car two as you can see it says miles is actually true well did I say the car too so this is going to be car two and this is going to be car too obviously so you can see in this case it's a false because car two doesn't have the property it still reaches into its prototype but car 1 has the property so there shows you how you can actually get these properties now one question you may have is hey this is nice that we are able to bring the property on to this particular object so for example in this case if I say car one dot Drive 10 and you can see in this case car 1 dart has own property so we can say property so let's go ahead and ask for it so for let's say bar prop it comes from car 1 and I'm going to print in this case the property itself plus let's go ahead and say this is going to be car Wonder has own property and you can see in this case miles is actually going to be part of this object car 1 let's make sure that I'm doing this right and the property itself I want to pass through this so you can see in this case miles is part of the object well that's because of course we call the drive function so at this point the car 1 has the property now here is one feature I'll quickly mention but be very careful sometimes I use this during testing purpose but I would say almost never in production and that is you can say delete car one dart miles and you can ask it to delete the property now I recommend you don't use delete because if you do it can be very confusing so you're basically going to this object and knocking that property off and of course once you don't have the property if you ask for a get on it it will go to get it from the prototype if it is there that's a bit confusing and error-prone but can be fairly useful during testing purposes but I would very rarely go that route and use this during production so be very careful about it so the summary is what we talked about we looked at a number of features here of JavaScript JavaScript actually is a very powerful language I really really like this language quite a lot and it's a language that is very powerful but you have to really use it properly and by using it properly you can actually benefit from some really really powerful features for example the context object is something I've used quite often the call comes in very handy when you are trying to build a fairly complex set of objects if you ever take a look at any of the JavaScript libraries out there we are going to readily start looking at functions like call and apply being used quite often so this becomes very powerful features to use but the most charming feature in my opinion is the prototypal inheritance and once we learn about prototypal inheritance you also learn that JavaScript classes are never closed you can always go to a JavaScript object and add methods remove methods change methods or change functions so the objects are always open for extension and that gives you enormous power on your hand to work with javascript so things like mocking and testing is incredibly easy in JavaScript and JavaScript of course being a language which is so flexible it is really unfortunate if we write code in JavaScript without testing it so javascript actually makes testing extremely easy but it also is a language that demands enormous amount of testing and I think that's only fair that reduces the flexibility and demands you know you to really use it so that's a really good game in my opinion so it's a very powerful language as I said it's a language that really is probably the most ubiquitous language we ever use it only is a good idea for us to take the time to learn the power of this language and I hope you found the session useful thank you [Applause]

Channel: Coding Tech

Views: 48,171

Keywords: javascript, learn javascript, learn js, js, javascript frameworks, functional programming, web development, programming, software development

Id: ZUHyZHwZtUY

Length: 54min 47sec (3287 seconds)

Published: Sun Oct 08 2017