okay and we’re comp 2068 and this is week four less than 45 to and now i’m going to talk about some object oriented javascript which we need in order for us to move forward i’m also going to talk a little about typescript and then the third piece of this is we’re going to talk about create GS a little bit more okay so what is this object oriented javascript that we speak of right i want to talk about this with you a little bit i’m going to in the meantime let me do a couple of things i’m going to clean up a couple things that we just did i’m going to go into my repositories and get rid of i’m a dummy decade I’ve that I oh I don’t need that how do i get rid of stuff one of you guys asked me that before I go in there and go to settings this is inside my repository I skipped down to danger zone and then click on delete this repository and then I put in the exact name of the repository okay and then click I understand the consequences see you later right now that’s gone so I don’t have that one anymore but I need a new one for today’s lesson so I’m going to kind of do that against upon you repository and your posture obvious is going to be the name of today’s lesson as soon as you have response to me come 2068 less than 40 is what we’re at right now this is where it’s going to be and you know what this lesson is all about object oriented JavaScript right so we’re just we’re going to use that and at the end we’re going to kind of make a text rip file to show you the difference okay so let’s let’s cater this and make this like parts will say part to this is what this really is part two all right first part with github okay in crate repository so once I’ve got that I’ve got this nice little URI I’m going to take it and copy it and I’m going to go back into Visual Studio and now create my new project here it is I want to create my new project we’re going to go into onto the web stuff I want to go into asp.net web application and create something that looks exactly like I just made so calm 2068 less than four part to write lesson for part two and press ok ok and in here i’m going to what soon as i get through this i’m going to start clean source Krajcik yet again right i’m going to go to solution explorer and inside my solution explorer i’m going to right click right and inside there i’m going to i’m sorry inside my team explorer let me do that part first a little changes and here’s all the changes that come with my basic a project initialized basic vs web project that’s what this is commits ok and then i go to my home and I clicks unsync commits and a drag and drop my URL here copy and paste is what I mean and then sync it up so now if I go to github you guys can follow me live I’ve got lesson for part two that’s what this is going on right okay cool cool i’m just going to kill this for now and i’m not going to go back to it for a while ok so here’s what i’m doing here my solution explorer remember when we set up a file let’s do it together again for one more time i’m going to create my basic structure for my web web project and i invite you to do with me this is the lab piece the lab portion that i invite you to try you need to get really comfortable and doing this over and over again because when it comes down to doing a test or something like that if I were is that we’re going to do it like a little exam with you you have to kind of put up something really quickly and you have to do it here on the fly right so again I’m going to go right click on to my project piece add and then from there I’m going to add a new folder it’s got to happen I’ve got to have some CSS from my file right let’s do that again right-click i’m going to add and i’m going to go new folder and it’s going to be assets once you get you used to that and again i’ll add the rest of this stuff really quickly the other piece is script with capital s and so acid CSS the scripts in my assets I want a couple of things in here I want images and audio which we’re not going to have right now and also Fox once you get used to doing that almost creating your asset library it’s empty right now but that’s okay and in my scripts i’m going to add another library called live for library ok ok cool so I’ve got my basic setup I’m going to also right click and add a new index on HTML file and remember when we do that is my HTML

