Refactor Global Variables Out of Functions (need help)

Tell us what’s happening:
I do not understand why the spread operator has to be used when
providing an array as an argument for a function.
Why couldn’t this work below without using the spread operator?

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"];

// Change code below this line
function add (arr, bookName) {
  var Array1 = []; //no spread operator
  Array1 = arr;
  Array1.push(bookName);
  return Array1;
  
  // Change code above this line
}

// Change code below this line
function remove (arr, bookName) {
  var book_index = bookList.indexOf(bookName);
  if (book_index >= 0) {
    var Array2 = []; //no spread operator
    Array2 = arr;
    Array2.splice(book_index, 1);
    return Array2;

    // Change 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; rv:81.0) Gecko/20100101 Firefox/81.0.

Challenge: Refactor Global Variables Out of Functions

Link to the challenge:

1 Like

Right. This is a problem with understanding how variables are saved and passed.

So, when you pass in bookList and it gets accepted as arr in your function, it is not a new array. This is a very important concept and a hard one in the beginning. What you are passing in as an address to an array. So there is still only one array but both bookList and arr now point to the same place in memory. So any change to arr will also change bookList. So, you have to make a copy, change that and then return that. How do you make a copy of an array?

// this will not work
var newArray = oldArray;

This doesn’t work for the same reason - you’re just copying the reference (address). So, you can copy it like this in ES6:

var newArray = [...oldArray];

or the old way is:

var newArray = oldArray.slice();

There are other ways, but those are two common ones. Now you can change that new array and it won’t affect the original.

Yes, this is confusing. A lot of people get confused about this at first. I recently wrote to another camper on this exact subject here. I would recommend reading that and seeing if that clears things up.

1 Like

Thank you for your response.

Sometimes I just don’t know the question I am asking because I do
not understand what knowledge I am missing to understand the answer.

Thank you for understanding my question that I didn’t know how to ask.

I am happy you responded as you have helped me understand
the inner workings and implications for Javascript that i did not know.

Because of your answer, I would like to suggest you become a teacher.

Sometimes I just don’t know the question I am asking because I do
not understand what knowledge I am missing to understand the answer.

1000% understand. We’re all learning here, we’re just on different parts of the path.

Because of your answer, I would like to suggest you become a teacher.

I actually used to be. And I get to do some teaching here.