know i have a post revolving around but, it’s been 2 days and no one resolved my issue on this and its getting frustrating not understanding the why. so you can close that one if you must. i arealdy completed this challenge using the splice method but logically i dont know why because if you pass the parameter of 2 for tabclose(2), it makes the this.tab.splice(index+1) in the tabclose function into this.tab.splice(3) and well after the first test there there is no more index of 3 so u get an empty array. but when i looked over the hint it somehow said it becomes this.tab.splice(2) , which with that number i can see it passing the challenge but i dunno how it got that number since when index is 2 index+1 = 3. so i dunno how that becamle splice(2). sorry about this but this is really frustrating moving on and not knowing.
**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
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;
};
// 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/92.0.4515.107 Safari/537.36
Challenge: Understand the Hazards of Using Imperative Code
The above code doesn’t pass the test. Could you share the code which you’ve written which passed the test.
The challenge here is to understand the side-effects caused when using methods like splice() which changes the original array.
You already understand that when videoWindow.tabClose(2) is called:
var tabsBeforeIndex = this.tabs.splice(0, index);
<— tabsBeforeIndex = elements at [0] and [1]
this.tabs has been modified and elements at [2] and [3] has been pushed to positions [0] and [1]
var tabsAfterIndex = this.tabs.splice(index + 1);
<— (this.tabs.splice(3)) - as you’ve said, tabsAfterIndex = empty array
The hint says that if splice is being used, then for tabsAfterIndex, the splice index should be just 1 instead of index + 1 as below:
var tabsAfterIndex = this.tabs.splice(1);
The above line will return all the elements except the first element. (as this.tabs has been modified and the element to be removed is currently at position [0])
Also, a better idea would be to use slice instead of splice in the code as it doesn’t alter the original array.
heres what i did to pass theWindow.prototype.tabClose = function ( index) {
// Only change code below this line
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
test
ok so i guess instead of accepting the index +1 we needed to change it to 1. and i can see that passing the challenge
what comfused me was this statement below. it made it sound like splice(index+1)=splice(2). that was what confused me. but i get it we were suppose to change the code entirely.
After second line is executed, tabsAfterIndex should take values starting from index (in this case 2) and remove them from videoWindow array. As we can see that in the current state ( ['Vimeo', 'Vine'] ), videoWindow does not have index 2 so empty array is returned. Final state: tabsBeforeIndex : ['Netflix', 'YouTube'] videoWindow : ['Vimeo', 'Vine'] tabsAfterIndex : []
but on that being said i still dont understand how changing the code to slice will pass the challenge with index +1. because with slice 3 , it starts at the third index and there is no third or 2 index
ok sorry to bother you, i figured it out, i missed the concept that slice will move an element and copy it to a new variable but it never changes the original array. thats where i been missing how does splice(3) doesnt return an empty array. so i since it still has the original array on tabsafterindex, it takes vine removes it copys the value of the array and the next line concatenates that with the previous assignment which gives returns the aray with youtube netflix and vine. which we wanted in the exercise.