/u1_lesson_js_objects

In this lesson, we'll discuss Objects and how they are essential data structures in JavaScript.

Javascript Objects

Objects

Lesson Overview

In this lesson, we'll discuss Objects and how they are essential data structures in JavaScript.

Getting Started

  • fork and clone
  • cd into the new directory
  • Use touch and create an objects.js file
  • Run code . to open the directory in VS Code

To run your code, use node objects.js...

Lesson Objectives

After this lesson, students will be able to:

  1. Explain the difference between arrays and objects
  2. Store key-value pairs inside an object
  3. Access values by key-name
  4. Add Object Properties
  5. Change Object Properties
  6. Explain why we use an object instead of an array
  7. Manipulate objects and arrays declared as const
  8. List common errors made with objects
  9. Use object properties with conditionals

Explain the difference between arrays and objects

We have seen the following datatypes:

  • String
  • Number
  • Boolean

Arrays are a data structure. We use them to organize our data: in the case of arrays, we can organize our data into a sequential list data structure.

  • We can use arrays to store multiple pieces of data as a sequential list:
const car = ['blue', 4000, 1989]
  • Each element has a corresponding index (or place), in sequence.

But with the array above, we don't know what the values mean. Does "blue" refer to the color of the vehicle? To the mood of the owner? Is it the model of the vehicle?

  • An object is also a data structure, but we can use objects to store data with greater specificity.

  • In JavaScript, objects are what we use to represent key-value pairs.

Store key-value pairs inside an object

Key-value pair syntax:

const car = {
  color: 'blue',
  hp: 4000,
  year: 1989
}

  • Unlike arrays, objects use named keys rather than ordered indexes. Each piece of data is bound to its key, rather than assigned an index. The data is not sequential.

  • In Javascript, an object is a way to group many pairs of keys and values together

We can console.log the entire object:

console.log(car)

Access values by key-name

We can access the values stored in key using dot notation:

console.log(car.color)

DIFFERENCES BETWEEN ARRAYS AND OBJECTS

  • Arrays are declared using the square brackets const arr = []
  • Objects are declared using the curly braces const obj = {}

Objects contain key-value pairs. They are are the properties of the object.

A key is like an index in an array, but it has:

  • a name
  • it is unique

A key is really a string but we can omit the quotes.

A value is what a key refers to, and can be any datatype.

Add Object Properties

You can easily add more properties to a previously declared object:

const house = {
  doors: 9
}

console.log(house)

=> { doors: 9 }

Add properties to the house object by simply adding a key using dot notation and the value using an equals =. Our house has no windows. Let's add some in without writing them straight into the object:

house.windows = 30

When we do it this way, the windows key is added to the object.

console.log(house)

=> { doors: 9, windows: 30 }

Add another property hasGarden:

house.hasGarden = true

Change Object Properties

Changing the value of an existing key has the same syntax as creating a new key-value pair:

const recipe = {
  isYummy: false
}
recipe.isYummy = true

Why We Use An Object Instead of an Array

When designing your programs, it is up to you to choose how to model your data. We can represent real-life things with our datatypes, but it's a matter of choosing the appropriate datatypes.

If the thing you want to model is just a list, use an array.

If the thing want to model has properties, use an object.

Using what we know about datatypes so far, which datatype would we use to model:

  1. The name of your cat
  2. The age of your cat
  3. A list of your cat's favorite things
  4. Whether your cat is asleep
  5. Your cat

Manipulate objects and arrays declared as const

const only prevents you from reassigning a variable; it doesn't prevent you from adding or changing elements of arrays or properties of objects.

You can do this:

const cat = {}

cat.name = 'Gizmo'

Cannot do this:

const cat = {}

cat = { name: 'Gizmo' }

List common errors made with objects

Unique Keys

It just makes sense that keys ought to be unique within an object. Values, however, can be repeated.

An object cannot have more than one key with the same name. If it does, the value will default to the last key with the same name, and the prior properties will be excluded on creation.

const borough = {
  name: 'Brooklyn',
  name: 'The Bronx'
}
console.log(borough)

=> { name: "The Bronx" }

Conclusion: keys should be unique within an object. Values, however, do not have to be unique.

Accessing and Naming Keys Using Brackets and Quotes

You can create and access any key with square brackets and quotes.

const goblin = { 
  badGuy: true
}
console.log(goblin['badGuy'])

=> true

With square brackets and quotes, you can make key names with spaces and special characters, because the key is coerced into a string. But, you then have to access the value from here on out with square brackets and quotes.

const strangeObj = {}

strangeObj['a key with spaces'] = 999

console.log(strangeObj)

=> { 'a key with spaces': 999 }

You would need also to access that key with the square brackets and quotes:

console.log(strangeObj['a key with spaces'])

=> 999

You could not access that key using dot notation. The spaces prevent that from being possible.

Square brackets are nice if you need to programmatically generate a key name:

const obj = {}

for (let i = 0; i < 10; i++) {
  obj['key' + i] = 'some value'
}

console.log(obj)

Keys That Are Numbers

If a key is just a number, that number will be coerced into a string, which is fine.

const obj = {
  1: 'one'
}
console.log(obj)

=> { '1': 'one' }

But, you cannot access, add, or change numbered keys with dot notation.

console.log(obj.1)
obj.2 = "hey"

console.log(obj.2)

This is another situation where accessing key-values using square brackets and quotes is helpful: obj['1']

Use object properties with conditionals

You can use object properties with conditionals, loops, etc...

const planet = {
  name: 'Saturn',
  rings: 9
}

if (planet.name == 'Saturn') {
  console.log('Saturn is the 6th planet from the Sun!')
}

for (let i = 0; i < planet.rings; i++) {
  console.log(i)
}

You can test to see if a property exists on an object:

const planet = {
  name: 'Mars'
}

if (planet.name) {
  console.log('This key exists within the object')
}

if (planet.distance) {
  console.log('This key exists within the object')
} else {
  console.log('This key does not exist within the object')
}

This is because accessing a property that doesn't exist on an object gives you undefined which is a falsy value.

Lesson Recap

We will use objects in JavaScript every day, and you will have plenty of time to practice creating and using them. There are a lot of resources available on the web for you to dive deeper, but the most detailed and understandable one is probably MDN.

Resources