10 Lesser-Known JavaScript Array Methods You Might’ve Missed
Tags: javascript, webdev, programming, coding
Published: 2023-09-05 17:52:32

Arrays stand as pivotal elements in JavaScript. Developers can craft more streamlined code by leveraging array methods, accelerating web development.

While methods like **push()**, **pop()**, and **splice()** are commonly recognized and widely adopted, the JavaScript array API has many other handy methods.

In this article, we’ll explore 10 such methods, which might be lesser known but are invaluable in certain scenarios of application development.

## 1\. Array.from():

It saves you tonnes of time with array-like objects. Convert NodeLists or other iterable structures directly into arrays. Use Array.from() when working with DOM elements, and you want to use all the power of array methods.

```javascript
let nodeList = document.querySelectorAll('div');
let arrayFromNodeList = Array.from(nodeList);
console.log(arrayFromNodeList);  // Converts NodeList to Array
```

## 2\. Array.of():

This method creates a new array from its arguments, a handy alternative to the traditional Array() constructor.

```javascript
let arrUsingArray = Array(7);
let arrUsingArrayOf = Array.of(7);
console.log(arrUsingArray);   // [ <7 empty items> ]
console.log(arrUsingArrayOf); // [7]
```

A concise way to initialize arrays without unexpected results.

## 3\. Array.fill():

Initialize or reset arrays with uniform values using fill().

```javascript
let defaultArray = new Array(5).fill('default');
console.log(defaultArray);  // ["default", "default", "default", "default", "default"]
```

## 4\. Array.find():

A quicker way to locate the first item in an array that meets a specific condition. Perfect for those quick look-ups when you only need the first match.

```javascript
let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(element => element > 10);
console.log(found);  // 12
```

## 5\. Array.findIndex():

findIndex(), a close relative of find(), returns the index of the first element that meets the provided testing function.

```javascript
let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(element => element > 10);
console.log(index);  // 1
```

{% twitter https://twitter.com/mainulspace/status/1697878041962139711?s=20 %}

## 6\. Array.flat():

Clean up multi-dimensional arrays effortlessly with flat().

```javascript
let nestedArray = [1, [2, 3], [4, [5, 6]]];
let flattened = nestedArray.flat();
console.log(flattened);  // [1, 2, 3, 4, [5, 6]]
```

## 7\. Array.flatMap():

For simultaneous mapping and flattening, flatMap() is indispensable.

```javascript
let arr = [1, 2, 3, 4];
let result = arr.flatMap(x => [x, x * 2]);
console.log(result);  // [1, 2, 2, 4, 3, 6, 4, 8]
```

## 8\. Array.some():

For those times when you only need to know if *any* elements meet a condition, rather than all of them.

```javascript
let array = [1, 2, 3, 4, 5];
let check = array.some(num => num % 2 === 0);
console.log(check);  // true (because there's at least one even number)
```

Fast validations or quick checks where a single true condition is enough.

## 9\. Array.reduceRight():

An alternative to reduce(), reduceRight() tackles the array from the end.

```javascript
let fruits = ["apple", "banana", "cherry", "date"];
let concatenatedFruits = fruits.reduceRight((accumulator, currentValue) => accumulator + " " + currentValue);
console.log(concatenatedFruits);  // date cherry banana apple
```

Perfect for unique calculations or evaluations where processing order is crucial.

## 10\. Array.copyWithin():

Duplicate segments within an array with copyWithin().

```javascript
let numbers = [1, 2, 3, 4, 5];
let result = numbers.copyWithin(-2);
console.log(result);  // [1, 2, 3, 1, 2]
```

It’s useful in data mirroring, algorithm implementation, or crafting patterns without external libraries.

While the more well-known methods are the backbone of our daily coding, these less well-known ones can be powerful allies in very specific scenarios.

Let’s share in the comments below if you know any other unfamiliar handy JS arrays!

Feel free to connect with me on [**Twitter**](https://twitter.com/mainulspace) or [**LinkedIn**](https://www.linkedin.com/in/mainulspace/).

### Read Next...

{% embed https://dev.to/mainulspace/javascript-tricky-interview-questions-2023-14li %}

{% embed https://dev.to/mainulspace/essential-es6-features-for-mastering-react-4hlh %}

{% embed https://dev.to/mainulspace/are-you-using-javascript-right-know-when-to-go-asynchronous-4731 %}