Understanding Array Checking

JavaScript
1

Tell us what’s happening:

I have checked the solution for this problem to compare my answer. I have come across this piece of code wherein it checks whether the array is present or not.

if (collection[id][prop] = collection[id][prop] || ) {
collection[id][prop].push(value);
}

I wonder how JS detects that we should create an array if collection[id][prop] = followed by collection[id][prop].push(value) because I have tried to compare it via string

collection[id][prop] = “”

and it created a property of string value.

Your code so far

      if (collection[id][prop]) {
          collection[id][prop].push(value);
      } else {
         let trackArray = new Array(value);
          collection[id][prop] = trackArray; 
      }


// 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") {
          if (collection[id][prop]) {
              collection[id][prop].push(value);
          } else {
             let trackArray = new Array(value);
              collection[id][prop] = trackArray; 
          }
      } else {
          collection[id][prop] = value;
      }
  }
  return collection
}
updateRecords(5439, "tracks", "ABBA");

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Record Collection

Link to the challenge:

2

You need to be careful with your equals signs. = is the assignment operator, == is the equality operator, === is the strict equality operator.

I think the line you’re asking about in the solution is this one:

collection[id][prop] = collection[id][prop] || [];

This is not a comparison, this is an assignment.

The relevant documentation to read is the section about short circuiting in logical operators from MDN:

Short-circuit evaluation

As logical expressions are evaluated left to right, they are tested for possible “short-circuit” evaluation using the following rules:

  • (some falsy expression) && expr is short-circuit evaluated to the falsy expression;
  • (some truthy expression) || expr is short-circuit evaluated to the truthy expression.

Short circuit means that the expr parts above are not evaluated , hence any side effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand.

So that line works like this, if collection[id][prop] is truthy (arrays are truthy), then assign collection[id][prop] the value of collection[id][prop] (ie, don’t change it). However, if collection[id][prop] is falsy, then assign collection[id][prop] the value [], an empty array.

1 Like
3

Thank you Colin for the precise explanation! Everything is clear now :slight_smile:
Stay safe!

4

Just to make it clearer, the same logic could have been implemented this way:

// with an if-else
if (collection[id][prop]) {
  collection[id][prop] = collection[id][prop];
} else {
  collection[id][prop] = [];
}

// or just an if, removing the redundant self-assignment
if (!collection[id][prop]) {
  collection[id][prop] = [];
}
1 Like
5

Appreciate it a lot Colin for providing the equivalent code in “if-else” form and its refactored version in “if” form.

Thank you so much!