Slice() and splice()

[heroisaprinciple]

Hi! I have a question. Why do we use slice? I understand the difference between slice() and splice() in theory but now I am stuck. I would be grateful if you help.

This part of the code:

 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

should be replaced with:

 var tabsBeforeIndex = this.tabs.slice(0, index); // get the tabs before the tab
 var tabsAfterIndex = this.tabs.slice(index+1);

// 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.slice(0, index); // Get the tabs before the tab
 var tabsAfterIndex = this.tabs.slice(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);

Challenge: Understand the Hazards of Using Imperative Code

Link to the challenge:

freeCodeCamp.org

[rio_sanap]

slice is for slicing out some part of array you want

for example :
const arr = [‘rio’, ‘sanap’, ‘age’ , 19];
console.log(arr.slice(0 , 2); // output will be rio ,sanap , age
so here 0 is starting index from where you want and 2 is end index upto you want your output.

slice vs splice

slice is taking out some part from your array

splice is for add , delete arrays value

for example : adding example

const arr2 = [ ‘rio’, ‘sanap’ , 19];
arr2.splice(1 , 0 , ‘webdeveloper’) ;
console.log(arr2); // output rio,webdeveloper,sanap,19

// here 1 is index where you want to add your value in array , 0 is no of value you want to delete from your array , webdevelper value you want to add at your 1 index.
and you can add multiple value after second argument
example :
arr2.splice(2,0,'webdeveloper,‘javascript’,‘many more’);

deleting example :

arr2.splice(2,1);
console.log(arr2); //output rio , webdeveloper , 19 here sanap is removed
here 2 is index at which you want to delete your value ,
1 is no of value you want to delete.

hope you will get it , if you have doubt please be more specific and feel free to ask , thank you!

[tabby42]

Splice modifies the original array, while slice does not.
So with splice, ‘this’ changes from tabsBeforeIndex to tabsAfterIndex .
Which you don’t want. You want to store a chunk of the array in the variable without changing the array stored in the Window object ( = this).
After you calculate tabsBeforeIndex and tabsAfterIndex (using the same array), ‘this’ is changed by concatenating the two parts.
Hope this helps …

[heroisaprinciple]

thank you everyone!!!