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.
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.
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().
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.
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.
let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(element => element > 10);
console.log(index); // 1
6. Array.flat():
Clean up multi-dimensional arrays effortlessly with flat().
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.
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.
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.
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().
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 or LinkedIn.
Top comments (0)