Introduction
JavaScript array methods can be challenging for beginners to understand and remember. To help with this, I'm starting a series that covers what they are, why they're important, the different methods, their syntax, and how to use them. To make them easy to understand and remember, I have grouped them into four categories:
Adding and removing items in an array
Checking for items in an array
Sorting an array
Iteration in an array
I'll go into each category in-depth in separate articles, so keep an eye out for them!
This article is an introduction to the series and I will begin with what JavaScript array methods are and why they are important for you to understand as a beginner.
Prerequisites
To understand this article and get the most out of it, you should be familiar with the fundamentals of JavSscript, like variables and data types, however, it is not explicitly required.
What are JavaScript Arrays?
Simply put, an array is a collection of data or items. JavaScript arrays allow you to store different values of the same data type or different data types in a single variable. The most widely used way of declaring arrays is using the array literal method. i.e. putting the array items in square brackets and storing them in a variable like this:
// store different values of the same data type (strings)
const pets = ["dog", "cat", "parrot"]
// store different data types (number, string, object)
const myArray = [50, "Toyota", {name: "Kofi"}]
Each item in the array has a specific index number. You will commonly hear that arrays are 0-indexed. This means the first item in the array is given an index of 0. So instead of counting from 1, you count from 0.
For example, in the code above, the indexes of the items in the pets array will be as follows:
| Item | Index |
| “dog” | 0 |
| “cat” | 1 |
| “parrot” | 2 |
This gives us the opportunity to access each array item using its index. We do this by writing the variable name, in this case, pets, and adding the index of the item we want in square brackets.
For example, this is how we can access “parrot”:
const pets = ["dog", "cat", "parrot"]
console.log(pets[2]) // parrot
The other ways of declaring arrays:
// declaring arrays using new Array()
const pets = new Array("dog", "cat", "parrot")
// declaring arrays by declaring an empty array and then providing the elements
const pets = []
pets[0] = "dog"
pets[1] = "cat"
pets[2] = "parrot"
You can use any of the aforementioned methods of declaring an array. However, most developers use the array literal method for simplicity.
Now that you have a brief refresher on what arrays are, let’s dive into what array methods are.
What are JavaScript Array Methods?
Array methods are built-in functions that are applied to arrays to perform specific calculations or tasks. “Built-in functions” here means that there are blocks of reusable code that come with the JavaScript language and will run or be executed whenever it is called.
For example, a computer mouse usually comes with two buttons. A right button and a left button. These buttons perform specific tasks when they are clicked. In this analogy, the computer mouse is JavaScript, the buttons are the built-in functions that perform a specific task (executing a click), and clicking the button signifies a call to the function. This will mean that array methods are like the computer mouse button that will be called to perform a specific task.
Why are Array Methods Important?
Just like the buttons of a computer mouse are important for actually using the mouse, array methods help a lot in performing unique tasks on arrays in JavaScript. For example, the array method shift() is used to remove items in an array. I will talk more about this method, along with others in the next article of this series.
If you are going to be working with JavaScript, you cannot avoid arrays and array methods. You will be using them a lot in your projects and it is important to understand how they work from the onset. Arrays and array methods are also asked about in interviews and are required in most coding challenges.
Categories of Array Methods
In order to understand and remember most of the commonly used array methods, I have grouped them into four categories.
Adding and removing items
These methods are useful for adding or removing items in an array. Please note that some of them do not change the original array. They return a new array with an addition to or removal from the original array.
They include:
concat()pop()push()shift()slice()splice()unshift()
Sorting items
The methods under this category allow you to sort an array. They include:
reverse()sort()
Iterating items
Array methods for iteration operate on each item in the array. They include:
filter()forEach()map()reduce()
Checking items
Technically, most methods in this category have some sort of iteration. I say this because most of the methods operate on each item in the array, in order to check for something specific. They include:
Array.isArray()every()find()findIndex()includes()indexOf()lastIndexOf()some()length
Conclusion
An array is a collection of data or items, that are stored in a single variable. They are declared in a number of ways and the widely used way is like so:
const pets = ["dog", "cat", "parrot"]
Array methods are built-in functions that are applied to arrays. They are important to understand because they are used to perform unique tasks on arrays and are unavoidable for people who work with JavaScript.
In order to understand and remember most of the commonly used array methods, I have grouped them into four categories which I will cover individually in detail in subsequent articles:
Adding and removing items
Sorting items
Iterating items
Checking items
Thank you for reading!