# 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