Refactor Global Variables Out of Functions why wrong?

JavaScript
1

this is my accepted code(right)


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

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

function remove (bookList,bookName) {
let book = [...bookList];
let n=book.indexOf(bookName);
  if ( n>= 0) {
    
    book.splice(n,1);
    // console.log(book);
return book;    
    }
}

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.clear();
// console.log(book);

console.log(bookList);

but if i try to write it like this test cases are failed as they show the original bookList value must be same whereas nothing is changed in original value acc. to me as its value is passed as argument and all the changes occur to that variable(book)[WRONG]

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

function add (book,bookName) {
book.push(bookName);
console.log(book);
   
  return book;
}

function remove (book,bookName) {
let n=book.indexOf(bookName);
  if ( n>= 0) {
    
    book.splice(n,1);
return book;    
    }
}

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

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

2 Likes
2

I’m not 100% sure what you’re saying but I think the difference is that the challenge does not want you to change the original array while your second try is changing the original array.

The challenge wants (as I think you know) for your code to create new arrays and return them instead.

3

yes i know that but i want to know why this second approach is wrong…

4

I’m going to quote a challenge called “Functional Programming: Avoid Mutations and Side Effects Using Functional Programming”. In that previous challenge they said:

One of the core principle of functional programming is to not change things. Changes lead to bugs. It’s easier to prevent bugs knowing that your functions don’t change anything, including the function arguments or any global variable.

3 Likes
5

If you are interested in reading more about this, you can find articles on coding form (and bad coding form) online.
For eg. Here’s one: http://www.learncpp.com/cpp-tutorial/4-2a-why-global-variables-are-evil/
(which talks about C++ and how lazy coders may just want to change the value of the global variable from their functions and how that can cause issues)
there are other articles out there for python and other languages so I think what this challenge is doing is distilling that learning for us so we can learn it simply and move on (ie. don’t change things in your function that are not local to your function).

1 Like
6

he actually meant , why his 2nd approach is wrong. Because he is only modifying the parameters variables methods and not the global variable.

He is looking for a explanation for his second method , not about a explanation about global variables, he know what it is.

I too got the same mistake as his second mistake even though you are only modifying the method parameters, which should be a copy of the argument variable

update*

Ok i think i understand now , i got confuse with other languages like java because those parameters are passed by value. Whereas in javascript u are referencing directly to the variable. pass in , in the global context(hope i am right).

so what i did was

var newArray = arr.slice()

which copies to array directly and storing it in the variable

1 Like
7

Thanks for trying to clarify. But even if the original question is not about the global variable, in the end his code is still modifying a variable passed in to it unexpectedly. What the ideal function should do is not modify anything that doesn’t belong to it (that is, since the variable doesn’t belong to it because it was declared external to its scope, it should not change it).
This is very good advice and will keep your code clean for the day when someone else has to maintain it.

1 Like
8

thanks i got the answer this was happening because objects and arrays are passed by reference.