file a visual studio kind of kicks out this stub file that’s useful for many things but we want to kind of appear to the best practices of html5 so we go languages English and our meta tag we have to put in here as well our meta I’m going to do a character set I want to define utf-8 because that’s the new carrots that we need and also in my meta tags i’m also going to put in a name is equal to viewport just to handle mobile stuff and content is equal to width is equal to device width and this will scale one ok so I’ve got that basic stuff in there my title is going to be the name of our project which is comp 2068 and it’s less than four right and in my head I want to put in underneath my title I got to put some CSS in there so again some practice here’s my CSS section right and then inside my body tag in here i’m going to put in my java script section my java script section so my CSS section my java script section and now i got to create those files so we right click on my CSS folder and go into a style sheet and just will call this game dot CSS right now it’s kind of empty and i’m going to drag and drop game that CSS underneath my CSS section right because i want to kind of include that and inside my java script section i want i need a file so going to go right click on the scripts not in the library part just on script itself will add and then I’m going to add a new JavaScript files you’re going to work with javascript right now okay and then we’re going to call this game jjs we’re going to do this all again when we create our our template if you will our boiler plate for pjs after okay cool cool but I need to link this file this javascript file I need to link this in my java script section so just drag and drop it right so now it’s linked up okay cool but it really doesn’t do anything and the way to do that of course is add a little listener to the body tag and the way we’re going to do that is to say just to make it easy is unload right and we’re going to define a new function that we’re going to call in it that we’re going to launch that’s the init function we have to define that function yet this is what we’re at right now take a look guys in it right and there is no function in it here by I got to create it in my javascript file so let’s do that it’s going to go back into my javascript file and my game jas here it is and i want to kind of space down a little bit remember javascript doesn’t care for white spaces it doesn’t it ignores them just like most compilers most modern c-style compilers ignores to ignore javascript or throwing up white spaces and they also ignore comments right that same thing with javascript so we’re going to put in a new function and we’re going to call this an it’s just like we did last time and kind of put in a couple of brace brackets here that we can use F for our code block okay so this is our function and you know what we’re going to do a console dot log just to send something out to you know the console to show that we’ve gone into here and we’re going to say game started right we don’t need to do this but just to prove that we’re you know we’re able to access this function right it’s going to kind of do this thing first this and it function is going to run that’s what I’m saying here as soon as my body is loaded so soon as my body tag it hits this command that’s nine number ten soon as this my number ten is hit it’s going to access it’s going to it’s going to remember it’s going to listen for this onload event which means my my body the body of the content of my page is loaded and now i’m going to send it to my init function which is inside my game jas file that’s all it’s doing okay let’s run this thing to test it out so if everything goes well I’ve got a blank page great let’s take a look at see where r if i go to more tools and i quote in this is a chrome and I go to JavaScript console inside here I see game started which means my javascript is good to go either now I’ve enabled it I’m able to access my function that’s inside my game jas file are you with me so if you’re not with me at this point I’m going to lose you in a second right okay so that’s great so we’ve set up our basic thing if you’re not with me or you couldn’t follow along so it’s too quick for you I’m going to go into my imma stop debugging here for a second going to team explorer put a home to go to changes and making sure that i have no on track files i’m going to say created basic site structure ok and then commit go to home go to unseen commits will go to sink and once I’ve done that my workflow is complete it’ll sync up with the github files online which you could

certainly go to and kind of pull down from if you want to match things up with me okay we’re done so let’s go back over to our our powerpoint and take a look at this thing a little bit closely so again a really quick review of August Orion to program kind of hit this a little bit last week but I’m going to do it again namespace really if you think about a namespace but this thing about it is a container or a folder if you will where everything is contained all right so physically on your hard drive it might be a folder that’s the name space but really it’s the container which we bundle everything together all the functionality is in this one container that we can access so if if I want to access classes I can access them within a within this container on the Java side if you’re taking Java with me they’re called packages packages is the namespace equivalent to what we’re talking about here in JavaScript okay class we know what a class is a blueprint like we talked about before and I’ve storing sterman ology we know what an object is in the property again sometimes a property in one language is an instance variable in another language for example in JavaScript and C sharp they’re called instance variables a property might mean something different a property needs to have getters and setters right that’s the difference between an instance variable property at a very high level okay then you have a method which is something that does something right so just to remind you what I’ve story to terminology is we have a constructor with in object-oriented terminology as well and inheritance encapsulation abstraction and polymorphism all these things that we know and they’re all available for us in JavaScript but in a different way why because javascript is a prototype based programming language it’s not a language that has classes at this stage in the game right now we’re sitting at sitting with a tech mcrypt 5.1 if i’m not wrong and xmas request grip 5 which is where javascript is based on and most c-style languages these days including Swift from Apple it is there’s this one is a classless prototypical or prototype oriented language so there are no official classes in JavaScript we use prototypes now all that being as it is we still can do many object-oriented kind of perform i was going to behaviors with javascript i’m not going to go too much into the heavy the heavy work needs javascript but let’s talk about functions a little bit because if we before we do objects we need to understand actions because functions are funky in JavaScript a little bit different than we know then when we remember them in other languages so a couple things again a function takes arguments and again sometimes if you you can have either return something or not in JavaScript right and the way we use our general form for a function looks like this take a look guys right you might be very familiar with this form right except this isn’t the only form that you might see in JavaScript this all right and is the function we’re using the function key word here and we’re using the function name right and then with these parentheses this is where you put it in your parameters as normal as you’d expect for NEC style language and between the braces your statements go in there executed yeah but functions can also look like they’re they’re different beasts they can also take a number of parameters parameter one from there to two parameter n right and when you call a function you call it like this value one value too just like we normally do what about when you don’t send functions you know you don’t set up function parameters like this this is your function I don’t setup function parameters but yet I can accept parameters well in JavaScript you’re able to do that and this is where programmers bug nuts right there look at jeffs there we go wait a minute didn’t students set up you didn’t you’re in your function declaration block right and your header right there’s nothing that says anything but parameters well you know what javascript implicitly creates an array of parameters for you whether or not you send parameters in there which is sometimes good and sometimes bad right which means whether or not you send it in there you can set something else there’s a keyword there’s an arguments array that automatically set up for you that it’s zero index just like this and you can actually set up variables for this so for example my first argument my second argument is equal to the arguments array which is built in of zero so example if I was to do that here in visual studio I want to go into game and set that up right so I’m going to say and let’s just type start typing and see what happens so far my first are my first are like part as equal to arguments and look comes up there is no arguments right arguments 0

