Functional Programming - Understand the Hazards, Imperative Code

[lindyscodes]

Tell us what’s happening:
Describe your issue in detail here.

Hi there! This problem was really difficult for me and I’m trying to wrap my head around how to get to the answer. I’ve left everything as it is in the original challenge, but I was working with altering the “Tabs Before” and “Tabs After” constants. After working for a while, I checked out the linked FCC Guide to get to the answer/tips, and I’m lost on the theory of how the answer is valid.

The guide describes this as being the missing link:

 const tabsAfterIndex = this.tabs.splice(index + 1);

//replaced with//

 const tabsAfterIndex = this.tabs.splice(1);

I’m super lost here because I know that splicing inherently changes/mutates arrays, and that’s the issue. First, when we run the Tabs Before constant, it splices the array like so: this.tabs.splice(0, index).

That means that the original video array which was [Netflix, Youtube, Vimeo, Vine] has now been altered to be the new array, [Netflix, Youtube] - we spliced it starting at 0 [Netflix], ended with our value to delete [index = 2, which is Vimeo], and that means that this selection is what our new array is now. ‘Vine’ can’t be there in that list, that array got mutated via splice.

I’m lost because the solution hints/says that we need to simply change the Tabs After Index constant to start at index of 1. But that doesn’t make sense, right? Because in that new, spliced up array, there’s only [Netflix, Youtube]. And if we start with Youtube and log… there’s nothing after it. There’s no Vine string to go and log in the array.

I hope I’ve explained how this is just really confusing me, I just don’t get how changing that one line of code to start at an index value (that theoretically can’t even be there) even works… Maybe it’s obvious, but I’m needing some help and wanted to ask! Thank you all so much, these problems can be pretty tricky and I appreciate it.

   **Your code so far**

// tabs is an array of titles of each site open within the window
const 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

 const tabsBeforeIndex = this.tabs.splice(0, index); // Get the tabs before the tab
 const 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
const workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
const socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
const videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites

// Now perform the tab opening, closing, and other operations
const 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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Functional Programming - Understand the Hazards of Using Imperative Code

Link to the challenge:

freeCodeCamp.org

[lasjorg]

Can you narrow down your question a bit I’m not sure I understand where the confusion is.

All you have to do is to change splice to the non-mutating very similar array method. In fact, the names are so similar that often people can’t remember which is which.

[ilenia]

I have added a few console.logs for the original situation

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

  // Only change code below this line
console.log({index, 'this.tabs': this.tabs})
  const tabsBeforeIndex = this.tabs.splice(0, index); // Get the tabs before the tab
  console.log({tabsBeforeIndex, 'this.tabs': this.tabs})
  const tabsAfterIndex = this.tabs.splice(index + 1); // Get the tabs after the tab
console.log({tabsAfterIndex, 'this.tabs': this.tabs})
  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together
  console.log({'this.tabs': this.tabs})
  console.log('\n')

  // Only change code above this line

  return this;
 };

Two different situations for this
Notice that more tabs are closed than expected.

{ index: 2,
  'this.tabs': [ 'Netflix', 'YouTube', 'Vimeo', 'Vine' ] }
{ tabsBeforeIndex: [ 'Netflix', 'YouTube' ],
  'this.tabs': [ 'Vimeo', 'Vine' ] }
{ tabsAfterIndex: [], 'this.tabs': [ 'Vimeo', 'Vine' ] }
{ 'this.tabs': [ 'Netflix', 'YouTube' ] }


{ index: 1,
  'this.tabs': [ 'GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp' ] }
{ tabsBeforeIndex: [ 'GMail' ],
  'this.tabs': [ 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp' ] }
{ tabsAfterIndex: [ 'Docs', 'freeCodeCamp' ],
  'this.tabs': [ 'Inbox', 'Work mail' ] }
{ 'this.tabs': [ 'GMail', 'Docs', 'freeCodeCamp' ] }

Try to make the change said in the guide

Try also to look at how splice work

Array.prototype.splice() - JavaScript | MDN

[lindyscodes]

This was supremely helpful, logging everything in the console made so much sense. A huge thank you to you!!!