JS: Object Literals

Learning Goals

  • Describe what an object literal is
  • Define properties and methods in an object literal
  • Access values and methods from an object using dot and bracket notation

Vocabulary

  • Object A bundle of behavior (methods) and state (properties)
  • Key The name used to reference a value on an object
  • Value The data referenced by a key
  • Property How we refer to one of the key-value pairs of an object
  • Method A function on an object
  • Dot Notation Notation to access a value on an object, explicitly specifies the key

Objects

Objects are a type of collection, or complex data type in JavaScript. We can think of objects as a representation of real world things in computer programming.

They are meant to bundle together two things:

  1. State (data)
  2. Behavior (functionality)

When to use Objects

If we already have our primitive data types, when/why do we also need objects?

  • When we need an associative relationship (title for some info)
  • We want to model a more complex thing.

Imagine you wanted to model all the information related to a car in code. We could create a whole series of variables (brand, color, year, model, etc), however those variables aren’t tied together in any sensible way. The car itself is one thing, and we want a way hold onto it as such. This is where objects really shine.

Anatomy of Objects

There are several ways to create an object, and the easiest and most popular is literal notation. The only thing you need in JavaScript to declare an object is curly braces {}. Although, it makes things a bit easier if you at least assign it to a variable, like so: var emptyObject = {};

Objects are a collection of key-value pairs surrounded by curly braces. A key is like a name that holds a value. You’re actually used to working with key-value pairs already, because a key-value pair in an object is similar to a variable - the variable name serves as a label for the data we really care about referencing.

In the context of objects, that variable is called a property of the object. Each property in an object must be unique. You cannot have two properties with the same name.

Let’s look at an example:

var objectName = {
  property1: "value1",
  property2: "value2",
};

Which looks like this when we implement it in code:

var school = {
  name: "International School of Denver",
  capacity: 250,
  languageImmersion: true,
  currentStudents: 75,
};

The school object has four properties:

  • name: "International School of Denver"
  • capacity: 250
  • languageImmersion: true
  • currentStudents: 75

Solo Practice: Turn some facts into an Object

Create a new repl.

Declare a new variable called order that stores an object literal. It should have all the properties that were printed on the handout you got this morning, paired with the values you handwrote in.

Access Properties

There are two ways to access the properties or methods of an object, today we will focus on Dot Notation:

var schoolName = school.name;
var schoolCapacity = school.capacity;

Solo Practice: Accessing Data about YOU

Return to the repl you created with your object.

Practice using dot notation to access each value on your order object.

Partner Practice: Accessing Properties

Choose a driver and a navigator. The driver should start by forking this repl.it

Together, complete each exercise listed in the comments below the two object literals. Write the code with a given direction directly below it, and do not delete code as you go.

Adding a Property

What if we wanted to add another property to an object after we already created it? By accessing the object and using dot notation, we can create another unique property and assign it whatever value we want. This works almost exactly like a variable. Take a look at an example below:

school.address = "7701 E 1st Pl, Denver, CO 80230";
console.log(school);

// console output
// => {
//   name: "International School of Denver",
//   capacity: 250,
//   languageImmersion: true,
//   currentStudents: 75,
//   sendWelcomeMessage: function() {
//      return "Welcome to International School of Denver!"
//   },
//   address: "7701 E 1st Pl, Denver, CO 80230"
// }

Solo Practice: Reassigning & Adding

  • Go back to the repl about your order, and add a property of “location” to your object. Assign it to a string of any coffee shop location you frequent.
  • Now try re-assigning the drinkOrder property to a different string.
  • 🤞Remember to call the object or the property on the last line of the file (or in the console), and run the repl to verify the outcome!

Methods on Objects

When we assign a function as the value to one of our keys (remember that a function is a tool we use to return a value!), we call that function a method.

Let’s look at an example:

var objectName = {
  property1: "value1",
  property2: "value2",
  method1: function() {
    return "I'm a method, because I am a function!";
  },
};

This looks like a lot more code, and potentially a bit more daunting, but when we read through it slowly, we can recognize:

  • There is a key name, followed by a colon
  • ONE value as a property

The difference is that our property is now a function definition.

Which looks like this when we implement it in code:

var school = {
  name: "International School of Denver",
  capacity: 250,
  languageImmersion: true,
  currentStudents: 75,
  sendWelcomeMessage: function() {
    return "Welcome to International School of Denver!"
  },
};

The school object has one method:

sendWelcomeMessage: function() {
  return "Welcome to International School of Denver!"
},

To call the sendWelcomeMessage method that belongs to the school object, we have to take one step at a time:

  1. Tell the program we are interested in something regarding the school object
  2. Tell the program we are specifically interested in the sendWelcomeMessage method
  3. Call the sendWelcomeMessage method using ()

In action, it looks like this:

school.sendWelcomeMessage();

Turn and Talk

  • When reading the code snippet above, how would you say, out loud, in English, what we are doing?
  • When we used dot notation at the start of the lesson, we didn’t follow a property name with (). Why do you think we are using that here? What does it remind you of? Further, what do you think would happen if we called school.sendWelcomeMessage?

Let’s add a method to our order object.

Stop and Reflect

First: Independently, take a few minutes to write about each prompt below:

  • To start, go ahead and make an object or two.
  • How do you create an object using literal notation?
  • What is an object and what is it made up of?
  • When we assign a function as the value of a key inside an object, what do we call it?

Then: Turn to your neighbor and explain the above object-related questions to each other. Practice makes perfect, so make sure you both get to explain!

Final Practice: Access and Update

Start by forking this repl.it. Complete each exercise listed in the comments below the provided object literal. Write the code with a given direction directly below it, and do not delete code as you go.


Lesson Search Results

Showing top 10 results