you can do that and it comes up with code hinting right I don’t have any arguments to find here my function but because i’m using javascript now i do right people go crazy for this stuff and this is why when I talk about typescript a little bit with you guys he said hey typescript is is a sink tactic sugar right for JavaScript it gives us the ability to stop this stuff from happening a little bit right because this is confusing for beginner programs or people who just started using the web you’re looking at it going that doesn’t adhere to what you normally used to that that is not right but this is the beauty and the ugliness of JavaScript at the same time because JavaScript can be very flexible whereas other programming languages are very strict right so again someone might say this is ugly and you might talk about a pure JavaScript vanilla kind of JavaScript developer or you might say oh no no that’s the beautiful piece about JavaScript it gives me flexibility to I do whatever I want to do the bad thing about this is that everyone does what they want to do so when you look at code online you’re like what the hell you don’t understand what’s going on right for most of us it becomes almost like a jumbo like spaghetti we’re looking at instead of the code so this is what you can do you can don’t totally do this do I recommend that you do this with your code as we go forward I don’t recommend it for us here as as programmers kind of taking on JavaScript as something we’re going to use to create our games and so on our interfaces although in a pinch if you had to work around if you had a sugar stock it’s not like you couldn’t write so we have the capabilities but I don’t recommend me use them in this we absolutely need to we can figure out another way that’s better and more object-oriented will talk with that inside so here’s another way you can do it you know that there’s an arguments array I’m going to talk about it because it’s their right well if it’s an array an array has built-in methods like the length method that comes with all the race right well you can say you don’t know how many arguments are taking it instead of naming the arguments and you can cycle through all the arguments every one of them that you take in an unlimited number of arguments that come in it can be from zero to whatever and as long as the arguments array is less or is greater than zero right it’ll cycle through this for loop and it’ll do something for each of the arguments okay so you could do it that way as well leave scope out for other let you guys read that a little bit return values as we know like any function arguments are functions only return one value in JavaScript now another language is like Python you can return multiple values you can still return in a way multiple values here in JavaScript but you have to return an object or an array back of object array of objects an array of data type objects and so that where you are returning multiple values as opposed to multiple variables right so you can’t return multiple variables normally now in Swift and the Swift language that we’re going to be learning in the other class you can return multiple pair of variables because you have something called tuples and Swift which you do not have here in JavaScript never in JavaScript six which is should be coming out fairly soon we’re hoping this year by July August time frame they will have something called tuples hopefully right and when we have two poles that you can return multiple return values through a two pole but here in JavaScript we don’t have that capability you can only return one value or one object back into from the calling function and this is an example of how we do that using the return key word okay that you can also use the return keyword multan or than one time like for example in this particular example with if this x value is equal to 11 when we turn true and if it’s equal to its not equal to 1 then we return false alright so everything for everything else actually whatever it’s equal to even if it is equal to 0 1 negative 1 eh whatever it’s going to still return false right and and this is a legal way of writing things in JavaScript and some other languages you would not be able to do this because you’re using to return statements benefit within the body of your ear function although in most modern language nowadays this is safe to do and again from a return values perspective you can put the return statement anywhere you want in the function which means that this line here VAR count equals 0 would run VAR 1st numm is equal to 48 would run you put to return statement that would run and return you back to the the calling function right and yet this lonely you know stepchild bar second num is equal 109 would not run because we’d never get there it would return back to the column statement before we get there so be careful you want to try and put your return statement at the end of the function although it doesn’t have to be right for JavaScript which is a bad

