Anyone help me with this ( Refactor Global Variables Out of Functions)

Tell us what’s happening:

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 bookName

// Add your code below this line
function add (bookName) {

bookList.push(bookName);
return bookList;

// 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 (bookName) {
var book_index = bookList.indexOf(bookName);
if (book_index >= 0) {

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

  // 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/80.0.3987.87 Safari/537.36.

Challenge: Refactor Global Variables Out of Functions

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

Sure!
The challenge is saying that we should not alter the value of any gloabally defined variable inside function, instead what should we do is make a new variable out of it inside a function and change it’s value inside function and than return that variable. That way we did not change the globally defined variable. That is the best practice for functional programming.

Coming to what changes we need to make is very simple.

First of all whe we see test cases:

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');

  1. Both add and remove now expects two arguments, one is bookList and second is book to be added.

  2. Now, we should not directly change the booklist but instead we should assign the bookList to new variable and change and return that variable inside function.

So, your both function will look like this:

function add (bookList, bookName) {
  let books = [...bookList];
  books.push(bookName);
  return books;
  
}

function remove (bookList, bookName) {
  let books = [...bookList];  // READ MY NOTE 

  var book_index = books.indexOf(bookName);
  if (book_index >= 0) {

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

Note : We can not do jus - books = bookList, - That will change the value of both book and bookList. when we say book = bookList, we are referring to same values stored in memory so when one will change other wil change as well. when we use spread operator, like above, we are assigning a new space in memory for book. and when we change book it changes the value of only book memory.

Let me know if you would like me to explain further.
I guess you have read about Spread operators in ES6, also you can still google it.

2 Likes

Thank you for the answer. I was just working the same problem. How does the newerBookList and newestBookList inherit the values from newBookList? My solution worked and right now my guess is black magic. Or at least javascript magic…

1 Like

Could you plase copy and paste your code. In the code fomat over here so I can see how it worked. As I don’t have your code I am not able to understan how you defined newerBookList and newestBookList variables, and how you used it.

// 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 bookName

// Add your code below this line
function add (arr, bookName) {
  let newArr = [...arr]; 
  newArr.push(bookName);
  return newArr;
  
  // 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

As the challenge wanted, I only changed the functions so they would not change the global variable.


// Add your code below this line
function remove (arr, bookName) {
  let newArr = [...arr];
  var book_index = newArr.indexOf(bookName);
  if (book_index >= 0) {

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

    // Add your code above this line
    }
}
//Did not change below variables
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');

My question is why does newerBookList have ‘A Brief History of Time’ from newBookList if the global variable doesn’t change?

1 Like

maybe you need to pass something different from booklist as argument of the function
maybe newerBookList needs to derive from newBookList in some way, and not from bookList

2 Likes

I don’t think you understand my question. I’m not asking how to make it work, I already made it work. I am asking why it works the way it does if the global variable doesn’t change. As far as I can tell, the variables do not call upon previous variables. Is it because if the function is called once the function doesn’t reset before it is called again? Is there scope magic going on?

I understand, the thing is that newerBookList doesn’t have "A Brief History Of Time" inside, nor the tests ask for that

newerBookList should equal ["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"] .

var newBookList = add(bookList, 'A Brief History of Time');
console.log(newBookList)
/* printed to the console:
[ 'The Hound of the Baskervilles',
  'On The Electrodynamics of Moving Bodies',
  'Philosophiæ Naturalis Principia Mathematica',
  'Disquisitiones Arithmeticae',
  'A Brief History of Time' ]
*/
var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies');
console.log(newerBookList)
/* printed to the console:
[ 'The Hound of the Baskervilles',
  'Philosophiæ Naturalis Principia Mathematica',
  'Disquisitiones Arithmeticae' ]
*/
var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies');
console.log(newestBookList)
/* printed to the console:
[ 'The Hound of the Baskervilles',
  'Philosophiæ Naturalis Principia Mathematica',
  'Disquisitiones Arithmeticae',
  'A Brief History of Time' ]
*/
1 Like

I see where my brain went wrong. I thought I was going crazy. Thank you

1 Like