Objects

Kevin · March 7, 2022, 9:59pm

Tutorials / JavaScript Tutorials / Objects

Objects

Now you know the fundamentals of JavaScript. You’ve created variables and functions, you’ve used if statements to conditionally take different actions in your code, you’ve used for loops to repeat code multiple times, and you’ve used arrays to store multiple values in a single variable.

This tutorial introduces objects, which let you group multiple values into a single logical unit. This makes it easier to work with data and groups of items.

Primitive Types

So far, you’ve been using primitive types like string, number, and boolean. A primitive type holds a single, standalone value. For example:

When you read this line of code, you know that name holds a primitive value of 'Ada', but you don’t know whether there’s an associated lastName value. It’s a single value, without any extra information.

Example

Let’s start with some code that uses two primitive values to show a message about a person:

The Bad Way: Parallel Arrays

Next, let’s say you wanted to show messages for multiple people. You might create separate firstNameOne, firstNameTwo, firstNameThree variables, and do the same thing for the birth year variables. Or you might use arrays:

This code uses two arrays: one that holds the first names of the people, and another that holds their birth years. This approach of using multiple arrays to hold related data is called parallel arrays. This approach works, but it’s generally considered a bad idea because it can be difficult to understand code that uses a bunch of different arrays.

Plus, it’s probably not how you think about information in your own brain. Forgetting about computers for a second: if you wanted to organize information about a bunch of people in the real world, how would you do that? You probably wouldn’t write their names in one stack of index cards, then their birthdays in another stack of index cards. You’d use a single stack of index cards, where each index card contains all of the information about an individual person. That’s where objects come in handy!

Objects

To create an object, start with { } curly braces, and then inside those curly braces, add name: value pairs, separated by comms. You can then use that object just like any other value, e.g. by storing it in a variable.

It looks like this:

let person = {firstName: 'Ada', lastName: 'Lovelace', birthYear: 1815};

Then to access the fields inside an object, use the name of the variable, followed by the . dot operator, then the name of the field.

let message = person.firstName + ' was born in ' + person.birthYear;
document.write(message);

Putting it all together, it looks like this:

This code creates a variable named person and sets it equal to an object that contains three fields: firstName, lastName, and birthYear. It then uses two of those fields to create a message, and writes that message to the page.

Multiple Objects

One of the most important concepts to understand with objects is that objects can have the same fields, but different values for those fields.

For example, this code creates two different objects that each represent a different person:

This code creates two variables, each pointing to a different object. Each object contains the same fields, but different values for those fields.

This is a powerful idea, and it lets you organize your code as it gets more complicated. It’s also pretty confusing, and “thinking in objects” can take some time. Try changing the above code to add a third person.

The Good Way: Object Arrays

Just like you can create an array of primitive values, you can also create an array of objects:

let people = [
    {firstName: 'Ada', lastName: 'Lovelace', birthYear: 1815},
    {firstName: 'Grace', lastName: 'Hopper', birthYear: 1906},
    {firstName: 'Alan', lastName: 'Turing', birthYear: 1912}
];

This code creates a people variable, and sets it equal to an array that holds three objects. Each of those objects contains firstName, lastName, and birthYear fields.

Now that you have an array, you can use a for loop to iterate over each object in the array:

Nested Objects

So far, the above objects have each contained fields that point to primitive values. But remember that you can use objects pretty much anywhere you can use a primitive, including inside objects!

In other words, your objects can contain other objects. Here’s an example:

This code expands the example so that now each person’s birthdate is an object containing year, month, and day fields. Also note that each object contains a knownFor field that points to an array of string values!

Thinking in Objects

Objects are a new way of organizing your code, but more importantly, they’re a new way of thinking about your code.

For example, when you think of a bunch of people, you probably don’t think of them as a bunch of first name values and a bunch of last name values. You probably think of each person as a cohesive unit, where each unit has a first name and a last name value. Objects let you structure your code closer to how you structure the ideas in your brain.

This new way of thinking can be confusing. I remember being frustrated by it when I first started learning. But I also remember having an “ah-ha!” moment after working with objects for a while, where I finally understood them. I honestly believe that it has affected the way I’ve thought about not just code, but also the real world ever since.

So if all of this still feels confusing, that’s okay! It’ll become more natural as you write more code and see more examples that use objects.

This way of “thinking in objects” is called object oriented programming and it’s at the core of many languages and libraries.

Homework

The above examples contain last name fields, but never actually use the values. Modify the above examples to use those last names.
Modify the above examples to add yourself as another person.
Create an array of 10 different objects representing different characters, and then write code that outputs them to the page.

Comments and Questions

Happy Coding is a community of folks just like you learning about coding. Do you have a comment or question? Post it here!

Read the full article on Happy Coding at https://happycoding.io/tutorials/javascript/objects Replies to this post will show as comments on the original article!