124 lines
4.9 KiB
Markdown
124 lines
4.9 KiB
Markdown
---
|
||
title: "Nobody Wants To Use These Array Methods😭"
|
||
source: "https://medium.com/coding-beauty/nobody-wants-to-use-these-array-methods-957180e597ac"
|
||
author:
|
||
- "[[Tari Ibaba]]"
|
||
published: 2024-10-13
|
||
created: 2024-10-29
|
||
description: "Array copyWithin() copies a part of an array to another position in the same array and returns it without increasing its length. The cool thing about these new methods is how they let you get and…"
|
||
tags:
|
||
- "clippings"
|
||
---
|
||
[
|
||
|
||
|
||
|
||
](https://medium.com/@tariibaba?source=post_page---byline--957180e597ac--------------------------------)
|
||
|
||
[
|
||
|
||
|
||
|
||
](https://medium.com/coding-beauty?source=post_page---byline--957180e597ac--------------------------------)
|
||
|
||
|
||
|
||
There’s so much more to arrays than `map()`, `filter()`, `find()`, and `push()` .
|
||
|
||
But most devs are completely clueless about this — several powerful methods they’re missing out on.
|
||
|
||
Check these out:
|
||
|
||
## 1\. `copyWithin()`
|
||
|
||
`Array` `copyWithin()` copies a part of an array to another position in the same array and returns it without increasing its length.
|
||
|
||
|
||
|
||
`end` parameter is optional:
|
||
|
||
|
||
|
||
|
||
|
||
## 2\. at() and `with()`
|
||
|
||
`at()` came first and `with()` came a year after that in 2023.
|
||
|
||
They are the functional and immutable versions of single-element array modification and access.
|
||
|
||
|
||
|
||
The cool thing about these new methods is how they let you get and change element values with negative indexing.
|
||
|
||
## 3\. `Array` `reduceRight()` method
|
||
|
||
Works like `reduce()` but the callback goes from right to left instead of left to right:
|
||
|
||
|
||
|
||
Here’s another great scenario for `reduceRight()`:
|
||
|
||
|
||
|
||
## 4\. Array `findLast()` method
|
||
|
||
New in [ES13](https://wp.codingbeautydev.com/es13-javascript-features/): find array item starting from last element.
|
||
|
||
Great for cases where where searching from end position produces better performance than with `find()`
|
||
|
||
Example:
|
||
|
||
|
||
|
||
This works but as our target object is closer to the tail of the array, `findLast()` should run faster:
|
||
|
||
|
||
|
||
Another use case for `findLast()` is when we have to specifically search the array from the end to get the correct element.
|
||
|
||
For example, if we want to find the last even number in a list of numbers, `find()` would produce a totally wrong result:
|
||
|
||
|
||
|
||
But `findLast()` will start the search from the end and give us the correct item:
|
||
|
||
|
||
|
||
## 5\. `toSorted()`, `toReversed()`, `toSpliced()`
|
||
|
||
ES2023 came fully packed with immutable versions of `sort()`, `reverse()`, and `splice()`.
|
||
|
||
Okay maybe `splice()` isn't used as much as the others, but they all mutate the array in place.
|
||
|
||
|
||
|
||
Immutability gives us predictable and safer code; debugging is much easier as we’re certain variables never change their value.
|
||
|
||
Arguments are exactly the same, with `splice()` and `toSpliced()` having to differ in their return value.
|
||
|
||
|
||
|
||
## 6\. Array `lastIndexOf()` method
|
||
|
||
The `lastIndexOf()` method returns the last index where a particular element can be found in an array.
|
||
|
||
|
||
|
||
We can pass a second argument to `lastIndexOf()` to specify an index in the array where it should stop searching for the string after that index:
|
||
|
||
|
||
|
||
## 7\. Array `flatMap()` method
|
||
|
||
The `flatMap()` method transforms an array using a given callback function and then flattens the transformed result by one level:
|
||
|
||
|
||
|
||
Calling `flatMap()` on the array does the same thing as calling `map()` followed by a `flat()` of depth 1, but it\`s a bit more efficient than calling these two methods separately.
|
||
|
||
|
||
|
||
## Final thoughts
|
||
|
||
They are not that well-known (yet) but they have their unique uses and quite powerful. |