Declaring and populating an array at the same time

Earlier I mention that JavaScript has two other syntaxes for declaring an array. Both enable you to declare an array and populate it with values by using just a single statement.

The first method uses the Array() constructor in the following general format:

var arrayName = new Array(value1, value2, …);

• arrayName: The name you want to use for the array variable
• value1, value2, …: The initial values with which you want to populate the array

Here's an example:

var dogPhotos = new Array("dog-1", "dog-2", "dog-3", "dog-4", "dog-5");

JavaScript also supports the creation of array literals, which are similar to string, numeric, and Boolean literals. In the same way that you create, say, a string literal by enclosing a value in quotation marks, you create an array literal by enclosing one or more values in square brackets. Here’s the general format:

var arrayName = [value1, value2, …];

• arrayName: The name you want to use for the array variable
• value1, value2, …: The initial values with which you want to populate the array

An example:

var dogPhotos= ["dog-1", "dog-2", "dog-3", "dog-4", "dog-5"];

Using a loop to populate an array

So far, you probably don't think arrays are all that much more efficient than using separate variables. That’s because you haven’t yet learned about the single most powerful aspect of working with arrays: using a loop and some kind of counter variable to access an array’s index number programmatically.

For example, here’s a for() loop that replaces the six statements I used earlier to declare and initialize the dogPhotos array:

var dogPhotos = new Array(5);

for (var counter = 0; counter < 5; counter++) {

dogPhotos[counter] = "dog-" + (counter + 1);

}

The statement inside the for() loop uses the variable counter as the array's index. For example, when counter is 0, the statement looks like this:

dogPhotos[0] = "dog-" + (0 + 1);

In this case, the expression to the right of the equals sign evaluates to "dog-1", which is the correct value. The following code shows this loop technique at work:

HTML:

<div id="output">

</div>

JavaScript:

// Declare the array

var dogPhotos = new Array(5);

// Initialize the array values using a loop

for (var counter = 0; counter < 5; counter++) {

dogPhotos[counter] = "dog-" + (counter + 1);

}

// Display an example

document.getElementById('output').innerHTML = '/images/' + dogPhotos[0] + '.png';

Using a loop to insert data into an array works best in two situations:

• When the array values can be generated using an expression that changes with each pass through the loop
• When you need to assign the same value to each element of the array

If you declare your array with a specific number of elements, JavaScript doesn't mind at all if you end up populating the array with more than that number.

Using a loop to work with array data

The real problem with using a large number of similar variables isn’t so much declaring them, but working with them in your code. In this chapter’s original code example, the script had to use five separate if() tests to check the input value against all five variables.

Arrays can really help make your code more efficient by enabling you to reduce these kinds of long-winded checking procedures to a much shorter routine that fits inside a loop. As with populating the array, you use the loop counter or some other expression to generate new array values to work with.

For example, here’s a for() loop that replaces all those if() tests from the earlier script:

for (var counter = 0; counter < 5; counter++) {

if (promptDog === dogPhotos[counter]) {

document.body.style.backgroundImage = "url('/images/" + dogPhotos[counter] + ".png')";

break;

}

}

Each time through the loop, a new array value is generated by dogPhotos[counter], and this value is compared with promptDog. If a match is found, dogPhotos[counter] is used in an expression to generate the new backgroundImage property, and then break takes the code out of the loop.

Putting it all together, the following code presents the full and very efficient replacement for the earlier script:

// Declare the array

var dogPhotos = new Array(5);

// Initialize the array values using a loop

for (var counter = 0; counter < 5; counter++) {

dogPhotos[counter] = "dog-" + (counter + 1);

}

// Get the photo number

var promptNum = prompt("Enter the dog you want to see (1-5):", "");

if (promptNum !== "" && promptNum !== null) {

// Construct the primary part of the filename

var promptDog = "dog-" + promptNum;

// Work with the array values using a loop

for (counter = 0; counter < 5; counter++) {

if (promptDog === dogPhotos[counter] {

document.body.style.backgroundImage = "url('/images/" + dogPhotos[counter] + ".png')";

break;

}

}

}

The length property

The Array object has just a couple of properties, but the only one of these that you'll use frequently is the length property:

array.length

The length property returns the number of elements that are currently in the specified array. This is very useful when looping through an array because it means you don't have to specify a literal as the maximum value of the loop counter. For example, consider the following for() statement:

for (var counter = 0; counter < 5; counter++) {

dogPhotos[counter] = "dog-" + (counter + 1);

}

This statement assumes the dogPhotos array has five elements, which might not be the case. To enable the loop to work with any number of elements, replace 5 with dogPhotos.length:

for (var counter = 0; counter < dogPhotos.length; counter++)

dogPhotos[counter] = "dog-" + (counter + 1);

}

Note, too, that the loop runs while the counter variable is less than dogPhotos.length. That's because array indexes run from 0 to the array’s length value minus 1. In other words, the previous for() loop example is equivalent to the following:

for (var counter = 0; counter <= dogPhotos.length - 1; counter++)

