freeCodeCamp Challenge Guide: Record Collection

[camperbot]

Record Collection

---

Problem Explanation

This problem is hard if you are new to JavaScript or programming, so don’t worry if you get stuck or need to ask for help. Asking for help is better than looking at the answer.

It is important to understand the overall goal of this function and then write code that supports that goal.

The id parameter corresponds to a specific album object in the records object.

You need to update this album object based upon the value and prop parameters:

• Your function must always return the entire records object.
• If value is an empty string, delete the given prop property from the album.
• If prop isn’t tracks and value isn’t an empty string, assign the value to that album’s prop.
• If prop is tracks and value isn’t an empty string, add the value to the end of the album’s tracks array. You need to create this array first if the album does not have a tracks property.

Finally, the problem wants you to return the records object.

---

Hints

Hint 1

Use an if...else if chain to check the different values of prop and value.

Hint 2

To access the value of a key in this object, you will use bracket notation: records[id][prop].

Hint 3

You can’t push to an array that doesn’t exist. If the "tracks" array does not exist yet, you need to create the "tracks" array before pushing value onto it.

---

Solutions

Solution 1 (Click to Show/Hide)

function updateRecords(records, id, prop, value) {
  if (value === "") {
    delete records[id][prop];
  } else if (prop !== "tracks" && value !== "") {
    records[id][prop] = value;
  } else if (prop === "tracks" && value !== "") {
    if (records[id].hasOwnProperty("tracks") === false) {
      records[id][prop] = [];
    }
    records[id][prop].push(value);
  }
  return records;
}

Code Explanation

This version of the code explicitly handles every possible case with separate if clauses.

• First it checks if the value is an empty string. If it is, then the prop is deleted.
• Then, if prop is not "tracks" and the value is not an empty string. The prop is set to the value.
• If that check doesn’t pass, it next checks if prop is equal to tracks, the value is not an empty string, and the record does not have a tracks array. The "tracks" array is initialized with the only contents being value.
• It next checks if prop is equal to tracks, the value is not an empty string. The "tracks" array must exist because the case above was not true. The value is pushed onto the end of the "tracks" array.

Lastly, the entire records object is returned.

Solution 2 (Click to Show/Hide)

function updateRecords(records, id, prop, value) {
  if (value === '') {
    delete records[id][prop];
  } else if (prop === "tracks") {
    records[id][prop] = records[id][prop] || []; // shortcircuit evaluation
    records[id][prop].push(value);
  } else {
    records[id][prop] = value;
  }
  return records;
}

Code Explanation

This solution re-orders the code to make the if clauses simpler.

• First checks if value is a blank string. If so, then the key (prop) is removed from the object.
• If that first check doesn’t pass, then we know that value is not a blank string. It next checks if prop is equal to "tracks". The "tracks" array is initialized if it does not exist, and then value is pushed into the tracks array. (This step uses shortcircuit evaluation)
• If both these checks fail (meaning value is not an empty string and prop is not "tracks"), then either a new key (prop) and value (value) are added to the object, or an existing key is updated if the prop already exists.

Lastly, the entire records object is returned.

Example Run

• updateRecords(5439, "artist", "ABBA"); runs.
• value is not a blank string, so the first condition of the else if statement fails.
• prop is equal to "artist", not "tracks", so the second condition of the else if statement fails.
• in the ‘else’ clause, artist: "ABBA" is added to the 5439 id.

Relevant Links

• fCC’s challenge: Accessing Objects Properties with Bracket Notation
• fCC’s challenge: Add New Properties to a JavaScript Object
• fCC’s challenge: Delete Properties from a JavaScript Object
• fCC’s challenge: Accessing Nested Objects
• “Array.prototype.push()” - MDN JavaScript reference
• “delete operator” - MDN JavaScript reference
• shortcircuit evaluation

Solution 3 (Click to Show/Hide)

function updateRecords(records, id, prop, value) {
  // Access target album in record collection
  const album = records[id];
  // Update the album
  if (value === "") {
    delete album[prop];
  } else if (prop !== "tracks") {
    album[prop] = value;
  } else {
    album["tracks"] = album["tracks"] || [];
    album["tracks"].push(value);
  }
  // Return the full collection
  return records;
}

Code Explanation

This solution uses the fact that objects are passed into functions as references to slightly simplify the solution syntax.

Relevant Links

• Object reference
• Call by sharing