Refactor Global Variables Out of Functions: Why don't I use the copied array name?

Tell us what’s happening:
I understand that for functional programming, we don’t want to change anything, to avoid possible mutations. That is why, in this challenge, we make a copy of the bookList array ( =books). What I don’t understand is why, when we pass arguments to the functions, we still use the old array name (bookList). This seems counterintuitive to me. Can someone explain? I looked at the old solutions, but they just confused me more.
Thanks,
Scotty

  **Your code so far**
// The global variable
const bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];
let books = [...bookList];
// Change code below this line
function add(books, bookName) {

books.push(bookName);
return books;

// Change code above this line
}

// Change code below this line
function remove(books, bookName) {
const book_index = bookList.indexOf(bookName);
if (book_index >= 0) {

  books.splice(book_index, 1);
  return books;

  // Change code above this line
  }
}
  **Your browser information:**

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

Challenge: Refactor Global Variables Out of Functions

Link to the challenge:

this?
this is what you shouldn’t do, and what this challenge is about

Well, you have two possible ways of doing this.

  1. One that involves you making a copy of the data (bookList) and modify that.

  2. Or have your functions not alter the original argument, but instead return a new updated list.

If you read carefully the challenge requirements you’ll see this:

The add function should add the given bookName to the end of the array passed to it and return a new array (list)

Focus on the last part: return a new array.

Sure, your code is not modifying the original array, yet is still failing in this requirement, it’s not returning a new list, it’s updating the new copy.
Which is still a mutation. :smile:

Hope this helps :

OK, my code now looks like this - where I copy the array inside both functions instead of doing it once, globally. Now it makes more sense to me.


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


// Change code below this line
function add(bookList, bookName) {
const books = [...bookList];
  books.push(bookName);
  return books;
  
  // Change code above this line
}

// Change code below this line
function remove(bookList, bookName) {
  const books = [...bookList];
  const book_index = books.indexOf(bookName);
  if (book_index >= 0) {

    books.splice(book_index, 1);
    return books;

    // Change code above this line
    }
}

Some feedbacks @ScottyTheBrave.
You are still relying on push and splice, which are all methods that change the original array.

A suggestion would be to use methods that don’t mutate the original array, but instead return a new one all the time. Like conctats, map, filter, reduce (etc…etc).
That way your code can be even shorter.

function add(bookList, bookName) {
  return [...bookList, bookName]
}


function remove(bookList, bookName) {
  return bookList.filter(b => b !== bookName)
}

Also please take a look at how to format your code to make it more readable

Good luck and happy coding :sparkles: