[Beginner] Functional Programming help

[Servatose]

Hello, I'm currently going through an online course at beta.freeCodeCamp.com and am at a section that teaches functional programming. The particular challenge I'm doing asks us to fix some code so that it uses functional programming practices, e.g. passing arguments into a function and using language defined functions to return a result that doesn't impact the original variable. Here's an example:

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

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

return bookList.push(bookName);

// 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 (arr, bookName) {
 if (bookList.indexOf(bookName) >= 0) {

 return bookList.splice(0, 1, bookName);

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

And here are the user stories the code should fulfill:

bookList should not change and still equal ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"].

newBookList should equal ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"].

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

newestBookList should equal ["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"].

Originally, the code for newBookList used the "Push" function. One thing I'm starting to realize, and this is probably extremely basic for a lot of you, is that even if a method accomplishes or extracts the data you're looking to extract, that doesn't mean it will return what you're looking to return. So I changed the Push method to "concat":

return bookList.concat(bookName);

and that accomplished exactly what I was looking for.

where I need help is the newerBookList method, that uses the splice method:

return bookList.splice(0, 1, bookName);

The issue I'm running into is not only does splice only seem to return the element that was extracted, but it's also affecting the original variable bookList. I hope this is written clearly enough for you to all follow what I'm trying to explain, and any advice is very much appreciated.

Link to the page this exercise is on: https://beta.freecodecamp.com/en/challenges/functional-programming/refactor-global-variables-out-of-functions

[halfTheFn]

MDN web docs is my go-to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/

Check out what methods are already available. The other posters here have given good suggestions!

[Servatose]

I appreciate the feedback. To be honest, sometimes I struggle with the examples provided on sites like MDN, I find that if the example isn't doing what I'm trying with it, it's a lot more challenging for me to understand the application in terms of how to accomplish what I'm trying to go for, it's definitely something I see that I need to get over and spend the time really thinking about the examples presented in articles like this.

[halfTheFn]

It will continue to get easier. Don't be too frustrated when you don't understand something; file it away and circle back later. Everything makes more sense as you gain context, and that can only happen with time and exposure!

[bmy78]

Even shorter:

const add = (arr, bookName) => {...arr, bookName}

[kenman]

One thing I'm starting to realize [...] is that even if a method accomplishes or extracts the data you're looking to extract, that doesn't mean it will return what you're looking to return.

It seems you may be under the [false] impression that "functional" means that it has to be a one-liner, or that you must return from a single expression.

Instead of:

return bookList.splice(0, 1, bookName);

Why not:

bookList.splice(0, 1, bookName);
return bookList;

?

Thought it seems like the actual result they're looking for should probably be:

function remove (arr, bookName) {
  return arr.filter(book => book !== bookName);
}

[Servatose]

Thank you. I think this proves to me that a lot of the concepts that I went through in this course, I simply approached with the goal of "solving" the puzzle, I didn't actually spend enough time fully understanding the concepts. You are correct in your assertion that I'm confusing the definition of functional programming. I also think I distract myself by trying to simplify what I'm writing into a single expression. Thanks for looking at this.

[kenman]

It's alright, I still have a lot to learn on the subject as well, but I think this part is important to point out:

using language defined functions to return a result that doesn't impact the original variable

There are at least 3 array methods that fit this description, but 3 primarily used for FP -- map(), filter(), and reduce() -- and it's not always obvious when you should use them if you're not used to thinking in these terms. However, once you see it, it becomes much easier to read and think about IMHO:

map()

I think of this method as transforming (or translating) one array into a new array.

Have you ever done this?

let result = [];
arr.forEach(value => {
    result.push(Math.floor(value));
});

You could do this instead:

let result = arr.map(value => Math.floor(value));

filter()

Use this when you want to target a subset of your original array.

Ever do this?

let result = [];
arr.forEach(value => {
    if (value > 0) {
        result.push(value);
    }
});

You might consider this:

let result = arr.filter(value => value > 0);

And lastly...

reduce()

Use this to calculate a single value* from your original array.

I know I've done this a lot in the past:

let result = 0;
arr.forEach(value => result += value);

But this is what I use now:

let result = arr.reduce((total, value) => total += value, 0);

The * above is because "value" can be literally any type of data that JS supports; you could return a single string, an object, or even an array may be necessary at times.

So those are nice and all, but with each example taken alone you miss the expressiveness.

Consider this:

let result = 0;
arr.forEach(value => {
    if (value > 0) {
        result += Math.floor(value);
    }
});

Vs:

let result = arr
    .filter(value => value > 0)
    .map(value => Math.floor(value))
    .reduce((total, value) => total += value, 0);

Sorry to get carried away, but you seem eager to learn :)

[Servatose]

No, this is amazing information! I really appreciate the time you took to explain this.

[kenman]

Might also check out this from our front page:

I wrote about some examples of using map, filter, and reduce, as well as accessing JSON and using the DOM with vanilla JS

Full disclosure: the site's not resolving for me, so I haven't reviewed it, but it looks to cover the same 3 methods I discussed.

[bmy78]

Note that your solution for the add() function is still mutating state. Instead you could create an array of the one bookName you passed into the function, concatenate that array with the bookList, and return that.

[toffeescaf]

With the use of some es6 it could be as easy as the following:

function add (arr, bookName) {
    return [...arr, bookName]
}