JavaScript Array Cheat Sheet

Create an array

var colors = [ 'red', 'green', 'blue', 'yellow' ];

Read values in an array

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var green = colors[1];

Array.concat(value1, value2 ... )

Adds the value(s) or array(s) and returns a new array. The original array is not modified.

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var moreColors = colors.concat( 'cyan', 'magenta' );
var evenMoreColors = colors.concat( [ 'pink', 'orange', 'brown' ] );
// => colors = 'red', 'green', 'blue', 'yellow'
// => moreColors = 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta'
// => evenMoreColors = 'red', 'green', 'blue', 'yellow', 'pink', 'orange', 'brown'

Array.every(function(value, index, array) {}, context)

Tests whether all elements in the array pass the test implemented by the provided function.

function isEven(value) { return value % 2 === 0; }
var numbers = [ 1, 2, 3, 4, 5 ];
numbers.every(isEven);
// => false
var evenNumbers = [ 2, 4, 6, 8 ];
evenNumbers.every(isEven);
// => true

Array.filter(function(value, index, array) {}, context)

Filters the values in the array and returns a new array with all values that pass the test implemented by the provided function.

function evenValues(value) { return value % 2 === 0; }
var numbers = [ 1, 2, 3, 4, 5 ];
numbers.filter(evenValues);
// => 2, 4

Array.forEach(function(value, index, array) {}, context)

Executes the provided function once per array element

var numbers = [ 1, 2, 3, 4, 5 ];
numbers.forEach(function(value, index) { 
    console.log('The value of index ' + index + ' is ' + value + '\n'); 
});
// => The value of index 0 is 1
// => The value of index 1 is 2
// => The value of index 2 is 3
// => The value of index 3 is 4
// => The value of index 4 is 5

Array.indexOf(value, [startIndex])

Returns the index of the first value in the array that matches the supplied value or -1 if no match is found.

var numbers = [ 1, 2, 3, 1, 2, 3 ];
numbers.indexOf(2);
// => 1
numbers.indexOf(2, 3);
// => 4
numbers.indexOf(2, -3);
// => 4

Array.lastIndexOf(value, [startIndex])

Returns the index of the last value in the array that matches the supplied value or -1 if no match is found.

var numbers = [ 1, 2, 3, 1, 2, 3 ];
numbers.lastIndexOf(2);
// => 4
numbers.lastIndexOf(2, 3);
// => 1
numbers.lastIndexOf(2, -2);
// => 4

Array.map(function(value, index, array) {}, context)

Returns a new array with the results returned by the provided function.

function double(value) { return value * 2; }
var numbers = [ 1, 2, 3, 4 ];
var doubledNumbers = numbers.map(double);
// => numbers = 1, 2, 3, 4
// => doubledNumbers = 2, 4, 6, 8

Array.join(separator)

Joins the values in the array to a string

var colors = [ 'red', 'green', 'blue', 'yellow' ];
colors.join(' & ');
// => 'red & green & blue & yellow'

Array.pop()

Pops the last element out of the array (removes and returns the last element)

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var yellow = colors.pop();
// => yellow = 'yellow'
// => colors = [ 'red', 'green', 'blue' ];

Array.push(value1, [value2] ... )

Pushes (adds) a value to the end of the array

var colors = [ 'red', 'green', 'blue', 'yellow' ];
colors.push('orange');
// => 'red', 'green', 'blue', 'yellow', 'orange'
colors.push('brown', 'purple');
// => 'red', 'green', 'blue', 'yellow', 'orange', 'brown', 'purple'

Array.reduce(function(previousValue, currentValue, index, array) {}, initialValue)

Executes a function for each value in the array passing in the returned value from the previus execution as argument.

var numbers = [ 1, 2, 3, 4 ];
var total = numbers.reduce(function(a, b) {
    return a + b;
});
// => total = 10
var moreNumbers = [ 1, 2, 3, 4, 1, 2, 3, 2, 3, 4, 2 ];
var numbersCount = moreNumbers.reduce(function(numbersMap, number) {
    if(!numbersMap[number]) {
        numbersMap[number] = 1;
    }
    else {
        numbersMap[number]++;
    }
    return numbersMap;
}, {});
// => numbersCount = 1: 2, 2: 4, 3: 3, 4: 2

Array.reduceRight(function(previousValue, currentValue, index, array) {}, initialValue)

Same as reduce but reversed :)

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var colorsReversed = colors.reduceRight(function(array, value) { array.push(value); return array; }, []);
// => colors = 'red', 'green', 'blue', 'yellow'
// => colorsReversed = 'yellow', 'blue', 'green', 'red'

Array.reverse()

Reverses the values of the array. The firt value becomes the last value and the last value becomes the first value.

var colors = [ 'red', 'green', 'blue', 'yellow' ];
colors.reverse();
// => colors = 'yellow', 'blue', 'green', 'red'

Array.shift()

Removes and returns the first element of the array.

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var red = colors.shift();
// => red = 'red'
// => colors = [ 'green', 'blue', 'yellow' ];

Array.slice(startIndex, endIndex)

Returns a shallow copy of a portion of an array into a new array object.

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var redAndGreen = colors.slice(0, 2);
// => redAndGreen = 'red', 'green'
var copyOfColors = colors.slice(0);
// => copyOfColors = 'red', 'green', 'blue', 'yellow'

Array.some(function(value, index, array) {}, context)

Tests whether some (at least one) element in the array pass the test implemented by the provided function.

function isEven(value) { return value % 2 === 0; }
var numbers = [ 1, 2, 3, 4, 5 ];
numbers.some(isEven);
// => true
var oddNumbers = [ 1, 3, 5, 7 ];
oddNumbers.some(isEven);
// => false

Array.sort(function(value1, value2) {})

Sorts the values in an array. A function can be provided to define how the values should be sorted.

var numbers = [1, 4, 5, 3, 2 ];
numbers.sort();
// => numbers = 1, 2, 3, 4, 5
var colors = [ 'red', 'green', 'blue', 'yellow' ];
colors.sort();
// => colors = 'blue', 'green', 'red', 'yellow'
function sortByLength(a, b) {
    return a.length - b.length;
}
colors.sort(sortByLength);
// => colors = 'red', 'blue', 'green', 'yellow'

Array.splice(startIndex, deleteCount, [item1, item2])

Removes and returns values from the array and adds values.

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var green =  colors.splice(1, 1);
// => green = 'green'
// => colors = 'red', 'blue', 'yellow'
colors.splice(1, 0, 'orange', 'purple');
// => colors = 'red', 'orange', 'purple', 'blue', 'yellow'

Array.toString()

Joins the values in the array to a string

var colors = [ 'red', 'green', 'blue', 'yellow' ];
colors.toString();
// => 'red,green,blue,yellow'

var colors = [ 'red', 'green', 'blue', 'yellow' ];
var numberOfColors = colors.unshift('pink', 'brown');
// => 'pink', 'brown', 'red', 'green', 'blue', 'yellow'
// => numberOfColors = 6