Using slice doesn't work : Understand the Hazards of Using Imperative Code

JavaScript
1

Tell us what’s happening:

So as far as i can follow the code i need to change:

[‘FB’, ‘Gitter’, ‘Reddit’, ‘Twitter’, ‘Medium’, ‘new tab’, ‘Netflix’, ‘YouTube’, ‘GMail’, ‘Work mail’, ‘Docs’, ‘freeCodeCamp’, ‘new tab’] .

to become

‘FB’, ‘Gitter’, ‘Reddit’, ‘Twitter’, ‘Medium’, ‘new tab’, ‘Netflix’, ‘YouTube’, ‘Vine’, ‘GMail’, ‘Work mail’, ‘Docs’, ‘freeCodeCamp’, ‘new tab’

So the issue is with vine
To do this i need to change the splice function since it’s now taking away the part that should not be the case
I tested this onto w3schools to remove the part it did not need and it worked but when i added it to my code it did not work why? or am i not suppose to use slice at all and use pop/split instead?

Your code so far


TEST CODE 
<!DOCTYPE html>
<html>
<body>

<p>Click the button to add and remove elements.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var test = ["FB", "Gitter", "Reddit", Twitter", "Medium", "new tab", "Netflix", "YouTube", "GMail", "Work mail", "Docs", "freeCodeCamp", "new tab"];
document.getElementById("demo").innerHTML = test;

function myFunction() {
  test.splice( 1, "Vine");
  document.getElementById("demo").innerHTML = test;
}
</script>

</body>
</html>
from: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_splice1

FCC code



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

 var tabsBeforeIndex = this.tabs.splice(1, "Vine"); // 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;
};

// 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Understand the Hazards of Using Imperative Code

Link to the challenge:

2