Understand the Hazards of Using Imperative Code-selective bug?

JavaScript
1

Tell us what’s happening:
I understand why ‘vine’ does not appear, but why doesn’t this bug affect ‘workWindow’ too?
If i’m understanding correctly ‘work mail’ shouldn’t be included in ‘finalTabs’. Why is it?

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) {
  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

  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // join them together 
  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);
2

I came here to ask the same question

3

They are both bugged, you just don’t see it for the mail when using 1, try removing ‘Work mail’ (2) and look at the output (["GMail", "Inbox", "freeCodeCamp"]).

I would suggest using the browser console and logging out each of the operations, see if you can make sense of it. Also, try changing the indexes and look at the differences.

Summary 
// everything is declared using var so it's easier to work within the console

var videos = ['Netflix', 'YouTube', 'Vimeo', 'Vine'];
var vidIndex = 2;

var tabsBeforeIndex = videos.splice(0, vidIndex); // get the tabs before the tab
console.log('tabsBeforeIndex', tabsBeforeIndex);
console.log('videos after first splice', videos);

var tabsAfterIndex = videos.splice(vidIndex); // get the tabs after the tab
console.log('tabsAfterIndex', tabsAfterIndex);
console.log('videos after second splice', videos);

videos = tabsBeforeIndex.concat(tabsAfterIndex); // join them together 
console.log('videos after concat', videos);


var mail = ['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp'];
var mailIndex = 1;

var tabsBeforeIndex = mail.splice(0, mailIndex); // get the tabs before the tab
console.log('tabsBeforeIndex', tabsBeforeIndex);
console.log('mail after first splice', mail);

var tabsAfterIndex = mail.splice(mailIndex); // get the tabs after the tab
console.log('tabsAfterIndex', tabsAfterIndex);
console.log('mail after second splice', mail);

mail = tabsBeforeIndex.concat(tabsAfterIndex); // join them together 
console.log('mail after concat', mail);

Considering the code is modifying the original array, as far as I can tell, it might as well do this (index and delete count).

Window.prototype.tabClose = function (index) {
  this.tabs.splice(index, 1);
  return this;
};

Or using slice instead and the way the code worked otherwise (tabs before/after and concat).

Window.prototype.tabClose = function (index) {
  var tabsBeforeIndex = this.tabs.slice(0, index);
  var tabsAfterIndex = this.tabs.slice(index+1);

  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex);
  return this;
};

I think both of those should work as intended.

1 Like