Welcome

In this article, I will show you why you should care about arrays and I will be using a bowl of sugar to explain array methods in Javascript.

What is an Array?

The array is simply a collection of data, let’s see an array as a container such as a bowl that can contain any item, you can store any type of item known as data such as string, integer, objects, or even another array inside of an array. Since we are seeing an array is a container, then we can say the bowl below is an array of sugar.

Array in JavaScript

The array is one of the essential concepts or data structures to understand as a JavaScript developer, because most of the time, you will be working with collections of data for example; users data, the number of likes, comments, and views on a blog post. The array allows us to organize all of these data easily in a container for us to work with, the above example can be translated into an array as shown below.

const postData = ["John Doe", "10 likes", "5 comments", "20 views"];

In order to create a new array data structure, you need to wrap the items with the square brackets [ ] and separate each of the data with a comma, as demonstrated above. You can as well store integer values and boolean or any other data types inside of an array like this:

const integerData = [ 1, 2020, 3, 19];
const booleanData = [true, false];

Accessing Data in an Array

Now that we have seen how to create and store data in an array, the next question is how do we access the data inside of an array just as we will easily pick a cube of sugar from a bowl. The bracket notation is used to access individual data in an array using their index number, say, for example, we want to print out or retrieve the name of the author to the screen since we know it is the first data in the array, the bracket notation can be written as.

const postAuthor = postData[0]; // "John Doe"

Or like this to print it to the console.

 console.log(postData[0]); // "John Doe"

Note: JavaScript is zero-indexed which means, counting begins from 0 and not 1.

There are four data items in the postData array, and they can be assigned individually using their index number like this.

console.log(postData[0]); // John Doe
console.log(postData[1]); // 10 likes
console.log(postData[2]); // 5 comments
console.log(postData[3]); // 20 views

If you try accessing an index that is not present in an array, the array will return undefined, which means, the index does not exist.

console.log(postData[4]); // undefined

This mistake can be prevented by knowing the size of the array before accessing the data in it, you can obtain the size of an array if you’re not sure by using the javascript length property as shown below.

console.log(postData.length); // 4

The javascript length property returns the numbers of data in an array, as shown above, the total item in the array is 4, which means the index is 0, 1, 2, 3.

Note: The size of an array is also the same as the total number of items in an array.

In this section, you have learned how to create and access a data item from an array, in the next section, you will learn what array methods are and how you can make good use of them.

JavaScript Array Methods

Array methods simply refer to the built-in functions provided in javascript that allow us to quickly perform an action on an array without writing them from scratch. Do you remember we have a bowl of sugar? Which we can also refer to as an array of sugar?

In real life, we should be able to perform the actions below in our bowl of sugar.

Remove the last cube of sugar from the bowl (POP method)
Add a new cube of sugar to the bottom of the bowl (PUSH method)
Remove the first cube of sugar from the bowl (SHIFT method)
Add a new cube of sugar to the bottom of the bowl (UNSHIFT method)
And many more methods that can make interactions with an array easier and quick with less code.

We will be applying these array methods to the array of sugar below.

 const arrayOfSugar = ["cube1", "cube2", "cube3", "cube4"]

The Pop Array Method

The pop array method is used to remove the last item in an array, and it can be applied like this.

 array.pop();

With the pop() array method, we can remove the last cube of sugar which is cube4 from the array of sugar as shown below.

arrayOfSugar.pop()

Now we are left with only 3 cubes of sugar in our array of sugars

const arrayOfSugar = ["cube1", "cube2", "cube3"]

Play with the code below in your code editor to see how pop works on an array.

 const arrayOfSugar = ["cube1", "cube2", "cube3", "cube4"]
 // Before applying pop() method
 console.log(arrayOfSugar) // "cube1", "cube2", "cube3", "cube4"

 // pop() method to remove the last element from an array
 arrayOfSugar.pop()

 // After applying pop() method
 console.log(arrayOfSugar) // "cube1", "cube2", "cube3"

Note: You can apply the pop() array method as many times as you want to remove items from the end of an array.

The Push Array Method

The push() array method is used to add a new item to the end of an array, and it is applied as shown below:

array.push(newItem)

Let’s say we want to update the array of sugar with an extra cube of sugar but we want it to be placed at the end of the array or bottom of the bowl, we can use the push array method to achieve this as demonstrated below.

 const arrayOfSugar = ["cube1", "cube2", "cube3", "cube4"]

 // Before applying push() method
 console.log(arrayOfSugar) // "cube1", "cube2", "cube3", "cube4"

 // push() method to add a new element to the end of an array
 arrayOfSugar.push("cube5")

 // After applying push() method
 console.log(arrayOfSugar) // "cube1","cube2","cube3","cube4","cube5"

The code above demonstrates how to add a single element at the end of an array using the push() method, you can proceed to add as many cubes of sugar to the array as below

 // push() method to add multiple elements to the end of an array
 arrayOfSugar.push("cube5", "cube6", "cube7")

The Shift Array Method

The shift() array method is used to remove the first element in an array, this is the opposite of the pop() array method which removes the last element in an array. The shift() array method can be applied using this format.

 array.shift()

Let’s remove the first cube of sugar from the array of sugars and use it for our coffee.

 const arrayOfSugar = ["cube1", "cube2", "cube3", "cube4"]
 // Before applying the shift() method
 console.log(arrayOfSugar) // "cube1", "cube2", "cube3", "cube4"

 // shift() method to remove the first element of an array
 arrayOfSugar.shift()

 // After applying the shift() method
 console.log(arrayOfSugar) // "cube2", "cube3", "cube4"

The cube1 which is the first element in the array has been deleted from the array using the shift() array method.

The Unshift Array Method

The unshift() array method is used to add a new element at the beginning of an array, it is the opposite of the push() array method that adds an element at the end of an array.
The unshift() array method can be applied to an array like below:

array.unshift()

Let’s add a new cube of sugar named “cube0” to the array of sugar.

 const arrayOfSugar = ["cube1", "cube2", "cube3", "cube4"]
// Before applying the unshift() method
 console.log(arrayOfSugar) // "cube1", "cube2", "cube3", "cube4"

// unshift() method to add a new element at the beginning of an array
 arrayOfSugar.unshift("cube0")

// After applying the unshift() method
 console.log(arrayOfSugar) // "cube2", "cube3", "cube4"

You can add multiple elements to the beginning of an array using the unshift() method like below:

 // unshift() method to add multiple elements at the beginning of an array
 arrayOfSugar.unshift("cube-2", "cube-1", "cube0")

Take-Aways

The pop() removes the last sugar/item in our bowl/array.
The push() adds a new sugar/item to the end of our bowl/array.
The shift() method removes the first sugar/item from our bowl/array.
The unshift() method adds a new sugar/item at the beginning of our bowl/array.

What's Next!

They are a couple of useful Javascript array methods that are worth learning, these includes but not limited to:

And more, remember that array methods are there to make life easier for JavaScript developers when working with javascript arrays

Conclusion

Congratulations on making it to the end of this tutorial, in this article, we have learned about javascript array and the array methods, the concept learned from this tutorial will assist you to work with any array methods in javascript going forward.

If you like this article then, you should check out my Introduction to JavaScript Again and JavaScript syntax profile, where I break down some basic concepts in JavaScript.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

See you in the next article. Bye Bye 🙋‍♂️

If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee 🙏.

Unclebigbay's 🚀 Blog