From the course: Learn JavaScript: Write Modern Code with JavaScript ESNext

Learn about JavaScript’s Object type - JavaScript Tutorial

From the course: Learn JavaScript: Write Modern Code with JavaScript ESNext

Start my 1-month free trial Buy for my team

Learn about JavaScript’s Object type

“

- The next of JavaScript's data types we're going to look at is the object type. Now object is maybe a bit of a misleading name here. Many of you are probably used to thinking of objects strictly in object oriented terms as in instances of a class. Now, instances of classes are called objects in JavaScript, and classes in inheritance in JavaScript, by the way, are topics we'll talk about in much greater detail later on in the course. But more frequently when we say object in the context of JavaScript, we're usually referring to what in other languages are referred to as hashes or key value maps. Basically some number of keys, each of which maps to some value. So we could have a person object like this, for example, with name, age, and eye color keys. And this here is a fairly simple example, but objects are an extremely important construct in JavaScript. As you can see, JavaScript objects allow us to group related pieces of data very easily. You may already be aware of this, but if you've ever worked with data in JSON format, that is JavaScript object notation format. You're already at least a little familiar with JavaScript objects. So more formally JavaScript objects consist of zero or more keys, which are usually denoted by strings such as name or age. But the keys can also be symbols, a data type that we'll touch on a bit later. And each of these keys can be assigned a value, which can be any of the eight JavaScript data types. It can be a number, a string, a Boolean, or it can even be another object so that we could have nested objects. So once we've defined an object, which as you've probably noticed is done using brackets as we see here, we can access the value of any of the objects properties by using one of two different syntaxes. The first one is by using a dot, followed by the property name. So if we define our person object that we've been using as an example, we could access the name, age, or eye color properties by saying dot name dot age or dot eye color. The second syntax that we can use to access object properties is by using square brackets with the name of the property we're trying to access, like this. Note that the property names here, unlike with the dot notation, are actual strings defined in between quotation marks. This syntax is very useful when we need to access property names dynamically, such as when we define a variable containing the name of some property and use that to get the corresponding value. So those are the two basic syntaxes for accessing properties, but they can also be used to set properties on objects. For example, if we wanted to change the age of our person object, we could do that like this, either with dot notation or with square brackets. So moving on. Something to keep in mind when working with objects is that objects in JavaScript are assigned by reference. This means that if we assign an object to a variable, the variable doesn't actually contain the entire object. The object is defined in memory, and then the variable simply contains a reference to it. Now, this all happens behind the scenes, of course, so we usually don't have to think about it too much. But the main situations to be aware of are when we do something like this, if we assign an object to a variable and then define another variable equal to the first variable, both variables will be pointing to the same object in memory instead of two different objects. This all means that if we make changes to one of the variables, those changes will be reflected on the other one as well, as we see here. This sort of thing is true when passing objects as arguments to functions as well. And we haven't talked about functions yet, but we'll get there soon. Objects are passed by reference in JavaScript, meaning that if a function makes changes to an object inside the function body, those changes will be reflected on the actual object we passed. And by the way, all this reference stuff is true for arrays as well, which we're going to talk about next. But anyway, moving on to some other details about objects in JavaScript. It happens quite a lot that we have some variables in our program, and we want to put those variables into an object under a property with the same name as each of the variables. And that would look something like this where we have name, colon name and age, colon age if we wanted to insert a name and age variable into an object. Now, in situations like this, JavaScript actually provides us with a shorthand syntax. Instead of repeating the variable name when it's the same as the property name we want, we can just put the variable right inside the object. And JavaScript will take that to mean the same thing as name, colon name, or age, colon age, or whatever the variable is called. Another thing to keep in mind when defining objects is that while the property names or keys of our objects can contain any character that a normal string can contain, there are cases when we explicitly need to wrap our property names in quotation marks. This is a case when our property names contain any characters that variable names can't contain in JavaScript. The most common example of this is keys that contain dashes like Job dash title. And just as a side note, keys like this can be defined with either double quotes or single quotes or back ticks, just like regular strings. So that's just one example. But in theory, there could be a lot of interesting cases where you need to use quotation marks for property names. And in cases like these where we define the keys with quotation marks, you'd have to use the square brackets to access the values of these properties since the dot syntax wouldn't work. So that's about it for objects for now. But before we move on, there's one more detail you should know about. In JavaScript, there's a value called null that we use to signify the absence of data. And just as a side note, there's something called undefined too, which is its own data type that will cover soon. But anyway, for null, we might say something like, let person equal null to signify that we don't have the person's data yet, or something like that. The use cases vary, and if we were to use the type of operator on our person variable here, it would return object. And this is really more of a technical detail to keep in mind, is that the value is technically considered to be an object by JavaScript.

Contents