Submodule 8.1: Arrays

Site:	ΕΛ/ΛΑΚ Moodle
Course:	Web Design and Digital Content Production
Book:	Submodule 8.1: Arrays

Printed by:	Guest user
Date:	Friday, 22 November 2024, 6:56 AM

Description

Definitions
Accessing an array
Array methods

Definitions
How can I access 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

Open your editor, create a new file and save it as exersice08.1.02.html in the folder "Exercises".
Copy the above code and paste it into the new file.
Save the file and preview it in your editor or your browser. Does everything appear right?

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*/