thing for most programmers right because they look at it going that makes no sense why do you put stuff under you know beneath the run or between each the return then people do that and by accident so be careful about that as a common error and it won’t be give you will kick back a syntax error right it’ll just keep it’ll just be a logic error for you it won’t work the way you think it when it is going to work and you’re like how come it’s not running it’s there look it’s inside my statement it’s inside my function well yeah because you get the return before it and it’s going to return control of the program flow back to the calling or the invoking function or the place where the dysfunction was invoked okay more on calling functions hey we saw before right we saw before that we can this is where we return values so I call the function here and this function with the assignment operator is going to take the value the return value of the function and return it back to this result right so as an example of that if I pass in to two parameters type and quantity i might get back i’m hoping to get back the results or the return value from this function back into the result this is how it would look but be careful because if you use the result equal to the order fruit function without the parameters what am I doing here what am I doing here I’m not returning the value of order fruit I’m creating a new alias for order fruit though or different function I’m renaming it in fact that my now my result variable is also the order food function all I’m doing is creating a pointer to point to the order food function which is about what I want typically unless I want to create an alias for grouping of functions in classes to make it easy on my life like for example if I wanted to make create j/s if I wanted to make I want to create I don’t know why I would do this let’s say I want say see the value seed a global variable C is equal to create jas right instead of mcafee hshshs all time I can make it see I could say VAR c is equal to three hjs and now i have an alias for the create GS class in framework so then if i want to do some of the fray chess instead of doing create GS that stage i could simply do seedot stage but you might see that in some places i don’t recommend it for beginners that would screw you up you might look at and go I don’t understand what I’m doing why this working a wisin isn’t working I don’t recommend it but this is what happens you create an alias for this thing as opposed to actually getting a return value like total this would never return anything it would just make a this is a pointer this is an assignment statement that says this order fruit function is equal to its going to you know result is going to point to our new pointer an alias for this order food function it’s all this means so please know the difference between this which is actually returning results and this because you have the parentheses here and this with no parentheses that create a that creates an alias for the function okay so that’s something that you want to talk about and I got some funky formatting or going on on top my code that’s okay so function so far we’ve seen are formally defined but what about this you might see this kind of situation right here here’s a a function whose gonna gonna fix texas bugging me and all that that formatting happened of a mac lovely lovely right anyways let’s go back so if you notice the if you notice this function here right the anonymous unnamed function idea here we’re attracting but we have a variable div numbs that’s what it looks like if in regular co if you look at this is a regular program you go how can i assign this function to div nums what does this mean right what am I doing here I’m not getting a value right this is the regular way that I would I would think this function diff num two matching using the function key word here but there’s no function name so what I’m doing is I’m declaring a new function call header and I’m saying that div nums is actually an alias for this anonymous function yes it’s way down here oh we mean no it should be here actually thank you very much that is not intentional I said and we will ignore that one thank you very much that’s when I actually upload it to you now it’ll be perfect yes so this is if you notice I’m making a function but it’s an anonymous function it’s not a name function i’m using div numbs div numbs as the alias for this anonymous function and you might say hold on Tom what is an anonymous function it’s a function that’s not a named function it’s a function without a name and use the function key word with a constructor a parameter block here that’s what this is right but there’s no name for it it’s not like the regular way we see it is function the keyword div numbs and then

