Why are we using this instead of this.tab?

[shahid.alam57]

Tell us what’s happening:
i’m facing trouble understanding the following:
why are we returning ‘this’? is there any problem if we don’t return the full tab but the array of tabs itself?

Also, do we HAVE to replace this.tabs?

   **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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.115 Safari/537.36

Challenge: Understand the Hazards of Using Imperative Code

Link to the challenge:

freeCodeCamp.org

[DanCouper]

@shahid.alam57

why are we returning ‘this’?

It’s how you get method chaining in JavaScript. It lets you do the following:

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

If you don’t return this, the return value will be undefined.

undefined.join() isn’t a function.

As another example, the most commonly encountered use of chaining:

Array.prototype.map = function (cb) {
  // Do map stuff
  return this;
}

Array.prototype.filter = function (cb) {
  // Do filter stuff
  return this;
}

[1,2,3].map(v => v * 2).filter(v => v % 2 === 0);

[shahid.alam57]

so this refers to the function with both tabs instead of the arrays?

[snowmonkey]

this refers to the execution context (the thing that actually calls the function). Because these functions are defined in theWindow, when something is created using the Window constructor it gains those functions - and when that instance of Window calls one of those methods, that particular instance is this.

So when one of our functions runs, and it returns our particular instance, the function returns the thing that called it.

[shahid.alam57]

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

so here, join() is called by social window, so will .tabClose() return the socialWindow back after joining the new tabs, right? or ami i wrong here?
thank you for the help

[snowmonkey]

You’re exactly right. When it is called from within the socialWindow, that’s what it will return, the particular instance.