array.eq() vs. array[] in Javascript and Jquery

Question

When accessing an array, when is it appropriate to use the .eq() function?

For example, I have...

slides.eq(slidesLength-1).css("z-index", (slidesLength-1));

and later I have...

for(i=0; i<slidesLength-1; i++) {
    $(slides[i]).css("left", "-100%");
}

In the first piece of code, the slideshow stops functioning if I don's use the .eq() function. However, the second piece seems to function whether I use the .eq() function or not. Why is this?

Answer 1

slides is not an array. It's a jQuery object. The .eq() method returns you the element at the specified index as a jQuery object.

While jQuery objects may not be arrays, they can pretend to be by having a length property as well as properties corresponding to the indexes. (Since they are not arrays, you can't call methods like .pop(), .forEach(), etc. on them.)

When you do slides[i], you are actually getting the DOM element, not a jQuery object. The $() function turns the DOM element into a jQuery object.

So, when you do slides.eq(1), internally jQuery is doing $(slides[i]).

P.S. Objects, like jQuery objects, that pretend to be arrays are called "array-like objects". If you console.log(slides), it may look like an array. This is just your console trying to make things convenient for you. (See this question for more info: Creating array-like objects in JavaScript)

Answer 2

.eq() is a jQuery method which returns a jQuery object, while accessing by index returns plain DOM element. You should use eq() when you want to use jQuery methods (css() in this case) on the returned selection.

The reason $(slides[i]) works is because you're constructing a jQuery object by passing the plain element to $() constructor.