Bracketball explainer

Aim of the puzzle: Use bracket notation to access an object’s property.
Walk through of solution: Up until now, you have used dot notation to access properties in an object. For example:

let dog = {
  name: 'maisie'
  age: 14
};
console.log(dog.age)

Bracket notation is another way to access the same property. Accessing dog.age in bracket notation would look like dog['age'], with the property name written as a string inside the brackets.

Why use bracket notation?

Generally, dot notation is preferred. However, bracket notation allows you to use a variable inside the brackets, which does not work with dot notation.

For example:

let dog = {}
let variable = 'age';
console.log(dog[variable])

This code is the same as writing dog['age'], because variable holds the string 'age'.

However, this does not work:

let dog = {}
let variable = 'age';
console.log(dog.variable)

This will print undefined, because the code is looking for a property in dog named variable, which does not exist.

In this puzzle, use bracket notation with the letter variable to add new properties to obj.

This creates a new property in obj using the letter variable as a property name. It then stores the value of i in this property.

If the imported string has the value 'juice' , then obj will then look like:

{
j: 0,
u: 1,
i: 2,
c: 3,
e: 4
}

Sample code solution:

import { obj, string } from 'grasshopper.data';

for (let i = 0; i < string.length; i++) {
    let letter = string[i];
    obj[letter] = i;
}

for (let property in obj) {
    console.log(property + ': ' + obj[property]);
}

Javascript Concepts: Objects, Bracket Notation, Properties

Anyone else having problems with this? I cant use the solution above but I was able to get the program to do what is required by obj[letter] =I in the console.log on the bottom.

Hey there, if you post a screenshot of your code, I can take a look and see what might be causing the issue.

https://support.grasshopper.codes/t/bracketball-

explainer/7639/4?u=darren_marshall

Hey there,

The solution code at the top of this post is for an earlier version of this puzzle. It should have been updated when the puzzle was changed, but it appears that this was overlooked. My apologies.

In any case, tap reset to get the starter code back. Then, inside the for loop, below the letter variable declaration, add obj[letter] = i. Like this:

import { obj, string } from 'grasshopper.data';

for (let i = 0; i < string.length; i++) {
    let letter = string[i];
    obj[letter] = i;
}

for (let property in obj) {
    console.log(property + ': ' + obj[property]);
}

This creates a new property in obj using the letter variable as a property name. It then stores the value of i in this property.

If the imported string has the value 'juice', then obj will then look like:

{
j: 0,
u: 1,
i: 2,
c: 3,
e: 4
}

Hope this helps!
Ben

1 Like

Thank you, it worked perfectly,

Hello,
The code works but I am confused…
Property in obj represents letter, and obj[property] represents obj[letter]?
Hiw does it know? Since its the only property?

Great question.

In that example, the two variables are scoped differently. letter only exists in the classic for loop, and property exists in the for…in loop. But the more important thing to note is how the 2 variables are being used differently…

letter is a variable created in the classic for loop to represent the current letter in the string. For example, with the string 'juice', letter has the value 'j', then 'u', and so on as the for loop iterates over the string.

obj[letter] = i uses bracket notation to create a new property in obj named for the current letter. Before the for loop runs, obj is empty, and doesn’t have any properties. Bracket notation is used here because you can use variable names, which you can’t do with dot notation.

For example, if letter has the value 'j', obj[letter] accesses obj.j
If you tried to use dot notation, like obj.letter, the computer will look for a property named letter.

A for…in loop is added to the code here to loop through the object and print out what it’s storing. This loop is there because if you tried to put in console.log(obj), it will just print out object Object, which is annoying, but that’s just how javascript is…

A for…in loop is a for loop made specifically to loop through objects. In this loop, property stores the property name, and obj[property] accesses the value stored in that property.

This is why console.log(property + ': ' + obj[property]) would print out something like j: 0

Hope that clarifies things a bit.

1 Like