Array Javascript Tutorial

An array is a list of objects.

JavaScript is a client-side web page scripting language. One feature of JavaScript is the Array data type. An array is simply a list of values that can be referenced by one variable name. Arrays can hold several different data types like strings, integers and booleans. Besides adding and removing data from arrays, you can also sort them, reverse them or even combine two arrays together. One of the main ways that JavaScript Arrays differ from other JavaScript objects is the length property. The length property tells you how many elements are contained in the array.

Instructions

1. Create an array in your JavaScript code with the statement below.

   // Example of an empty array.
   var myArray = new Array();

   // Example of an empty array of a set length.
   var myArray = new Array(5);

   // Example of an array pre-populated with values.
   var myArray = new Array("string1", "string2", "string3");

2. Determine the size of the array with the "length" property as shown in the code below.

   myArray.length;
   // This would return a value of 3.

   // Set the array to a new length (with blank values for any extra elements).
   myArray.length = 5;

3. Add an element to the end of the array with the "push" method by copying the following statement. This method has a return value of the length of the new array.

   myArray.push("string4");
   // This would return a value of 4.
   // The array will now be (string1, string2, string3, string4)

4. Insert elements into the array at a specified spot with the "splice" command shown below. The "splice" command takes three parameters: the index to insert at, the number of elements to remove at that index and the new value to insert.

   myArray.splice(2,0,"string2a");
   // The array will now be (string1, string2, string2a, string3, string4)

5. Remove elements from the array at a particular spot using the "splice" command example below. The third parameter for the "splice" method is optional.

   myArray.splice(2, 2);
   // The array will now be (string1, string2, string4)

   myArray.splice(2, 1, "newstring3");
   // The array will now be (string1, string2, newstring3)

6. Remove a single element from the end of the array using the "pop" command.

   myArray.pop();
   // The array will now be (string1, string2)

7. Remove a single element from the beginning of the array using the "shift" command. To add an element to the front of an array you would use the "unshift" command instead.

   myArray.shift();
   // The array will now be (string2)

8. Combine two arrays together with the "concat" command from the example below. The "concat" command takes at least two parameters, but can take many more.

   var myNewArray = new Array();
   var mySecondArray = new Array(3);
   var mySecondArray = new Array("newstring1", "newstring2", "newstring3");
   myNewArray = myArray.concat(mySecondArray);
   // The new array will now be (newstring1, newstring2, newstring3, string2)

9. Switch the order of all the elements in an array by calling the "reverse" command.

   myNewArray.reverse();
   // The new array will now be (string2, newstring3, newstring2, newstring1)

10. Return some elements of the array at a specified spot with the "slice" command shown below. The slice command takes two parameters: the index to start at and the number of elements to return.

    myNewArray.slice(2,2);
    // Returns (newstring3, newstring2)

11. Return the elements of an array as a single string value using the "toString" command shown below.

    myNewArray.toString();
    //Returns "string2,newstring3,newstring2,newstring1"

12. Return the elements of an array as a single string value and separate them with a character using the "join" command like this example.

    myNewArray.join(" and ");
    //Returns "string2 and newstring3 and newstring2 and newstring1"

13. Put the elements of the array in alphabetical order with the "sort" command shown below.

    myNewArray.sort();
    // The new array will now be (newstring1, newstring2, newstring3, string2)

Tips & Warnings

• You can sort the elements of an array in more complex ways by passing in the optional parameter of a sort function.

References

• W3Schools: JavaScript Array Object
• JavaScript Kit: Array Object

Resources

• W3Schools: JavaScript sort() Method