Submodule 7.1: Arrays

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: