It would be useful if you could store a whole list of values in a variable. Programming languages, such as JavaScript, offer this possibility an they call it an “array”.
If you take the names of the months in an array with the variable “month” for example, it will contain 12 elements. Each month can be accessed by a number.
You start with 0 as the first element of this array and count to 11. In JavaScript, the syntax for an array looks like this:
var month = new Array("January","February","March","April","May","June","July","August","September","October","November","December");The variable “months” now contains not only a value, but represents a list. There are many ways to define an array, so it also works like this:
var month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
If you want to read out the array, it works as follows:
document.write(month);
If you want to address a single value from the array, that’s how it works:
// arrayname[Index] manth[0] // Output: January
Example
See the result of the example below this code by clicking on the play button
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Months of the year</title>
</head>
<body>
<h2>The months of the year</h2>
<script type="text/javascript">
var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(months[0] + "</br>" + months[1] + "</br>" + months[2] + "</br>" + months[3] + "</br>" + months[4] + "</br>" + months[5] + "</br>" + months[6] + "</br>" + months[7] + "</br>" + months[8] + "</br>" + months[9] + "</br>" + months[10] + "</br>" + months[11]);
</script>
</body>
</html>Changing an element within an array by updating it’s value
In the example above, you see how to access elements inside an array or a string by using the index. Once you have access to an element in an array, you can update its value.
let seasons = ['Winter', 'Spring', 'Summer', 'Fall']; seasons[3] = 'Autumn'; console.log(seasons); //Output: ['Winter', 'Spring', 'Summer', 'Autumn']
- In the example above, the seasons array contained the names of the four seasons.
- However, we decided that we preferred to say ‘Autumn’ instead of ‘Fall’.
- The line, seasons[3] = ‘Autumn’; tells our program to change the item at index 3 of the seasons array to be ‘Autumn’ instead of what is already there.
The .length method
You can determine the number of elements of an array with the .length method.
const objectives = ['Learn programming, 'Read 100 books', 'Lose ebelly fat']; console.log(objectives.length); // Outcome: 3
The .push method
The .push() method of JavaScript arrays can be used to add one or more elements to the end of an array. .push() mutates the original array returns the new length of the array.
// Adding a single element:
const cart = ['apple','orange'];
cart.push('banana');
// Adding multiple elements:
const letters = [a, b];
letters.push(c, d, e);The .pop method
The .pop() method removes the last element from an array and returns that element.
const ingredients = ['eggs','flour', 'chocolate']; const poppedIngredient = ingredients.pop(); // 'chocolate' console.log(ingredients); // ['eggs', 'flour']
