Functional Programming - Refactor Global Variables Out of Functions

[0wis]

Tell us what’s happening:
Hello the FCC community !

I think there is still a concept that I do not understand and I hope that by asking the community it will help others.
I have read the suggested advice about passing by value and reference. It reminded me of something I learned in Java a long time ago but it is still not clear how to act on it. I understand that if I declare a new variable in my function ( a local “b”) as an object and assign it the value of an other object (let’s say a global “a”), it will only a “pass by reference” and the object will not be copied. Therefore, any change on “b” will have an effect on “a”, something we don’t want in pure functions.

Here, we deal with arrays, which are object in JS. In the solutions, it is proposed use the spread syntax ([…arr]) to effectively duplicate the initial array. Nice for the case when we have arrays, I had forgotten about this syntax, I will try to remember it now.
However, I knew array were objects so I tried various things before looking to solutions. And if we generalize the “problem” of this exercise, the question I ask myself is “How to deal with global objects in pure functions ?”. I searched on MDN and the only solution I found was using deep copy. It seems a little far fetched for something I will have to use in every pure function dealing with objects. Is there any other way ? Or something I did not get ?
Also, I do not understand why the spread syntax works. All the other techniques did not, as it should if I understood the idea of a shallow copy ( I tried “Object.assign()” and “Array.from()”)

TL;DR: How can I create a local variable to deal with objects in pure functions ?

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

// Change code below this line
function add(list,bookName) {
  let newList = list;
  newlist.push(bookName);
  return newlist;
  
  // Change code above this line
}

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

    newList.slice(book_index, 1);
    return newList;

    // Change code above this line
    }
}
console.log(bookList)
console.log(remove(bookList,'The Hound of the Baskervilles'))

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0

Challenge: Functional Programming - Refactor Global Variables Out of Functions

Link to the challenge:

freeCodeCamp.org

[camperextraordinaire]

The spread syntax still will only work for shallow copying of array. You can also use the spread syntax for shallow copying of objects.

const obj = {a: 1, b: 2, c: 3};
const objCopy = { ...obj };
objCopy.a = 10;
console.log(obj.a); // displays 1
console.log(objCopy.a); // displays 10

For deep copying of arrays or objects, most will use a library that specializes in such things. The MDN article you referenced also gives other ways of making deep copies, but the JSON.stringify approach only works when property values are specific data types.

[0wis]

Thanks for your quick answer !
I did not get it at first, I thought shallow copy only passed reference and then I read all the doc again.
If I understand well, shallow copy pass value, but only for the top level properties. Here it works as we do not have lower level properties. Otherwise the deep copy would be needed. I’ll know it when I will need it now ! And I’ll know I can find a library to do it. Thanks again !
I managed to solve the challenge using Object.assign(), I guess it is a third possible and more general solution :

Solution 3

`// 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(arr, bookName) {
let newArr = ;
Object.assign(newArr, arr);
console.log(newArr);
newArr.push(bookName);
return newArr;

// Change code above this line
}

// Change code below this line
function remove(arr, bookName) {
let newArr = ;
Object.assign(newArr, arr);
const book_index = bookList.indexOf(bookName);
if (book_index >= 0) {

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

// Change code above this line
}

}
console.log(add(bookList,“Hello World”));
console.log(remove(bookList,“The Hound of the Baskervilles”));`