Why do we have to use bracket notation?

Tell us what’s happening:

I understood this kind of, but I watched the video to help me understand why it was not working. In the video, the guy said that we had to use bracket notation. I am not sure why we had to do that, or why it was not working without bracket notation.

Your code so far


// Setup
var collection = {
 2548: {
   album: "Slippery When Wet",
   artist: "Bon Jovi",
   tracks: [
     "Let It Rock",
     "You Give Love a Bad Name"
   ]
 },
 2468: {
   album: "1999",
   artist: "Prince",
   tracks: [
     "1999",
     "Little Red Corvette"
   ]
 },
 1245: {
   artist: "Robert Palmer",
   tracks: [ ]
 },
 5439: {
   album: "ABBA Gold"
 }
};

// Only change code below this line
function updateRecords(id, prop, value) {
if (value === ""){
  delete collection[id][prop];
}
else if (prop === "tracks"){
collection[id][prop] = collection[id][prop] || [];
collection[id][prop].push(value);
}
else {
 collection[id][prop] = value;
}
 return collection;
}

// Alter values below to test your code
updateRecords(5439, "artist", "ABBA");

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36.

Challenge: Record Collection

Link to the challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/record-collection

When you access a property or method with the dot, you are saying:

Bring me the method or property that has this exact name.

For example, if you do:

myObj.myMethod()

It will attempt to look for a method called "myMethod" and if there isn’t it will throw an error.

A very important thing to remember is that keys of objects in JS are strings, but something odd happens if you try to use dot notation with a number: it throws an “Unexpected number” error. This is one of the use cases for bracket notation.

myObj.5 // error
myObj[5] // success if key exists

Bracket notation is used when you want to access a property or method dynamically: This means that the name of the key can be obtained by evaluating whatever is inside the brackets; it can be an expression, a function call, a variable or any standalone value; what happens next is that the result of the evaluation gets converted to a string and the key is then looked up inside the object.

obj[funCall()] // evals the return value (or undefined if no return present)
obj[5]
obj["My Key"] // looks up the value as a string
obj[true && false || 1] // evals the whole expression (1 which gets converted to "1")
obj[myVariable] // fetches the value of the variable and looks it up as a string

As you can see, another use case for bracket notation is when the key is separated by a space (which is totally valid since keys are strings).
As you can see

2 Likes

Hello!

That’s because you’re dynamically accessing the properties of the object.

When you don’t know the property name of an object, the property name of the object is stored on a variable or it has non standard characters, you need to use brackets:

const o = {
  “valid property”: 2
}

console.log(o[“valid property”])
// output: 2
// console.log(o.valid property) wouldn’t work
const propertyName = “valid property”
console.log(o[propertyName])
// output: 2
console.log(o.propertyName)
// output: undefined

Another example is when you need to iterate the properties of an object:

for (let prop in o) {
  console.log(o[prop])
}

Hope it helps :slight_smile:

You might want to review the following challenges.