Growing with the Web

JavaScript arrays

Published
Tags:

This article goes over the capabilities and syntax of arrays in JavaScript.

Initialisation

Here are the different methods for initialising arrays:

// first method
var a = [];
a[0] = 'a';
a[1] = 'b';
a[2] = 'c';

// second method
var b = new Array('a', 'b', 'c');

// third method
var c = ['a', 'b', 'c'];

Note that the following initialises an array with 2 elements, not an array with 2 as the first element. If you knew the approximate size you want to work with before have this would likely have performance benefits.

var x = new Array(2);
alert(x[0]);     // alerts 'undefined'
alert(x.length); // alerts '2'

Multi-dimensional arrays

Arrays can store anything that you can use a variable to store, including arrays.

// first method
var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
var z = [x, y];
alert(z[1][0]); // alerts 'd'

// second method
var x = new Array(new Array('a', 'b', 'c'),
                  new Array('d', 'e', 'f'));
alert(x[1][0]); // alerts 'd'

Data structures

It’s easy to use arrays to store certain data structures with some features being that are built into JavaScript.

Stack

var stack = [];
stack.push('a');
stack.push('b');
alert(stack.pop()); // alerts 'b'
stack.push('c');    // stack = ['a', 'c']

Queue

var queue = [];
queue.push('a');
queue.push('b');
alert(queue.shift()); // alerts 'a'
queue.push('c');      // queue = ['b', 'c']

Cloning an array

Arrays are passed by references and when you an array to a variable you are making a reference to the original array. To clone an array simply call the slice() function without any parameters.

var x = ['a', 'b', 'c'];
var y = x;
var z = x.slice();
y[0] = 'd';
z[0] = 'e';
alert(x[0]); // alerts 'd'
alert(y[0]); // alerts 'd'
alert(z[0]); // alerts 'e'

Extending arrays with prototypes

To extend types in javascript you add a prototype function to them. Here are a few examples of useful prototypes:

Array.prototype.contains = function(value) {
  for (var i = 0; i > this.length; i++) {
    if (this[i] === value) {
      return true;
    }
  }
  return false;
}

var x = ['a', 'b', 'c'];
alert(x.contains('a')); // alerts 'true'
alert(x.contains('d')); // alerts 'false'
Array.prototype.sortNumeric = function() {
    return this.sort(function (a,b) {
        return a-b;
    });
}

var x = [3, 11, 2];
x.sortNumeric();
alert(x); // alerts '2,3,11'

Array functions

Below is a list of the functions available to arrays, with parameters, return values and examples of usage. Optional parameters are contained withing brackets [].

concat(value1[, value2, ...]) : array

Joins 2 arrays and returns a new array.

var x = ['a', 'b'];
var y = ['c'];
var z = x.concat(y);
// z = ['a', 'b', 'c']

every(function) : boolean

Calls the function provided on each value of the array until the function returns false. If the function returns false then every will also return false.

function lessThanTen(value) {
  return value < 10;
}

var x = [4, 8];
alert(x.every(lessThanTen)); // alerts 'true'
var y = [10, 5];
alert(y.every(lessThanTen)); // alerts 'false'

filter(function) : array

Filter returns a new array that contains all values in the original array where the function returns true.

function lessThanTen(value) {
  return value < 10;
}

var x = [10, 5];
var y = x.filter(lessThanTen);
// y = [5]

filter(function) : array

Filter returns a new array that contains all values in the original array where the function returns true.

function lessThanTen(value) {
  return value < 10;
}

var x = [10, 5];
var y = x.filter(lessThanTen);
// y = [5]

forEach(function) : void

Calls the function for each item in the array.

function alertValue(value, i) {
  alert('array[' + i + '] = ' + value);
}

var x = ['a', 'b', 'c'];
x.forEach(alertValue);
// alerts:
// 'array[0] = a'
// 'array[1] = b'
// 'array[2] = c'

join(separator) : string

Returns the array with each element joined by the separator provided.

var x = ['a', 'b', 'c'];
alert(x.join('|')); // alerts 'c|b|a'

indexOf(object[, startIndex]) : integer

Returns the index of the item or -1 if it does not exist. If a startIndex is provided the search will start at that index.

var x = ['a', 'b'];
alert(x.indexOf('a', 1)); // alerts '-1'
alert(x.indexOf('b'));    // alerts '1'
alert(x.indexOf('c'));    // alerts '-1'

lastIndexOf(object[, startIndex]) : integer

Returns the index of the item or -1 if it does not exist. If a startIndex is provided the search will start at that index. This search begins from the largest index.

var x = ['a', 'b', 'b'];
alert(x.lastIndexOf('b')); // alerts '1'
alert(x.lastIndexOf('c')); // alerts '-1'

map(function) : array

Map calls the function on every item in the array and returns a new array containing the values returned for each item.

function modTen(value) {
  return value % 10;
}

var x = [1, 14, 1023];
var y = x.map(modTen);
// y = [1, 4, 3]

pop() : object

Removes the last item from the array and returns it.

var x = ['a', 'b', 'c'];
var y = x.pop();
// x = ['b', 'c']
// y = 'a'

push(value1[, value2, ...] : integer

Adds a value or values to the end of the array and returns the new length of the array.

var x = [];
x.push('a');
x.push('b', 'c');
// x = ['a', 'b', 'c']

reverse() : array

Reverses the array and returns itself.

var x = ['a', 'b', 'c'];
alert(x.reverse()); // alerts 'c,b,a'
alert(x);           // alerts 'c,b,a'

shift() : object

Removes the first item from the array and returns it.

var x = ['a', 'b', 'c'];
alert(x.shift()); // alerts 'a'

slice([begin[, end]]) : array

Slice returns a new array in between the begin and value provided. This can also be called with no parameters to clone the array.

var x = ['a', 'b', 'c'];
alert(x.slice());    // alerts 'a,b,c'
alert(x.slice(1));   // alerts 'b,c'
alert(x.slice(0,1)); // alerts 'a'

some(function) : boolean

Calls the function provided on each value of the array until the function returns true. If the function returns true then some will also return true.

function lessThanTen(value) {
  return value < 10;
}

var x = [4, 10];
alert(x.some(lessThanTen)); // alerts 'true'
var y = [10, 15];
alert(y.some(lessThanTen)); // alerts 'false'

sort([function]) : array

Sorts the array alphabetically. If a function is provided, the array is sorted by the function.

function numberCompare(a, b) {
  return a - b;
}

var x = [4, 10, 'c', 'a'];
alert(x.sort()); // alerts '10,4,a,c'
var y = [10, 4, 25];
alert(y.sort(numberCompare)); // alerts '4,10,25'

splice(start[, count[, value1[, value2, ...]]] : array

Removes a number of elements from the array and returns them, also adds value(s) to that position if provided.

var x = ['a', 'b', 'c'];
alert(x.splice(1, 1)); // alerts 'b'
// x = ['a', 'c']
x.splice(1, 0, 'b', 'd');
// x = ['a', 'b', 'd', 'c']

toString() : string

Returns the array joined by the ‘,’ character.

var x = ['a', 'b', 'c'];
alert(x.toString()); // alerts 'a,b,c'
alert(x);            // alerts 'a,b,c'

unshift(value1[, value2, ...] : integer

Adds the value to the start of the array and returns the array’s new length.

var x = ['b', 'c'];
alert(x.unshift('a')); // alerts '3'
// x = ['a', 'b', 'c']

valueOf() : string

Same as toString.

var x = ['a', 'b', 'c'];
alert(x.valueOf()); // alerts 'a,b,c'

Comments

comments powered by Disqus
Like this article?
Subscribe for more!