2.5 Objects

Hello everyone and welcome to this course where we're going to look at Objects in JavaScript. You have seen the primitive types in javascript. Now let's look at reference types, so in the category of reference types, we have Objects. Arrays and Functions In this video, we're going to explore objects and we'll see arrays and functions later in this section. So first of all what is an Object? An Object in JavaScript and other programming languages is like an object in real life. Think of a person, a person has a name, an age, an address etc... These are the properties of a person, you have the same concept in JavaScript. So when we are dealing with several related variables we can put these variables inside an object. For example: Here we have two variables "name" and "age" strongly related, they are part of the representation of a person so instead of declaring two variables we can declare the object as person and then instead of referencing these two variables we can just reference the object "person" this makes our code cleaner. Let's see how to declare a "person" object, we start with "let" or "const" if we don't want to reassign the "person" object and define it on a literal object. We use the brace syntax to define a value key Now, between these braces, we add one or more key-value pairs the feet are what we call the properties of this object. We want this object to have two properties or keys. Name and age, so we add a "name": the key and we define its value. We add another pair of key value for value 30. Now we have a "person" object with two properties or two pairs of key values "name" and "age". With this we don't need these two variables so we'll delete them. Console.log(person); of our "person" object On the console: we have the object "person", between these braces, we have several pairs of key-values which are the properties of the object "person". Now there are two ways to work with these properties. For example, if we want to change the "name" of this person, we need to access the "name" property. There are two ways, so the first one is with the "Dot notation" so it's a notation with a dot We add the name of the object then we make a dot and we add the property so either the age or the "name". In our case, we will use (person.name) we will change its name, give it a name: 'John'. Now we can choose the notation (dot notation) to read also the value of a property, at line 10 instead of writing the object "person" we can write its name property so person.name In the console, gets John. The other way to access a property is to use the bracketed notation. personne['name'] = 'Mary'; So if we register we get Mary on the console. Now you are wondering which approach is better. Well, dot notation is a bit more concise, so it should be your default choice. However, bracketed notation has its own uses. Sometimes you only know the name of the target property at runtime. For example in our user interface it can select the name of the target property. In this case at the time of writing the code, we don't know which property we are going to access, it will be selected at runtime by the user. So we could have another variable somewhere else like selection that determines the name of the target property that the user selects and that can change at runtime. With that we can access that property using the bracketed notation dynamically. So we pass the section here for nobody We get the same result. That's it for the notation with square brackets, for now just respect the dot notation because it's cleaner and easier. That's it for Objects in JavaScript, in the next video we'll see Tables in JavaScript.