Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
JavaScriptBasicsRunning a ScriptVariablesExpressions and OperatorsObjects.Properties.MethodsThe Date ObjectStringsRegular ExpressionsDefining RegExp PatternsBranches and ConditionsLoopsJavaScript ArraysArraysArray MethodsSorting ArraysUser-Defined FunctionsCookiesWindowsFrames

Home > JavaScript > Arraysprinter version

JavaScript Arrays

An array is a composite data type composed of an ordered set of variables where each variable is known as an element.

Arrays in JavaScript can hold integers, floating-point numbers, Booleans, strings, other arrays as well as values of mixed type.

Creating an Array

The Array() constructor is used to create an array and it can be done in three different ways.

  1. var names = new Array();
    This creates a new empty array.
  2. var names = new Array("Dave","John","Fred");
    This creates a new array with the supplied values assigned to each element in the array starting from element 0 and array length set to the number of values passed.
  3. var names = new Array(3);
    This creates a new empty array with length set to the length passed.


Array Numbering

The index for the first element in an array is 0 by default but it can start at any numeric value you choose.

Accessing Elements in an Array
<script language="javascript" type="text/javascript">
    var names = new Array ("Tom", "Dick", "Harry");

    // This prints out the second element in the array - Dick
    document.write (names[1]);
</script>


Updating Elements in an Array
<script language="javascript" type="text/javascript">
    var names = new Array ("Tom", "Dick", "Harry");

    // This changes Harry to Dave
    names[2] = "Dave";
</script>


Adding Elements to an Array

Although a length may be set when creating an array, this can be changed later by adding additional elements.

Example of Adding Elements to an Array
<script language="javascript" type="text/javascript">
    var names = new Array ("Tom", "Dick", "Harry");

    names[3] = "Mary";
    names[4] = "June";
</script>


To start the array index at a numeric value other than the default 0 or if you wish to leave gaps in the array it can be done as below.

Example of an Array with Gaps
<script language="javascript" type="text/javascript">
    var names = new Array ();

    names[1] = "Tom";
    names[3] = "Dick";
    names[5] = "Harry";
</script>


Multidimensional Arrays

Since an array can hold various data types, including other arrays, this allows you to create what are effectively multidimensional arrays.

Example of a Two Dimensional array
<script language="javascript" type="text/javascript">
    var names = new Array ();
    var addresses = new Array ();
    var details = new Array (names, addresses);

    names[0] = "Tom";
    names[1] = "Dick";
    names[2] = "Harry";
    addresses[0] = "Main Street";
    addresses[1] = "Brick Lane";
    addresses[2] = "Holme Road";

    // This prints out Brick Lane
    document.write(details[1][1]);
</script>


Finding the Number of Elements in an Array

To find the number of elements the length property is used. This is updated automatically if elements are added to the array.

Example of Finding the length of an Array
<script language="javascript" type="text/javascript">
    var names = new Array ();

    names[0] = "Tom";
    names[1] = "Dick";
    names[2] = "Harry";

    // This will print out 3
    document.write(names.length);
</script>


Previous - JavaScript Loops Previous - Loops     Next - Array Methods Next - JavaScript Array Methods


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksImage ReplacementUsing IncludesForm ValidationDebugging
Got any JavaScript Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
Javascript the definitive guide

Javascript and DHTML cookbook

Pro javascript techniques

simply javascript