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
Additional Code (hidden code that runs before the puzzle’s code):

let obj = {};
let string = pickRandom(['dog', 'cat', 'radio', 'music', 'gather', 'honest', 'taco', 'water', 'juice']);
5 Likes

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.

1 Like

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

1 Like

https://support.grasshopper.app/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

4 Likes

Thank you, it worked perfectly,

1 Like

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?

1 Like

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.

10 Likes

What do obj and string include exactly??

1 Like

I think the confusion here comes from the for-in loop not being explained beforehand, unless it was covered and I’ve forgotten it. At least that was the source of my confusion

Obj is an empty variable when the code starts, string is a random word that is being ran through the code. My problem with this example was the for - in loop that is being run with the obj variable. You should read about for - in loops and see if it helps this problem make sense https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

1 Like

I’m so confused . I wish people wouldn’t use ‘variable’ and ‘object’ etc. as strings in your examples. It doesn’t help explain what you are trying to achieve.

3 Likes

in all examples , the property is indicated in brackets, for ex. dog[‘age’]=10 , and in this puzzle it was necessary to specify the property without brackets - obj[letter]=i; I think it is a bug , or I do not understand this topic, why there is no need brackets? thanks in advance

1 Like

I believe by saying ‘brackets’ you mean the ’ ’ marks, right?

Well, anything inside ’ ’ marks is called as a string

While creating a property, you always use a string.

Like you said:- In the previous example a string was used but now its not, instead, a variable is used.

dog[‘age’] = 10

Is same as

let x = ‘age’
dog[x] = 10

Please see the solution carefully and you will know what I am talking about.
Hope that helps…

4 Likes

Thanks a lot! Now it’s all clear!

2 Likes

It doesn’t let me put = after [ ]

2 Likes

Hey there, try highlighting all of obj[letter] before adding the = symbol. To do this, tap/click right where the j and the [ meet. That should do the trick.

Hope this helps!
Ben

1 Like

I’ve been stuck on this exercise for 2 weeks. I can’t enter ‘letter’ AFTER I’ve entered in ‘obj’. It literally doesn’t allow me insert it.


Could use a little help here.

Thx,

2 Likes

Hey there, tap the purple [] key to add brackets to obj, like this: obj[]. Then inside the brackets, add letter, like this: obj[letter]

Hope this helps!
Ben

1 Like

Hi,
I’ve recently joined. I had some difficulty understanding exactly what the for…in loop does as an algorithm; I’m pleased to find the forum very helpful in demystifying this, and other, code.

As, I am not using Vue.js, I have had to manipulate the exercise; this is my solution:

let animal = {
  species: 'Bear'
};

function bracketObj(obj, string) {
  // iterate over the string
  for (let i = 0; i < string.length; i++) {
    // get each char. of the string
    let letter = string[i];
    // get the index of each char.
    obj[letter] = i;
  }

  for (let property in obj) {
    // retrieve the Obj. property
    // and the property value
    console.log(property + ': ' + obj[property]);
  }
}

bracketObj(animal, 'Bears');

My issue is that though I produced the right result in the exercise in the app, it does not exactly produce the same output as my code. I output the Object property and value, as well as the enumerated string. I believe it is correct, but I would like to be sure.

1 Like