Functional Programming - Understand the Hazards of Using Imperative Code

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

// tabs is an array of titles of each site open within the window
const 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

  const tabsBeforeIndex = this.tabs.splice(0, index); // Get the tabs before the tab
  const 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
const workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
const socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
const videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites

// Now perform the tab opening, closing, and other operations
const 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 YaBrowser/23.11.0.0 Safari/537.36

Challenge Information:

Functional Programming - Understand the Hazards of Using Imperative Code

What should I do here? The code is huge, what is it?

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like
4

How else can you describe it? If something is not clear, what is this huge code? What should you do in this code? And How? This is the only low-rated site where nothing is clear, will changes be made to simplify tasks?

5

Sorry, I missed what you wrote originally, it was in a weird spot at the bottom of the post. Next time try to keep you questions in this section:

Tell us what’s happening:

Describe your issue in detail here.

I understand this step has a lot of text and code and it could look overwhelming. The code is a simulation of a web browser handling different tabs. It’s described here:

Consider the scenario: you are browsing the web in your browser, and want to track the tabs you have opened. Let's try to model this using some simple object-oriented code.

A Window object is made up of tabs, and you usually have more than one Window open. The titles of each open site in each Window object is held in an array. After working in the browser (opening new tabs, merging windows, and closing tabs), you want to print the tabs that are still open. Closed tabs are removed from the array and new tabs (for simplicity) get added to the end of it.

The code editor shows an implementation of this functionality with functions for tabOpen(), tabClose(), and join(). The array tabs is part of the Window object that stores the name of the open pages.

Examine the code in the editor. It’s using a method that has side effects in the program, causing incorrect behaviour. The final list of open tabs, stored in finalTabs.tabs, should be ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab'] but the list produced by the code is slightly different.

Change Window.prototype.tabClose so that it removes the correct tab.

There is updates being made to the curriculum all the time and valid, well-explained issues are considered and improved in future updates.

If you take some time to consider the code presented make a thoughtful question about something specific you will have a much better chance of getting your questions answered and learning.

You can also try searching the forum for people who may have had similar questions.
https://forum.freecodecamp.org/search?q=Hazards%20of%20Using%20Imperative%20Code

Finally, if you click “Get Help” and then “Get a Hint” it will lead you to this guide that might help you if you are really stuck: https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-understand-the-hazards-of-using-imperative-code/301241

I would try editing those three lines indicated first:

// Only change code below this line

  const tabsBeforeIndex = this.tabs.splice(0, index); // Get the tabs before the tab
  const 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

Reading and understanding the code will be a much better learning experience.

Best of luck.

6

How can they be edited if there were no examples with them? I personally don’t understand this approach

7

If you want smaller steps, I’d try the new curriculum that’s currently in Beta

8

Yes, I went into beta there and am trying, because I can’t understand anything here)

9

I agree this step is not great. Way too much text and the requirement is unclear.

Would you believe it if I told you all it is asking you to do is delete 1 letter from the two methods inside the tabClose function?

Basically, all you have to do is change the mutating splice method to the non-mutating slice method.

10

I don’t even understand which letter needs to be deleted), since there are not enough examples for these tasks, it’s sad that everything is not thought out.

12

Read this again carefully. You are going from splice to slice. What letter do you remove from splice?