Exploring Arrays

An array is a list of values called elements. Each element in the list is referenced using an index or a key name.

Five element index array illustrated.

Array lists can be expressed as a literal and can be stored in a variable.

Activities:

1. How to express and and create an array.

Literally expressed array elements are enclosed in square brackets and separated by commas […, …, …].

Example of a literal array list where all elements are string literals.

["Bob", "Mary", "Joe", "Mary", "Jane", "Sam"]

Example of a literal array list where all elements are number literals.

[100, 25, -1, 88, 0]

Values in an array can have the same or different data types.

Example of a literal array list with mixed literal data types including an array literal.

[100, 'HTML', true, -99, ['Bob','Mary','Jane']]

Any valid data expression can be included in a literal array list.

Example of a literal array list where a mix of expressions, variables and literal data is assigned to each item in the list.

[Math.random() * 100, price - cost, 1234.5, 'code red']

Example of an empty literal array list.

[]

Arrays variables are declared and assigned values like any Javascript variable.

Example of declaring without assigning any elements.

var todoList;

At this point Javascript does not know if todoList is an array.

Example of declaring an array and assigning without any elements.

var todoList = [];

The todoList variable is an array without list elementss. It is sometimes called an empty array.

Example of declaring an array and assigning elements.

var todoList = ['Banking', 'Laundry', 'Call Mom', 'Hiking'];

Example of declaring an array and separately assigning elements.

var todoList = [];
	todoList = ['Banking', 'Laundry', 'Call Mom', 'Hiking'];

2. Arrays are objects.

The properties and methods from the Javascript object named Array are automatically assigned to array variables and array literals.

This means that arrays are objects and you can use dot notation to access assigned properties and methods.

Properties and methods assigned to array variables and literals from the Array object.

The variable name arrayObj is used for examples.

Properties

  • dateObj.length. Number of items in an array.

Methods

There are many methods. This list highlights methods that are usually learned first.

  • dateObj.pop(). Removes the last item in an array and returns the value.

  • dateObj.push(expression(s)). Adds one element or a comma separated list of elements to the end of an array and returns the length property value.

  • dateObj.shift(). Removes the first element in an array and returns the value.

  • dateObj.unshift(expression(s)). Adds one element or a comma separated list of elements to the beginning of the array and returns the length property value.

Some methods for arrays require learning about writing Javascript functions such as find and sort. So we leave learning more about them later.

Properties and methods used directly on the Array object.

Methods Array object

This method is used on the Array object.

  • Array.isArray(object). Returns true or false if the object argument is an array.

A full list of properties and methods is found here.

3. How to use an indexed array.

The variable mountains is used for the examples.

var states = ['Denali', 'Mont Blanc', 'Mauna Kea', 'Matterhorn'];

Using the length property to get the count of items in an array variable.

states.length;

Using the length property to get the count of items in an array literal.

['Cheese', 'Wine', 'Crackers'].length;

Accessing the first item.

mountains[0];

Accessing the second item.

mountains[1];

Accessing the last item.

mountains[mountains.length - 1];

Adding one item to the end of the array.

mountains.push('Manaslu');

Adding two items to the end of the array.

mountains.push('Mount Washington', 'High Point');

Adding two items to the beginning of the array.

mountains.unshift('Mount Rainier', 'Robl Peak');

Changing the last item in the array.

mountains.[mountains.length - 1] = 'Pikes Peak';

Changing the second item in the array.

mountains[1] = 'Heart Mountain';

Removing the last item in an array.

mountains.pop();

Removing the first item in an array.

mountains.shift();

Using an array item in an expression.

'Name: ' + mountains[0];

Array indexes can be expressions. Expression should result in an integer number.

var itemIndex = 0;

mountains[itemIndex];

mountains[itemIndex + 3];

mountains[(itemIndex + 1) * 2];

mountains[(itemIndex + 1) * 2] = 'Yucca Mountain';

mountains[(itemIndex + 1.33) / 2];

Complete and Continue