Javascript and jQuery Array Methods Examples and Reference

Last updated:

TL; DR For javascript arrays, use callbacks with parameters, for jQuery arrays use callbacks with no parameters and use $(this) in the method body.

Say we have a html document with the following contents in the <body>:

<div>foo</div>
<div>bar</div>
<div>baz</div>
<div>qux</div>
<div>quux</div>

and also a simple javascript array stored in global (no need to freak out! this is just an example) variable myArr:

myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

If we use jQuery to select all <div>s, we can manipulate the collection as follows.

JQuery Functions

map

returns a transformed version of the array

var results = $('div').map(function(){
    return $(this).text().toUpperCase();
});
console.log(results);
//prints ["FOO", "BAR", "BAZ", "QUX", "QUUX"]

filter

returns an array the jQuery elements that pass the test (i.e. the function returns true):

var results = $('div').filter(function(){
    return $(this).text().charAt(0)==='b';
});
console.log(results);
//prints [div,div]. This array has the two divs whose contents start with 'b'

Core Javascript functions

every

Returns true only if function returns true for every element of the array.

// you can also make a javascript array from a JQuery collection
var results = $.makeArray($('div')).every(function(e){
    return $(e).text().charAt(0)==='g';
});
console.log(results);
//prints false. Not every div has text that begins with 'g'

forEach

Simple cycling:

myArr.forEach(function(el){
    if (el % 2 === 0){
        console.log(el);
    }
}
// prints 2
// prints 4
// prints 6
// prints 8
// prints 10

some

return true if the function given as parameter returns true for at least one element in the array.

Note that this is a javascript method, so we must first convert the jQuery collection (that's what the selector returns) into a regular javascript array and send elements as parameters the way javascript does.

var results = $.makeArray($('div')).some(function(e){
   return $(e).text().charAt(0)==='g';
});
console.log(results);
//prints false. No div has text that starts with 'g'.

var results = $.makeArray($('div')).some(function(e){
   return $(e).text().charAt(0)==='f';
});
console.log(results);
//returns true. At least one div has text beginning with 'f'

map

Returns a new array based upon an existing array.

// myArr is as defined previously:
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

var doubles = myArr.map(function(el){
    return el * 2;
};
console.log(doubles);
// [ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ]

unshift

Adds an element to the beginning of an Array

shift

Removes the first element of the array and returns that element

push

Add an element to the end of an Array

pop

Removes the last element of the array and returns that element


See also

Troubleshooting

  • Uncaught ReferenceError: $ is not defined

Make sure you've included jQuery to your file before running the examples:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

P.S.: These snippets were run on google chrome.

Dialogue & Discussion