Difference between [] and . when accessing the property in an object

Tell us what’s happening:
Describe your issue in detail here.
I know the code works now. But previously i have used dot operator instead of [] when accessing the property of an object like records.id.prop = value; I have used dot operator for all the cases in if else when it didnt work, I have switched it to []. Can someone help me understand the difference. Thanks.

  **Your code so far**
// Setup
const recordCollection = {
2548: {
  albumTitle: 'Slippery When Wet',
  artist: 'Bon Jovi',
  tracks: ['Let It Rock', 'You Give Love a Bad Name']
},
2468: {
  albumTitle: '1999',
  artist: 'Prince',
  tracks: ['1999', 'Little Red Corvette']
},
1245: {
  artist: 'Robert Palmer',
  tracks: []
},
5439: {
  albumTitle: 'ABBA Gold'
}
};

// Only change code below this line
function updateRecords(records, id, prop, value) {
console.log(records, id, prop, value);
if(prop!=='tracks' && value!=='') {
  records[id][prop] = value;
} else if(prop==='tracks' && records[id].hasOwnProperty('tracks')===false) {
  records[id][prop] = [value];
} else if(prop === 'tracks' && value!=='') {
  records[id][prop].push(value);
} else if(value==='') {
  delete records[id][prop];
}
// console.log(records);
return records;
}

updateRecords(recordCollection, 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/102.0.5005.99 Safari/537.36

Challenge: Record Collection

Link to the challenge:

When you say obj.someKey, you access the key with name “someKey” in the object obj, which would look something like this:

const obj = {
  someKey: "123"
}

With bracket notation, you must use a string representing the key name e.g. obj["someKey"]. If you were to say obj[someValue], it will read someValue as a variable name and take its value to input as key name. For this towork you would need to define that variable somewhere in your code:

const obj = {
  someKey: "123"
}

obj.someValue
obj['someValue']

const someValue = 'someValue'

obj[someValue]  // "123"

You can actually use any variable name here. You can say const keyName = 'someValue' and then access it with obj[keyName]. Brackets will try to read the value within and use that string to refer to the key with that name. Bracket notation allows to access more complex key names, or ones you dont know before hand. For example:

const oddObj = {
  'first key': 'one',
  'second key': 'two',
  keyName : 'three'
};

['first key', 'second key', 'key'].forEach(keyName => {
  console.log(oddObj[keyName])  // here we call the key named with the keyName value
  console.log(oddObj.keyName)   // logs 'three' every time
})
// logs 'one'
// logs 'three'
// logs 'two'
// logs 'three'
// logs 'three'
// logs 'three'
const recordCollection = {
2548: {
  albumTitle: 'Slippery When Wet',
  artist: 'Bon Jovi',
  tracks: ['Let It Rock', 'You Give Love a Bad Name']
},
2468: {
  albumTitle: '1999',
  artist: 'Prince',
  tracks: ['1999', 'Little Red Corvette']
},
1245: {
  artist: 'Robert Palmer',
  tracks: []
},
5439: {
  albumTitle: 'ABBA Gold'
}
};

This is my object. If i use record.id.prop or record[id][prop] they get the values ['Let It Rock', 'You Give Love a Bad Name'] right?
PS: record, id and prop are parameters and are equals to the recordCollection,idnumber and tracks.
So, I have done the same thing in the challenge. I know when the property name have spaces we will be using [] bracket notation but the properties in the challenge are artist or tracks that’s why I tried using dot notation but it didn’t work. Is this challenge specific like they are forcing us to use bracket notation for this challenge because we may not know the property name when dealing with real time dynamic data or am i missing something.

No. You cannot use dot notation with variables holding the property names. Bracket notation is mandatory when the property names are stored in variables.

It is not a challenge specification, its just how bracket/dot notation work, it is universal.
When you say record[id][prop], the interpreter will look for the value of id and the value of prop. They must be defined somewhere. If you wanna get the the artist of 2468 record using this syntax it would have to be done as follow:

const id = 2468
const prop = 'artist'

recordCollection[id][prop]  // 'Prince'

When you say record.id.prop, it will look for the object named “id” with a key named “prop”, for example:

const record = {
  id: {
    prop: 'something'
  }
}

record.id.prop  // 'something'

To use dot notation with the recordCollection, you would have to specify the names of the props: recordCollection.2468.artist, however that wont work because 2468 is a number, so we still need to rely on brackets - recordCollection[2468].artist , and again this wont suffice in our case, because we want to make our function updateRecords universal, being able to point to specific record without knowing it while defining the function. That function could actually work for any similar object with that structure, if we define it correctly.
PS: dont worry, it takes a while to get it and it requires practice. It will eventually click

1 Like