Beginner's guide to JavaScript arrays [PART 1]

When building basic or complex web applications, chances are you will run into arrays and being able to manipulate data in an array will prove to be extremely useful especially when you are still trying to get comfortable with Javascript. I will take out time to explain what arrays are and when and how to use its methods.

What are arrays ?

In plain terms, arrays can be said to be an impressive display or range of a particular type of thing. In terms of programming and data structures, the explanation goes a bit further. An array data structure, or simply an array, is a data structure consisting of a collection of elements, each identified by at least one array index or key. But it is often more useful to think of an array as a collection of variables of the same type

In javascript, arrays are created by specifying the array name followed by the assignment operator(=) and holds its values inside square brackets separated by a comma. That is

let arrayname = []; // An empty array

let array = ["ben", "tammy", "bentammy"]; //array with values.

We can access the value of array using and index key which specifies the location at which it occurs. Array indexes in javascript (and most programming languages) usually begin at 0 and 1, so when you want to make reference to the first item on an array, you would use '0' rather than '1'. For example

// We create an array of friends

let friends = [
  "Daniel",
  "Elvis",
  "Favour",
  "Preye",
  "Kevwe",
  "Deborah",
  "Ellie",
  "Miracle",
  "Joshua",
  "Casey",
];

The first value of this array would be accessed using an index key of 0. So if we wanted to output that, we would have something like

console.log(friends[0]); // This will print Daniel

console.log(friends[1]); // This will print  Elvis

Let's assume you wanted to get the full length of array and know how many values it holds, you will use the "length" property which returns the full length of the array. Example using the above array

console.log(friends.length); // Prints 10 to the console.

Modifying an array

When working with data, it is common practice to want to either add new data, remove older ones or modify existing ones and javascript provides solutions to making this possible.

Adding new array items

We will still be working with the earlier defined array. Let's assume I meet someone new and I wanted to make them friends also, I can easily add them to my friends array by using the ".push()" method.

Example

friends.push("Nora"); // This adds a new array item to the friends array

You can also add new elements of an array using the .lenght property

Example

friends[friends.length] = "Victor"; //Adds Victor to the array

Removing items from an array

You can choose to remove existing array elements using a few built it javascript methods. This is demonstrated in the example below still using our friends array from earlier

.pop()

The pop method removes the last element of the array, returns that element, and updates the length property

friends.pop(); // Will remove Nora from the array

.shift()

The shift method works much like the pop method except it removes the first element of a JavaScript array instead of the last

friends.shift(); // Will remove Daniel from the array

.splice()

The splice method can be used to add or remove elements from an array. It usually takes two arguments when removing items from an array. The first argument specifies the location at which to begin removing elements. The second argument specifies the number of elements to remove

friends.splice(2, 2);

/* This will remove two elements from the friends array starting from the element with the index of 2.
The above will remove Favour and Preye from the array
*/

Modifying items in an array

We can change the value of an element in an array by simply making reference to its index and changing its value. Using our friends array, Let's assume we want to change the name of Daniel to Oke, we would simply do the following

friends[0] = "Oke"; // Changes Daniel to Oke

Iterating and Displaying Contents of an array

It is usually useful to not just show one element in an array, but also be able to display all elements of an array. This process is called "iteration" and it a common practice to iterate over an array either to perform specific operations or just to display them. This can be achieved in various ways

for Loop

The for loop is a very common way to perform iterations in javascript and it comes in very handy when you want to display the contents of an array. It usually takes three arguments, the first is to initialize the loop, the second specifies a condition and the third specifies what action should be performed. Let's assume we want to print all the contents of the friends array, we would have something like

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

From the above, We initialize the loop from 0, and then we specify our condition and then an action. We tell the browser that as long as our initial value of "i" is less than the length of our array that it should increment (add one) to the value of "i". Inside the for loop, we tell the browser to print current index of the array depending on the current value of "i". So when the value of "i" is zero, the browser prints "Daniel", when it is one, the browser prints "Elvis" and it goes on and on till there is nothing else left to print.

forEach()

This is the Array method that we can use to execute a function on each item in an array. It is specifically designed to work with arrays and provides a more modern ways to iterating over and array and performing distinct actions. To achieve the same result as the above we can simply do

friends.forEach((e) => {
  console.log(e);
});

// This will still print all elements of the friends array

The forEach loop can sometimes take some getting used to, so you can read more on how it works Here!.

That's it for now!! We will go further and discuss more about array methods in the PART 2 of this post. Thank you!!!