So as we've seen already, an object in JavaScript is very much like an object in real life.
It can have properties like a length and it can have methods.
Two things it can do.
So I can demo this by creating a new array.
I'm just going to say const names is equal to an array.
And I'll just type in something like Sean and also Krystal.
Okay, so this right here, this is an array which remember is just a type of object in JavaScript,
and this array will have a length property and also methods.
So if I type out names, we can see this length property right here too.
And it also has methods inside Proto.
Now don't worry too much what this proto thing means at the minute.
I'll talk about that later on.
But just know for now that any methods that a particular object has access to are listed inside its
proto property.
So down here we can see all of the different methods that an array has as well.
Now another way of creating an array is to use the array constructor and by that I mean saying const,
and this time we'll say ages is equal to new array like so.
And then we can pass in the ages, for example, 20, 25, 30.
And if I now say ages, we can see this array.
Now we've seen this kind of syntax before where we say new something, for example, new date to create
a new date object.
And whenever we see the new keyword right there, we know that we'll be creating some kind of object.
Now, this right here, this is a constructor function and that's going to make that kind of object.
So in this case, this is the array constructor function.
So new array still creates an array object, just like square brackets do.
And we can see all of the same methods and properties like the length on these.
So that's two different ways of creating an array.
Now square brackets are easier to use, and that's what you'll see me using 99% of the time when I create
arrays.
But I wanted to show you that you can also create an array using the array constructor, and we can
create other types of objects using constructors as well.
For example, I could create an object, I'm going to say const and then user one and set it equal to
a new object.
I'm not going to give it any properties, but now user one is an object, right?
And inside again, we have access to all of these different methods inside Proto.
Now it doesn't have any properties because we didn't give this any properties.
Now I can also make an object literal using the object constructor.
So I could also say const user two is now equal to a new object.
Now this thing right here is very similar to this syntax.
We're saying you so we know we're creating some kind of new object and it's going to be an object literal
in this case.
But we're using the object constructor to do this.
This constructs a new object.
So now we can say user two like so and we can see it's an object with all of these different methods
right here.
So these are the two different ways we can create things.
We can either use the literal syntax like curly braces, or we can use the new keyword and a constructor.
Now, at some point when you start to learn about objects in JavaScript, an object oriented programming
in general, you might hear the phrase Everything in JavaScript is an object.
But that's not technically true, is it?
Because we've seen many data types in JavaScript which are not objects, strings, numbers, booleans,
null, undefined, all the primitive types that don't fall under the object category.
They are not objects.
And I can demo this in a browser.
If I type out a new variable, I'm going to call this name and set it equal to Mario.
If I do this and then type out name, if I try to expand this, I can't.
I can't see any methods or properties inside this name, much like I would inside an object.
But then how is it that we can actually use the length property on a string or even use a method like
to uppercase on it?
For example, I could say name dot length and that gives me the value name dot to uppercase and this
gives me Mario in uppercase.
I can use these methods and properties on it.
So how can I do this?
Because we just saw that it wasn't an object, right?
And it didn't contain those methods or properties.
Well, what happens is that when we try to access a property or a method on a primitive type like a
number or a string, then JavaScript takes that primitive value and it wraps it temporarily in a wrapper
object.
And that object will be the thing that actually has the methods and properties on it that's being used,
things like length or to uppercase.
So it wraps the primitive value into a wrapper object.
And then uses these different properties on methods on that object.
And then once we're done, once we've done that method or use that property, JavaScript unwraps the
primitive value from the wrapper object again and it gives it back to us.
And it does all of this under the hood without us seeing it.
But this is how a primitive value like a string can actually use properties and methods.
So I'm going to show you this wrapper object in action.
I could create a new string.
This way I'm going to say name two is equal to a new string like this and pass in Ryu.
So what I'm doing now is creating a new object.
And we know that because we're using the new keyword here and a constructor.
Now this is the string constructor and this creates a new string wrapper object.
And by that I mean it's an object which wraps a string which is a primitive value.
So it's wrapping this primitive value in a string object now.
And now this wrapper object is the thing that has all the different properties and methods stored onto
it.
So I could say name to now and we should see all of these different properties and methods.
We have the length and all of the different methods in here that we could use on a string.
So when we create a new primitive value, then use a method on it.
This is what's happening.
JavaScript is wrapping the primitive value up in an object like this, which then has access to those
methods and properties.
Then when we're done it'll wraps them again and it gives back the value.
And we can do this same thing with numbers.
So I could say new number like this and pass in, I don't know, five and that gives us a new number
wrapper then and we can see all of the different methods we can use on a number and we can do the same
thing with Boolean.
I could say new Boolean, all the primitive types like this.
And we see now a boolean wrapper object.
Now the only primitive types that don't have a wrapper object are null and undefined types.
These never have access to any properties or methods.
So we know now that all objects can have methods and properties.
And we also know that even though not everything in JavaScript is an object, pretty much everything
in JavaScript can behave like an object, even when it's not one by being wrapped in a temporary object
wrapper.
And I think this knowledge will be a good foundation for you to really understand objects and object
oriented programming in JavaScript.
