Part five of the full #JavaScript course 🐇🕳️. Learn everything you need to know about the JS Object https://fireship.io/courses/javascript/

Topics covered include:

- Object creation
- Bracket vs Dot Notation
- Property descriptors
- How object references work
- Prototype chain
- Modern syntax like spread and destructuring
- Loop over objects
- Custom object constructors

MDN Object Docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Take the #JS quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:31:43.357Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
b5b6c614-d42d-4325-9bc9-d55e5a552ae7
1a10647f785e40c09fdd1f8c118fe21c865aa2f75f68e3a1490b1a18b1bd4224
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
You unlock this door with the key of imagination.
This is an object.
A collection of properties where each associates a key to a value.
Earlier in the course, we learned that there are 7 primitive data types in JavaScript.
Primitives represent a single value like a number or a string and anything that's not a primitive is an object.
In other words, everything interesting that happens in JavaScript is made possible by the object data type.
Today we'll take a deep dive into how the JavaScript Object works and look at modern syntax and methods we can use to make our code cleaner and more efficient.
Jumps.
If you're new here, like and subscribe and grab all of the videos on this free JavaScript course from Buyership.
Io.
An object is conceptually similar to a dictionary were a map that you might find in other programming languages.
The most straightforward way to create an object is to use the literal syntax.
Simply define a variable equal to curly braces.
Inside the braces, you define properties separated by commas.
A property is essentially a key value pair where the left side is the property name and the right side is the property value.
The property name needs to be a unique value that can be coerced to a string.
The value can be anything you want.
A primitive, another object, a function, or whatever.
Now even though we define this object as a const variable, we can still set is on it after it's been created.
We can use bracket notation on the object followed by the name of the property equal to whatever value we want to set there.
Then later in the code we can read or get that property using the same bracket notation.
Now let's imagine that we've walked into an alternate universe, because in JavaScript, there is always more than one way to do things.
This time, we'll create a new object using the constructor syntax.
Then we'll set properties on it using dot notation.
Dot notation looks a lot cleaner, but your property names will need to be a continuous string that does not start with a number.
If you have property names with spaces or that start with numbers, you'll get a syntax error if you tries to call them with dot notation.
But now we've fallen into yet another alternate universe.
This time, we'll use a static method on the object class called create.
You wouldn't normally use this one for an empty object.
It's most useful when you have an existing object and you want it to inherit its properties, or in other words, use the existing object as a prototype.
And this is one of the weirder parts of JavaScript, so let's look at it a little more closely.
First, we have a plain JavaScript object called organism.
It contains a DNA property of a random number.
And we create a new object with object create passing the organism as the prototype.
When we console log the new object, you'll notice that it's still a blank object, but if we call the DNA property on this object, we get a result back.
So it's almost like an invisible property on the new object.
That's because it exists on this object's prototype, and we can see this property actually lives on the prototype by calling object get prototype of, which returns the original object we created.
Whenever I gave you the I knew you were in heaven, mister Valentine.
This is the other place.
This time we're going to add a property to the object by using Object define property.
It takes the object as its first argument, the name of the key as the second argument, then an object with some options on it known as a descriptor as the third argument.
We can use the value option in the descriptor to create an object that is identical to the ones in the previous examples.
However, we can now do more advanced things here as well, like define a getter, and that would access the property by calling a function.
Now most casual users of JavaScript won't need to use to find property on a regular basis, but it is important to know how it works if you really want to understand the language.
In most cases, you'll likely be working with the literal syntax, and it does have a few cool tricks up its sleeve.
Let's say we have a couple of variables and we want to set those variables on an object with the same property names as the variable.
In the olden days, we would have to duplicate the property name with the variable.
But in modern times, we can simply add the variable to the object literal, and it will coerce the variable name to the property name.
And we can do a similar thing in reverse with destructuring.
This time, we want to read an object's properties and set them as variables to use in our local code.
In the olden days, we would have to declare a variable and then set its value equal to the object property.
Nowadays, we can define multiple variables with a single line code and JavaScript will match the variable names to the property names on the object.
But what if you want to use this awesome syntax, but give your variable a different name?
Sometimes you might have to do this to avoid a name collision with an existing variable.
Just add a colon after the property name, and then you can name your destructured variable whatever you want.
Now what if you were to try to take this code and then add another property with the same name?
This code won't throw an error.
Instead, it will overwrite the value on the left with the value on the right.
This is important to know because sometimes you might compute properties that you don't know until runtime.
Like, you might want to create an object based on some data you fetch from a database.
You can compute property names by wrapping them in brackets and then place an expression inside and it will compute that value when the object is created.
In this example, we have a function that generates a random number.
We can then call that function inside of the brackets to generate the key for this object when the object is created.
And you'll notice every time we refresh, we get a different key or name for this property.
Now object properties can also take functions as their value.
And when a function lives on an object, it's called a method.
You can define a method using the shorthand syntax where you omit the property name and just define a named function directly in the object literal.
And we can also use get and set keywords here to define getters and setters on this object.
When you define a method on an object, this refers to this object.
However, if you remember from the last video, if you use the arrow function syntax here, it will refer to the global this contacts.
For example, if we convert our make web method into an arrow function, this dot web will refer to the global web value as opposed to the internal property on this object.
So that's just a weird little thing to get used to in JavaScript.
An interesting thing you can do with the this keyword is chain methods together.
You'll see the syntax used in different libraries with the most famous example being jQuery.
So the question is how do we chain together methods while keeping a reference to the same object?
I kind of already gave you the answer because remember I said the this keyword refers to the parent object when defined in a method.
So if you want to chain method calls together, all you have to do is return this from the method.
Now any method you call will return the reference to the original object, and that provides a good segue into the topic of object references.
Previously in the course, we learned the difference between the call stack and the heap.
Primitive values are short lived in most cases in the call stack, while JavaScript objects are kept as references in the heap.
Let's take a second to look at the implications of this because it's very important.
Let's look at how things work first with primitives.
We'll initialize a variable a and then set b equal to a.
As you would expect, they're both the same value, but they're actually both pointing to their own primitive value.
So that means if we change a to a different value, console log them again, you can see a has the new value, but b still has the original value that it got from a.
Now, let's go ahead and refactor things to make a an object.
The big difference here is that b is making a reference to the object created in a.
They are both referencing the same object kept in the heap memory as opposed to copying the value like it did with a primitive.
After we update the property, you can see that they both console log the same object because, again, they're both sharing the same reference to it.
Now that you know how references work, let's take a look at how we can combine objects together.
If you're updating the same object in multiple places, it can be kind of difficult because of the way references work.
In many cases, you simply want to clone that object's property into a new object, and one way to achieve that is with object assign.
Let's see how it can change the behavior of our previous example.
Instead of setting b equal to a, we use object assign to take a brand new object and assign a's properties to it.
Now it's important to keep in mind that this only uses the internal and numerable properties of a.
You can see exactly which properties will be copied over by using object get own property names, and that will give you an array of all the property names owned directly by this object.
That means any other properties that it inherited higher up in the prototype chain would not be copied over.
In addition, if this object were to reference other objects and its properties, those objects would not be recursively deep copied over as well.
That means if a was making a reference to other objects, those objects would still be copied over by reference.
It wouldn't recursively copy all the values in those nested objects.
That's not fair.
That's not fair at all.
If you're looking to clone objects like this, a better alternative might be to use the spread syntax.
There are some very minor differences between the 2, but they can be used interchangeably in most cases.
And the spread syntax just looks a lot nicer when you're combining a lot of objects together.
Now, at the very beginning of the video, I defined an object as a collection of key value pairs.
And when you have a collection of something, you likely want to loop over it.
Looping over an array is easy, but how do we loop over an object?
Well, one option is to use a for in loop.
This will loop over all of the innumerable properties in the object as well as its prototypes.
And this can be very very confusing, so most people tend to avoid the for in loop.
A better alternative is to get the keys or values as an array.
You can use object dot keys or values to do exactly that.
Then you can loop over them with a regular for of loop or you can use one of the built in array methods like for each.
But what if you want to loop over both the keys and the values together?
You can get an array of tuples using object dot entries, then you can destructure the key and value variables in the loop.
Now I showed you earlier how to create a new object using the new keyword.
But what if you want to customize the way that object is created?
You can do that easily in JavaScript by writing a constructor function.
By convention, you should always capitalize the name of this function.
In this case, we have a zombie function and it takes an argument of name.
Will take that argument and define it as an internal property on the object.
And then we can handle additional setup in this function like setting a timestamp and also defining some methods.
You'll notice that it's the this keyword that allows us to reference internal properties on this object when it's created or instantiated.
So this function is actually very similar to a class like you might find in other object oriented programming languages.
When you define a constructor function like this, the way you initialize a new object is to put the new keyword in front of it.
Now in modern JavaScript, we could actually skip the function and just use the class keyword, but the important takeaway here is that we're using a function to instantiate or create a new object.
The class keyword is mostly just syntactic sugar for this process.
As you can see, JavaScript objects are very flexible and a core building block of the language.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and scribe and make sure to check out the full JavaScript course on FireShip IO.
Thanks for watching and I will talk to you soon.
Beauty is in the eye of the beholder.

