Basic JS: Record Collection

JavaScript
1

Hi,

I’m trying to understand what the line of code below executes:

collection[id][prop]=[value]

Is this creating a new property by way of assigning a value to one that did not previously exist?

Also why do [ ] have to be used and not collection.id.prop?

Your help would be much appreciated.

Thanks

2

So there are two ways of accessing properties in an array: dot notation and bracket notation.

  • Dot notation (Collection.id, for example) is used to access a specific property (in this case, id) on the object. The property name is, in this case, hard-coded.
  • Bracket notation (Collection["id"] ) is also used to access a specific property, but there’s a difference: rather than being hard-coded, we are using a string.

Using bracket notation, we have the advantage of being able to use a variable to get a property. For example, if we had let id = 1234;, then we did console.log(Collection[id]), we are using the variable id to get the property Collection.1234. We can get properties dynamically using brackets, while we can’t using dot notation.

So Collection[id][prop] is saying “we have to variables, id and prop. id might be 5438 and prop might be name – so on our Collection object, get the property Collection.5438, and from that sub-object get the property name.”

Bracket notation is useful if you want to be able to access properties dynamically, as you do in the record collection lesson.

And that line collection[id][prop] = value; is setting the value of that particular property. Doesn’t matter if that property was there or not – if it wasn’t that line will create it, and if it was it’ll simply overwrite it.

1 Like
4

Thank you for your help snow monkey.

What would the difference between these be?

collection[id][prop] = value;
collection[id][prop] = [value];

Please see code below:

function updateRecords(id, prop, value) {
if (prop === “tracks” && value !== “”) {
if(collection[id][prop]) {
collection[id][prop].push(value);
}
else {
collection[id][prop]=[value];
}
} else if (value !== “”) {
collection[id][prop] = value;
} else {
delete collection[id][prop];
}
return collection;
}

5

ah, now that changes things a little. The first line, which was more along the lines of what I’d written, sets the property to a simple value: a string, or a number, or whatever’s passed in. The second is assigning the variable an array with one member: the value variable’s contents.

Let’s take that opening section apart a little:

// So here, we have a prop of 'tracks' and an actual value
if (prop === "tracks" && value !== ""){
  // does the collection member with this id have a 'tracks' property?
  if (collection[id][prop]){
  //  If it does, we assume it to be an array, and push the new value on
    collection[id][prop].push(value);
  } else {
    //  Here, it does NOT have a 'tracks' property, so we create one. And the value will be
    //  an array, with a single member: the value that was passed in. 
    collection[id][prop] = [value];
  }
}

so that syntax, collection[id][prop] = [value]; is creating an array and setting the first member of that array to whatever value contains. It could also have been written:

collection[id][prop] = [];
collection[id][prop].push(value);

Both do the same thing.

6

Thank you! Really helped make sense of it.