Developers commonly use the phrase 'everything in JavaScript is an object'.
This is because almost everything we interact with in JavaScript is, indeed, an object. In fact, there are only six things that aren't objects in JavaScript:
null
undefined
strings
numbers
booleans
symbols
These six data structures are called primitive types
or primitives
.
Since objects are so prevalent in JavaScript, it is very important to understand how they operate.
This lesson will teach you how to create and manipulate objects in JavaScript.
What are JavaScript Objects
In computer programming, objects are containers that hold both data and functions.
The data that is contained within an object are called the object's attributes
. The functions that are contained within an object are called methods
.
In the last lesson, we interacted heavily with the Math
object, which is a built-in object in JavaScript that contains common mathematical functions. There are many other objects that developers rely heavily on to make their workloads easier and faster.
Objects are created using curly brackets and the =
assignment operator.
An example is helpful in understanding how to create JavaScript objects.
Let's create an object called teacher
that contains characteristics about me. First, we'll call the const
keyword, write the name of the object (in this case, teacher
), and then write opening and closing curly brackets.
const teacher = {};
Note that the closing }
curly bracket must have the ;
character after it.
Next, let's create an attribute called firstName
with a value of 'Nick'
and an attribute called lastName
with a value of 'McCullum'
. The name and value of object attributes should be separated with the :
character, and every attribute except for the last one should end with the ,
character.
Here's what I mean:
const teacher = {
firstName: 'Nick',
lastName: 'McCullum'
};
You can also create functions within an object (which, as mentioned, are called methods
).
Now that we have created the firstName
and lastName
attributes within the teacher
object, we can reference them using the .
dot operator.
Here are examples of this:
teacher.firstName
//Returns 'Nick'
teacher.lastName
//Returns 'McCullum'
Examples of JavaScript Objects
Let's work through a few examples of JavaScript objects so you can better understand their function and composition.
Example 1
Toronto is the largest city in Canada. It has a current population of around 5 million - or 5,213,000, to be more precise.
Let's create an object called city
with two attributes: one named name
with a value of 'Toronto'
, and one named population
with a value of 5213000
.
const city = {
name: 'Toronto',
population: 5213000
};
As before, we can reference both of these object attributes using the dot operator:
city.name
//Returns 'Toronto'
city.population
/Returns 5213000
Example 2
My father's name is Jim, and he was born in 1963. Let's create a variable called dad
with two attributes: one named name
with a value of 'Jim'
and one named birthYear
with a value of 1963
.
const dad = {
name: 'Jim',
birthYear: 1963
};
Final Thoughts
In this lesson, you learned how to create and manipulate JavaScript objects. Specifically, we covered:
- What an object is
- How to create an object
- How to reference an object's attributes using the dot operator