Javascript array and array methods for beginners - Part 1

What is an array in Javascript?
In Javascript, an array is a data structure that can be used to store a collection of data in a single variable. Arrays in JavaScript are index-based. An index is a numerical value that can be used to access the data stored in an array. Indexes start from 0(zero).

// Basic example of an array
let fruits = ['Apple', 'Mango', 'Grape'];

Arrays can take any type of data such as string, number, boolean, object, and even an array.

// An array with multiple types
let array = [1, 'yam', false, {name: 'James', age: 20}, [1,2,3]];

Creating Arrays
Arrays can be created in various ways. Using an array literal is the easiest way to create an array in JavaScript.

// Array literal
const array_name = [item1, item2, item3, ...];

An array can also be created using the Array constructor :

// Array constructor
 const names = new Array('John', 'Caleb', ...);

Also, you can have an empty array and add items to it.

let randomArray = []
randomArray.push(1,2,'first');

Accessing Array Elements
As stated earlier, arrays in Javascript are index-based. These indexes can be used to access items in an array. For example, if we have an array of fruits, we could pick any fruit we want with its index.

const fruits = ['Apple', 'Mango', 'Grape']
console.log(fruits[0]); // output: "Apple"
console.log(fruits[1]); // output: "Mango"

Iterating Through Arrays
Looping through array elements is a common way to work with arrays in Javascript. This is achieved by using various loop constructs such as for, while, or the forEach method.

while loop
The while loop can be used to evaluate a condition. If the condition is true, the code inside the while loop is executed. If it is false, the loop is terminated.

To loop through an array, we can use the length property to specify that the loop should continue until we reach the last element of our array.

Let's now use the while loop method to loop through the array:

let k = 0;
const ages = [15, 20, 30, 40, 25]

while (k < ages.length) {
    console.log(ages[k]);
    k++;
}

This will return each element in our array from left to right:

15
20
30
40
25

In the loop above, we first initialized the index number with variable k so that it begins with 0. Then the number will continue to increase and output each element until the condition we set returns false, indicating that we have reached the end of the array. When k = 5, the condition will no longer be executed because the array's last index is 4

for loop

The for loop is an iterative statement that checks for a condition and then executes a block of code repeatedly as long as the condition remains true.

For the for loop, the initialization, condition, and iteration are all handled in the bracket, as shown below:

const ages = [15, 20, 30, 40, 25]

for (let k = 0; k < ages.length; k++) {
    console.log(ages[i]);
}

This will also return all elements like the while loop

15
20
30
40
25

Similar to the for loop, we have the for...in and the for...of loops. They work similarly to the for loop but with easier syntax.

for...in loop

The for…in loop is an easier way to loop through arrays as it gives us the key which we can now use to get the values from our array this way:

const ages = [15, 20, 30, 40, 25]

for (k in ages) {
  console.log(ages[k]);
}

This will output:

15
20
30
40
25

for...of loop

The for...of Loop is also one of the easiest methods for looping through an array, and it was added in subsequent versions of JavaScript ES6.

It iterates over iterable objects like arrays, sets, maps, strings, and so on. It uses the same syntax as the for...in loop, but instead of getting the key, it gets the element itself. So in this case, we don't need to use an index to get the elements of our array.

const ages = [15, 20, 30, 40, 25]
for (age of ages) {
    console.log(age);
}

Outputs:

15
20
30
40
25

Conculsion

Arrays are fundamental to JavaScript and programming in general. Their flexibility and extensive methods help greatly in handling and manipulating data efficiently. In the next part of this article, we will explore array methods and how to effectively use them to manipulate array data.