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 😉.
What are array methods in JavaScript
JavaScript array methods are built in functions that helps you manipulate an array - this manipulation includes changing the array, calculating the array values, adding or removing an element from it and so on.
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 😆
splice()
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 2.
What if we change the second parameter from 0 to 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.
slice()
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 splice()
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()
The 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]
```
{% raw %}`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
`thisValue`: default
something like this:
`array.filter(function(currentValue, index, arr), thisValue)`
## map()
The `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.
Hurrayyyyyyyy!
Top comments (0)