Record Collection - need help understanding syntax

JavaScript
1

Tell us what’s happening:
I took a look at the solution for the Record Collection challenge and I think I understand most of it. I’m super new to programming so I’m trying to get a better understanding of all this.

My first run at this had me using .hasOwnProperty to look if there was a property that existed called “tracks” which didn’t work. But then looking at the solution, I don’t understand the if/else check within the if statement. Can someone write some pseudocode to help explain it? It looks to me like it’s saying “If the property passed through in the argument exactly matches the string “tracks” and the value argument passed in isn’t a blank string, check to see if the property passed in exists, if it does - push the value argument to that property. If it doesn’t contain the property, add the property and give it the value argument.” All of that makes sense to me I think. But the else if statement is what’s tripping me up. I don’t see the difference between that one and the one in the else statement above it except that the word “value” is in square brackets in the first one. Can someone help me understand the syntax there? Thank you so much!

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"
    }
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line
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;
}

// 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/72.0.3626.121 Safari/537.36.

2

Okay, so looking through the code, someone else had pointed that out as a moment of confusion recently, and I get that. Useful hint? Sometimes searching the forum for something similar can really help. I don’t know about others, but this is one of those I answer (or write pseudocode for) every other week or so.

That said, let’s try pseudocoding something here. For mine, I used a completely different order, but I’ll re-code the sample you’re giving. First, though, remember the spec:

  1. if an id, property and value are given, and the property is 'tracks', then either create the tracks array, or add this track to it.
  2. if an id, property and value are given and the property is anything BUT 'tracks', then add or update that property with the given value.
  3. if an id and property are given, but value is blank, then delete that property.

So me being me, the order I ran those were 3, 1, 2 – it’s easiest to get the general case out of the way earliest, in my mind. In your case, where you’re trying to understand the given code:

function updateRecords(id is string, property is string, value is string or empty){
  if our property is tracks and we DON'T have an empty value string, then {
    Do we *have* a tracks property? 
      If we do, it will be an array, so stick the value onto the end of the array.
      if we DON'T, it should be an array, so create an array with a single member: value.
    } // That's the end of the 'tracks' property handling.
  if value isn't blank (and at this point, our property is ANYTHING but tracks) {
    simply set the property on the given object to the value.
  } else {
    at this point, we know we have an empty value string. Doesn't matter what the property
      variable is set to, if value is empty, we delete that property. 
  }
  
  and at this point, we've handled all three cases, so return the collection with the above update.
}

Now, as to your question about

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

versus

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

In the first, we’ve just had the line with the line if (collection[id][prop]){, which checked whether we had a ‘tracks’ property. If we did, we expect it to be an array, so with an existing array, we simply push that value onto the array.

In the second, however, we have no ‘tracks’ property. There is no array there. So we could have done something like this:

// First, we can create an array in 'tracks'
collection[id][prop] = new Array();
// OR THE SAME THING:
// collection[id][prop] = [];

// then, we add the value to that 'tracks' property
collection[id][prop].push(value)

But what’s happening here is a shortcut – by assigning collection[id][prop] = [value];, we’re creating an array, and setting the array to a single member: value.

Hope it helps, feel free to shout if more explanation will help.