Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between Array.slice and Array().slice

I am going through John Resig's excellent Advanced javascript tutorial and I do not thoroughly understand what's the difference between the following calls: (please note that 'arguments' is a builtin javascript word and is not exactly an array hence the hacking with the Array.slice instead of simply calling arguments.slice)

>>> arguments  
[3, 1, 2, 3]  
>>> Array.slice.call( arguments )  
3,1,2,3 0=3 1=1 2=2 3=3  
>>> Array.slice.call( arguments, 1 )  
[]
>>> Array().slice.call( arguments )  
3,1,2,3 0=3 1=1 2=2 3=3  
>>> Array().slice.call( arguments, 1 )  
1,2,3 0=1 1=2 2=3  

Basically my misunderstanding boils down to the difference between Array.slice and Array().slice. What exactly is the difference between these two and why does not Array.slice.call behave as expected? (which is giving back all but the first element of the arguments list).

like image 958
Balint Erdi Avatar asked Sep 23 '08 12:09

Balint Erdi


People also ask

What's the difference between array splice () and array slice () methods?

The splice() method returns the removed items in an array. The slice() method returns the selected element(s) in an array, as a new array object. The splice() method changes the original array and slice() method doesn't change the original array.

What is the use of slice () method in array?

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end ( end not included) where start and end represent the index of items in that array.

What is difference between Slice & Splice?

1. The splice() method returns the removed item(s) in an array and slice() method returns the selected element(s) in an array, as a new array object. 2. The splice() method changes the original array and slice() method doesn't change the original array.

Can slice () be used on strings and arrays?

While it's impossible to know every single method in JavaScript, it's also nice to know that there are some methods that can be used on more than one data type. Specifically for strings and arrays, these methods are concat , indexOf , and slice .


3 Answers

Not quite.

Watch what happens when you call String.substring.call("foo", 1) and String().substring.call("foo", 2):

>>> String.substring.call("foo", 1)
"1"

>>> String().substring.call("foo", 1)
"oo"

Array.slice is neither properly referencing the slice function attached to the Array prototype nor the slice function attached to any instantiated Array instance (such as Array() or []).

The fact that Array.slice is even non-null at all is an incorrect implementation of the object (/function/constructor) itself. Try running the equivalent code in IE and you'll get an error that Array.slice is null.

This is why Array.slice does not behave correctly (nor does String.substring).

Proof (the following is something one should never expect based on the definition of slice()...just like substring() above):

>>> Array.slice.call([1,2], [3,4])
3,4

Now, if you properly call slice() on either an instantiated object or the Array prototype, you'll get what you expect:

>>> Array.prototype.slice.call([4,5], 1)
[5]
>>> Array().slice.call([4,5], 1)
[5]

More proof...

>>> Array.prototype.slice == Array().slice
true
>>> Array.slice == Array().slice
false
like image 54
kamens Avatar answered Sep 30 '22 10:09

kamens


Array is just a function, albeit a special one (used to initialize arrays). Array.slice is a reference to the slice() function in the Array prototype. It can only be called on an array object and not on the Constructor (i.e. Array) itself. Array seems to behave specially though, as Array() returns an empty array. This doesn't seem to work for non-builtin Constructor functions (there you have to use new). So

Array().slice.call

is the same as

[].slice.call
like image 41
ujh Avatar answered Sep 30 '22 08:09

ujh


How is any call to slice.call() working in the examples provided since a context parameter is not being supplied? Does slice implement it's own call method, thus overriding JavaScript's call method? The call and apply methods take as the first parameter an object to specify the context (this) object to apply to the invocation.

like image 30
Bill Avatar answered Sep 30 '22 09:09

Bill