Object Literals

Learning Goals

By the end of this lesson, you will:

  • Understand the difference between dot notation and bracket notation
  • Recognize scenarios that require bracket notation
  • Be able to access and create key value pairs on complex data types

Dot vs. Bracket Notation

When working with complex data types, it’s important to fully understand how to access and create values so that we can manipulate our datasets as needed. We have two syntaxes that help us here: dot notation and bracket notation.

Dot Notation is used when we literally know the name of the key we want to access or create. e.g.:

var duck = { noise: 'quack' };
duck.noise // returns 'quack'
duck.color = 'yellow'; // adds a key named 'color' to our duck object, with the value 'yellow'

This works great in simple scenarios as seen above, but often times we are doing more complex manipulation that requires a bit more flexibility than dot notation gives us. This is where Bracket Notation comes into play. When we use bracket notation, JavaScript will evaluate whatever is inside of the brackets before trying to create or access a key. For example:

let animal = 'duck';

let farm = {
    duck: 'quack',
    cow: 'moo',
    sheep: 'baaa'
};

farm[animal] // returns 'quack'
// animal will be evaluated and the interpreter will see
// that it represents a string of 'duck' - so it will then
// look for a key of duck in the farm object

The most common use-cases for bracket notation that you’ll see in the wild are when using arguments/parameters, variables or iterations. Let’s look at a couple of examples!

// Accessing Values using bracket notation 
// when our parameter represents a key

let kittens = [
    { name: 'george', age: 3, breed: 'tabby' },
    { name: 'bob', age: 2, breed: 'siamese' },
    { name: 'joe', age: 5, breed: 'orange' }
];

function getKittenName(index) {
  return kittens[index].name;
}

function getKittenDetail(index, detail) {
  return kittens[index][detail]  
}

In the above examples, note that you can chain dot notation after bracket notation, or even bracket after bracket!

// Creating key/value pairs using bracket notation
// when our parameters represent a key and its value

let experienceLevels = {
  domManipulation: 'advanced beginner',
  html: 'novice',
  css: 'proficient'
};

function addSkill(skill, level) {
  experienceLevels[skill] = level;
}

addSkill('testing', 'expert');

In the above example, note that you cannot create a key without assigning it to a value!

// Accessing values with bracket notation when iterating

let dog = {
  name: 'Boris',
  age: 3,
  breed: 'Pug'
};

// Object.keys gives us an array of the targeted object's keys
var dogDetails = Object.keys(dog); // ['name', 'age', 'breed'];

console.log('I have a dog and...');

for (let i = 0; i < dogDetails.length; i++) {
  console.log(`His ${dogDetails[i]} is ${dog[dogDetails[i]]});
}

In the above example, note that you can do NESTED bracket notation!

Checks for Understanding

  • When would you use dot notation?
  • When would you use bracket notation?

Individual Practice Time!

  1. Fork the following REPL
  2. Spend no more than 40 minutes working through the problems on your own
  3. When you’ve finished, send your completed REPL to your instructor in a Slack DM
  4. Take a POM and wait for next steps

Additional Resources

Lesson Search Results

Showing top 10 results