JS Array Functions — JS for React 1
Hi everyone. This is the first article in the Javascript for React article series and also the first article on my Medium account. I need to get your comments about this post. I planned 8 articles for this series. Please keep following for new articles!
Getting the last element of an array
There are 2 ways to get the last element:
In other words: array.at(i) works as:
- if (i < 0) then it steps back from the end of the array.
- if (i ≥ 0) then its same as arr[i]
pop/push, shift/unshift
- push() appends an element to the end,
- shift() get an element from the beginning so that the 2nd element becomes the 1st.
- unshift() add the element to the beginning of the array.
- pop() takes an element from the end.
Let's see the examples:
splice
If we want to delete an element from an array we can use the code below:
const arr = [1,2,3,4];
delete arr[1];
The element was removed, but the array still has 3 elements:
arr.length == 3 // true
So we shouldn’t use the delete arr[i] method because it’s not appropriate for arrays. Instead, we can use arr.splice() method. It can insert, remove and replace elements. The syntax is:
arr.splice(startIndex, deleteCount, elem1, …elemN);
It’s more understandable with examples. Let’s start with the deletion:
The splice method returns the array of removed elements:
We can also use negative indexes with this method and other array methods. They specify the position from the end of the array, like here:
slice
The syntax is: arr.slice(start, end)
- It returns a new copied array from indexes start to end.
- Both start and end can be negative. In that case position from array end is assumed.
- The original array will not be modified.
Let’s see the examples.
We can also use it without arguments. In that case, it creates a copy of original array:
concat
The concat method is used to combine two or more arrays or values. It does not change the existing arrays but returns a new array:
toString
toString method returns a comma-separated list of elements.
forEach
It executes a provided function once for each array element.
indexOf / lastIndexOf / includes
Syntaxes:
indexOf(searchElement, fromIndex)
lastIndexOf(searchElement, fromIndex)
includes(searchElement, fromIndex)
indexOf looks for searchElement starting from fromIndex and returns the index where it was found, otherwise returns -1.
lastIndexOf returns the last index if the searchElement was found, otherwise returns -1.
includes looks for item starting from fromIndex, returns true if found.
Let’s see examples below:
If we want to check if item exists in the array, and don’t need the exact index, then arr.includes is preferred
find / findIndex
The syntax is:
let result = arr.find(function(item, index, array) {..})
- If we want to get the first element from an array with a condition, we can use the find() method.
- If the condition is true; the search is stopped and the item is returned. If nothing is found, undefined is returned.
- If you need the index of the found element in an array, use findIndex() method.
- findIndex() method has the same syntax but returns the index where the element was found instead of the element itself. Otherwise, it returns -1.
filter
- The filter() method returns a new array with array elements that pass a test.
- The find() method looks for a single(first) element that passes the test. If there may be many, we can use filter() .
map
- The map() method creates a new array by performing a function on each array element.
- The map() method does not change the original array.
Let’s see the examples:
sort
The sort() method sorts the array in place alphabetically.
As you see above, the order became [1,15,2,3,4] incorrect. It happened because the items were sorted as strings by default.
To use our own sorting order, we need to supply a function as the argument for sort().
compareFn is supplied, all array elements are sorted according to the return value of the compare function.For instance to sort as a number:
Or we can use these shortly:
You can find more info about sort() method:
reverse
It reverses the order of elements in an array. The first array element now becomes the last, and the last element becomes the first.
Let’s see the examples:
reduce
- When we need to iterate over an array, we can use forEach, for, for..of, or map.
- The reduce() method is the same as above, but a little bit more complex. It is used to calculate a single value based on the array.
- The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation of the preceding element. The final result is a single value.
The syntax is:
let value = arr.reduce(function(accumulator, item, index, array) {
// …
}, [initial]);
Arguments:
- accumulator – is the result of the previous function call, equals initial the first time (if initial is provided).
- item – is the current array item.
- index – is its position.
- array – is the array.
It looks complicated. Let’s see the examples:
Let’s see the details:
- On the first run, sum is the initial value (the last argument of reduce), equals 0, and current is the first array element, equals 1. So the function result is 1.
- On the second run, sum = 1, we add the second array element (2) to it and return.
- On the 3rd run, sum = 3 and we add one more element to it, and so on…
We also can omit the initial value.
if there’s no initial, then reduce takes the first element of the array as the initial value and starts the iteration from the 2nd element.
But such use requires extreme care. If the array is empty, then reduce call without initial value gives an error.
So it’s advised to always specify the initial value.
some / every
arr.some(function) / arr.every(function)
The function is called on each element of the array similar to forEach. If any/all results are true, returns true, otherwise returns false.
In this medium post, I’ve tried to explain almost all array methods. I think it’s useful to learn them before learning React. You can ask any question, I will try to answer all the questions.
Resources:
