6.4 Array Methods
Add/Remove Items
arr.push(...items)
- adds items to the end.
arr.pop()
- extracts an item from the end.
arr.shift()
- extracts an item from the beginning.
arr.filter(function(currentValue, index, arr), thisValue)
- returns array that filtered out items that don't return true for the function.thisValue
is optional. A value to be passed to the function to be used as its "this" value.
arr.unshift(...items)
- adds items to the beginning.
Searching In A Array
indexOf/lastIndexOf and includes:
arr.indexOf(item,from)
- looks for item starting from index from , and returns the index where it was found, otherwise -1.
arr.lastIndexOf(item, from)
- same, but looks from right to left.
arr.includes(item, from)
- looks for item starting from index from, returns true if found.Example
let arr = [1, 0, false]; alert( arr.indexOf(0) ); // 1 alert( arr.indexOf(false) ); // 2 alert( arr.indexOf(null) ); // -1 alert( arr.includes(1) ); // true
Note that the methods use
===
comparison. So, if we look for false
, it finds exactly false
and not zero.If we want to check for inclusion, and don’t want to know the exact index, then
arr.includes()
is preferred.Also, a very minor difference of
includes
is that it correctly handles NaN
, unlike indexOf
/lastIndexOf
:const arr = [NaN]; alert( arr.indexOf(NaN) ); // -1 (should be 0, but === equality doesn't work for NaN) alert( arr.includes(NaN) );// true (correct)
find
and findIndex
Imagine we have an array of objects. How do we find an object with the specific condition?
Here the arr.find(fn) method comes in handy.
The syntax is:
let result = arr.find(function(item, index, array) { // if true is returned, item is returned and iteration is stopped // for falsy scenario returns undefined });
The function is called for elements of the array, one after another:
item
is the element.
index
is its index.
array
is the array itself.
If it returns
true
, the search is stopped, the item
is returned. If nothing is found, undefined
is returned.For example, we have an array of users, each with the fields
id
and name
. Let’s find the one with id == 1
:let users = [ {id: 1, name: "John"}, {id: 2, name: "Pete"}, {id: 3, name: "Mary"} ]; let user = users.find(item => item.id == 1); alert(user.name); // John
In real life arrays of objects is a common thing, so the
find
method is very useful.Note that in the example we provide to find the function
item => item.id == 1
with one argument. That’s typical, other arguments of this function are rarely used.The
arr.findIndex
method is essentially the same, but it returns the index where the element was found instead of the element itself and -1
is returned when nothing is found.Previous Section
6.3 Difference Between Arrow and Regular MethodNext Section
6.5 String MethodsCopyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.