Why does splice() doesn't add new item?

I am trying to use splice but doesn’t seem to work as expected. Please help me.
For the array arr = [1,2,3] when i write
arr.splice(0,1,9);
i get the output : [9,2,3]

But when I write
var arr1 = arr.splice(0,1,9);
I get the output : [1].
Why is this happening after all am just saving the same result in different variable array. Shouldn’t it be same?

1 Like

First Example:

“arr.splice(0,1,9)” is modifying the arr and returning the resulting arr. [9,2,3]

What happened here is you instructed "On array, arr, at index 0 (first arg), insert the number 9 (third arg) and do this for one position (specified by 2nd arg, 1) which leaves arr at[9,2,3]

Second Example:
var arr1 = arr.splice(0,1,9);

When you store the result in variable “arr1”, the splice method returns the number that was removed and assigns it to arr1 (which is 1, in this case). The var, arr, is still [9,2,3] just like in the first example.

1 Like

Oh ok. Thank you. But that’s really weird.

I don’t know if it’s “really weird” - it’s just how that method is defined. From the definition:

Return value

An array containing the deleted elements. If only one element is removed, an array of one element is returned. If no >elements are removed, an empty array is returned.

It definitely can be confusing keeping track of all these strings and array methods. Some return the value you want, some do the work on the array itself and return something different. I always double check with the reference to see whether or not it changes the object it’s working on and confirm what it returns.

Yes right. The only way to work around will be to assign separately i.e. var arr1 = arr;
Only then it returns the actual spliced value on the array rather just deleted element.

I guess I don’t understand what you mean by “work around” - the method is doing exactly what is expected to do as defined. The problem is that in the original, you are confusing what the method does to the original array and what it returns. When you say:

var arr1 = arr.splice(0,1,9);

you are not assigning arr into arr1. The right hand of the assignment is evaluating as the return of that splice this is a very important distinction.

If you want arr1 to be the same as arr after that operation, then you could try something like:

arr.splice(0,1,9);
var arr1 = arr;


But that might not give the results you want. In that case you are setting arr1 to point to the array *arr*. So there is just one array that now has two names, pointing to the same data. Consider the following:

var arr = [1, 2, 3, 4, 5];

var arr1 = arr;

console.log(“before splice, arr == " + arr.join(”,"));
console.log(“before splice, arr1 == " + arr1.join(”,"));
// before splice, arr = 1,2,3,4,5
// before splice, arr1 = 1,2,3,4,5

arr.splice(0, 1, “apple”);

console.log(“after splice, arr == " + arr.join(”,"));
console.log(“after splice, arr1 == " + arr1.join(”,"));
// after splice, arr = apple,2,3,4,5
// after splice, arr1 = apple,2,3,4,5

Strange, huh? But it makes sense if you understand the difference between primitive and reference types. When you have a variable for an array (assuming this is the same as it was in C), you really have an address for that data structure. When you copy that variable, you're really just copying the the address. This should be true for all non-primitive types.

If you want a copy of the address, then that's fine. But if you want a separate copy so that manipulation of one won't affect the other, then to copy the array, you can do `var arr1 = arr.slice();` That will create a completely new and independent copy.

var arr = [1, 2, 3, 4, 5];

var arr1 = arr.slice();

console.log(“before slice, arr == " + arr.join(”,"));
console.log(“before slice, arr1 == " + arr1.join(”,"));
// before splice, arr = 1,2,3,4,5
// before splice, arr1 = 1,2,3,4,5

arr.splice(0, 1, “apple”);

console.log(“after slice, arr == " + arr.join(”,"));
console.log(“after slice, arr1 == " + arr1.join(”,"));
// after splice, arr = apple,2,3,4,5
// after splice, arr1 = 1,2,3,4,5


OK, it's a little weird. But everything is until you get used to it.
1 Like

arr.push(9)
give you wise , but if you so mach wanted do it in splice
it is need to look like taht:
arr.splice(0,0,9)
why? first 0 mean place , second 0 mean if remove something , third means replace or add
becuase second 0 not remove nothing it means add 9
and you remove 1 at place 0 replace it with 9.
in addition :
var arr1 = arr.splice() ; mean keap the remove and the remove is [1]

Thank you for such in-depth explanation. You are a saviour.
So var arr1 = arr using splice() method, just copies the address and var arr1 = arr.slice() creates an another independent copy. This can play a lot if this distinct feature is unknown. I can’t thank you enough for this.

1 Like