Previous challenge

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 in the tabclose function into 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 , 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
   **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

Link to the challenge:

Hi @fredsmith27182 ,

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.

A bit lengthy explanation, hope it helps!

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

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.

  1. 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.

1 Like

thanks alot for the help


Yeah the concepts are a bit confusing but glad that you got the gist.

You could do a console.log of a splice and slice method plus the original array to get a better idea…
for example:

let array1 = [1,2,3,4];
let array2 = array1.splice(2);
console.log(array1, array2)

Similarly with slice()…helps make it clearer

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.