ARRAYS in Javascript

Array objects in The JavaScript are used in the construction of arrays. Similar to lists (in many programming languages), arrays are high-level objects ( data structure), consisting of a collection of elements, each identified by at least one array index or key. Unlike a class object, array elements may or may not be related to each other.

How to create an array

Example 1:

var colors = ['red', 'blue', 'green']; //create an array with 3 similar elements.

var numbers = [23, -100, 90.4];

var an_Array = ['John', 'is', 'here', 90.4, -12, 'dogs', 'African']; //create an array with 6 dissimilar elements.

Example 2:

Starting with an empty array

var an_Array =[];

for (var i = 0; i< 10; i++){

let cube = Math.pow(i, 3);

an_Array.push(cube); //populate the array

}

console.log( an_Array.length); //display number of item in the array

Example 3:

Starting with an empty array

var an_Array =[];

for (var i = 0; i< 10; i++){

let cube = Math.pow(i, 3);

let another_arr=[i, cube];// create an array of each i and its cube

an_Array.push(another_arr); //populate the empty array by adding an array of cube and i.

}

console.log( an_Array.length); //display number of item in the array

Example 4:

var array1 = new Array(a, b, 12, 'man');

console.log(array1); // [1, 2, 3]

console.log(array1.length); // 3

How to access an array

var an_Array = ['John', 'is', 'here', 90.4, -12, 'dogs', 'African'];

Example 1:

let third_item = an_Array[2]; // Gets the string 'here' in array index[2]

let last_item = an_Array[an_Array.length-1]; // Gets the last item in index position--- array length -1 (since the index starts at zero (0))

console.log( an_Array.length)

Checking all the elements in the array

Depending on the elements in the array (whether they are similar or not), there various ways to loop through them.

var an_Array1 = ['John', 'is', 'here', 90.4, -12, 'dogs', 'African'];

var an_Array2 = [24, 20, 12, 10, 100];

Example 1:

Using forEach()

an_Array1.forEach(function(e) {

console.log(e);

}); //displays all the items in the array on the console---Because forEach takes every element of the array and execute your order on each of them.

Example 2:

Using forEach()

an_Array2.forEach(function(e, ) {

console.log(e*e);

}); //displays the square of all the items in the array on the console. Notice that all the items in the array are similar (numbers)

Example 3:

Using for----in:

var t;

for(t in an_Array2);

let t1=an_Array2 [t]

console.log(t1*t1);

}); //displays the square of all the items in the array on the console. Notice that all the items in the array are similar (numbers)

Example 4:

Using for----length:

var t;

for(t =0; t< an_Array2.length; t++);

let t1=an_Array2 [t]

console.log(t1*t1);

}); //displays the square of all the items in the array on the console. Notice that all the items in the array are similar (numbers)

Other array Methods

pop( )------Removes the item from the end of an Array

shift()-----Removes the item from the front of an Array

unshift(an item)----Adds an item to the front of an Array

indexOf(an item)-----Finds the index of an item in the Array

splice(the index position, number of times)---Removes an item by index position, a given number of times

Note : The splice() method adds item to an array,

removes items to and from an array, and

return the removed item(s).

e.g 1:

var animals = ["Dog", "Goat", "Cow", "Lion"];
animals.splice(1, 0, "Cat");// returns ---Dog, Cat, Goat, Cow, Lion ---because the splice method says, go to index position (1), do not remove anything (0), then add Cat in that position 1.

e.g 2:

animals.splice(1, 2);// returns Dog, Lion---because the splice method says, go to index position (1), do not add anything, but remove the 2 items from that position , ---- ( "Goat", "Cow")

Example use of array Methods

<html>
<head>
</head>
<body>
<img id="source_image" alt=".." src='C:\Users\Grace\Desktop\LUVPIX.JPG' /><br><br>
   <h1>WORKING WITH STRINGS</h1><br><br>

   Enter your name here: <input id="myInput" type="text">
   <input id="btn" type="button" value = 'See your profession' onclick='c()'>
   <p id="demo"></p>

<script>
   function c(){
       var jobs =['Accountant', 'Banker', 'Curator', 'Doctor', 'Entertainer', 'Fisherman'];

The code above display your profession based on your name, you can try re-writing this code without the array and see what it looks like, you can compare the length of both codes