Can someone please look at the my understanding of this code and point out any errors and give right explanations as necessary?

[ankurchaulagain]

I found the Object Oriented Programming section kind of difficult so I am not fully confident in my understanding of the code here in the section after it: Functional programming

This was the largest block of code I am having to analyze after geeting used to short snippets so far. So it was kind of very intimidating to the point of wanting to give up, at first glance but after I typed my understanding in the comments here I feel much better about my understanding

Initially I was going to post can someone explain this to me line by line but after after typing it myself I think that won’t necessary as much. However, I would appreciate if someone could check and verify my comments here. [I did solve it by the way] I have added my comments to verify my understanding with you guys.

   **Thank you again for all your support**

// tabs is an array of titles of each site open within the window
var Window = function(tabs) { //This is a constructor right we can create like with new Window? where we pass a value called tabs?
 this.tabs = tabs; // We keep a record of the array inside the object
//This adding a property called tabs to the new window object and assigning it the value of whatever was passed right?
};

// When you join two windows into one window
Window.prototype.join = function (otherWindow) { //we create a prototype of window object here that is all instances of window will have access to the join property which is a function right which takes an argument called otherWindow?
 this.tabs = this.tabs.concat(otherWindow.tabs); //we update the property called tab inside Window object assign it a value of the previous number of tabs and addded with otherWindow.tabs? I don't see otherWindow described anywhere?? Are we just assuming that it is just an object created by the Window constructor?
 return this;
};

// When you open a new tab at the end
Window.prototype.tabOpen = function (tab) { //add property(also called key?) called tabOpen and let all instances of window have access to it right?
 this.tabs.push('new tab'); // Let's open a new tab for now...Looks like we add a string called 'new tab' here to the old array of tabs? How do individual sites like Reddit and all gets added here?
 return this;
};

// When you close a tab
Window.prototype.tabClose = function (index) { //add a property/key and let instances of Window object have access to it or objects created by Window constructor the value of which is a function right? 

 // 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,this.tabs.length); // Get the tabs after the tab

 this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together

 // Only change code above this line

 return this; //return what here? this.tabs? Why not mention return this.tabs? Does this mean return the Window object itself?
};

// Let's create three browser windows
var workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
//create an instance of the window object/using the window constructor?? right?
var socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
//one more window
var videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites
//one more window instance

// Now perform the tab opening, closing, and other operations
//can someone explain these too?

var finalTabs = socialWindow
 .tabOpen() // Open a new tab for cat memes I don't think .property of itself had been taught yet. What is this doing
//is this doing socialWindow.tabOpen() in that case its adding just 'new tab' to the list of tabs right?
 .join(videoWindow.tabClose(2)) // Close third tab in video window, and join
//then socialWindow.tabClose(2) etc but in a shortcut way using . ?
//closes second tab
 .join(workWindow.tabClose(1).tabOpen());
//Merges socialWindow and workWindow after closing the first tab in the workWindow and opening one more tab there???
console.log(finalTabs.tabs); //log the final tabs in the socialWindow right?

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 OPR/76.0.4017.177

Challenge: Understand the Hazards of Using Imperative Code

Link to the challenge:

freeCodeCamp.org

[sanity]

Rather than properties, functions defined in instance or prototype are methods.

otherWindow is just another instance of the Window class. this refers to the instance, which executes code.

So for example in socialWindow.join(videoWindow), in the join method this would refer to socialWindow and otherWindow would refer to argument passed in - videoWindow.

At the same time, returning this allows to chain multiple methods, like for example workWindow.tabClose(1).tabOpen(). Because tabClose method returns this (the instance), the next tabOpen method is called again on the same instance.