Hazards of Using Imperative Code (.slice or .splice)

JavaScript
1

I believe there are some discrepancies in the explanations. I don’t want to think that. Was hoping for a better conclusion. Pls let me know if I am getting this wrong.
Solution 1:

var tabsAfterIndex = this.tabs.splice(index);

should be replaced with

 var tabsAfterIndex = this.tabs.splice(1);

The original code here is this

var tabsAfterIndex = this.tabs.splice(index + 1);// {discrepancy)

As I write this the problem is solved simply by removing the “P” from splice.
l

var tabsBeforeIndex = this.tabs.splice(0, index);

does NOT return the tabs before. It returns the closed tab followed by the “after” elements. I don’t see “imperative/splice() is hazardous…creates side effects”…the code is written for slice and they wrote splice instead (discrepancy because the actual arguments are incorrect-they work for slice). After passing the challenge I decided to experiment…

 var tabsOmittingIndex = this.tabs.splice(index, 1); 
  this.tabs = tabsOmittingIndex; // no reason to join, right?

  // Only change code above this line

  console.log(this);// logs { tabs: [ 'Vimeo' ] }
TypeError: Cannot read property 'tabs' of undefined

TOTALLY unanticipated. I’m returning the “cut-out”. the donut hole just like the solution was advocating. Maybe this is because I am defining a new var? Maybe this is what they are talking about? SPLICE acting like SLICE?

If, for example,

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.splice(0, 2);
  document.getElementById("demo").innerHTML = fruits;
}
</script>// returns Apple,Mango

My guess is that we are assigning the removed portion to the new var then creating another “after” var to remove the closed tab with

 var tabsAfterIndex = this.tabs.splice(1);

Window.prototype.tabClose = function (index) {

 // Only change code below this line

 var tabsOmittingIndex = this.tabs.splice(index, 1); 
 this.tabs = tabsOmittingIndex; // already Joined

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Understand the Hazards of Using Imperative Code

Link to the challenge:

2

the difference is:

  • splice change the array on which it is used, and return the changed elements
  • slice instead just return a new array and doesn’t have side effects

Here it is the side effects that is trying to make you look for
it’s best practice to have code that does just one thing and doesn’t have side effects.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

3

Thanks for the reply,
I am aware of backticks but not the (</>).
I spent a long time on that one and a while posting too. Asking the questions helps me ferret it out. It was clearly written with .slice(), I am certain. They even forgot to change the arguments and misquoted it in the solutions. It made me question myself to the point where I spent hours in the W3 schools site plugging in everything over and over…but I got those 2 functions DOWN. Just so weird that it was doing the exact opposite…is it odd to pass ‘Index’ as an argument or parameter for a function that uses ‘Index’ in a different way?

var tabsBeforeIndex = this.tabs.splice(0, index);

array.splice(index, how many, item1, ....., itemX)

I guess I’ve seen a few where they define the function…like Objects have prototypes

swan = new Bird```// lol- just thinking out loud.

Thanks for the input