ArraysS2C Home « Arrays

Arrays are JavaScript objects we can create to hold collections of related data.

An Array object can be created empty, with a length or with elements.

By using methods of the Array object we can manipulate arrays after creation.

Array Creation

• When no arguments are passed an empty array is created.
• When one argument is passed and it is a number between 0 and 4,294,967,295 an array is created with that length. Numbers outside this range throw a RangeError exception. If the argument is not a number a new array is created with a length of 1 with the argument as the first elements value.
• When two or more arguments are passed an array is created using the arguments passed as the elements of the array.

// Create an array with three elements.
var anArray = new Array('one', 'two', 'three');
alert(anArray + ' - ' + anArray.length);

// Create an array with a length of 10.
var newArrayWithLength = new Array(10);
alert(newArrayWithLength + ' - ' + newArrayWithLength.length);

The array literal syntax can also be used to create arrays by using square brackets [ ]. This method of array creation requires less typing and will be used in these tutorials from now on.

// Create an empty array.
var anEmptyArray = []

// Create an array with elements.
var weekendDays = ['Fri', 'Sat', 'Sun'];

// Create an array with mixed types of number, boolean and string.
var mixedTypeArraysAreFine = [1, true, 'Learn JavaScript'];
alert(anEmptyArray + ' - ' + weekendDays + ' - ' + mixedTypeArraysAreFine)

Accessing Arrays

Arrays can be accessed by naming the array and stating the index for the item in the array you want to retrieve, just be aware that arrays are zero-indexed.

/*
 Creates an array with four elements.
 Element 0 holds the value 'Mon'.
 Element 1 holds the value 'Tues'.
 Element 2 holds the value 'Wed'.
 Element 3 holds the value 'Thurs'.
 */
var weekDays = ['Mon', 'Tues', 'Wed', 'Thurs'];

/*
 An example follows which would display the value Wed in an alert box.
 */
alert(weekDays[2]);

Adding Elements To The Start and End of Arrays

You can add to the start or end of an array using methods from the array object.

// Create an array with two elements.
var weekDays = ['Tues', 'Wed'];

/*
 Add an element to beginning of array using the unshift() method.
 */
weekdays.unshift('Wed'); // Array now holds ['Wed', 'Tues', 'Wed'].

/*
 Add an element to end of array using the push() method.
 */
weekdays.push('Thurs'); // Array now holds ['Wed', 'Tues', 'Wed', 'Thurs'].

Removing Elements From The Start and End of Arrays

You can remove from the start or end of an array using methods from the array object.

// Create an array with four elements.
var weekDays = ['Mon', 'Tues', 'Wed', 'Thurs'];

/*
 Remove an element from the beginning of array using the shift() method.
 */
weekdays.shift(); // Array now holds ['Tues', 'Wed', 'Thurs'].

/*
 Remove an element from the end of array using the pop() method.
 */
weekdays.pop(); // Array now holds ['Tues', 'Wed'].

Adding, Deleting and Replacing Array Elements

You can also add, delete and replace items from anywhere within an array object.

// Create an array with four elements.
var weekDays = ['Mon', 'Tues', 'Wed', 'Thurs'];

/*
 Remove element 2 and 3 from the array using the splice() method. The first 
 number within the brackets is the starting index to delete from, remember
 indexing starts from 0. The second number is number of elements to delete.
 */
weekdays.splice(1,2); // Array now holds ['Mon', 'Thurs'].

// Add two elements starting from index 1 splice() method. 
weekdays.splice(1,0,'Sat','Sun'); // Array now ['Mon', 'Sat', 'Sun', 'Thurs'].

/*
 Remove element 2 and 3 from the array and replace with new values using the 
 splice() method.
 */
weekdays.splice(1,2,'Tues','Wed'; // Array is ['Mon', 'Tues', 'Wed', 'Thurs'].

Lesson 1 Complete

In this lesson we looked at arrays and some of the methods used for manipulating data stored within them.

For a complete list of the methods available with the Array object and their usage visit the reference section of the site.

What's Next?

In the next lesson we look at date and time functionality using the Date object.

Homepage Top