4️⃣

6.4 Array Methods

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.

⚖️

Copyright © 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.