Concatenating to create a new array: concat()

The concat() method takes the elements of an existing array and concatenates one or more specified values onto the end to create a new array:

array.concat(value1, value2, …)

• array: The name of the array you want to work with.
• value1, value2, …: The values you want to concatenate to array. This can also be another array.

Note that the original array remains unchanged. The following code demonstrates using concat() to concatenate two arrays into a third array, each element of which is printed to the page, as shown in Figure 7-1.

HTML:

<div id="output">

</div>

JavaScript:

var array1 = new Array("One", "Two", "Three");

var array2 = new Array("A", "B", "C");

var array3 = array1.concat(array2);

var str = "";

for (var counter = 0; counter < array3.length; counter++) {

str += array3[counter] + "<br>";

}

document.getElementById("output").innerHTML = str;

Creating a string from an array's elements: join()

The join() method enables you to take the existing values in an array and concatenate them together to form a string. Check out the syntax:

array.join(separator)

• array: The name of the array you want to work with.
• separator: An optional character or string to insert between each array element when forming the string. If you omit this argument, a comma is inserted between each element.

In the following code, three arrays are created and then join() is applied to each one using a space as a separator, then the null string (""), and then no separator. Figure 7-2 shows the resulting page output.

HTML:

<div id="output">

</div>

JavaScript:

var array1 = new Array("Make", "this", "a", "sentence.");

var array2 = new Array("antid", "isest", "ablis", "hment", "arian", "ism");

var array3 = new Array("John", "Paul", "George", "Ringo");

var string1 = array1.join(" ");

var string2 = array2.join("");

var string3 = array3.join();

document.getElementById('output').innerHTML = string1 + '<br>' + string2 + '<br>' + string3;

The Array object's toString() method performs a similar function to the join() method. Using array.toString() takes the values in array, converts them all to strings, and then concatenates them into a single, comma-separated string. In other words, array.toString() is identical to array.join(","), or just array.join().

Removing an array's last element: pop()

The pop() method removes the last element from an array and returns the value of that element. Here’s the syntax:

array.pop()

For example, consider the following statements:

var myArray = new Array("First", "Second", "Third");

var myString = myArray.pop();

The last element of myArray is "Third", so myArray.pop() removes that value from the array and stores it in the myString variable.

After you run the pop() method, JavaScript reduces the value of the array's length property by one.

Adding elements to the end of an array: push()

The push() method is the opposite of pop(): It adds one or more elements to the end of an array. Here's the syntax to use:

array.push(value1, value2, …)

• array: The name of the array you want to work with.
• value1, value2, …: The values you want to add to the end of array. This can also be another array.

push() differs from the concat() method in that it doesn't return a new array. Instead, it changes the existing array by adding the new values to the end of the array. For example, consider the following statements:

var myArray = new Array("First", "Second", "Third");

var pushArray = new Array("Fourth", "Fifth", "Sixth");

for (var i = 0; i < pushArray.length; i++) {

myArray.push(pushArray[i]);

}

After these statements, myArray contains six values: "First", "Second", "Third", "Fourth", "Fifth", and "Sixth". Why didn't I just add the entire pushArray in one fell swoop? That is, like so:

myArray.push(pushArray);

That’s perfectly legal, but it would mean myArray would contain the following four elements: "First", "Second", "Third", and pushArray, which means you've created a kind of hybrid multidimensional array, which is probably not what you want in this situation.

After you run the push() method, JavaScript increases the value of the array’s length property by the number of new elements added.

Reversing the order of an array's elements: reverse()

The reverse() method takes the existing elements in an array and reverses their order: The first moves to the last, the last moves to the first, and so on. The syntax takes just a second to show:

array.reverse()

The following code puts the reverse() method to work, and Figure 7-3 shows what happens.

var myArray = new Array("Show", "Place", "Win");

myArray.reverse();

var str = "";

for (var counter = 0; counter < myArray.length; counter++) {

str += myArray[counter] + "<br>";

}

document.getElementById("output").innerHTML = str;

Removing an array's first element: shift()

The shift() method removes the first element from an array and returns the value of that element:

array.shift()

For example, consider the following statements:

var myArray = new Array("First", "Second", "Third");

var myString = myArray.shift();

The first element of myArray is "First", so myArray.shift() removes that value from the array and stores it in the myString variable.

After you run the shift() method, JavaScript reduces the value of the array's length property by one.

Returning a subset of an array: slice()

The slice() method returns a new array that contains a subset of the elements in an existing array. Take a look at the syntax:

array.slice(start, end);

• array: The name of the array you want to work with.
• start: A number that specifies the index of the first element in array that you want to include in the subset. If this number is negative, the subset starting point is counted from the end of array (for example, -1 is the last element of the array).
• end: An optional number that specifies the index of the element in array before which you want the subset to end. If you leave out this value, the subset includes all the elements in array from start to the last element. This value can be negative.

If you use a negative number for the start value, the end value must also be negative, but it must be larger than start. For example, if you use -4 for start, then end can only be -1, -2, or -3.

The following code defines an array and then tries out various values for the slice() arguments. The results are shown in Figure 7-4.

var myArray = new Array("A", "B", "C", "D", "E", "F");

var array1 = myArray.slice(0, 4);

var array2 = myArray.slice(3);

var array3 = myArray.slice(-3, -1);

var str = "array1: " + array1 + "<br>";

str += "array2: " + array2 + "<br>";

str += "array3: " + array3;

document.getElementById('output').innerHTML = str;

Ordering array elements: sort()

The sort() method is an easy way to handle a common programming problem: rearranging an array's elements to put them in alphabetical, numerical, or some other order. Here’s the syntax:

array.sort(function)

• array: The name of the array you want to work with.
• function: An optional name of a function that specifies the sort order. If you leave out this argument, the elements of array are sorted alphabetically.

Using sort() without an argument gives you a straightforward alphabetical sort:

myArray.sort();

If you want to sort the array based on some other criterion, then you need to create a function to define the sort order. Your function must be set up as follows:

• The function must accept two arguments. For the purposes of this list, I'll call these arguments a and b.
• Using these arguments, the function must define an expression that returns a numeric value.
• For those cases where you want a sorted before b, the function must return a negative value.
• For those cases where you want a sorted after b, the function must return a positive value.
• For those cases where you want a and b to be treated equally, the function must return zero.

The following code shows a function named numericSort that you can use if you want a numeric sort from lowest to highest. Figure 7-5 displays the original array and then the sorted array.

// This function sorts numbers from lowest to highest

function numericSort(a, b) {

return (a - b);

}

var myArray = [3, 5, 1, 6, 2, 4];

// Write the array before sorting it

var str = "myArray (before sorting): " + myArray + "<br>";

// Sort the array

myArray.sort(numericSort);

// Write the array after sorting it

str+= "myArray (after sorting): " + myArray;

document.getElementById('output').innerHTML = str;

To get a numeric sort from highest to lowest, use the following return expression, instead:

return (b - a);

What if you want a reverse alphabetical sort? Here's a function that will do it:

function reverseAlphaSort(a, b) {

if (a > b) {

return -1

}

else if (a < b) {

return 1

}

else {

return 0

}

}

Removing, replacing, and inserting elements: splice()

The splice() method is a complex function that comes in handy in all kinds of situations. First, here’s the syntax:

array.splice(start, elementsToDelete, value1, value2, …)

• array: The name of the array you want to work with.
• start: A number that specifies the index of the element where the splice takes place.
• elementsToDelete: An optional number that specifies how many elements to delete from array beginning at the start position. If you don't include this argument, elements are deleted from start to the end of the array.
• value1, value2, …: Optional values to insert into array beginning at the start position.

With splice() at your side, you can perform one or more of the following tasks:

• Deletion: If elementsToDelete is greater than zero or unspecified and no insertion values are included, splice() deletes elements beginning at the index start. The deleted elements are returned in a separate array.
• Replacement: If elementsToDelete is greater than zero or unspecified and one or more insertion values are included, splice() first deletes elements beginning at the index start. It then inserts the specified values before the element with index start.
• Insertion: If elementsToDelete is 0, splice() inserts the specified values before the element with index start.

The following code demonstrates all three tasks, and the results are shown in Figure 7-6.

var array1 = new Array("A", "B", "C", "D", "E", "F");

var array2 = new Array("A", "B", "C", "D", "E", "F");

var array3 = new Array("A", "B", "C", "D", "E", "F");

// DELETION

// In array1, start at index 2 and delete to the end

// Return the deleted elements to the delete1 array

var delete1 = array1.splice(2);

// Write array1

var str = "array1: " + array1 + "<br>";

// Write delete1

str += "delete1: " + delete1 + "<br>";

// REPLACEMENT

// In array2, start at index 3 and delete 2 elements

// Insert 2 elements to replace them

// Return the deleted elements to the delete2 array

var delete2 = array2.splice(3, 2, "d", "e");

// Write array2

str += "array2: " + array2 + "<br>";

// Write delete2

str += "delete2: " + delete2 + "<br>";

// INSERTION

// In array3, start at index 1 and insert 3 elements

array3.splice(1, 0, "1", "2", "3")

// Write array3

str += "array3: " + array3;

document.getElementById('output').innerHTML = str;

Inserting elements at the beginning of an array: unshift()

The unshift() method is the opposite of the shift() method: It inserts one or more values at the beginning of an array. When it's done, unshift() returns the new length of the array. Here's the syntax:

array.unshift(value1, value2, …)

• array: The name of the array you want to work with
• value1, value2, …: The values you want to add to the beginning of array

For example, consider the following statements:

var myArray = new Array("First", "Second", "Third");

var newLength = myArray.unshift("Fourth", "Fifth", "Sixth");

After these statements, myArray contains six values — "Fourth", "Fifth", and "Sixth", "First", "Second", and "Third" — and the value of newLength is 6.