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>:


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


returns a transformed version of the array

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


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';
//prints [div,div]. This array has the two divs whose contents start with 'b'

Core Javascript functions


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';
//prints false. Not every div has text that begins with 'g'


Simple cycling:

    if (el % 2 === 0){
// prints 2
// prints 4
// prints 6
// prints 8
// prints 10


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';
//prints false. No div has text that starts with 'g'.

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


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 ={
    return el * 2;
// [ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ]


Adds an element to the beginning of an Array


Removes the first element of the array and returns that element


Add an element to the end of an Array


Removes the last element of the array and returns that element

See also


  • Uncaught ReferenceError: $ is not defined

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

  <script src="//"></script>

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

Dialogue & Discussion