📖 JavaScript Arrays

The Array Object

Arrays are a special type of object in JavaScript. They are used to store lists of items and can be modified programmatically. An array contains a set of data represented by a single variable name. The array object in JavaScript has many built-in properties and methods. There are a variety of methods for accessing elements from the array.

Creating an Array
  • To create an array:
    var arrayName = [];
  • You can create an array and assign values to the elements at the same time:
    var daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  • Each occurrence of an array is called an element. Elements are numbered (indexed) beginning with 0 (zero).
    [0]="Sunday", [1]="Monday", [2]="Tuesday", ...

Arrays are lists. To make a list in JavaScript, create an array (list) of items.

/* Example */
   var items = ['milk', 'bread', 'eggs', 'juice'];
// items index [  0,       1,      2,       3   ];

/* Items Array */
index => item
  0   => milk
  1   => bread
  2   => eggs
  3   => juice
Selecting Items from an Array

To get a single item from the list, use the array index to identify the item.
Numeric arrays have numbered indexes beginning with 0 index identifying the first item in the array.

/* Example */
var item = items[0];   // Picks the first item from the array
document.write(`The item chosen is ${item}.`); // Writes the following to the page

/* Output */
The item chosen is milk.

Since arrays always end with index 1 less than the count of the array, using length-1 for the index will always return the last item.

/* Example */
var item = items[items.length-1];   // Picks the last item from the array
document.write(`The item chosen is ${item}.`); // Writes the following to the page

/* Output */
The item chosen is juice.
Adding Items to the Array

Now add an item to the end of the list.

/* Example */
items[4] = 'coffee';
/* Or use the length property if the last key is unknown */
items[items.length] = 'coffee';

/* New List */
   milk
   bread
   eggs
   juice
   coffee

Now add an item to the beginning of the list.

/* Example */
items.unshift('cereal');

/* New List */
   cereal
   milk
   bread
   eggs
   juice
   coffee
Removing Items from the Array

You can remove an item from the end of the list.

/* Example */
items.pop();

/* New List */
   cereal
   milk
   bread
   eggs
   juice

You can also remove an item from the beginning of the list. Which brings us back to the original list.

/* Example */
items.shift();

/* New List */
   milk
   bread
   eggs
   juice
Looping Through an Array

The foreach() loop was built specifically for looping through arrays. In JavaScript, the foreach() loop is designed to call a function for each element of the array. The callback function in the foreach() loop takes 3 arguments (in order).

  1. value - this is the value of the array element
  2. index - this is the numeric index of the array element
  3. array - this is the array content

The function determines what is done with each of the array elements. If the callback functions does not use the index and array elements, they can be omitted from the function call.

/* Example */
var items = ['milk', 'bread', 'eggs', 'juice'];

items.forEach(myFunction);

function myFunction(value, index, array) {
   document.write(index + " " + value + "<br />";
}

// this will output the list of items in the array prefixed with their index
0 milk
1 bread
2 eggs
3 juice
Make a Working Copy of an Array

Use the .map() method to create a new array from an existing array without modifying the original array. The new array is a modified version of the original array without modifying the original array values. The map() method calls a function once for each element of the array then saves the modified element(s) to the new array.

/* Example */
var numbers = [0, 1, 2];
var newNumbers = numbers.map(myFunction);

function myFunction(num) {
   return num + 1;
}

/* Returns New Array */
newNumbers = [1, 2, 3];

/* Original */
numbers = [0, 1, 2];