Array

Definition: Array is a special variable, which can hold more than one value at a time.

Arrays are variables that can hold other values. The values inside an array are called elements.

var myArray = ["apple", "banana", "orange"];

Array Structure

Each array is written inside square brackets [ ]. A pair of square brackets is to group the array elements. Commas are used to separate the elements.

Different Data Types

The array elements can have different data types:

var myArray = ["milk", 3, true]; // string, number, boolean

Multiple Elements

The array elements can also have as many elements as you want:

var friends = ["Wan Amirul", "Joshua Patel", "Abel Leong", "Roderick Sullivan"];

Accessing Array Elements

Once you declared an array with elements for example:

var fruits = ["apple", "banana", "orange"];

You can then get the value of the entire array by writing the name of the array. Let's log the array into the console:

var fruits = ["apple", "banana", "orange"];

console.log(fruits);

As you can see, the length of the Array is 3 elements and each element has an index number.

Array Indexing

Imagine an array as a list of things in an order. Each element in an array has an index position. To get the value of a specific element, you need to give an index number [0] in a pair of square brackets. For example:

var fruits = ["apple", "banana", "orange"];

console.log( fruits[2] );

Browser Console (F12):

orange

As you can see, the array with index [2] is orange.

Remember that arrays always begin at 0, so the first element will always be inside [0].

More Examples

Modifying Array Elements

To change an element in an array, we can re-assign it:

Element with index 2 is now assigned with a new value "Hello".

Array Methods

Push Method

The .push() method adds an element to the end of the array:

New element with the value 40 is now added to the end of the array.

The argument in the parenthesis is what you want to add to the array.

More Examples:

New element with the value "durian" is now added to the end of the array.

Pop Method

The .pop() method removes the last element of the array:

There is no argument in the parenthesis so just leave it blank like this .pop()

Looping Through Arrays

Elements stored in an array can be accessed one by one using the index:

var fruits = ["apple", "banana", "orange"]; // :(

console.log( fruits[0] );
console.log( fruits[1] );
console.log( fruits[2] );

Browser Console (F12):

apple
banana
orange

But this is a lot of repeated code. What if you have 100 elements in the array, will you type 100 lines of console.log code? :emoji:

The forEach() Method

The solution to the repeating code is to use the forEach() method:

var fruits = ["apple", "banana", "orange"]; // 😁

fruits.forEach(fruit => \{
    console.log(fruit);
\});

Browser Console (F12):

apple
banana
orange

As you can see, it does the same thing without repeating code!

• The fruit keyword is for each element.
• The forEach() method allows us to use each element of the fruits array.

How forEach() Works

The forEach() method actually requires a function inside the parenthesis. It calls a function once for each element in an array, in order.

The function we used in the syntax above is using an arrow function.

• Arrow function basically lets you use functions without the function keyword.
• You can also use the function directly without giving it a name:

(parameter) => \{ statements \}

fruit => \{console.log(fruit)\}

You can learn more about Arrow functions here: https://www.section.io/engineering-education/how-to-use-javascript-arrow-functions-and-this-keyword/

forEach() Examples

Example One: Log each fish element to the console:

var fishes = ["Salmon", "Sardine", "Tuna"];

fishes.forEach(fish => \{
    console.log(fish);
\});

Browser Console (F12):

Salmon
Sardine
Tuna

Example 2: Increase each number by 5 and log each number element to the console:

var x = [10, 20, 30];

x.forEach(number => \{
    console.log(number + 5);
\});

Browser Console (F12):

15
25
35

Additional Array Methods

There are actually around 30 array methods available. Methods we learnt such as forEach(), push(), pop() are just one of them.

You can find out more under Array Methods: https://www.w3schools.com/jsref/jsref_obj_array.asp

Summary

Key Concepts Summary

• Arrays are special variables that can hold multiple values at once
• Array elements are accessed using index numbers starting from 0
• Arrays can hold different data types (strings, numbers, booleans) in the same array
• The push() method adds elements to the end of an array
• The pop() method removes the last element from an array
• The forEach() method allows you to loop through all array elements efficiently
• Arrow functions provide a shorter syntax for writing functions in methods like forEach()
• Arrays have many built-in methods for manipulating and working with data