Javascript Tutorial | Objects & Arrays in JS | Ep12

objects and arrays are used throughout our entire lives and they'll also be used in our programs our programs typically represent objects in the real world so we need to make sure we understand objects and arrays you can see your television car and all of the other objects that you use throughout your daily life and they are obvious for what they are objects are obvious but you also use arrays and this may not have been so obvious in your daily lives but what do you use in your daily lives that are arrays well you could have for example a list of two dues a shopping list a teacher that has a register full of names for the registered students in that class and all sorts of registers registers for your cars for your number place and all the rest of it these are a race to understand programming we need to understand when do we use the standard object and when do we use a special type of object called an array an array is an object but it's a type of object so first of all let's take a look at objects and couple it with obvious objects are obvious when you look at your computer your smart phone your television your car your house you can identify what it is it's obvious as an object and objects in programming what we first of all do is we put in the curly brackets or braces and within those braces everything is grouped together for example if you have a car you need the nouns and adjectives to describe the car so the nouns will be the key name such as color and the objective will be the values such as red so it describes the noun and by these nouns and objectives we can describe the look of this object and you can do that for all objects and these are called properties properties have a symbol name which point to a value in memory and we call these key names whenever those names are in an object and the values are the values stored in memory and that together the key and value pair is called the property but what happens when you need to perform an action on the object you know that staring at your computer will do nothing you need to type and you need to click and likewise with a car you need to get in it drive it lock it unlock it open the sunroof turn on the radio do whatever it is that you want to do inside of that car so what you have is these subroutines or the functions that you can perform those actions that you can perform on the actual object itself now when you take a subroutine or a function and you place it inside of an object it's called a method and the reason why we do this is because if I say to you add this method you know immediately I am talking about a function or a subroutine that is within an object it's for an object so that is why we have these precise terminology this is called a method where you have a key name don't forget it's a symbol it's pointing to something in memory and it's pointing to an instruction set a set of instructions you can perform on that object so that's what we have that subroutine or that function and the reason why we're grouping these together by the braces is because if these values just floated randomly around our program and they were not grouped together by these braces then it will be pretty useless now also you have arrays now arrays are objects but they're just a special type of object just like a shopping list in your hand well the shopping list is an object but it's a list so whenever you think about a list a list of car names a list of products in the warehouse a list of names registered for a classroom a list of registration plates for the driving authorities it's a list its iterable in other words it has elements that make up the complete object so for example a shopping list has lots of elements inside of it and these elements have numbers assigned to them now we define an array with the square bracket and we group our tasks our lists together in the brackets and each element is assigned a number because we know typically what a shopping list will have a shopping list array will contain items found in door and also a to-do list would typically contain tasks each element will now be a task in our to-do list we understand the type of thing we're pointing to but you'll notice that each thing in the shopping list is unique it's identifiable and each is on their own and a school is not an orange and an orange is not an apple but yet we're grouping it in this shopping list business that's pointing to different objects around the store that each element is assigned a number we need to be able to pick out and identify our elements in the array we need to iterate over so go one by one by one and it's zero indexed meaning the first element in the array has the value of zero and then we go up from there zero one two three now it's important to note that in JavaScript whenever you modify an array the key names are automatically updated these numbers are reassigned potentially if they have changed so the program actually organizes your elements for you and that's the beautiful thing about an array it will keep your list together it will keep those key names and the elements inside of the array will be your element and you can take elements out and you can add new elements in and everything will be managed by the programming language recap objects are obvious we have objects defined by the braces or curly brackets and we have the nouns and adjectives that describe the object the nouns being the key names and the objectives being the values and these are called properties properties describe the object then also you have the subroutines or the actions you can perform on that object and when you place a subroutine inside of an object it is in fact a method and again it has a key name a symbol name to point to this action this list of instructions to complete the action then we also have arrays arrays or lists they contain similar types of things such as names or car registration plates or items in a shop they contain similar types of things and they list out these similar types of things and each one of them is called an element so let's start programming this out and we are going to start with the my app dot J's file now we can create an object in the console window that again to create an object we just open and close the braces this is called an object literal it literally means we're creating an object and there you go we've just made an object but there's no way to reference this later on in our program so it would have created this object and then it would have destroyed it out of memory because there's no way my program can later on point to it so if my program can't refer to this object later on it's a waste of time get rid of it get it out of memory again it's all about speed and decreasing the amount of memory your program needs to execute its tasks so I'm going to create the object in the console window it's a bit too limited so let's go back over here and let's create a variable and the variable allows us to define a symbol name such as car and I can use this symbol name to target this object in memory and then I can end with the semicolon now I have an object right here and I can save it hit refresh and I can type in car and there it is there is my object but it's empty it doesn't have any properties I can't see it and know what it is I can tell that it's referring to a car type of object but we've got no properties to describe the object so let's go ahead and add those now the first thing we'll have is the key name color and then we have the value which is going to be red there is the noun and there is the objective that describes the noun and the key and the value pair is called a property it describes the object and also we assign values this time to key names via the colon and we can keep adding in more and more key names and if you want to add in another key name and value or another property then you to put in a comma and then you can have another property such as speed for example is going to be 200 now I want another key in value pair but this time I don't want the value to be a primitive value or an object or an array I actually want it to refer to a subroutine or function so I have Drive for example and drive is going to have a subroutine in it that will return Drive and there we go we now have two properties and we have one method this key and value pair the value being a subroutine or function if that's the case that is a method so we've got properties and then we've got methods and so what we have now is the ability to save this refresh the browser and type in car and when we do this you'll notice we have the property's color and speed and we also have drive which is a function and this function is contained within this object called car so that is how you create objects then very quickly let's create a shopping list so I'm going to create another object called an array again we need to refer to this object later on in our program so we need to give it a symbol name so we can reference it in memory and then we can define an array by literally this is called an array literal by opening and closing the brackets that's called an array literal we're literally creating an array and this time you don't define the key names like this zero and then you say Laurence for example the key names are already assigned for you they're automatically done you just want the values so right here this would be Apple and then we have another item in our shopping list so we want to add in the comma a game apple orange and so forth let's have pear as well so you have all of these different items or elements in the array and then let's go ahead and save this and preview in the browser and we'll say shopping list and there it is shopping list apple orange and pear there is our list and you'll notice that when I open this up it is an object you can see the similar type of syntax with the colons and so forth with a regular object but this time it's actually assigned the numbers for us and the program will manage these elements if I was to delete orange out there for example pear would become one and so forth and it will manage those key names so it's easily iterable so that is how you define an object and that is how you define array

Channel: Programming With Avelx

Views: 12,627

Keywords: objects and arrays, what's the difference between objects and arrays, why do we have arrays, are arrays objects, what are objects, javascript

Id: FLGzeTHAbqQ

Length: 11min 51sec (711 seconds)

Published: Fri May 26 2017