diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.english.md
index 1262e2a8e2..485469d55c 100644
--- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.english.md
+++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.english.md
@@ -14,12 +14,16 @@ JavaScript offers many predefined methods that handle common tasks so you don't
Consider the scenario: you are browsing the web in your browser, and want to track the tabs you have opened. Let's try to model this using some simple object-oriented code.
A Window object is made up of tabs, and you usually have more than one Window open. The titles of each open site in each Window object is held in an array. After working in the browser (opening new tabs, merging windows, and closing tabs), you want to print the tabs that are still open. Closed tabs are removed from the array and new tabs (for simplicity) get added to the end of it.
The code editor shows an implementation of this functionality with functions for tabOpen()
, tabClose()
, and join()
. The array tabs
is part of the Window object that stores the name of the open pages.
+
+
+
## Instructions
-Run the code in the editor. It's using a method that has side effects in the program, causing incorrect output. The final list of open tabs should be ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']
but the output will be slightly different.
-Work through the code and see if you can figure out the problem, then advance to the next challenge to learn more.
+Examine the code in the editor. It's using a method that has side effects in the program, causing incorrect behaviour. The final list of open tabs, stored in finalTabs.tabs
, should be ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']
but the list produced by the code is slightly different.
+
+Change Window.prototype.tabClose
so that it removes the correct tab.
## Tests
@@ -27,8 +31,8 @@ Work through the code and see if you can figure out the problem, then advance to
```yml
tests:
- - text: Move ahead to understand the error.
- testString: '' # assert(true, 'Move ahead to understand the error.');
+ - text: finalTabs.tabs
should be ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']
+ testString: assert.deepEqual(finalTabs.tabs, ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab'])
```
@@ -59,8 +63,63 @@ Window.prototype.tabOpen = function (tab) {
// 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); // get the tabs after 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;
+ };
+
+// 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);
+```
+
+
+
+
+
+
+
+## Solution
+
+
+```js
+// 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) {
+ var tabsBeforeIndex = this.tabs.slice(0, index); // get the tabs before the tab
+ var tabsAfterIndex = this.tabs.slice(index + 1); // get the tabs after the tab
this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // join them together
return this;
@@ -76,20 +135,5 @@ 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());
-
-alert(finalTabs.tabs);
-```
-
-
-
-
-
-
-
-## Solution
-
-
-```js
-// solution required
```