10 Javascript array methods, from the perspective of a beginner
Hello, good people on the internet. Today i am going to talk about 10 javascript array methods that we often need to use and therefore need to understand how they work in the very basic level.
1. Array.prototype.every()
every() method is useful when you want to get a whole idea about the entire array. The every() method takes a function as an argument and loops through each element of the array to check if they pass the function.
For example let’s say you have an array of numbers and you want to check if all values are positive numbers.
First you write a function that checks whether a value is positive or negative.
const ispositive = (value) => value> 0;
Then in the every method pass the above function as argument
const arr = [3,4,2,344,45,7,8,10]
const arr2 = [3,4,2,-344,45,-7,8,10]
arr.every(ispositive) returns true
and arr2.every(ispositive) returns false because all elements need to pass the function test.
2. Array.prototype.filter()
Now, since you wanted to have an array only with positive values, why don’t we just filter out the negative numbers?
Array.prototype.filter() filters out all the elements from an array that didn’t pass the function. We can use the same arrays and the ‘ispositive’ function here.
If we run const allpositive = arr2.filter(ispositive) the allpositive would return a new array with only the positive values. Its important to remember that filter() method returns a new array and the initial array stays the same. However in both of these example you don’t need to declare the function before instead you can write them directly inside the array methods.
3 & 4. Array.prototype.forEach() and Array.prototype.map()
Foreach and map method do almost the same thing with some key difference and one is more usable than the other. Both of these method loops through the elements in the array and is able to perform some sort of function on each of the element. However foreach method cannot change the initial array or store the new modified values without writing some more code.
For example, const arr = [3,4,3,5]
Now, arr.forEach(item => console.log(item*2)) would return 6,8,6,10 in the console but won’t be able to store it or change the initial array.
Map method however works like this: const newarray = arr.map(item => item*2); Now there is a new array named newarray which has [6,8,6,10] stored in it.
However if you want to use foreach this same way, you can do this.
const arr = [3,4,3,5]; const newarray = [];
arr.forEach(item => newarray.push(item*2));
5. Array.prototype.pop()
Pop method removes the last element from an array. Its important to remember that it changes the initial array. By setting the pop method in a variable you can view the removed element.
Example:
const arr = [‘apple’, ‘mango’, ‘grape’];
since I don’t like grape, const removelast = arr.pop();
console.log(removelast) would return grape.
Console.log(arr) would return [‘apple’, ‘mango’];
6. Array.prototype.push()
It’s the opposite of pop method. It adds an extra element at the end of an array.
Now arr.push(‘orange’) and console.log(arr) would return [‘apple’, ‘mango’, ‘orange’];
7. Array.prototype.find()
This method works exactly the way it sounds. The method takes a function as argument and returns the first value that passes the function test. It’s important to remember that this method loops through the elements but as soon as it finds a match the loop stops, therefore, if there is another match that won’t be shown.
Let’s take const arr = [1,23,2,3,4,3,5] for example.
Now, const found = arr.find(item => item> 1); console.log(found) would return 23.
8. Array.prototype.join()
Its one of the ‘funnest’ method of javascript arrays. You can turn an array into a single element/a string. Join() method takes a separator as argument. You need to make sure you pass the separator inside quotation marks. For example:
cons fruits = [‘apple’, ‘mango’, ‘grape’]
const stringyfied = fruits.join(‘ ‘) I passed a space as argument so stringyfied should return as ‘apple mango grape’ you can use any other characters including letters to join them together.
9. Array.prototype.reduce()
The reduce method takes a reducer function and an optional initial value as its argument. The reducer function is a little tricky so to explain it I will write the example code first.
const arr = [2,8,3]; lets work with smaller elements.
const reducer = (accumulator, item) => accumulator + item;
const total = arr.reduce(reducer);
console.log(total) would return 13;
Now lets see what happened, when we run the reduce method with the reducer function as argument, the reducer function runs a loop with each element of our arr. Initially the value of accumulator is 0, and item is the value of each element. Whatever is returned from accumulator + item is sent back as accumulator parameter.
So the function runs like this: (0, 2) => 0+ 2; >> (2,8)=> 2+8; >> (10, 3)=> 10+3
At the end the reduce method returns the final value of the accumulator which would be 13.
10. Array.prototype.sort()
Sort method sorts the elements of an array in places. It is particularly useful for array containing string elements. This method converts all elements of array into strings and then compares their sequence of UTF-16 code unit values. Also remember that whether you strings are capitalize or not plays a part in it. Capital letters are sorted first due to the UTF-16 code values.