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
One that involves you making a copy of the data (bookList) and modify that.
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.
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