this stuff but this is the other the other general form that you will see lots and lots of around the web this general form here which screws people up they go I don’t understand why that function looks like that it should be a function first right because that’s the regular way we expect that as programmers closures we have to talk about clothes you a little bit and closures are the ability for you to have functions that are nested within javascript which is now if you were messed up before now you’re really messed up you’re like hold on I got like function and now they got a function within a function it’s called the closure that’s what they’re called and not only is it a closure but guess what this function here is an anonymous function right so there’s an unnamed function which inside this closure hmm how does this work well when I call I use this funky way of saying this I say call func right which is my variable is equal to my function right that’s what this thing is call func is equal to my function this is really weird right when i call it my function is is called i declare my variable my num is equal to 10 right now this what scope do I have for this my num right what scope is this this is within this body right here right between this little brace and this little brace here right that’s where my num lives and dies right well guess what it’s also available to this anonymous function which gets called right away because I don’t have to call shown um right because shown um doesn’t have a it’s an anonymous function that gets called right away right okay cool so now shown em gets called and it creates this alert that takes the value of my num which is equal to 10 and pops it onto the screen so in effect what I’m doing when I’m calling my function is I’m actually calling this function here this anonymous inner function or you know powerfully classify it as closure yeah be careful be careful i said why because i’m returning and the only reason why this has happened in it because i’m calling shown um right here that’s the value i’m returning right in my return statement guys I will never I’ll try to avoid this syntax for you as much as I can as we go forward this is confusing syntax that most programmers look at and they want to fight their own head off right so if they could do such a thing right yes how to call this dip dumps right you just call dip numbs and then you would put the two arguments or if you’re using javascript just call it with or without arguments it’s the same thing right but you’d call Dignam div numbs is actually the name the alias for this anonymous function it’s not a name function it’s an anonymous function that I’ve given div numbs and made Dib nums the alias for right a pointer to this anonymous function crazy all right I’m not going to go too much in there let’s talk about methods so we talked about functions but maybe methods really are functions in some way right but the thing is with methods we can and kind of access methods of classes with the dot operator or the dot and dot notation just like we’re doing other see style languages right so built-in objects there’s a bunch of them math date and strength I’m not going to go into detail on what those things do although we will be using the math dot random function very frequently in our game play right and some dialogue functions that put in here I’m going to let you read this piece yourself let’s talk about objects in JavaScript now before we finish off this piece all right so we talked so far about functions and you need to know functions in order for you to have objects because you know what guess what functions are prototypical behavior for for javascript it looks like functions all right so if you don’t know functions and you can’t understand objects that’s how we did the function keys first because number of functions are weird hey functions in JavaScript are funky right they’re different than what we see in other languages okay so there are two ways to declare objects in JavaScript there’s two different notations one like this one right where you save our star the variable star is equal to a new object we’ve seen this this is a very common way we see in other languages right and we can also do this which you probably have not seen another languages which is VAR star is equal to these curly braces Wi-Fi do this it’s equivalent to this right in fact this is becoming largely more popular than this in javascript right now why because it’s simply it’s quicker it’s also crazy but we’ll talk about why it’s crazy and what the advantages are of literal notation

over constructor rotation so here is what literal notation looks like all right and I’ve got to put this together for you guys to see VAR hotel is equal to this curly brace and there’s the other curly brace down here with a semicolon at the bottom and if you notice i’m declaring my properties here here’s properties the name with colon and then the value so what does it look like key value pairs is what really what it is just like a hash table if you will so here’s our dictionary right so here’s my key name with a colon and here’s my value separated by commas right and even here is my internal function or method check availability right that’s a function an anonymous function with a function body so this is our method and this these are our properties yes does it accept because you can do single quotes key or double or double quotes it accepts both for javascript preparing what you feel like yes it doesn’t do triple quotes so triple quotes are only available in Python right but yeah it does single quotes or double quotes you can’t use both we can’t say like a single quote in the beginning in a double quote dan s indexer whereas actually won’t keep a syntax error work but it’ll be ugly right and you could cause other issues so again there’s two things so here’s our object look how this is color-coded our object is this yellow piece right here our hotel right and then we have our key and value pairs right here key value pairs right and this is the same way so when I invoke this when I create this this object what am i doing I’m creating a new class and you know what I don’t have a constructor for this class right I don’t have a constructor right my hotel when I use this notation I’m actually creating these key value pairs and also this in inner method called check availability right this is a very legal way to declare an object in JavaScript and actually if anything if you look at it it gives us the ability to create a new data type of a way right think about this is us creating a new didn’t it actually we should think about that when we create an object in any language we’re getting our own custom data type so that’s literal notation which is by far the most popular way to create it into n JavaScript objects on the net if you look on the net you’ll see stuff like this all the time right confusing for most programmers so you look at it you’re like I don’t get it what is this what are we doing here is this am I declaring a list looks almost like a list like an array if you think about it right it looks like an array of items right that I have key value pairs to them the only thing that would give it away maybe is this function thing right here right but otherwise it’s a big list or an array right this is where it becomes very powerful to use JavaScript you can use JavaScript in this way and once you start using this little notation you can realize how powerful it is to do such thing because when do you do this what you’re what are you doing you’re creating a new name space and this namespace this or the between these two brackets this bracket here this this curly brace on this curly brace down here we named we’ve created an alias for these two brackets these two braces and we’re calling it hotel it’s a different way of thinking right it’s not like we’re creating an object right we haven’t even instantiated the object if you think about it when you think about in your head you’re like this object hasn’t been instantiated yes it has once you say once you use the equal operator and you put these these curly braces like this you’ve just instantiate a new object called hotel that’s it you’re done your object is made and I can start using it right away I don’t need a constructor here is what we’re normally used to construct your notation right where we use our hotel this is our object we need to use the new keyword and we need to choose the other keyword called object well actually it’s not a really key word it’s a built-in object that’s part of si si style languages like Java C sharp and so on it’s the super super class that exists for all objects object right so it’s a new object and what we do here we create we use the hotel key word right which is our new object to create variables or properties instant for instance variables or properties for our class and again you see this whole name a key value pair configuration it’s just we’re using the dot notation to denote that it belongs to the hotel object or class and the same thing goes with this function hotel check availability this is just a different syntax that you’ll be seeing is equal to this function and then of course we can use the this keyword right to talk about this room right here when we say hotel rooms were actually saying this room’s is equal to 40 and we can use this keyword like we do in other languages to create a this calculation again better for some programmers when they look at it still might be confusing because you don’t have a constructor a classic constructor

