Working with arrays could be difficult sometimes if you don't know the right methods to use, when to use them and how to use them. Knowing these help to sort of simplify (I know that's not the best word to use) coding since we use array in our day-to-day lives as developers.
You probably have read some stuff about this method but you still do not know when to use them and how to use them. We shall be digging into that shortly and change that narrative for you forever 😉.
There are many array methods (33 precisely!) that exists and we will not cover all in this tutorial. Although, we will cover a few that could come in handy when you need to work with arrays in your project (let me know in the comments if you want an article covering all the methods).
Heyyyyyy! Slow down a little. Thanks for doing just that. I want to let you know that we shall be getting our hands dirty with some code so that you can see first hand how these methods work. Suffice to say; less talk, more action.
Shall we? If your answer is a yes, then scroll downwards. If not, scroll downwards still - you'll get convinced on the way 😆
Yes, this is the first array method we shall be looking at.
What is it used for?
Oh, I was coming to that in a bit. I'm glad you asked😊
splice() is used to add or remove an element(s) from an array.
See for yourself
const cities = ["Lagos", "Nairobi", "Kigali", "Africa"]; cities.splice(2, 0, "Accra", "Burundi"); //result:['Lagos', 'Nairobi', 'Accra', 'Burundi', 'Kigali', 'Africa']
the first parameter
2 defines which position the incoming element(s) should occupy.
the second parameter
0 defines how many elements are to be removed. In this case none.
"Accra" and "Burundi" was added to position
What if we change the second parameter from
1. What happens?
const cities = ["Lagos", "Nairobi", "Kigali", "Africa"]; cities.splice(2, 1, "Accra", "Burundi"); //result: ['Lagos', 'Nairobi', 'Accra', 'Burundi', 'Africa']
"Kigali" was removed because we specified to remove one element that is at position
2 before adding "Accra" and "Burundi" to the array.
What if we don't want to add anything to the array. We just want to remove?
Now let's remove "Nairobi" from the original array
const cities = ["Lagos", "Nairobi", "Kigali", "Africa"]; cities.splice(1, 1,); //result: ['Lagos', 'Kigali', 'Africa']
We have successfully removed "Nairobi" from the array. We specified that one item should be removed starting from position one.
Got it? Oh, yes!
Nowwww... unto the next.
We can use
slice() in a similar way with
splice(). Although, it's a little different.
slice() only removes from the array and don't add.
slice(), like the name, slices out of the array.
Let's extract just "Africa" from the array.
const cities = ["Lagos", "Nairobi", "Kigali", "Africa"]; const continent = cities.slice(3); //result: ['Africa']
We had to create a new binding because
slice() creates a new array bu
t does not mutate the source array. So we needed a new binding to store the new array.
If you log
cities to the console, "Africa" is still intact in there. But if you log
continent, only "Africa" exists - that's the new array
You can also pass two parameters inside the
splice method. The first is to indicate the position to start the extraction from and the second is the number of elements to extract.
Nowww... unto the next.
filter() method creates a new array filled with elements that pass a test provided by a function.
Okay let's use this definition to do something.
Let's get numbers greater than 2 in the array.
const numbers = [1,2,3,4,5,6,7] const sum = numbers.filter(num => num > 2) // result:[3, 4, 5, 6, 7]
num, passed as a parameter (the first parameter), defines each element in the array. This parameter is required (you could use any name in place of
num. Just ensure it is simple and readable). This methods can also take some optional parameters like:
index: the position of the current element.
arr: the array of the current element
something like this:
array.filter(function(currentValue, index, arr), thisValue)
map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
As example, let's use this method to multiply each element in our array
const numbers = [1,2,3,4,5,6,7] const multiply= numbers.map(num => num * 2) // result: [2, 4, 6, 8, 10, 12, 14]
Let's take a pause here. So that you can go practice on what we've done so far.