Skip to content

Latest commit

 

History

History
106 lines (89 loc) · 4.75 KB

javascript-6-object-literals.md

File metadata and controls

106 lines (89 loc) · 4.75 KB

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 the most robust data type in JavaScript (and many other modern programming languages). Object literals allow us to store, look up, and change data efficiently.

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 Teach

  • 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 (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:

var 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:

var 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:

var 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

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?