JavaScript 6 - Object Literals

Projected Time

About 60 minutes

15 min for Lesson
30 min for Independent Practice
20 min for Check for Understanding

Prerequisites

Motivation

Object Literals are important to object-oriented programming in JavaScript
Object literals allow us to store related data, encapsulating it in a tidy package
Using objects allows us to minimize global variables, which can cause issues when combining code

What companies use object literals? Many companies need to enclose data into reusable packages. An example would be Facebook, making an object to contain the information for a single user.

The object for a Facebook user may look something like this:

const person = {
  name: ['Sara', 'Crosby'],
  age: 35,
  gender: 'female',
  favoriteComment: function() {
    alert('Good morning!');
  };
}

For a more complex example, directly from Facebook, check here: https://developers.facebook.com/docs/graph-api/reference/v5.0/object/likes

Objectives

Participants will be able to:

Create Object Literals in JavaScript
Understand property-value pairs
Assign values to properties with both dot-notation and bracket-notation
Change the value associated with a property
Delete property-value pairs

Specific Things to Learn

JavaScript’s Object Literal syntax
The concept of unordered property-value pairs
How to access an Object Literal’s data
- With dot-notation
- With bracket notation
Object.hasOwnProperty()

Materials

Lesson

JavaScript VI - Object Literals (slides) | JS 6 Walkthrough Video of Slides

What is an Object?

An object is a thing that has properties. This sounds simple, but it’s actually very abstract! To help flesh this out, think of an example software application that keeps track of books, such as for a library. In this application, a book can be thought of as an object that has certain properties like title and author.

For example:

let book = {
  "id": "827392838",
  "authorFirstName": "Jane",
  "authorLastName": "Doe",
  "title": "The Wonderful World of JavaScript",
};

In the same example software application, we might also want to keep track of people who will borrow library books:

let borrower = {
  "id": "9002",
  "firstName": "Syma",
  "middleInitial": "N",
  "lastName": "Tec",
  "phoneNumber": "(415) 123-1234",
};

To tie together a book and the borrower, we might want to have yet another object that represents the book loan:

let loan = {
  "bookId": "827392838",
  "borrowerId": "9002",
  "borrowedDate": "2018-08-26",
  "dueDate": "2018-09-26",
  "timesRenewed": 0,
}

Things to Remember

If a property name is composed of multiple words, the convention is to use camelCase.
If a property name with spaces is absolutely required, then you’ll only be able to use braket notation to access it’s associated value. You won’t be able to use dot-notation.
Accessing the value of an Object Literal’s properties with dot-notation makes the code easier to read and requires less typing. But bracket-notation allows for dynamic accessing, like what you do when you use a loop
An Object Literal’s values can be any data type, but its properties can only be strings
Object Literals can be nested in complex ways
All Object Literals come with some default methods, such as .hasOwnProperty()
Never use reserved keywords for property names (like function, var, switch, etc.)

Independent Practice

Work through this interactive lesson on JavaScript Objects.

Supplemental Materials

Check for Understanding

Write down the syntax for declaring an Object.
What do you mean by Complex Objects? Give an example.
Explain some built-in Object Methods in JavaScript.
What is a property of an Object?
Differentiate between dot and bracket notation.
How do you access nested object inside an array?