Arrays are fundamental data structures in JavaScript, and the language provides a rich set of built-in methods to manipulate them efficiently. Understanding these methods is crucial for writing clean, functional code. This guide covers some of the most commonly used array methods, with examples and explanations.
Array.prototype.forEach()
The forEach() method executes a provided function once for each array element. It does not return a new array and is primarily used for side effects like logging or modifying external variables.
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// Expected output:
// "a"
// "b"
// "c"
Use case: Ideal for iterating over elements without needing to create a new array, such as updating the DOM or performing side effects.
Array.prototype.map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. It returns a new array of the same length.
const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// Expected output: [2, 8, 18, 32]
Practical example: Rendering a list of items in the DOM.
// Show song and artist in DOM
function showData(data) {
result.innerHTML = `
<ul class="songs">
${data.data
.map(
song => `<li>
<span><strong>${song.artist.name}</strong> - ${song.title}</span>
<button class="btn" data-artist="${song.artist.name}" data-songtitle="${song.title}">Get Lyrics</button>
</li>`
)
.join('')}
</ul>
`;
if (data.prev || data.next) {
more.innerHTML = `
${
data.prev
? `<button class="btn" onclick="getMoreSongs('${data.prev}')">Prev</button>`
: ''
}
${
data.next
? `<button class="btn" onclick="getMoreSongs('${data.next}')">Next</button>`
: ''
}
`;
} else {
more.innerHTML = '';
}
}
Array.prototype.sort()
The sort() method sorts the elements of an array in place and returns the sorted array. By default, it sorts elements as strings, which can lead to unexpected results for numbers.
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: [1, 100000, 21, 30, 4] // Lexicographic sort
Tip: For numeric sorting, provide a compare function: array1.sort((a, b) => a - b);
Array.prototype.filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function. It returns a subset of the original array.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// Expected output: ["exuberant", "destruction", "present"]
Use case: Filtering data based on conditions, such as finding active users or items above a certain price.
Array.prototype.reduce()
The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It’s versatile for aggregating data.
const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// Expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// Expected output: 15
Use case: Summing values, flattening arrays, or building objects from arrays.
Additional Useful Array Methods
Array.prototype.find()
Returns the first element that satisfies the provided testing function.
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found); // Expected output: 12
Array.prototype.some()
Tests whether at least one element passes the test.
const array = [1, 2, 3, 4, 5];
const even = element => element % 2 === 0;
console.log(array.some(even)); // Expected output: true
Array.prototype.every()
Tests whether all elements pass the test.
const isBelowThreshold = currentValue => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // Expected output: true
Conclusion
Mastering these array methods will significantly improve your JavaScript coding efficiency. They promote functional programming principles and help avoid manual loops. Remember to choose the right method for the task: map for transformation, filter for selection, reduce for aggregation, and so on.