you don’t have such a thing right even though it’s called constructor rotation okay so let’s take a look at some examples we’ve got star name okay star name is equal to Polaris okay and star dot constellation if I created a star class and how would I do this in constructor notation if I go back to the beginning right way back over here here’s where I declare the stars right it’s the same way whether I do it this way or this way now when I go over here I can still say I can declare this key value pair this name ki is equal to Polaris this value I can declare this constellation is equal to us and liner but I didn’t declare them over here right I only declared the objects well guess what you don’t have to you can as soon as you as soon as you assign them now there are properties of this object automatically become they just created if it doesn’t exist javascript says created right bad right we look at it and go oh my god how can this happen I’m ready to cry in a corner it’s bad right because it doesn’t make any sense that this thing should happen this way it doesn’t make sense from an OP story into perspective guys this is an object-oriented this is prototypical it’s a prototypical instantiation okay so here we are down here we’ve done this that’s perfectly legal and of course I can check to see if a property is inside of an object to say if my properties in an object they can use the in operator and I can do something to it so I can check to see if a property if an object has a property actually some other language do the same thing as well okay let’s take a look at adding methods to objects right so I can we do the same kind of idea we said here’s our function star which is our object right and we have a couple of things here we have this constellation which is by the way this is look what this is here this is our constructor right this is our constructor function when we say function star and we put something inside of here this is another way to declare our new object right and we because it’s a function and now we start assigning properties this constellation this type the super spectral class this magnitude and so on and now here’s this show which is a function within a function closure right and we talked about before this show method right is something we can call down here star Polaris show we can say you know send Polaris we want to look at the Polaris right that’s what we’re looking at and show use the show method to alert to use this method and all we r by the way all we’re sending in haha here’s another thing if you notice I don’t send in every single a pair of uggs mccall thing here I’m assigning I’m assigning right my star right and i’m signing Polaris as the constellation here that’s what I’m doing right I’m in doing that here because that’s the first one that i’m using i’m using this square bracket notation to call the method weird and unusual right i’m not going to talk too much more about a raise they’re here and the reason why I bring them up only because they’re part of their kind of a built-in object you should know about one thing to know is this a raise in JavaScript which will be seeing as we create programs we create code right there very flexible they can hold other objects just like other languages right so imagine that if I want to have an array of aliens right well I can do that if alien is an object I can put as many aliens or images or audio or whatever inside each of the memory locations in my array not only that but they don’t have to be even contiguous in terms of the way they are they don’t have to be all of one data type they can be an array of aliens I can have some aliens in there I can have some heroes in there I can have some images I can have some audio I could put whatever I want in my array which is very very loosely typed it does there’s very unstructured for some people but very flexible as well so if you create one array right you can have everything inside of that Ray you want why because now that array is an object because everything in javascript is an object so even though i say am I array is equal to a new array what’s an array it’s a class it’s a built in class think of this as a built in class just like objects as a built in class and now my array has certain properties right I can do this my array 0 which is the zero-based indexing is equal to first here’s my key value pairs again I’m back to this stuff i can assign a value here in my array i can also use the concat method right to actually add a third value it adds it onto the end of the array so first second third would be my array now right that’s what my array would be I can do that when I can cat I

