JavaScript Objects: Free JavaScript Tutorial

Topics covered in this JavaScript tutorial:

Intro to objects, Defining an Object, Accessing & manipulating objects

Exercise Preview

Exercise Overview

In this exercise you’ll learn the fundamentals of JavaScript objects. You’ll create your own object and learn how to access its properties.

Getting Started

1. For this exercise we’ll be working with the Objects folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open js-objects.html from the Objects folder.

3. Preview js-objects.html in Chrome. (We’ll be using its DevTools.)

   This is an almost empty page, but we’ll be focusing on the Console.

4. Leave this page open in the browser, so you can reload it later.

Defining an Object

1. Switch back to your code editor.

2. In the script tag, create a variable where we’ll save our object:

   <script>
      let person = {};
   </script>
   

   NOTE: person is the name of our object. You can name an object anything as long as it doesn’t start with a number. The {} denotes an object in JavaScript.

3. Inside the {} for the object, add the following code shown in bold:

   let person = {
      name: 'Bob'
   };
   

   NOTE: person now contains a single property called name that has the string value Bob. Properties can be named anything you like (as long as it starts with a lowercase letter). Properties can also be assigned values of any type (string, number, boolean, etc.). Properties and their values are often referred to as key-value pairs. In our code, name is the key and Bob is the value.

4. Save and reload the page in Chrome.
5. Open the Console by hitting Cmd–Opt–J (Mac) or Ctrl–Shift–J (Windows).

6. In the Console, type person then hit Return (Mac) or Enter (Windows).

   In the Console you should see {name: 'Bob'}

Working with Properties of an Object

1. Let’s try using dot syntax to see if we can access the object’s name property. Type the following:

   person.name

2. Hit Return (Mac) or Enter (Windows).

   In the Console you should see only the value of name: 'Bob'

3. Switch back to your code editor.

4. As shown below, add a key with a number value. Multiple key-value pairs in an object are separated by commas, so be sure not to miss the comma after 'Bob':

   let person = {
      name: 'Bob',
      age: 23
   };
   

   NOTE: The additional values don’t need to start on a new line but it can help make the code look a little neater and easier to read.

5. Add another key-value pair, this time with a Boolean value:

   let person = {
      name: 'Bob',
      age: 23,
      alive: true
   };
   

   NOTE: A boolean value can only either be true or false.

6. Save and reload the page in Chrome.
7. The Console should still be open but if you closed it, hit Cmd–Opt–J (Mac) or Ctrl–Shift–J (Windows) to open it.

8. In the Console, type person then hit Return (Mac) or Enter (Windows).

   The Console should show everything in the object (name, age, and alive).

9. Let’s check Bob’s vitals by looking at just the alive value. Type person.alive then hit Return (Mac) or Enter (Windows).

   Phew, it should show the boolean value true.

10. Let’s add another key-value pair dynamically here in the Console. For example, let’s say we want to add a hair color value for Bob. Type:

    person.hairColor = 'brown'
    

    NOTE: Remember that any code you write directly to the Console in a browser is only for test purposes and will not be saved in your working document. Make sure not to reload the page, as you will lose your work!

11. Hit Return (Mac) or Enter (Windows) to apply it.

    The Console should show 'brown'

12. To check if this change has been added to our object, type person.hairColor then hit Return (Mac) or Enter (Windows).
13. Type person then hit Return (Mac) or Enter (Windows) to see all the object’s properties, including the hairColor we just added.

14. Bob just had his birthday so we need to change his age. Type the following then hit Return (Mac) or Enter (Windows).

    person.age = 24
    

15. Type person then hit Return (Mac) or Enter (Windows) to see that the age property has been updated to 24. Neat!