this code was all understood except for how does the function printList(list) know that it has to 'look'

The key thing to remember is that when the function is written out, it's a blueprint for the function's actions when it's called. When the function expects parameters to come in as arguments, it maps those arguments out with their own specific names, "whatever comes in as this argument list, we are going to always refer to it as "list", and nothing else!". In other words throughout the rest of the function the parameter passed in is seen as "list", regardless of the name of the array or object passed to that argument. If we were to change the argument name in the function, it would still work the same, except we would have to change all instances of "list" to match the new argument name.

Here's an example:

// we change the argument name to 'newList'
function printList( newList ) {
  var listHTML = '<ol>';

  // since the argument has changed, the function doesn't know what 'list'
  // is, so we change all references to 'newList'. This is the new _nickname_  for the array
  for ( var i = 0; i < newList.length; i += 1) {
    listHTML += '<li>' + newList[i] + '</li>';
  }
  listHTML += '</ol>';
  print(listHTML);
}

// when we call it, everything works as intended
printList(playList);

// we can give it another playlist and it works the same way
printList(secondPlayList);

So when we use the printList function, no matter what array, or object is passed to it, the function will always see it as "list", or the argument name given. It's basically the reference of that array in it's lexical space (function space). It is all internal to the function, and those arguments are specific to the function's use, and reference.

If you are only changing the argument name, and it still works, make sure to refresh the instance, as it's probably still using the old one.

I hope that makes more sense now. :D