use the cat method and here’s my first to rate 51 and 67 and I have 18 hello and 125 and if I can cat my first rate when I use my can cat method with my second array I put them together right contact you might see that that’s a very common way of doing things but you can also use the + operator to do the same thing you have one array you plus the other one and then another together right here’s another one that you may seem a join also is very similar to concat right by the join method converts all the elements of the array into a string now that is useful if I want to make sure that every element of myarray is a string no matter what the data type was before I used the join method guys you need to know these things because these little methods for the arrays we’re going to go through right now are the key things that you’re going to use to manipulate your aliens and your clouds and your explosions and everything else we’re going to do if you don’t know this right in JavaScript then you won’t get what the notation is when I show it to your like Tom I want to die I want to stab my eyes out what is that you know it’s remember it’s our raise and we’re using this join feature and this is what it does push ads and pop removes elements and it removes elements from where from the end of the array and there’s also another couple of methods unshipped which adds and shift which removes and adds elements respectively to the top of the array to the start of the array so it’s almost like you can control the where you add or remove stuff from the array right why would this be important well imagine we’re creating for using create jas to create a display list and our display list for to create us everything that gets displayed in the canvas is just an array a list of objects that we’re putting on the on the on the canvas well I can use these things as my display list is an array right so i can do you can egg in your shift i can use on shift i can use pop i can use remove i can do all these push and pop to change where which part of my display list i’m removing stuff from but i think the better one if you’re going to do anything at all is this slice method and you’re going to see this used a lot what slice does is it takes whatever the position is a better of of the object in the array and removes it it pops it right out in java if you like the remove command what I actually remove it right from the middle of where it is and what it does is it joins the other two ends together so here i have my array unless i have this part of the array that i’m not going to remove and this part of the array the left side and the right side of my right and in the middle of them display something out right what happens with the array it becomes concatenated in the Middle’s and that’s one continuous array again so i can pop an item out of there using slice and that you’re going to see a lot more so for example star dot slice 13 right if you notice it starts at 0 1 so i started Deneb right and i go until three but not including three so I go Deneb Vega right I don’t include three this is my stopping point this is start and stop not including stop and then I take these two elements and I pop them out of the array and I and what I do is I don’t actually change my star my star array remains unchanged right I but I can create a new one almost like a substring i’m taking a string and i’m using my substring command and i create a new one it’s very important to know these things i’m showing them to you this is a reference scarf or use we’re going to see these things over and over again and that’s why i mentioned them i wouldn’t bring them up if you don’t need them right sort is also interesting but remember it does weird things if you try and sort numeric values it’ll mess you up all right do not do such a thing with numeric values it does things alphabetically and sometimes if you try and sort something like 1 and 111 and 112 and if you had some other things like to if that was your numbers 11 11 11 2 and 2 you would think it would be 12 11 11 12 but no it’s not true because alphabetically 1111 is next and then 112 and then too that’s actually a sorted order right because it doesn’t sort that what yes sorry sort on no but you can adjust the sorting methods so you can do different ways you can to ascending descending order you can change if you actually go to the sort method online it’ll tell you different ways of adding additional parameters to the sort option okay iterating through a raise is really important we’ve tried this before and you can use the for method to do that with the adult length you want to go through the rate the array length so it’s less than the array length it’ll iterate through the entire array this is a very common methodology right here’s a javascript class example and this is where we actually finally use the way we normally look at classes with this prototype syntax I’m not going to go into the prototypes inc tax syntax too much because i’m hoping you’ll join me

with typescript right if you decide to do javascript and pure JavaScript this is the way it would look my person class function person with my first name i’m passing a parameter and this dot first name is equal to first name which is normally what we would listen for right and then if i want to create a method outside to find a method outside of my of my class I say person dot prototype prototype being a keyword that’s included in JavaScript person dot prototype that say hello that’s the method name is equal to anonymous function that has this body that is the syntax to create a prototype method for this prototypical language and of course you’d use person one in person to the same way that you would use it in other languages and now we’ll stop there before i get into tech script a little bit more and i’ll pause there because i want to talk about other things but i think that’s a good place for us to take a five-minute break and get a little bit of do a little bio break and then we’ll come back and continue