Skip to main content

Command Palette

Search for a command to run...

Array Methods You Must Know

Updated
3 min readView as Markdown

Arrays provide a lot of methods.

Add/ Remove Item

We already know methods that add and remove items from the beginning or the end:

  • 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.unshift(...items) – adds items to the beginning.

  • arr.slice(start , deletecount , [ele1 ,... , eleN]) - modifies arr starting from the index start , remove deletecount elements and then insert other elements at their place.

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // from index 1 remove 1 element

console.log( arr ); // ["I", "JavaScript"]

The splice method is also able to insert the elements without any removals.

let arr = ["I", "study", "JavaScript", "right", "now"];

// remove 2 first elements
let removed = arr.splice(0, 2);

console.log( removed ); // "I", "study" <-- array of removed elements
  • arr.slice - It returns a new array copying to it all items from index start to end (not including end). Both start and end can be negative, in that case position from array end is assumed.
// Syntax - arr.slice([start , end]);

let arr = ["t", "e", "s", "t"];

console.log( arr.slice(1, 3) ); // e,s (copy from 1 to 3)

console.log( arr.slice(-2) ); // s,t (copy from -2 till the end)

Iterate : forEach

The arr.forEach method allows to run a function for every element of the array.

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  console.log(`\({item} is at index \){index} in ${array}`);
});

Searching in array

  • indexOf(index, from) - looks for item starting from index from and returns the index where it was found , otherwise -1

  • includes(item, from ) - looks for item starting from index from , returns true if found.

let arr = [1, 0, false, 4];

console.log( arr.indexOf(0) ); // 1
console.log( arr.indexOf(false) ); // 2
console.log( arr.indexOf(null) ); // -1

console.log( arr.includes(1) ); // true
  • arr.find(fn) - find an object in array with specific condition.

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

console.log(user.name);
  • arr.filter(fn) - The find method looks for a single (first) element that makes the function return true.

    If there may be many, we can use arr.filter(fn)

let users = [
  {id: 1, name: "Tyi"},
  {id: 2, name: "Sea"},
  {id: 3, name: "Rio"}
];

// returns array of the first two users
let someUsers = users.filter(item => item.id < 3);

console.log(someUsers.length); // 2

reduce / reduceRight

When we need to iterate over an array - we can use forEach , for or for....of. Reduce/ reduceRight are used to calculate a single value based on the array.

Syntax -

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.

As the function is applied, the result of the previous function call is passed to the next one as the first argument.

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

console.log(result); // 15