Title: React splice returns opposite of what I delete?
Tags: javascript;arrays;reactjs;slice;splice
Question: I am trying to delete first two, three, four indices of an array. This is my code:
returnFilteredRoles() {
if (this.props.user.role_id == 1 || this.props.user.role_id == 2) {
return this.state.data;
} else if (this.props.user.role_id == 3) {
return this.state.data.splice(0, 2);
} else if (this.props.user.role_id == 4) {
return this.state.data.splice(0, 3);
} else if (this.props.user.role_id == 5) {
return this.state.data.splice(0, 4);
ex: data = [1,2,3,4,5];
if role_id == 3, it should return [3,4,5]. instead it returns [1,2]. no Idea why.
I tried storing the state into a variable and splicing that variable and returning that. But it gives same result.
Comment: I read in a tutorial that first argument is starting index and second is the number of items to delete. thanks for clarification.

Comment: okay, but somehow splice was returning the opposite of what i wanted. maybe because it is a mutable method, and affects the state directly, but storing it in a variable also did not work.

Comment: The arguments to slice are the [start and end index](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice). If start index is 0 you're going to get a section of the array starting at the first item. All of your slices start at zero, so you get a chunk from the beginning of the array.

Comment: [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) are two different things. _splice_ takes the number of items to delete. _slice_ does not.

Comment: splice modifies the array and returns the deleted items. slice returns a new array containing the selected subset. Prior to your edit you were calling slice.

Here is the accepted answer: The thing is, that slice returns the elements that you cut out:
var fruits = [&quot;Banana&quot;, &quot;Orange&quot;, &quot;Lemon&quot;, &quot;Apple&quot;, &quot;Mango&quot;];
var citrus = fruits.slice(1, 3);
console.log(citrus); // [&quot;Orange&quot;, &quot;Lemon&quot;]
Source: https://www.w3schools.com/jsref/jsref_slice_array.asp
Comment for this answer: Using slice did the trick, since it does not affect the array directly. But i dont know why splice() was giving an opposite result of what i expected.

Here is another answer: slice() doesn't mutate the array it returns a new array with the selected elements. However, splice() mutates the array
so for your example to work using slice you do
data = [1,2,3,4,5];
var slicedata=data.slice(2,)
console.log("sliced array", slicedata)
console.log("original array", data)
using splice
data = [1,2,3,4,5];
var slicedata=data.splice(2,4)
console.log("spliced array", slicedata)
console.log("original array", data) // notice the difference

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 5, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:07/30/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><arrays><reactjs><slice><splice>', 'Title': 'React splice returns opposite of what I delete?', 'ViewCount': 372, 'id': 63180811, 'user_AboutMe': '<p>I love django and making apps. Im a self taught developer currently learning vue.js and ElectronJS. I would really like to develop a game someday. Theres just so much i like and so musch to learn i this everchanging era of technology</p>\n\n<p>I plan to master vue and django to be able to make enterprise applications, meant to be run on both pc and handheld devices. I also want to learn a mobile app development framework. I would go with flutter as soon as i get a grip on vue.</p>\n', 'user_AccountId': 13962816.0, 'user_DisplayName': 'Tushar Kulkarni', 'user_Reputation': 101.0, 'user_Views': 24.0, 'user_id': 10083481.0}}