Speaker 0: You unlock this door with the key of imagination. This is an object. A collection of properties where each associates a key to a value. Earlier in the course, we learned that there are 7 primitive data types in JavaScript. Primitives represent a single value like a number or a string and anything that's not a primitive is an object.

In other words, everything interesting that happens in JavaScript is made possible by the object data type. Today we'll take a deep dive into how the JavaScript Object works and look at modern syntax and methods we can use to make our code cleaner and more efficient. Jumps. If you're new here, like and subscribe and grab all of the videos on this free JavaScript course from Buyership. Io.

An object is conceptually similar to a dictionary were a map that you might find in other programming languages. The most straightforward way to create an object is to use the literal syntax. Simply define a variable equal to curly braces. Inside the braces, you define properties separated by commas. A property is essentially a key value pair where the left side is the property name and the right side is the property value.

The property name needs to be a unique value that can be coerced to a string. The value can be anything you want. A primitive, another object, a function, or whatever. Now even though we define this object as a const variable, we can still set is on it after it's been created. We can use bracket notation on the object followed by the name of the property equal to whatever value we want to set there.

Then later in the code we can read or get that property using the same bracket notation. Now let's imagine that we've walked into an alternate universe, because in JavaScript, there is always more than one way to do things. This time, we'll create a new object using the constructor syntax. Then we'll set properties on it using dot notation. Dot notation looks a lot cleaner, but your property names will need to be a continuous string that does not start with a number.

If you have property names with spaces or that start with numbers, you'll get a syntax error if you tries to call them with dot notation. But now we've fallen into yet another alternate universe. This time, we'll use a static method on the object class called create. You wouldn't normally use this one for an empty object. It's most useful when you have an existing object and you want it to inherit its properties, or in other words, use the existing object as a prototype.

And this is one of the weirder parts of JavaScript, so let's look at it a little more closely. First, we have a plain JavaScript object called organism. It contains a DNA property of a random number. And we create a new object with object create passing the organism as the prototype. When we console log the new object, you'll notice that it's still a blank object, but if we call the DNA property on this object, we get a result back.

So it's almost like an invisible property on the new object. That's because it exists on this object's prototype, and we can see this property actually lives on the prototype by calling object get prototype of, which returns the original object we created. Whenever I gave you the I knew you were in heaven, mister Valentine. This is the other place. This time we're going to add a property to the object by using Object define property.

It takes the object as its first argument, the name of the key as the second argument, then an object with some options on it known as a descriptor as the third argument. We can use the value option in the descriptor to create an object that is identical to the ones in the previous examples. However, we can now do more advanced things here as well, like define a getter, and that would access the property by calling a function. Now most casual users of JavaScript won't need to use to find property on a regular basis, but it is important to know how it works if you really want to understand the language. In most cases, you'll likely be working with the literal syntax, and it does have a few cool tricks up its sleeve.

Let's say we have a couple of variables and we want to set those variables on an object with the same property names as the variable. In the olden days, we would have to duplicate the property name with the variable. But in modern times, we can simply add the variable to the object literal, and it will coerce the variable name to the property name. And we can do a similar thing in reverse with destructuring. This time, we want to read an object's properties and set them as variables to use in our local code.

In the olden days, we would have to declare a variable and then set its value equal to the object property. Nowadays, we can define multiple variables with a single line code and JavaScript will match the variable names to the property names on the object. But what if you want to use this awesome syntax, but give your variable a different name? Sometimes you might have to do this to avoid a name collision with an existing variable. Just add a colon after the property name, and then you can name your destructured variable whatever you want.

Now what if you were to try to take this code and then add another property with the same name? This code won't throw an error. Instead, it will overwrite the value on the left with the value on the right. This is important to know because sometimes you might compute properties that you don't know until runtime. Like, you might want to create an object based on some data you fetch from a database.

You can compute property names by wrapping them in brackets and then place an expression inside and it will compute that value when the object is created. In this example, we have a function that generates a random number. We can then call that function inside of the brackets to generate the key for this object when the object is created. And you'll notice every time we refresh, we get a different key or name for this property. Now object properties can also take functions as their value.

And when a function lives on an object, it's called a method. You can define a method using the shorthand syntax where you omit the property name and just define a named function directly in the object literal. And we can also use get and set keywords here to define getters and setters on this object. When you define a method on an object, this refers to this object. However, if you remember from the last video, if you use the arrow function syntax here, it will refer to the global this contacts.

For example, if we convert our make web method into an arrow function, this dot web will refer to the global web value as opposed to the internal property on this object. So that's just a weird little thing to get used to in JavaScript. An interesting thing you can do with the this keyword is chain methods together. You'll see the syntax used in different libraries with the most famous example being jQuery. So the question is how do we chain together methods while keeping a reference to the same object?

I kind of already gave you the answer because remember I said the this keyword refers to the parent object when defined in a method. So if you want to chain method calls together, all you have to do is return this from the method. Now any method you call will return the reference to the original object, and that provides a good segue into the topic of object references. Previously in the course, we learned the difference between the call stack and the heap. Primitive values are short lived in most cases in the call stack, while JavaScript objects are kept as references in the heap.

Let's take a second to look at the implications of this because it's very important. Let's look at how things work first with primitives. We'll initialize a variable a and then set b equal to a. As you would expect, they're both the same value, but they're actually both pointing to their own primitive value. So that means if we change a to a different value, console log them again, you can see a has the new value, but b still has the original value that it got from a.

Now, let's go ahead and refactor things to make a an object. The big difference here is that b is making a reference to the object created in a. They are both referencing the same object kept in the heap memory as opposed to copying the value like it did with a primitive. After we update the property, you can see that they both console log the same object because, again, they're both sharing the same reference to it. Now that you know how references work, let's take a look at how we can combine objects together.

If you're updating the same object in multiple places, it can be kind of difficult because of the way references work. In many cases, you simply want to clone that object's property into a new object, and one way to achieve that is with object assign. Let's see how it can change the behavior of our previous example. Instead of setting b equal to a, we use object assign to take a brand new object and assign a's properties to it. Now it's important to keep in mind that this only uses the internal and numerable properties of a.

You can see exactly which properties will be copied over by using object get own property names, and that will give you an array of all the property names owned directly by this object. That means any other properties that it inherited higher up in the prototype chain would not be copied over. In addition, if this object were to reference other objects and its properties, those objects would not be recursively deep copied over as well. That means if a was making a reference to other objects, those objects would still be copied over by reference. It wouldn't recursively copy all the values in those nested objects.

That's not fair. That's not fair at all. If you're looking to clone objects like this, a better alternative might be to use the spread syntax. There are some very minor differences between the 2, but they can be used interchangeably in most cases. And the spread syntax just looks a lot nicer when you're combining a lot of objects together.

Now, at the very beginning of the video, I defined an object as a collection of key value pairs. And when you have a collection of something, you likely want to loop over it. Looping over an array is easy, but how do we loop over an object? Well, one option is to use a for in loop. This will loop over all of the innumerable properties in the object as well as its prototypes.

And this can be very very confusing, so most people tend to avoid the for in loop. A better alternative is to get the keys or values as an array. You can use object dot keys or values to do exactly that. Then you can loop over them with a regular for of loop or you can use one of the built in array methods like for each. But what if you want to loop over both the keys and the values together?

You can get an array of tuples using object dot entries, then you can destructure the key and value variables in the loop. Now I showed you earlier how to create a new object using the new keyword. But what if you want to customize the way that object is created? You can do that easily in JavaScript by writing a constructor function. By convention, you should always capitalize the name of this function.

In this case, we have a zombie function and it takes an argument of name. Will take that argument and define it as an internal property on the object. And then we can handle additional setup in this function like setting a timestamp and also defining some methods. You'll notice that it's the this keyword that allows us to reference internal properties on this object when it's created or instantiated. So this function is actually very similar to a class like you might find in other object oriented programming languages.

When you define a constructor function like this, the way you initialize a new object is to put the new keyword in front of it. Now in modern JavaScript, we could actually skip the function and just use the class keyword, but the important takeaway here is that we're using a function to instantiate or create a new object. The class keyword is mostly just syntactic sugar for this process. As you can see, JavaScript objects are very flexible and a core building block of the language. I'm gonna go ahead and wrap things up there.

