Underrated array methods

#javascript #codenewbie #computerscience #frontend

We are using arrays all the time every day when coding, probably the most used data structure. Who is working with Javascript is probably relying on many of its powerful array methods such as .map, .filter, .find, .some, .every, .reduce and others.
The thing is, array prototype in JS has many other very useful methods and some of them nearly unknown by most of the developers, so let's get into it:

`copyWithin(target, start?, end?)`

🙇🏻‍♂️ Heads up with this one, it's going to modify the original array and not return a new one

This method will copy elements to the target from start position until the end, sounds a little confusing eh?! Let's see some code then

let array = [1,2,3,4,5];
console.log(array.copyWithin(3, 1, 3)) // [1, 2, 3, 2, 3]

So what the heck happened here? Take the elements starting from index 1 untill index 3 and place them starting from the index 3. So let's see another example:

let array = [1,2,3,4,5,6,7,8,9,10];
console.log(array.copyWithin(0,5)) // [6, 7, 8, 9, 10, 6, 7, 8, 9, 10]

So here we are taking the elements starting from 5 until the end of the array and placing them starting from 0. So, in other words, we can understand it like:

array.copyWithin(Where the elements must go, where should it start copying from, where should stop to copy);

Let's see one more trick with it:

let array = [1, 2, 3, 4, 5];
array.copyWithin(2); // [1, 2, 1, 2, 3]
// If the target is negative it will copy starting from reverse
array = [1, 2, 3, 4, 5];
array.copyWithin(-2); // [1, 2, 3, 1, 2]

`lastIndexOf(searchedElement, toIndex?)`

This one is particularly very useful, let's see a simple example first:

const fruits = [
  'apple',
  'banana',
  'strawberry',
  'blueberry',
  'orange',
  'blueberry',
  'pineapple',
];

// It will log the index of the last occurency of 'blueberry'
console.log(fruits.lastIndexOf('blueberry')); // 5

At some moment you can want to look for the last occurrence only if it's before some specific index, so let's say for example:

const fruits = [
  'apple',
  'banana',
  'strawberry',
  'blueberry',
  'orange',
  'blueberry',
  'pineapple',
];

// You only wanted the last index of 'blueberry' if it was 
// between the 3 first elements
console.log(fruits.lastIndexOf('blueberry', 2)); // -1

But this method can become more interesting when you have more complex objects and you combine it with other array methods. Let's look into it:

const persons = [
  { name: 'Charles', age: 26 },
  { name: 'Marcos', age: 31 },
  { name: 'Jane', age: 22 },
  { name: 'Anton', age: 22 },
  { name: 'Eduardo', age: 22 },
  { name: 'Paula', age: 26 },
];

// We want to find the index of the last person 
// who is 22 years old, 
// unfotunately lastIndexOf doesn't accept a callback 
// so we gonna transform the array in array of ages that 
// match the index with the objects and find the last 
// occurence of 22
persons
    .map(person => person.age)
    .lastIndexOf(22); // 4

`reduceRight(callBack, initialValue?)`

This one is a little funny and very easy to understand, the signature is exactly the same as the original reduce methods and its behavior are quite the same with a small difference: instead iterate from left to right it will do it from right to left ( as the name make it very clear ) so let's jump in some simple example.

const numbers = ["1", "2", "3", "4", "5"];

console.log(
  numbers.reduce((acc, curr) => {
    return acc + curr;
  }, "")
); // "12345"

console.log(
  numbers.reduceRight((acc, curr) => {
    return acc + curr;
  }, "")
); // "54321"

This method is very handy when you want to express something from left to right but evaluate it from right to left, let's see a little more complex example:

const add10 = n => n + 10;
const divideBy2 = n => n / 2;

const commands = [divideBy2, add10];

console.log(
  commands.reduce((acc, curr) => {
    return curr(acc);
  }, 100)
); // 60

console.log(
  commands.reduceRight((acc, curr) => {
    return curr(acc);
  }, 100)
); // 55

I hope something here was new for you and you leave this post knowing at least a little bit more about javascript arrays. Let me know in the comments how do you liked it :)