![Cover image for Beginner's guide to JavaScript arrays [PART 1]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Ff33mu67skrxxg6slfggy.jpg)
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!!!
Top comments (7)
Great tutorial, hope to the part 2 soon
Thanks... PART 2 will be ready soon
I learnt something new: "add new elements of an array using the .lenght property." Thanks so much for this... Waiting for part 2.
Loved it. Thanks 👍🏿
Great tutorial
Thanks bro...
Thank you!