Functional Programming: Understand the Hazards of Using Imperative Code - simpler solution

Tell us what’s happening:
The proposed solution seems convoluted. It can be solved with one simple line, no splicing the array and contacting it. One simple splice does the job.

 this.tabs.splice(index,1);

It removes one item at the index position, done.
Or am I missing something as to why we are going through all those steps.

Your code so far


// tabs is an array of titles of each site open within the window
var Window = function(tabs) {
 this.tabs = tabs; // We keep a record of the array inside the object
};

// When you join two windows into one window
Window.prototype.join = function (otherWindow) {
 this.tabs = this.tabs.concat(otherWindow.tabs);
 return this;
};

// When you open a new tab at the end
Window.prototype.tabOpen = function (tab) {
 this.tabs.push('new tab'); // Let's open a new tab for now
 return this;
};

// When you close a tab
Window.prototype.tabClose = function (index) {

 // Only change code below this line

 this.tabs.splice(index,1);

 // Only change code above this line

 return this;
};

// Let's create three browser windows
var workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
var socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
var videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites

// Now perform the tab opening, closing, and other operations
var finalTabs = socialWindow
 .tabOpen() // Open a new tab for cat memes
 .join(videoWindow.tabClose(2)) // Close third tab in video window, and join
 .join(workWindow.tabClose(1).tabOpen());
console.log(finalTabs.tabs);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Understand the Hazards of Using Imperative Code

Link to the challenge:

This exercise IMO is a quite bad example of functional programming.
In functional programming you generally should avoid side effects (splice() mutates array it’s called on, which is a side effect).
Your code works and it’s perfectly ok, but it’s not pure functional.
Functional approach would be using slice(), which returns new array.

Gotcha.
I do agree with you, the exercise failed to prove me that functional programing was a better option in this situation. Maybe the exercise could be modified to “corner” you into a situation where functional programming really makes a difference. Maybe an exercise where one function calls for the array and returns a modified array, followed by a second function that calls for the same original array and would give a different result wether it took the original array or the modified one. Like this you would easily identify the error (second function doesn’t behaves as expected because the array was mutated) and you could identify the fix (not mutating the original array, but rather, create a new modified array)?
Also, in its current state, I feel like most of the lesson is actually in the Hints than in the lesson itself.

The guide/hint page does suggest that you use slice instead of splice.

But I do find this example very convoluted and think you can show the point of not mutating arrays much clearer and with much less code.

1 Like