Arrays

Objectives

• create arrays in JavaScript
• use arrays in JavaScript
• create and use a multi-dimensional array in JavaScript
• convert an array into a string
• convert a string into an array

JavScript arrays

• arrays are memory locations that share the same name, but are distinguishable by an index value
• arrays can be declared using an Array object constructor or array literal:
  • var arr = new Array(); // creates new array with no elements
  • var arr = []; // creates new array with no elements
  • var arr = new Array(10); // creates new array with 10 elements
  • var arr = new Array(5, 1, 3, 4); // creates a new array with 4 elements: 5, 1, 3, 4
  • var arr = [5, 1, 3, 4]; // creates a new array with 4 elements: 5, 1, 3, 4
  • var arr = ['a', 'b', 'cd', 'f']; // creates a new array with 4 elements: 'a', 'b', 'cd', 'f'
• you can add and delete elements from an array:
  • arr[7] = 'hello'; // replaces element at index 7, or adds it if it didn't exist
  • arr.concat('e', 10); // adds 'e' and 10 to the end of arr
  • arr.push(5.37); // adds 5.37 to the end of arr
  • x = arr.pop(); // stores last element of arr in x and deletes it from the array
  • arr.unshift(5.37); // adds 5.37 to the beginning of arr
  • x = arr.shift(); // stores first element of arr in x and deletes it from the array
• arrays in JavaScript need not be full; for example, you can have elements at indices 0 and 9, but be missing the intermediate elements
• array elements can be different data types
• you can use for/in to iterate through arrays
• arrays have a number of other useful methods and a useful property
  • var len = arr.length; // length returns the "length" of the array
  • arr.length = 7; // length can also be used to set the length of the array!!!
  • arr.join('+'); // turns all array elements into strings and concatenates them using the provided string argument as a separator; if no argument is given, the default is to use a comma as a separator
  • arr.reverse(); // reverses the order of the elements of the array
  • arr.sort(); // sorts the elements of the array
  • arr.sort(mysort); // sorts the elements of the array using the function mysort to determine the sort order
  • arr.toString(); // returns a string representation of the array
  • arr.splice(index, number, item1, ..., itemX); // used to delete and insert elements of an array
    • index specifies the index in the array where the insert/delete will begin
    • number specifies how many items should be deleted from the array
    • item1, ..., itemX are the items which will be inserted into the array
  • arr.slice(1, 7); // returns elements at indices 1 through 6 of the array
  • arr.slice(1); // returns elements at indices 1 through the end of the array
  • arr.slice(2, -1); // returns elements at indices 2 through one less than the end of the array
  • arr.slice(-4, -1); // returns elements from index 4 before the end of the array through one less than the end of the array

Array-like notation and behavior

JavaScript also uses the array subscript notation as an option for referencing the properties of objects. In this case, the subscripts are strings. This looks and acts like what is called an associative array or a map in other languages. Technically, even though the notation and usage may look like a JavaScript array in some ways, it is not a JavaScript array.

Multi-dimensional arrays in JavaScript

Multidimensional arrays in JavaScript are created by having the elements of an array be arrays themselves. For example, to create a two dimensional array that looks like a Tic-tac-toe board and contains the numbers 1 through 9, do the following:

Converting between arrays and strings

• string.split(delimiter): tokenizes the string based on the delimiter and returns an array of the tokens
• array.join(delimter): returns a string with all of the array elements concatenated, including the delimter between each element

Array demonstration programs

• A sparse array and iteration using for, for/in loops
• Sorting form elements using an array sort
• Making the sort handle alphabetic or numeric depending on the data
• Specifying a different sort order or reversing a sort
• Demonstration of splice, slice, join, and split methods