How to Create and Manipulate JavaScript Objects

Hey - Nick here! This page is a free excerpt from my $99 course JavaScript Fundamentals.

If you want the full course, click here to sign up and create an account.

I have a 30-day satisfaction guarantee, so there's no risk (and a ton of upside!) in signing up for this course and leveling up your JavaScript developer skills today!

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