On functional programming, the original data must not be modified. You should not produce an output by modifying an input.
Hence (courtesy of freeCodeCamp), the following would produce side effect:
https://jsfiddle.net/c79nqfh5/2/
var Window = function(tabs) {
this.tabs = tabs; // We keep a record of the array inside the object
};
// When you close a tab
Window.prototype.tabClose = function (index) {
// Only change code below this line
var tabsBeforeIndex = this.tabs.splice(0, index); // Get the tabs before the tab
var tabsAfterIndex = this.tabs.splice(index + 1); // Get the tabs after the tab
this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together
// Only change code above this line
return this;
};
var videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites
console.log(videoWindow.tabClose(2).tabs);
Output:
["Netflix", "YouTube"]
The output is incorrect, splice modifies the this.tabs state that tabsAfterIndex's expression relies on.
One way to solve the problem is to create a copy for this.tabs.
https://jsfiddle.net/c79nqfh5/3/
var tabsBeforeIndex = [...this.tabs].splice(0, index); // Get the tabs before the tab
var tabsAfterIndex = [...this.tabs].splice(index + 1); // Get the tabs after the tab
this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together
Output:
["Netflix", "YouTube", "Vine"]
But we should not do that if we can use a function that don't destroy the variable it operates on. In this case, we can use the slice function instead of splice.
https://jsfiddle.net/c79nqfh5/5/
var tabsBeforeIndex = this.tabs.slice(0, index); var tabsAfterIndex = this.tabs.slice(index + 1); this.tabs = tabsBeforeIndex.concat(tabsAfterIndex);
Output:
["Netflix", "YouTube", "Vine"]
If using ES6 or TypeScript, it can be improved further:
this.tabs = [...this.tabs.slice(0, index), ...this.tabs.slice(index + 1)];
No comments:
Post a Comment