Submodule 7.1: Arrays

Site: ΕΛ/ΛΑΚ Moodle
Course: Study / Web Design and Web Development
Book: Submodule 7.1: Arrays
Printed by: Guest user
Date: Thursday, 28 March 2024, 2:03 PM

Description

  • Definitions
  • Accessing an array
  • Array methods

Definitions

What is an array? 

Arrays are JavaScript’s simplest way of ordered collections of data. They are used to store multiple values in a single variable.

You can think array as a group of "boxes". Each box has a unique identity, which is called an index. The index of the first box is 0.

Array

Creating an array 

This is how you can create a new array which contains 5 "boxes":

var colors = ["red", "green", "blue", "cyan" , "black"];

Also, you can first create an empty array and then fill it with various elements.

var myArray = [];
myArray[0] = "cat";
myArray[1] = 1;
myArray[2] = true;
myArray[3] = ["a", "b"];

Arrays can contain anything! This means that they can contain any data type (string, number, boolean), even an array!

How can I access an array?

Access the Full Array

With JavaScript, we can access an array by referencing its name:

<!DOCTYPE html>
<html lang="en">
  <head>
       <title>Accessing an array </title>
  </head>
  <body>
       <h3>Accessing an array </h3>
       <div id="thearray"></div>
       <script>
            var myArray = [];
             myArray[0] = "cat";
             myArray[1] = 1;
             myArray[2] = true;
             myArray[3] = ["a", "b"];
            alert (myArray);
             document.getElementById("thearray").innerHTML = myArray;
             console.log (myArray);
       </script>
  </body>
</html>
Access the elements of an array 

Also, we can  access the array elements by referring to the index number:

console.log (myArray[2]) /*true*/

Exercise

  1. Open your editor, create a new file and save it as exersice07.1.02.html in the folder "yourNameWEB2JS".
  2. Copy the above code and paste it into the new file.
  3. Save the file and preview it in your editor or your browser. Does everything appear right? Inspect you Console to see the results.  

Array methods

Let's study some of the available Array methods:

JOIN()

Use array.join(separator) to convert an array into a string:
the separator is by default ",". However, you can change the default by passing a different value. 

var color = ["red", "green", "blue"];
console.log(color.join(" and "));
/* This shows : red and green and blue*/
var color = ["red", "green", "blue"];
console.log(color.join());
/* This shows : red,green,blue*/
CHANGING SOMETHING

With this array:var color = ["red", "green", "blue"];
You can change something stored in the array like this:

color[2] = "magenta";
/* Now color is : ["red", "green", "magenta"]*/

The above code, goes to the index=2 of the array and change its value to the new value.

ARRAY SIZE

You can learn the size of an array (i.e. how many boxes it has) using array.length:

var color = ["red", "green", "blue"];
alert(color.length); /* This shows 3 */
ADDING TO THE END

Add a new element to the end of an array with array.push():
The index is automatically updated

var color = ["red", "green", "blue"];
color.push("magenta");
/* Now color is : ["red", "green", "blue", "magenta"] */
ADDING TO THE FRONT

Add a new element to the front with array.unshift():
The index is automatically updated

var color = ["red", "green", "blue"];
color.unshift("magenta");
/* Now color is : ["magenta","red", "green", "blue"] */
REMOVING FROM THE BACK

To remove an element from the end, use array.pop():

var color = ["red", "green", "blue"];
var result = color.pop();
alert(color); /* Now color is : ["red", "green"] */
alert(result); /*pop() returns the removed element, so result is : blue*/
REMOVING FROM THE FRONT

array.shift() removes an element from the front:

var color = ["red", "green", "blue"];
var result = color.shift();
alert(color); /* Now color is : ["green", "blue"] */
alert(result); /*shift() returns the removed element, so result is : red*/

The index is automatically updated

COMBINING TWO ARRAYS

Use array1.concat(array2) to combine two arrays into one:

var color = ["red", "green", "blue"];
var primes = [2, 3, 5, 7, 11];
var result = color.concat(primes);
alert(result); /*shift() returns the removed element, so result is : red, green, blue, 2, 3, 5, 7, 11*/

The index is automatically updated

For more information: https://www.w3schools.com/js/js_arrays.asp and https://www.w3schools.com/js/js_array_methods.asp

Exercise

  1. Open your editor, create a new file and save it as exersice07.1.03.html in the folder "yourNameWEB2JS".
  2. Using some of the above array methods and starting from the arrays color and primes create the array newArray = ["green", "blue", "yellow", 2, 3, 7, 13]
  3. Some optional tips: 
    • declare an empty newArray
      use the shift () method to remove red from color
      use the push () method to add yellow to the end of color
      change the 5 to 7 in primes array
      change 7 to 13 in primes array
      use the pop () method to remove 11 from the end of primes
      use the concat () method to combine color and primes arrays into newArray

  4. Save the file. Preview this file in the console 

Solution: