Thursday, 31 May 2012

JavaScript arrays

Tags:
This post will go 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

Follows is a list of the functions available to arrays, with parameter


Function Parameters Returns Details
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.some(lessThanTen)); // alerts 'true'
var y = [10, 5];
alert(y.some(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]
forEach
function - 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
 item
[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
 item
[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] -? 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'
alert(x.join(','));  // 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'