Understand the Hazards of Using Imperative Code- Check understanding before moving on

My confusion arises from the part below:

var finalTabs = socialWindow
                    .tabOpen() 
                    .join(videoWindow.tabClose(2)) 
                    .join(workWindow.tabClose(1).tabOpen());

alert(finalTabs.tabs);

This is the first time FCC throws this style of notation at learners without explanation.

Is this equal to:

socialWindow.tabOpen().join(videoWindow.tabClose(2)).join(workWindow.tabClose(1).tabOpen());

If so, is it different to:

socialWindow.tabOpen();
socialWindow.join(videoWindow.tabClose(2));
socialWindow.join(workWindow...

etc.

Another if so, can someone give an explanation of the differences please?

I know I’m being very pedantic and have an estimation of what I think it is but there’s no point moving on the next step and confusing myself further if my understanding now is incorrect. Many thanks in advance to anyone being patient…

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

alert(finalTabs.tabs);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code/

Both are equivalent to the first example.

In the first example, JavaScript chains the operations together; it ignores the white space on each line and processes each operation in turn.

In the second example, the operations are still chained together but on one line.

The third example is equivalent to the result from the chaining syntax, except that the operations are broken up separately (line-by-line).

2 Likes

All of them being equivalent = me happy

Thank you

You are welcome. :slight_smile:

1 Like