 |
Arrays are one of the fundamental data structures in JavaScript. They provide a wide range of useful methods for manipulating, searching, transforming, and iterating over elements. In this article, we will explore all the main methods available, accompanied by practical examples.
Iteration and access
values()
Returns an iterator for the values of the array.
const arr = ['a', 'b', 'c'];
const iterator = arr.values();
for (let value of iterator) {
console.log(value); // 'a', 'b', 'c'
}
entries()
Returns an iterator with [index, value] pairs.
const arr = ['a', 'b', 'c'];
for (let [index, value] of arr.entries()) {
console.log(index, value); // 0 'a', 1 'b', 2 'c'
}
keys()
Returns an iterator over the indices of the array.
const arr = ['a', 'b', 'c'];
for (let key of arr.keys()) {
console.log(key); // 0, 1, 2
}
forEach()
Executes a function on each element of the array. Does not return a new array.
const arr = [1, 2, 3];
arr.forEach(x => {
console.log(x * 2); // 2, 4, 6
});
Order manipulation
reverse()
Reverses the order of in-place elements.
const arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]
sort()
Sorts elements as strings by default. Can accept a comparison function.
const arr = [10, 1, 20];
arr.sort(); // [1, 10, 20]
arr.sort((a, b) => b - a); // [20, 10, 1]
Accessing specific values
at()
Accesses an element at a specific position, even with negative indices.
const arr = [10, 20, 30];
arr.at(1); // 20
arr.at(-1); // 30
Creating arrays
Array.of()
Creates an array from its arguments.
const arr = Array.of(1, 2, 3); // [1, 2, 3]
Array.from()
Creates an array from an iterable or array-like object.
const arr = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
Filling and Transformations
fill()
Fills the array with a static value.
const arr = [1, 2, 3];
arr.fill(0); // [0, 0, 0]
join()
Converts the array to a string, separating the elements with a separator.
const arr = ['a', 'b', 'c'];
arr.join('-'); // 'a-b-c'
toString()
Converts the array to a comma-separated string.
[1, 2, 3].toString(); // '1,2,3'
Adding and Removing Elements
push()
Adds one or more elements to the end.
const arr = [1];
arr.push(2); // [1, 2]
pop()
Removes the last element.
const arr = [1, 2];
arr.pop(); // 2, arr = [1]
shift()
Removes the first element.
const arr = [1, 2];
arr.shift(); // 1, arr = [2]
unshift()
Adds elements to the beginning.
const arr = [2];
arr.unshift(1); // [1, 2]
Copy and combine
copyWithin()
Copies a part of the array to another location, modifying the original array.
const arr = [1, 2, 3, 4];
arr.copyWithin(1, 2); // [1, 3, 4, 4]
concat()
Merges multiple arrays without modifying the originals.
[1, 2].concat([3, 4]); // [1, 2, 3, 4]
Search
some()
Returns true if at least one element satisfies the condition.
[1, 2, 3].some(x => x > 2); // true
every()
Returns true ifall satisfy the condition.
[1, 2, 3].every(x => x > 0); // true
findIndex()
Returns the index of the first element that satisfies the condition.
[5, 12, 8].findIndex(x => x > 10); // 1
includes()
Checks if an element exists in the array.
[1, 2, 3].includes(2); // true
lastIndexOf()
Returns the last position of an element.
[1, 2, 3, 2].lastIndexOf(2); // 3
Extraction and Removal
splice()
Adds or removes elements by modifying the array.
const arr = [1, 2, 3];
arr.splice(1, 1); // [2], arr = [1, 3]
slice()
Copies a portion of the array without modifying it.
const arr = [1, 2, 3];
arr.slice(1); // [2, 3]
Flatten
flat()
Flattens nested arrays to the specified depth.
[1, [2, [3]]].flat(1); // [1, 2, [3]]
[1, [2, [3]]].flat(2); // [1, 2, 3]
flatMap()
Applies a function and flattens one level.
[1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4]
Check and identify
isArray()
Checks if the value is an array.
Array.isArray([1, 2]); // true
Filtering and transformations
filter()
Returns a new array with only the elements that match the condition.
[1, 2, 3].filter(x => x > 1); // [2, 3]
map()
Applies a function to each element, creating a new array.
[1, 2, 3].map(x => x * 2); // [2, 4, 6]
Reductions
reduce()
Reduces the array to a single value, applying a function.
[1, 2, 3].reduce((sum, x) => sum + x, 0); // 6
reduceRight()
Like reduce, but from right to left.
['a', 'b', 'c'].reduceRight((acc, val) => acc + val); // 'cba'
Before we finish, the main property of arrays
length
Returns the number of elements in the array. It is a property, not a method, so it does not require parentheses.
const arr = [1, 2, 3];
console.log(arr.length); // 3
Conclusion
JavaScript array methods cover every aspect of data management:
- creation
- modification
- iteration
- transformation
- search
Mastering them is essential to writing more readable, efficient and idiomatic code.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
