Refactor Global Variables Out of Functions booklist into new array

JavaScript
1

Tell us what’s happening:
What I cannot understand for the life of me, is how Javascript knows how to copy bookList into a new array. I used provided solutions to show what i dont understand. How does the parameter list then the spread operator with list equate to bookList copied into a new array.
Thanks for you help, I appreciate it lots

Your code so far


// the global variable
var bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];

/* This function should add a book to the list and return the list */
// New parameters should come before the bookName one

// Add your code below this line
function add (list,bookName) {
  
  return [...list,bookName];
  
  // Add your code above this line
}

/* This function should remove a book from the list and return the list */
// New parameters should come before the bookName one

// Add your code below this line
function remove (list,bookName) {
  if (bookList.indexOf(bookName) >= 0) {
    
    return list.filter((item) => item !== bookName );
    
    // Add your code above this line
    }
}

var newBookList = add(bookList, 'A Brief History of Time');
var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies');
var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies');

console.log(bookList);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions

2

Maybe it would help to walk through one example.

add(bookList, 'A Brief History of Time')

This passes bookList, which is equal to the array ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"] into the add function along with the new book A Brief History of Time to be added.

add() accepts two arguments: list and bookName. So inside this function, list is now equal to bookList, which was passed in.

The function returns:

return [...list,bookName]

The spread operator copies the list (which is equal to bookList) and adds the new element. This could also be written in another way:

let newList = list;
    newList.push(bookName);

return newList;

However, the spread operator makes this much cleaner. Its use is explained well in this FCC Youtube Video.

I hope this clears things up!