Object Literals: Accessing, Creating, and Modifying Values

Learning Goals

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

const school = { name: "Park Hill School" };
school.name; // returns 'Park Hill School'
school.county = "Denver"; // adds a key named `county` to our school object, with the value "Denver"

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 detail = "coverLetter";

const developer = {
  name: "Travis",
  experience: 3,
  coverLetter: true,
};

developer[detail]; // returns true

/*

`detail` will be evaluated and the interpreter will see that it represents a string of "coverLetter" - so it will then look for a key of `coverLetter` in the `developer` 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!

Using Bracket Notation w/ Arguments & Parameters

const kittens = [
  { name: "george", age: 3, breed: "tabby" },
  { name: "bob", age: 2, breed: "siamese" },
  { name: "joe", age: 5, breed: "orange" },
];
  • Given an array of kittens, write out a function that takes an index as an argument, and returns the name of that specific kitten.
  • Using the same array of kittens, write out another a function that takes an index AND a detail (i.e. a property) that returns that kitten’s specific detail.

Answer

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

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

const getKittenName = (index) => {
  return kittens[index].name;
};

const getKittenDetail = (index, detail) => {
  return kittens[index][detail];
};

Note

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

const rubric = {
  domManipulation: "advanced beginner",
  html: "novice",
  css: "proficient",
};
  • Setup a function to take a skill (key) and level (value) and add them as a key value pair to the rubric.

Answer

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

const rubric = {
  domManipulation: "advanced beginner",
  html: "novice",
  css: "proficient",
};

const addSkill = (skill, level) => {
  rubric[skill] = level;
};

addSkill("testing", "expert");

Note

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

Using Bracket Notation w/ Iteration

Let’s work through this one together. Consider the following:

const dog = {
  name: "Boris",
  age: 3,
  breed: "Pug",
};

We have a dog object and want to iterate through this object, grabbing the keys and values, and log:

I have a dog and...
His name is Boris
His age is 3
His breed is Pug

Although there are multiple ways of solving this, let’s try one approach together!

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

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

// We'll iterate over the array of keys
for (let i = 0; i < dogDetails.length; i++) {
  // For the first iteration, i is 0, dogDetails[0] is "name", and dog["name"] is "Boris"
  // For the second iteration, i is 1, dogDetails[1] is "age", and dog["age"] is 3
  // For the third iteration, i is 2, dogDetails[2] is "breed", and dog["breed"] is "Pug"
  console.log(`His ${dogDetails[i]} is ${dog[dogDetails[i]]}`);
}

Note

In the above example, note that you can do NESTED bracket notation! (i.e. dog[dogDetails[i]])

Additional Practice

Fork and work through the following repl

Checks for Understanding

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

Additional Resources

Lesson Search Results

Showing top 10 results