Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React by Example Building the Application Removing Names From the List

Keith Carrillo
Keith Carrillo
6,909 Points
Posted by Keith Carrillo
Keith Carrillo
6,909 Points

Could you explain why use slice twice a bit deeper?

I thought maybe slice removes element(s) and returns the rest of the array. I'm not following on what the second slice is for?

3 Answers

Stephen Hanlon
Stephen Hanlon
11,845 Points
Stephen Hanlon
Stephen Hanlon
11,845 Points

Would using .splice(index, 1) to remove the guest be more efficient and explicit? Why didn't he use that method?

Here's MDN's explanation of it.

Stephen Hanlon
Stephen Hanlon
11,845 Points

Unexpectedly, splice(index, 1) returns only the guest at that index position (i.e. removing everyone else) even though MDN shows this working differently and my past use of it worked this way - it's a convenient way to remove an element anywhere in an array.

The other option is to use .filter which will return a new array with newly filtered results. So basically filter everyone BUT the object at the index you want to remove.

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

the two slices in conjunction with the spread operator are taking the elements of the array before the removed element and after the removed element and then putting them back together in the new array. the first slice is the elements before the removed index and the second slice is the elements that come after the removed index. the spread operator is used to copy the returned elements from each slice into the new array, so that after the operations complete you are left with a single array that no longer has the removed element.

Cristina Rosales
Cristina Rosales
10,929 Points
Cristina Rosales
Cristina Rosales
10,929 Points

James South, great explanation. I was scratching my head going like "wt everloving f" for a while.

I tried the following in the console. First I defined an array of characters I like to play in Super Smash Brothers.

(5) ["Snake", "Ryu", "Ken", "Mario", "Luigi"]
//Then I sliced from the beginning to right before the one indexed at 3, meaning Mario is out of the party
ssbArray.slice(0, 3)
(3) ["Snake", "Ryu", "Ken"]
//then I slice from the index I picked (3) plus 1 == (4)
ssbArray.slice(4)
```["Luigi"]

Now it makes sense to me that if we are setting state with an array that our first chunk is the set of elements minus the one we want to ignore. The second element (or chunk of them) is all the stuff that comes after that one we want to ignore.
Keith Carrillo
Keith Carrillo
6,909 Points
Keith Carrillo
Keith Carrillo
6,909 Points

So slice doesn't remove them the first time. Does it in a sense index or target it? Then the second slice is somehow passing them together with out the index/targeted element. I used splice instead. From the first introduction to React on Treehouse. The instructor was using array.splice(index, 1) instead of ..array.slice(1, index), ...array.slice(index+1).