If this video helped you, please like and scribe and make sure to check out the full JavaScript course on FireShip IO. Thanks for watching and I will talk to you soon. Beauty is in the eye of the beholder.
You unlock this door with the key of imagination. This is an object. A collection of properties where each associates a key to a value. Earlier in the course, we learned that there are 7 primitive data types in JavaScript. Primitives represent a single value like a number or a string and anything that's not a primitive is an object. In other words, everything interesting that happens in JavaScript is made possible by the object data type. Today we'll take a deep dive into how the JavaScript Object works and look at modern syntax and methods we can use to make our code cleaner and more efficient. Jumps. If you're new here, like and subscribe and grab all of the videos on this free JavaScript course from Buyership. Io. An object is conceptually similar to a dictionary were a map that you might find in other programming languages. The most straightforward way to create an object is to use the literal syntax. Simply define a variable equal to curly braces. Inside the braces, you define properties separated by commas.
A property is essentially a key value pair where the left side is the property name and the right side is the property value. The property name needs to be a unique value that can be coerced to a string. The value can be anything you want. A primitive, another object, a function, or whatever.
intellectual property
real estate
Now even though we define this object as a const variable, we can still set is on it after it's been created. We can use bracket notation on the object followed by the name of the property equal to whatever value we want to set there. Then later in the code we can read or get that property using the same bracket notation. Now let's imagine that we've walked into an alternate universe, because in JavaScript, there is always more than one way to do things. This time, we'll create a new object using the constructor syntax. Then we'll set properties on it using dot notation. Dot notation looks a lot cleaner, but your property names will need to be a continuous string that does not start with a number. If you have property names with spaces or that start with numbers, you'll get a syntax error if you tries to call them with dot notation. But now we've fallen into yet another alternate universe. This time, we'll use a static method on the object class called create. You wouldn't normally use this one for an empty object. It's most useful when you have an existing object and you want it to inherit its properties, or in other words, use the existing object as a prototype.
And this is one of the weirder parts of JavaScript, so let's look at it a little more closely. First, we have a plain JavaScript object called organism. It contains a DNA property of a random number. And we create a new object with object create passing the organism as the prototype. When we console log the new object, you'll notice that it's still a blank object, but if we call the DNA property on this object, we get a result back. So it's almost like an invisible property on the new object. That's because it exists on this object's prototype, and we can see this property actually lives on the prototype by calling object get prototype of, which returns the original object we created. Whenever I gave you the I knew you were in heaven, mister Valentine.
biology
toys
This is the other place. This time we're going to add a property to the object by using Object define property. It takes the object as its first argument, the name of the key as the second argument, then an object with some options on it known as a descriptor as the third argument. We can use the value option in the descriptor to create an object that is identical to the ones in the previous examples. However, we can now do more advanced things here as well, like define a getter, and that would access the property by calling a function. Now most casual users of JavaScript won't need to use to find property on a regular basis, but it is important to know how it works if you really want to understand the language. In most cases, you'll likely be working with the literal syntax, and it does have a few cool tricks up its sleeve. Let's say we have a couple of variables and we want to set those variables on an object with the same property names as the variable. In the olden days, we would have to duplicate the property name with the variable. But in modern times, we can simply add the variable to the object literal, and it will coerce the variable name to the property name. And we can do a similar thing in reverse with destructuring. This time, we want to read an object's properties and set them as variables to use in our local code. In the olden days, we would have to declare a variable and then set its value equal to the object property. Nowadays, we can define multiple variables with a single line code and JavaScript will match the variable names to the property names on the object. But what if you want to use this awesome syntax, but give your variable a different name? Sometimes you might have to do this to avoid a name collision with an existing variable. Just add a colon after the property name, and then you can name your destructured variable whatever you want. Now what if you were to try to take this code and then add another property with the same name? This code won't throw an error. Instead, it will overwrite the value on the left with the value on the right. This is important to know because sometimes you might compute properties that you don't know until runtime.
Like, you might want to create an object based on some data you fetch from a database. You can compute property names by wrapping them in brackets and then place an expression inside and it will compute that value when the object is created. In this example, we have a function that generates a random number.
databases
We can then call that function inside of the brackets to generate the key for this object when the object is created. And you'll notice every time we refresh, we get a different key or name for this property. Now object properties can also take functions as their value. And when a function lives on an object, it's called a method. You can define a method using the shorthand syntax where you omit the property name and just define a named function directly in the object literal. And we can also use get and set keywords here to define getters and setters on this object. When you define a method on an object, this refers to this object. However, if you remember from the last video, if you use the arrow function syntax here, it will refer to the global this contacts. For example, if we convert our make web method into an arrow function, this dot web will refer to the global web value as opposed to the internal property on this object. So that's just a weird little thing to get used to in JavaScript. An interesting thing you can do with the this keyword is chain methods together. You'll see the syntax used in different libraries with the most famous example being jQuery. So the question is how do we chain together methods while keeping a reference to the same object? I kind of already gave you the answer because remember I said the this keyword refers to the parent object when defined in a method. So if you want to chain method calls together, all you have to do is return this from the method. Now any method you call will return the reference to the original object, and that provides a good segue into the topic of object references. Previously in the course, we learned the difference between the call stack and the heap. Primitive values are short lived in most cases in the call stack, while JavaScript objects are kept as references in the heap. Let's take a second to look at the implications of this because it's very important. Let's look at how things work first with primitives. We'll initialize a variable a and then set b equal to a. As you would expect, they're both the same value, but they're actually both pointing to their own primitive value. So that means if we change a to a different value, console log them again, you can see a has the new value, but b still has the original value that it got from a.
Now, let's go ahead and refactor things to make a an object. The big difference here is that b is making a reference to the object created in a. They are both referencing the same object kept in the heap memory as opposed to copying the value like it did with a primitive.
logic
After we update the property, you can see that they both console log the same object because, again, they're both sharing the same reference to it. Now that you know how references work, let's take a look at how we can combine objects together. If you're updating the same object in multiple places, it can be kind of difficult because of the way references work. In many cases, you simply want to clone that object's property into a new object, and one way to achieve that is with object assign. Let's see how it can change the behavior of our previous example. Instead of setting b equal to a, we use object assign to take a brand new object and assign a's properties to it.
Now it's important to keep in mind that this only uses the internal and numerable properties of a. You can see exactly which properties will be copied over by using object get own property names, and that will give you an array of all the property names owned directly by this object. That means any other properties that it inherited higher up in the prototype chain would not be copied over. In addition, if this object were to reference other objects and its properties, those objects would not be recursively deep copied over as well. That means if a was making a reference to other objects, those objects would still be copied over by reference.
intellectual property
patents
It wouldn't recursively copy all the values in those nested objects. That's not fair. That's not fair at all. If you're looking to clone objects like this, a better alternative might be to use the spread syntax. There are some very minor differences between the 2, but they can be used interchangeably in most cases. And the spread syntax just looks a lot nicer when you're combining a lot of objects together. Now, at the very beginning of the video, I defined an object as a collection of key value pairs. And when you have a collection of something, you likely want to loop over it. Looping over an array is easy, but how do we loop over an object? Well, one option is to use a for in loop. This will loop over all of the innumerable properties in the object as well as its prototypes. And this can be very very confusing, so most people tend to avoid the for in loop. A better alternative is to get the keys or values as an array. You can use object dot keys or values to do exactly that. Then you can loop over them with a regular for of loop or you can use one of the built in array methods like for each. But what if you want to loop over both the keys and the values together? You can get an array of tuples using object dot entries, then you can destructure the key and value variables in the loop. Now I showed you earlier how to create a new object using the new keyword. But what if you want to customize the way that object is created? You can do that easily in JavaScript by writing a constructor function. By convention, you should always capitalize the name of this function. In this case, we have a zombie function and it takes an argument of name. Will take that argument and define it as an internal property on the object. And then we can handle additional setup in this function like setting a timestamp and also defining some methods. You'll notice that it's the this keyword that allows us to reference internal properties on this object when it's created or instantiated. So this function is actually very similar to a class like you might find in other object oriented programming languages. When you define a constructor function like this, the way you initialize a new object is to put the new keyword in front of it. Now in modern JavaScript, we could actually skip the function and just use the class keyword, but the important takeaway here is that we're using a function to instantiate or create a new object.
The class keyword is mostly just syntactic sugar for this process. As you can see, JavaScript objects are very flexible and a core building block of the language. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and make sure to check out the full JavaScript course on FireShip IO. Thanks for watching and I will talk to you soon. Beauty is in the eye of the beholder.
documentary
youtube
instagram
fashion
celebrity
television
programming
photography
entertainment
You unlock this door with the key of imagination. This is an object. A collection of properties where each associates a key to a value. Earlier in the course, we learned that there are 7 primitive data types in JavaScript. Primitives represent a single value like a number or a string and anything that's not a primitive is an object. In other words, everything interesting that happens in JavaScript is made possible by the object data type. Today we'll take a deep dive into how the JavaScript Object works and look at modern syntax and methods we can use to make our code cleaner and more efficient. Jumps. If you're new here, like and subscribe and grab all of the videos on this free JavaScript course from Buyership. Io. An object is conceptually similar to a dictionary were a map that you might find in other programming languages. The most straightforward way to create an object is to use the literal syntax. Simply define a variable equal to curly braces. Inside the braces, you define properties separated by commas. A property is essentially a key value pair where the left side is the property name and the right side is the property value. The property name needs to be a unique value that can be coerced to a string. The value can be anything you want. A primitive, another object, a function, or whatever. Now even though we define this object as a const variable, we can still set is on it after it's been created. We can use bracket notation on the object followed by the name of the property equal to whatever value we want to set there. Then later in the code we can read or get that property using the same bracket notation. Now let's imagine that we've walked into an alternate universe, because in JavaScript, there is always more than one way to do things. This time, we'll create a new object using the constructor syntax. Then we'll set properties on it using dot notation. Dot notation looks a lot cleaner, but your property names will need to be a continuous string that does not start with a number. If you have property names with spaces or that start with numbers, you'll get a syntax error if you tries to call them with dot notation. But now we've fallen into yet another alternate universe. This time, we'll use a static method on the object class called create. You wouldn't normally use this one for an empty object. It's most useful when you have an existing object and you want it to inherit its properties, or in other words, use the existing object as a prototype. And this is one of the weirder parts of JavaScript, so let's look at it a little more closely. First, we have a plain JavaScript object called organism. It contains a DNA property of a random number. And we create a new object with object create passing the organism as the prototype. When we console log the new object, you'll notice that it's still a blank object, but if we call the DNA property on this object, we get a result back. So it's almost like an invisible property on the new object. That's because it exists on this object's prototype, and we can see this property actually lives on the prototype by calling object get prototype of, which returns the original object we created. Whenever I gave you the I knew you were in heaven, mister Valentine. This is the other place. This time we're going to add a property to the object by using Object define property. It takes the object as its first argument, the name of the key as the second argument, then an object with some options on it known as a descriptor as the third argument. We can use the value option in the descriptor to create an object that is identical to the ones in the previous examples. However, we can now do more advanced things here as well, like define a getter, and that would access the property by calling a function. Now most casual users of JavaScript won't need to use to find property on a regular basis, but it is important to know how it works if you really want to understand the language. In most cases, you'll likely be working with the literal syntax, and it does have a few cool tricks up its sleeve. Let's say we have a couple of variables and we want to set those variables on an object with the same property names as the variable. In the olden days, we would have to duplicate the property name with the variable. But in modern times, we can simply add the variable to the object literal, and it will coerce the variable name to the property name. And we can do a similar thing in reverse with destructuring. This time, we want to read an object's properties and set them as variables to use in our local code. In the olden days, we would have to declare a variable and then set its value equal to the object property. Nowadays, we can define multiple variables with a single line code and JavaScript will match the variable names to the property names on the object. But what if you want to use this awesome syntax, but give your variable a different name? Sometimes you might have to do this to avoid a name collision with an existing variable. Just add a colon after the property name, and then you can name your destructured variable whatever you want. Now what if you were to try to take this code and then add another property with the same name? This code won't throw an error. Instead, it will overwrite the value on the left with the value on the right. This is important to know because sometimes you might compute properties that you don't know until runtime. Like, you might want to create an object based on some data you fetch from a database. You can compute property names by wrapping them in brackets and then place an expression inside and it will compute that value when the object is created. In this example, we have a function that generates a random number. We can then call that function inside of the brackets to generate the key for this object when the object is created. And you'll notice every time we refresh, we get a different key or name for this property. Now object properties can also take functions as their value. And when a function lives on an object, it's called a method. You can define a method using the shorthand syntax where you omit the property name and just define a named function directly in the object literal. And we can also use get and set keywords here to define getters and setters on this object. When you define a method on an object, this refers to this object. However, if you remember from the last video, if you use the arrow function syntax here, it will refer to the global this contacts. For example, if we convert our make web method into an arrow function, this dot web will refer to the global web value as opposed to the internal property on this object. So that's just a weird little thing to get used to in JavaScript. An interesting thing you can do with the this keyword is chain methods together. You'll see the syntax used in different libraries with the most famous example being jQuery. So the question is how do we chain together methods while keeping a reference to the same object? I kind of already gave you the answer because remember I said the this keyword refers to the parent object when defined in a method. So if you want to chain method calls together, all you have to do is return this from the method. Now any method you call will return the reference to the original object, and that provides a good segue into the topic of object references. Previously in the course, we learned the difference between the call stack and the heap. Primitive values are short lived in most cases in the call stack, while JavaScript objects are kept as references in the heap. Let's take a second to look at the implications of this because it's very important. Let's look at how things work first with primitives. We'll initialize a variable a and then set b equal to a. As you would expect, they're both the same value, but they're actually both pointing to their own primitive value. So that means if we change a to a different value, console log them again, you can see a has the new value, but b still has the original value that it got from a. Now, let's go ahead and refactor things to make a an object. The big difference here is that b is making a reference to the object created in a. They are both referencing the same object kept in the heap memory as opposed to copying the value like it did with a primitive. After we update the property, you can see that they both console log the same object because, again, they're both sharing the same reference to it. Now that you know how references work, let's take a look at how we can combine objects together. If you're updating the same object in multiple places, it can be kind of difficult because of the way references work. In many cases, you simply want to clone that object's property into a new object, and one way to achieve that is with object assign. Let's see how it can change the behavior of our previous example. Instead of setting b equal to a, we use object assign to take a brand new object and assign a's properties to it. Now it's important to keep in mind that this only uses the internal and numerable properties of a. You can see exactly which properties will be copied over by using object get own property names, and that will give you an array of all the property names owned directly by this object. That means any other properties that it inherited higher up in the prototype chain would not be copied over. In addition, if this object were to reference other objects and its properties, those objects would not be recursively deep copied over as well. That means if a was making a reference to other objects, those objects would still be copied over by reference. It wouldn't recursively copy all the values in those nested objects. That's not fair. That's not fair at all. If you're looking to clone objects like this, a better alternative might be to use the spread syntax. There are some very minor differences between the 2, but they can be used interchangeably in most cases. And the spread syntax just looks a lot nicer when you're combining a lot of objects together. Now, at the very beginning of the video, I defined an object as a collection of key value pairs. And when you have a collection of something, you likely want to loop over it. Looping over an array is easy, but how do we loop over an object? Well, one option is to use a for in loop. This will loop over all of the innumerable properties in the object as well as its prototypes. And this can be very very confusing, so most people tend to avoid the for in loop. A better alternative is to get the keys or values as an array. You can use object dot keys or values to do exactly that. Then you can loop over them with a regular for of loop or you can use one of the built in array methods like for each. But what if you want to loop over both the keys and the values together? You can get an array of tuples using object dot entries, then you can destructure the key and value variables in the loop. Now I showed you earlier how to create a new object using the new keyword. But what if you want to customize the way that object is created? You can do that easily in JavaScript by writing a constructor function. By convention, you should always capitalize the name of this function. In this case, we have a zombie function and it takes an argument of name. Will take that argument and define it as an internal property on the object. And then we can handle additional setup in this function like setting a timestamp and also defining some methods. You'll notice that it's the this keyword that allows us to reference internal properties on this object when it's created or instantiated. So this function is actually very similar to a class like you might find in other object oriented programming languages. When you define a constructor function like this, the way you initialize a new object is to put the new keyword in front of it. Now in modern JavaScript, we could actually skip the function and just use the class keyword, but the important takeaway here is that we're using a function to instantiate or create a new object. The class keyword is mostly just syntactic sugar for this process. As you can see, JavaScript objects are very flexible and a core building block of the language. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and make sure to check out the full JavaScript course on FireShip IO. Thanks for watching and I will talk to you soon. Beauty is in the eye of the beholder.
You
you
unlock
unlock
this
this
door
door
with
with
the
the
key
key
of
of
imagination.
imagination
This
this
is
is
an
an
object.
object
A
a
collection
collection
of
of
properties
properties
where
where
each
each
associates
associates
a
a
key
key
to
to
a
a
value.
value
Earlier
earlier
in
in
the
the
course,
course
we
we
learned
learned
that
that
there
there
are
are
7
7
primitive
primitive
data
data
types
types
in
in
JavaScript.
javascript
Primitives
primitives
represent
represent
a
a
single
single
value
value
like
like
a
a
number
number
or
or
a
a
string
string
and
and
anything
anything
that's
that's
not
not
a
a
primitive
primitive
is
is
an
an
object.
object
In
in
other
other
words,
words
everything
everything
interesting
interesting
that
that
happens
happens
in
in
JavaScript
javascript
is
is
made
made
possible
possible
by
by
the
the
object
object
data
data
type.
type
Today
today
we'll
we'll
take
take
a
a
deep
deep
dive
dive
into
into
how
how
the
the
JavaScript
javascript
Object
object
works
works
and
and
look
look
at
at
modern
modern
syntax
syntax
and
and
methods
methods
we
we
can
can
use
use
to
to
make
make
our
our
code
code
cleaner
cleaner
and
and
more
more
efficient.
efficient
Jumps.
jumps
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
grab
grab
all
all
of
of
the
the
videos
videos
on
on
this
this
free
free
JavaScript
javascript
course
course
from
from
Buyership.
buyership
Io.
io
An
an
object
object
is
is
conceptually
conceptually
similar
similar
to
to
a
a
dictionary
dictionary
were
were
a
a
map
map
that
that
you
you
might
might
find
find
in
in
other
other
programming
programming
languages.
languages
The
the
most
most
straightforward
straightforward
way
way
to
to
create
create
an
an
object
object
is
is
to
to
use
use
the
the
literal
literal
syntax.
syntax
Simply
simply
define
define
a
a
variable
variable
equal
equal
to
to
curly
curly
braces.
braces
Inside
inside
the
the
braces,
braces
you
you
define
define
properties
properties
separated
separated
by
by
commas.
commas
A
a
property
property
is
is
essentially
essentially
a
a
key
key
value
value
pair
pair
where
where
the
the
left
left
side
side
is
is
the
the
property
property
name
name
and
and
the
the
right
right
side
side
is
is
the
the
property
property
value.
value
The
the
property
property
name
name
needs
needs
to
to
be
be
a
a
unique
unique
value
value
that
that
can
can
be
be
coerced
coerced
to
to
a
a
string.
string
The
the
value
value
can
can
be
be
anything
anything
you
you
want.
want
A
a
primitive,
primitive
another
another
object,
object
a
a
function,
function
or
or
whatever.
whatever
Now
now
even
even
though
though
we
we
define
define
this
this
object
object
as
as
a
a
const
const
variable,
variable
we
we
can
can
still
still
set
set
is
is
on
on
it
it
after
after
it's
it's
been
been
created.
created
We
we
can
can
use
use
bracket
bracket
notation
notation
on
on
the
the
object
object
followed
followed
by
by
the
the
name
name
of
of
the
the
property
property
equal
equal
to
to
whatever
whatever
value
value
we
we
want
want
to
to
set
set
there.
there
Then
then
later
later
in
in
the
the
code
code
we
we
can
can
read
read
or
or
get
get
that
that
property
property
using
using
the
the
same
same
bracket
bracket
notation.
notation
Now
now
let's
let's
imagine
imagine
that
that
we've
we've
walked
walked
into
into
an
an
alternate
alternate
universe,
universe
because
because
in
in
JavaScript,
javascript
there
there
is
is
always
always
more
more
than
than
one
one
way
way
to
to
do
do
things.
things
This
this
time,
time
we'll
we'll
create
create
a
a
new
new
object
object
using
using
the
the
constructor
constructor
syntax.
syntax
Then
then
we'll
we'll
set
set
properties
properties
on
on
it
it
using
using
dot
dot
notation.
notation
Dot
dot
notation
notation
looks
looks
a
a
lot
lot
cleaner,
cleaner
but
but
your
your
property
property
names
names
will
will
need
need
to
to
be
be
a
a
continuous
continuous
string
string
that
that
does
does
not
not
start
start
with
with
a
a
number.
number
If
if
you
you
have
have
property
property
names
names
with
with
spaces
spaces
or
or
that
that
start
start
with
with
numbers,
numbers
you'll
you'll
get
get
a
a
syntax
syntax
error
error
if
if
you
you
tries
tries
to
to
call
call
them
them
with
with
dot
dot
notation.
notation
But
but
now
now
we've
we've
fallen
fallen
into
into
yet
yet
another
another
alternate
alternate
universe.
universe
This
this
time,
time
we'll
we'll
use
use
a
a
static
static
method
method
on
on
the
the
object
object
class
class
called
called
create.
create
You
you
wouldn't
wouldn't
normally
normally
use
use
this
this
one
one
for
for
an
an
empty
empty
object.
object
It's
it's
most
most
useful
useful
when
when
you
you
have
have
an
an
existing
existing
object
object
and
and
you
you
want
want
it
it
to
to
inherit
inherit
its
its
properties,
properties
or
or
in
in
other
other
words,
words
use
use
the
the
existing
existing
object
object
as
as
a
a
prototype.
prototype
And
and
this
this
is
is
one
one
of
of
the
the
weirder
weirder
parts
parts
of
of
JavaScript,
javascript
so
so
let's
let's
look
look
at
at
it
it
a
a
little
little
more
more
closely.
closely
First,
first
we
we
have
have
a
a
plain
plain
JavaScript
javascript
object
object
called
called
organism.
organism
It
it
contains
contains
a
a
DNA
dna
property
property
of
of
a
a
random
random
number.
number
And
and
we
we
create
create
a
a
new
new
object
object
with
with
object
object
create
create
passing
passing
the
the
organism
organism
as
as
the
the
prototype.
prototype
When
when
we
we
console
console
log
log
the
the
new
new
object,
object
you'll
you'll
notice
notice
that
that
it's
it's
still
still
a
a
blank
blank
object,
object
but
but
if
if
we
we
call
call
the
the
DNA
dna
property
property
on
on
this
this
object,
object
we
we
get
get
a
a
result
result
back.
back
So
so
it's
it's
almost
almost
like
like
an
an
invisible
invisible
property
property
on
on
the
the
new
new
object.
object
That's
that's
because
because
it
it
exists
exists
on
on
this
this
object's
object's
prototype,
prototype
and
and
we
we
can
can
see
see
this
this
property
property
actually
actually
lives
lives
on
on
the
the
prototype
prototype
by
by
calling
calling
object
object
get
get
prototype
prototype
of,
of
which
which
returns
returns
the
the
original
original
object
object
we
we
created.
created
Whenever
whenever
I
i
gave
gave
you
you
the
the
I
i
knew
knew
you
you
were
were
in
in
heaven,
heaven
mister
mister
Valentine.
valentine
This
this
is
is
the
the
other
other
place.
place
This
this
time
time
we're
we're
going
going
to
to
add
add
a
a
property
property
to
to
the
the
object
object
by
by
using
using
Object
object
define
define
property.
property
It
it
takes
takes
the
the
object
object
as
as
its
its
first
first
argument,
argument
the
the
name
name
of
of
the
the
key
key
as
as
the
the
second
second
argument,
argument
then
then
an
an
object
object
with
with
some
some
options
options
on
on
it
it
known
known
as
as
a
a
descriptor
descriptor
as
as
the
the
third
third
argument.
argument
We
we
can
can
use
use
the
the
value
value
option
option
in
in
the
the
descriptor
descriptor
to
to
create
create
an
an
object
object
that
that
is
is
identical
identical
to
to
the
the
ones
ones
in
in
the
the
previous
previous
examples.
examples
However,
however
we
we
can
can
now
now
do
do
more
more
advanced
advanced
things
things
here
here
as
as
well,
well
like
like
define
define
a
a
getter,
getter
and
and
that
that
would
would
access
access
the
the
property
property
by
by
calling
calling
a
a
function.
function
Now
now
most
most
casual
casual
users
users
of
of
JavaScript
javascript
won't
won't
need
need
to
to
use
use
to
to
find
find
property
property
on
on
a
a
regular
regular
basis,
basis
but
but
it
it
is
is
important
important
to
to
know
know
how
how
it
it
works
works
if
if
you
you
really
really
want
want
to
to
understand
understand
the
the
language.
language
In
in
most
most
cases,
cases
you'll
you'll
likely
likely
be
be
working
working
with
with
the
the
literal
literal
syntax,
syntax
and
and
it
it
does
does
have
have
a
a
few
few
cool
cool
tricks
tricks
up
up
its
its
sleeve.
sleeve
Let's
let's
say
say
we
we
have
have
a
a
couple
couple
of
of
variables
variables
and
and
we
we
want
want
to
to
set
set
those
those
variables
variables
on
on
an
an
object
object
with
with
the
the
same
same
property
property
names
names
as
as
the
the
variable.
variable
In
in
the
the
olden
olden
days,
days
we
we
would
would
have
have
to
to
duplicate
duplicate
the
the
property
property
name
name
with
with
the
the
variable.
variable
But
but
in
in
modern
modern
times,
times
we
we
can
can
simply
simply
add
add
the
the
variable
variable
to
to
the
the
object
object
literal,
literal
and
and
it
it
will
will
coerce
coerce
the
the
variable
variable
name
name
to
to
the
the
property
property
name.
name
And
and
we
we
can
can
do
do
a
a
similar
similar
thing
thing
in
in
reverse
reverse
with
with
destructuring.
destructuring
This
this
time,
time
we
we
want
want
to
to
read
read
an
an
object's
object's
properties
properties
and
and
set
set
them
them
as
as
variables
variables
to
to
use
use
in
in
our
our
local
local
code.
code
In
in
the
the
olden
olden
days,
days
we
we
would
would
have
have
to
to
declare
declare
a
a
variable
variable
and
and
then
then
set
set
its
its
value
value
equal
equal
to
to
the
the
object
object
property.
property
Nowadays,
nowadays
we
we
can
can
define
define
multiple
multiple
variables
variables
with
with
a
a
single
single
line
line
code
code
and
and
JavaScript
javascript
will
will
match
match
the
the
variable
variable
names
names
to
to
the
the
property
property
names
names
on
on
the
the
object.
object
But
but
what
what
if
if
you
you
want
want
to
to
use
use
this
this
awesome
awesome
syntax,
syntax
but
but
give
give
your
your
variable
variable
a
a
different
different
name?
name
Sometimes
sometimes
you
you
might
might
have
have
to
to
do
do
this
this
to
to
avoid
avoid
a
a
name
name
collision
collision
with
with
an
an
existing
existing
variable.
variable
Just
just
add
add
a
a
colon
colon
after
after
the
the
property
property
name,
name
and
and
then
then
you
you
can
can
name
name
your
your
destructured
destructured
variable
variable
whatever
whatever
you
you
want.
want
Now
now
what
what
if
if
you
you
were
were
to
to
try
try
to
to
take
take
this
this
code
code
and
and
then
then
add
add
another
another
property
property
with
with
the
the
same
same
name?
name
This
this
code
code
won't
won't
throw
throw
an
an
error.
error
Instead,
instead
it
it
will
will
overwrite
overwrite
the
the
value
value
on
on
the
the
left
left
with
with
the
the
value
value
on
on
the
the
right.
right
This
this
is
is
important
important
to
to
know
know
because
because
sometimes
sometimes
you
you
might
might
compute
compute
properties
properties
that
that
you
you
don't
don't
know
know
until
until
runtime.
runtime
Like,
like
you
you
might
might
want
want
to
to
create
create
an
an
object
object
based
based
on
on
some
some
data
data
you
you
fetch
fetch
from
from
a
a
database.
database
You
you
can
can
compute
compute
property
property
names
names
by
by
wrapping
wrapping
them
them
in
in
brackets
brackets
and
and
then
then
place
place
an
an
expression
expression
inside
inside
and
and
it
it
will
will
compute
compute
that
that
value
value
when
when
the
the
object
object
is
is
created.
created
In
in
this
this
example,
example
we
we
have
have
a
a
function
function
that
that
generates
generates
a
a
random
random
number.
number
We
we
can
can
then
then
call
call
that
that
function
function
inside
inside
of
of
the
the
brackets
brackets
to
to
generate
generate
the
the
key
key
for
for
this
this
object
object
when
when
the
the
object
object
is
is
created.
created
And
and
you'll
you'll
notice
notice
every
every
time
time
we
we
refresh,
refresh
we
we
get
get
a
a
different
different
key
key
or
or
name
name
for
for
this
this
property.
property
Now
now
object
object
properties
properties
can
can
also
also
take
take
functions
functions
as
as
their
their
value.
value
And
and
when
when
a
a
function
function
lives
lives
on
on
an
an
object,
object
it's
it's
called
called
a
a
method.
method
You
you
can
can
define
define
a
a
method
method
using
using
the
the
shorthand
shorthand
syntax
syntax
where
where
you
you
omit
omit
the
the
property
property
name
name
and
and
just
just
define
define
a
a
named
named
function
function
directly
directly
in
in
the
the
object
object
literal.
literal
And
and
we
we
can
can
also
also
use
use
get
get
and
and
set
set
keywords
keywords
here
here
to
to
define
define
getters
getters
and
and
setters
setters
on
on
this
this
object.
object
When
when
you
you
define
define
a
a
method
method
on
on
an
an
object,
object
this
this
refers
refers
to
to
this
this
object.
object
However,
however
if
if
you
you
remember
remember
from
from
the
the
last
last
video,
video
if
if
you
you
use
use
the
the
arrow
arrow
function
function
syntax
syntax
here,
here
it
it
will
will
refer
refer
to
to
the
the
global
global
this
this
contacts.
contacts
For
for
example,
example
if
if
we
we
convert
convert
our
our
make
make
web
web
method
method
into
into
an
an
arrow
arrow
function,
function
this
this
dot
dot
web
web
will
will
refer
refer
to
to
the
the
global
global
web
web
value
value
as
as
opposed
opposed
to
to
the
the
internal
internal
property
property
on
on
this
this
object.
object
So
so
that's
that's
just
just
a
a
weird
weird
little
little
thing
thing
to
to
get
get
used
used
to
to
in
in
JavaScript.
javascript
An
an
interesting
interesting
thing
thing
you
you
can
can
do
do
with
with
the
the
this
this
keyword
keyword
is
is
chain
chain
methods
methods
together.
together
You'll
you'll
see
see
the
the
syntax
syntax
used
used
in
in
different
different
libraries
libraries
with
with
the
the
most
most
famous
famous
example
example
being
being
jQuery.
jquery
So
so
the
the
question
question
is
is
how
how
do
do
we
we
chain
chain
together
together
methods
methods
while
while
keeping
keeping
a
a
reference
reference
to
to
the
the
same
same
object?
object
I
i
kind
kind
of
of
already
already
gave
gave
you
you
the
the
answer
answer
because
because
remember
remember
I
i
said
said
the
the
this
this
keyword
keyword
refers
refers
to
to
the
the
parent
parent
object
object
when
when
defined
defined
in
in
a
a
method.
method
So
so
if
if
you
you
want
want
to
to
chain
chain
method
method
calls
calls
together,
together
all
all
you
you
have
have
to
to
do
do
is
is
return
return
this
this
from
from
the
the
method.
method
Now
now
any
any
method
method
you
you
call
call
will
will
return
return
the
the
reference
reference
to
to
the
the
original
original
object,
object
and
and
that
that
provides
provides
a
a
good
good
segue
segue
into
into
the
the
topic
topic
of
of
object
object
references.
references
Previously
previously
in
in
the
the
course,
course
we
we
learned
learned
the
the
difference
difference
between
between
the
the
call
call
stack
stack
and
and
the
the
heap.
heap
Primitive
primitive
values
values
are
are
short
short
lived
lived
in
in
most
most
cases
cases
in
in
the
the
call
call
stack,
stack
while
while
JavaScript
javascript
objects
objects
are
are
kept
kept
as
as
references
references
in
in
the
the
heap.
heap
Let's
let's
take
take
a
a
second
second
to
to
look
look
at
at
the
the
implications
implications
of
of
this
this
because
because
it's
it's
very
very
important.
important
Let's
let's
look
look
at
at
how
how
things
things
work
work
first
first
with
with
primitives.
primitives
We'll
we'll
initialize
initialize
a
a
variable
variable
a
a
and
and
then
then
set
set
b
b
equal
equal
to
to
a.
a
As
as
you
you
would
would
expect,
expect
they're
they're
both
both
the
the
same
same
value,
value
but
but
they're
they're
actually
actually
both
both
pointing
pointing
to
to
their
their
own
own
primitive
primitive
value.
value
So
so
that
that
means
means
if
if
we
we
change
change
a
a
to
to
a
a
different
different
value,
value
console
console
log
log
them
them
again,
again
you
you
can
can
see
see
a
a
has
has
the
the
new
new
value,
value
but
but
b
b
still
still
has
has
the
the
original
original
value
value
that
that
it
it
got
got
from
from
a.
a
Now,
now
let's
let's
go
go
ahead
ahead
and
and
refactor
refactor
things
things
to
to
make
make
a
a
an
an
object.
object
The
the
big
big
difference
difference
here
here
is
is
that
that
b
b
is
is
making
making
a
a
reference
reference
to
to
the
the
object
object
created
created
in
in
a.
a
They
they
are
are
both
both
referencing
referencing
the
the
same
same
object
object
kept
kept
in
in
the
the
heap
heap
memory
memory
as
as
opposed
opposed
to
to
copying
copying
the
the
value
value
like
like
it
it
did
did
with
with
a
a
primitive.
primitive
After
after
we
we
update
update
the
the
property,
property
you
you
can
can
see
see
that
that
they
they
both
both
console
console
log
log
the
the
same
same
object
object
because,
because
again,
again
they're
they're
both
both
sharing
sharing
the
the
same
same
reference
reference
to
to
it.
it
Now
now
that
that
you
you
know
know
how
how
references
references
work,
work
let's
let's
take
take
a
a
look
look
at
at
how
how
we
we
can
can
combine
combine
objects
objects
together.
together
If
if
you're
you're
updating
updating
the
the
same
same
object
object
in
in
multiple
multiple
places,
places
it
it
can
can
be
be
kind
kind
of
of
difficult
difficult
because
because
of
of
the
the
way
way
references
references
work.
work
In
in
many
many
cases,
cases
you
you
simply
simply
want
want
to
to
clone
clone
that
that
object's
object's
property
property
into
into
a
a
new
new
object,
object
and
and
one
one
way
way
to
to
achieve
achieve
that
that
is
is
with
with
object
object
assign.
assign
Let's
let's
see
see
how
how
it
it
can
can
change
change
the
the
behavior
behavior
of
of
our
our
previous
previous
example.
example
Instead
instead
of
of
setting
setting
b
b
equal
equal
to
to
a,
a
we
we
use
use
object
object
assign
assign
to
to
take
take
a
a
brand
brand
new
new
object
object
and
and
assign
assign
a's
a's
properties
properties
to
to
it.
it
Now
now
it's
it's
important
important
to
to
keep
keep
in
in
mind
mind
that
that
this
this
only
only
uses
uses
the
the
internal
internal
and
and
numerable
numerable
properties
properties
of
of
a.
a
You
you
can
can
see
see
exactly
exactly
which
which
properties
properties
will
will
be
be
copied
copied
over
over
by
by
using
using
object
object
get
get
own
own
property
property
names,
names
and
and
that
that
will
will
give
give
you
you
an
an
array
array
of
of
all
all
the
the
property
property
names
names
owned
owned
directly
directly
by
by
this
this
object.
object
That
that
means
means
any
any
other
other
properties
properties
that
that
it
it
inherited
inherited
higher
higher
up
up
in
in
the
the
prototype
prototype
chain
chain
would
would
not
not
be
be
copied
copied
over.
over
In
in
addition,
addition
if
if
this
this
object
object
were
were
to
to
reference
reference
other
other
objects
objects
and
and
its
its
properties,
properties
those
those
objects
objects
would
would
not
not
be
be
recursively
recursively
deep
deep
copied
copied
over
over
as
as
well.
well
That
that
means
means
if
if
a
a
was
was
making
making
a
a
reference
reference
to
to
other
other
objects,
objects
those
those
objects
objects
would
would
still
still
be
be
copied
copied
over
over
by
by
reference.
reference
It
it
wouldn't
wouldn't
recursively
recursively
copy
copy
all
all
the
the
values
values
in
in
those
those
nested
nested
objects.
objects
That's
that's
not
not
fair.
fair
That's
that's
not
not
fair
fair
at
at
all.
all
If
if
you're
you're
looking
looking
to
to
clone
clone
objects
objects
like
like
this,
this
a
a
better
better
alternative
alternative
might
might
be
be
to
to
use
use
the
the
spread
spread
syntax.
syntax
There
there
are
are
some
some
very
very
minor
minor
differences
differences
between
between
the
the
2,
2
but
but
they
they
can
can
be
be
used
used
interchangeably
interchangeably
in
in
most
most
cases.
cases
And
and
the
the
spread
spread
syntax
syntax
just
just
looks
looks
a
a
lot
lot
nicer
nicer
when
when
you're
you're
combining
combining
a
a
lot
lot
of
of
objects
objects
together.
together
Now,
now
at
at
the
the
very
very
beginning
beginning
of
of
the
the
video,
video
I
i
defined
defined
an
an
object
object
as
as
a
a
collection
collection
of
of
key
key
value
value
pairs.
pairs
And
and
when
when
you
you
have
have
a
a
collection
collection
of
of
something,
something
you
you
likely
likely
want
want
to
to
loop
loop
over
over
it.
it
Looping
looping
over
over
an
an
array
array
is
is
easy,
easy
but
but
how
how
do
do
we
we
loop
loop
over
over
an
an
object?
object
Well,
well
one
one
option
option
is
is
to
to
use
use
a
a
for
for
in
in
loop.
loop
This
this
will
will
loop
loop
over
over
all
all
of
of
the
the
innumerable
innumerable
properties
properties
in
in
the
the
object
object
as
as
well
well
as
as
its
its
prototypes.
prototypes
And
and
this
this
can
can
be
be
very
very
very
very
confusing,
confusing
so
so
most
most
people
people
tend
tend
to
to
avoid
avoid
the
the
for
for
in
in
loop.
loop
A
a
better
better
alternative
alternative
is
is
to
to
get
get
the
the
keys
keys
or
or
values
values
as
as
an
an
array.
array
You
you
can
can
use
use
object
object
dot
dot
keys
keys
or
or
values
values
to
to
do
do
exactly
exactly
that.
that
Then
then
you
you
can
can
loop
loop
over
over
them
them
with
with
a
a
regular
regular
for
for
of
of
loop
loop
or
or
you
you
can
can
use
use
one
one
of
of
the
the
built
built
in
in
array
array
methods
methods
like
like
for
for
each.
each
But
but
what
what
if
if
you
you
want
want
to
to
loop
loop
over
over
both
both
the
the
keys
keys
and
and
the
the
values
values
together?
together
You
you
can
can
get
get
an
an
array
array
of
of
tuples
tuples
using
using
object
object
dot
dot
entries,
entries
then
then
you
you
can
can
destructure
destructure
the
the
key
key
and
and
value
value
variables
variables
in
in
the
the
loop.
loop
Now
now
I
i
showed
showed
you
you
earlier
earlier
how
how
to
to
create
create
a
a
new
new
object
object
using
using
the
the
new
new
keyword.
keyword
But
but
what
what
if
if
you
you
want
want
to
to
customize
customize
the
the
way
way
that
that
object
object
is
is
created?
created
You
you
can
can
do
do
that
that
easily
easily
in
in
JavaScript
javascript
by
by
writing
writing
a
a
constructor
constructor
function.
function
By
by
convention,
convention
you
you
should
should
always
always
capitalize
capitalize
the
the
name
name
of
of
this
this
function.
function
In
in
this
this
case,
case
we
we
have
have
a
a
zombie
zombie
function
function
and
and
it
it
takes
takes
an
an
argument
argument
of
of
name.
name
Will
will
take
take
that
that
argument
argument
and
and
define
define
it
it
as
as
an
an
internal
internal
property
property
on
on
the
the
object.
object
And
and
then
then
we
we
can
can
handle
handle
additional
additional
setup
setup
in
in
this
this
function
function
like
like
setting
setting
a
a
timestamp
timestamp
and
and
also
also
defining
defining
some
some
methods.
methods
You'll
you'll
notice
notice
that
that
it's
it's
the
the
this
this
keyword
keyword
that
that
allows
allows
us
us
to
to
reference
reference
internal
internal
properties
properties
on
on
this
this
object
object
when
when
it's
it's
created
created
or
or
instantiated.
instantiated
So
so
this
this
function
function
is
is
actually
actually
very
very
similar
similar
to
to
a
a
class
class
like
like
you
you
might
might
find
find
in
in
other
other
object
object
oriented
oriented
programming
programming
languages.
languages
When
when
you
you
define
define
a
a
constructor
constructor
function
function
like
like
this,
this
the
the
way
way
you
you
initialize
initialize
a
a
new
new
object
object
is
is
to
to
put
put
the
the
new
new
keyword
keyword
in
in
front
front
of
of
it.
it
Now
now
in
in
modern
modern
JavaScript,
javascript
we
we
could
could
actually
actually
skip
skip
the
the
function
function
and
and
just
just
use
use
the
the
class
class
keyword,
keyword
but
but
the
the
important
important
takeaway
takeaway
here
here
is
is
that
that
we're
we're
using
using
a
a
function
function
to
to
instantiate
instantiate
or
or
create
create
a
a
new
new
object.
object
The
the
class
class
keyword
keyword
is
is
mostly
mostly
just
just
syntactic
syntactic
sugar
sugar
for
for
this
this
process.
process
As
as
you
you
can
can
see,
see
JavaScript
javascript
objects
objects
are
are
very
very
flexible
flexible
and
and
a
a
core
core
building
building
block
block
of
of
the
the
language.
language
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
scribe
scribe
and
and
make
make
sure
sure
to
to
check
check
out
out
the
the
full
full
JavaScript
javascript
course
course
on
on
FireShip
fireship
IO.
io
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
Beauty
beauty
is
is
in
in
the
the
eye
eye
of
of
the
the
beholder.
beholder
success
The speaker explains how to create a new object in JavaScript using scratch syntax, and discusses the use of variables and method names. They emphasize the importance of keeping a reference to the original object and the use of object assignment in creating new objects. The speaker emphasizes the use of keywords and chain methods, the difference between call stack and heap, and the process of creating a new object using the "by" keyword. They also briefly touch on the use of variables and keys in JavaScript and encourage viewers to check out the full JavaScript course on Fire Meeting IO.
An Encounter with JavaScript Objects
You unlock this door with the key of imagination. This is an object. A collection of properties where each associates a key to a value. Earlier in the course, we learned that there are 7 primitive data types in JavaScript. Primitives represent a single value like a number or a string and anything that's not a primitive is an object. In other words, everything interesting that happens in JavaScript is made possible by the object data type. Today we'll take a deep dive into how the JavaScript Object works and look at modern syntax and methods we can use to make our code cleaner and more efficient. Jumps. If you're new here, like and subscribe and grab all of the videos on this free JavaScript course from Buyership. Io. An object is conceptually similar to a dictionary were a map that you might find in other programming languages. The most straightforward way to create an object is to use the literal syntax. Simply define a variable equal to curly braces. Inside the braces, you define properties separated by commas. A property is essentially a key value pair where the left side is the property name and the right side is the property value. The property name needs to be a unique value that can be coerced to a string. The value can be anything you want. A primitive, another object, a function, or whatever. Now even though we define this object as a const variable, we can still set is on it after it's been created. We can use bracket notation on the object followed by the name of the property equal to whatever value we want to set there. Then later in the code we can read or get that property using the same bracket notation. Now let's imagine that we've walked into an alternate universe, because in JavaScript, there is always more than one way to do things. This time, we'll create a new object using the constructor syntax. Then we'll set properties on it using dot notation. Dot notation looks a lot cleaner, but your property names will need to be a continuous string that does not start with a number. If you have property names with spaces or that start with numbers, you'll get a syntax error if you tries to call them with dot notation. But now we've fallen into yet another alternate universe. This time, we'll use a static method on the object class called create. You wouldn't normally use this one for an empty object. It's most useful when you have an existing object and you want it to inherit its properties, or in other words, use the existing object as a prototype. And this is one of the weirder parts of JavaScript, so let's look at it a little more closely. First, we have a plain JavaScript object called organism. It contains a DNA property of a random number. And we create a new object with object create passing the organism as the prototype. When we console log the new object, you'll notice that it's still a blank object, but if we call the DNA property on this object, we get a result back. So it's almost like an invisible property on the new object. That's because it exists on this object's prototype, and we can see this property actually lives on the prototype by calling object get prototype of, which returns the original object we created. Whenever I gave you the I knew you were in heaven, mister Valentine. This is the other place. This time we're going to add a property to the object by using Object define property. It takes the object as its first argument, the name of the key as the second argument, then an object with some options on it known as a descriptor as the third argument. We can use the value option in the descriptor to create an object that is identical to the ones in the previous examples. However, we can now do more advanced things here as well, like define a getter, and that would access the property by calling a function. Now most casual users of JavaScript won't need to use to find property on a regular basis, but it is important to know how it works if you really want to understand the language. In most cases, you'll likely be working with the literal syntax, and it does have a few cool tricks up its sleeve. Let's say we have a couple of variables and we want to set those variables on an object with the same property names as the variable. In the olden days, we would have to duplicate the property name with the variable. But in modern times, we can simply add the variable to the object literal, and it will coerce the variable name to the property name. And we can do a similar thing in reverse with destructuring. This time, we want to read an object's properties and set them as variables to use in our local code. In the olden days, we would have to declare a variable and then set its value equal to the object property. Nowadays, we can define multiple variables with a single line code and JavaScript will match the variable names to the property names on the object. But what if you want to use this awesome syntax, but give your variable a different name? Sometimes you might have to do this to avoid a name collision with an existing variable. Just add a colon after the property name, and then you can name your destructured variable whatever you want. Now what if you were to try to take this code and then add another property with the same name? This code won't throw an error. Instead, it will overwrite the value on the left with the value on the right. This is important to know because sometimes you might compute properties that you don't know until runtime. Like, you might want to create an object based on some data you fetch from a database. You can compute property names by wrapping them in brackets and then place an expression inside and it will compute that value when the object is created. In this example, we have a function that generates a random number. We can then call that function inside of the brackets to generate the key for this object when the object is created. And you'll notice every time we refresh, we get a different key or name for this property. Now object properties can also take functions as their value. And when a function lives on an object, it's called a method. You can define a method using the shorthand syntax where you omit the property name and just define a named function directly in the object literal. And we can also use get and set keywords here to define getters and setters on this object. When you define a method on an object, this refers to this object. However, if you remember from the last video, if you use the arrow function syntax here, it will refer to the global this contacts. For example, if we convert our make web method into an arrow function, this dot web will refer to the global web value as opposed to the internal property on this object. So that's just a weird little thing to get used to in JavaScript. An interesting thing you can do with the this keyword is chain methods together. You'll see the syntax used in different libraries with the most famous example being jQuery. So the question is how do we chain together methods while keeping a reference to the same object? I kind of already gave you the answer because remember I said the this keyword refers to the parent object when defined in a method. So if you want to chain method calls together, all you have to do is return this from the method. Now any method you call will return the reference to the original object, and that provides a good segue into the topic of object references. Previously in the course, we learned the difference between the call stack and the heap. Primitive values are short lived in most cases in the call stack, while JavaScript objects are kept as references in the heap. Let's take a second to look at the implications of this because it's very important. Let's look at how things work first with primitives. We'll initialize a variable a and then set b equal to a. As you would expect, they're both the same value, but they're actually both pointing to their own primitive value. So that means if we change a to a different value, console log them again, you can see a has the new value, but b still has the original value that it got from a. Now, let's go ahead and refactor things to make a an object. The big difference here is that b is making a reference to the object created in a. They are both referencing the same object kept in the heap memory as opposed to copying the value like it did with a primitive. After we update the property, you can see that they both console log the same object because, again, they're both sharing the same reference to it. Now that you know how references work, let's take a look at how we can combine objects together. If you're updating the same object in multiple places, it can be kind of difficult because of the way references work. In many cases, you simply want to clone that object's property into a new object, and one way to achieve that is with object assign. Let's see how it can change the behavior of our previous example. Instead of setting b equal to a, we use object assign to take a brand new object and assign a's properties to it. Now it's important to keep in mind that this only uses the internal and numerable properties of a. You can see exactly which properties will be copied over by using object get own property names, and that will give you an array of all the property names owned directly by this object. That means any other properties that it inherited higher up in the prototype chain would not be copied over. In addition, if this object were to reference other objects and its properties, those objects would not be recursively deep copied over as well. That means if a was making a reference to other objects, those objects would still be copied over by reference. It wouldn't recursively copy all the values in those nested objects. That's not fair. That's not fair at all. If you're looking to clone objects like this, a better alternative might be to use the spread syntax. There are some very minor differences between the 2, but they can be used interchangeably in most cases. And the spread syntax just looks a lot nicer when you're combining a lot of objects together. Now, at the very beginning of the video, I defined an object as a collection of key value pairs. And when you have a collection of something, you likely want to loop over it. Looping over an array is easy, but how do we loop over an object? Well, one option is to use a for in loop. This will loop over all of the innumerable properties in the object as well as its prototypes. And this can be very very confusing, so most people tend to avoid the for in loop. A better alternative is to get the keys or values as an array. You can use object dot keys or values to do exactly that. Then you can loop over them with a regular for of loop or you can use one of the built in array methods like for each. But what if you want to loop over both the keys and the values together? You can get an array of tuples using object dot entries, then you can destructure the key and value variables in the loop. Now I showed you earlier how to create a new object using the new keyword. But what if you want to customize the way that object is created? You can do that easily in JavaScript by writing a constructor function. By convention, you should always capitalize the name of this function. In this case, we have a zombie function and it takes an argument of name. Will take that argument and define it as an internal property on the object. And then we can handle additional setup in this function like setting a timestamp and also defining some methods. You'll notice that it's the this keyword that allows us to reference internal properties on this object when it's created or instantiated. So this function is actually very similar to a class like you might find in other object oriented programming languages. When you define a constructor function like this, the way you initialize a new object is to put the new keyword in front of it. Now in modern JavaScript, we could actually skip the function and just use the class keyword, but the important takeaway here is that we're using a function to instantiate or create a new object. The class keyword is mostly just syntactic sugar for this process. As you can see, JavaScript objects are very flexible and a core building block of the language. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and make sure to check out the full JavaScript course on FireShip IO. Thanks for watching and I will talk to you soon. Beauty is in the eye of the beholder.
The speaker explains how to create a new object in JavaScript using scratch syntax, and discusses the use of variables and method names. They emphasize the importance of keeping a reference to the original object and the use of object assignment in creating new objects. The speaker emphasizes the use of keywords and chain methods, the difference between call stack and heap, and the process of creating a new object using the "by" keyword. They also briefly touch on the use of variables and keys in JavaScript and encourage viewers to check out the full JavaScript course on Fire Meeting IO.