8 Important Array Functions Every JavaScript Developer Must Know
Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array’s length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them.
Following are the important JavaScript Array Functions
1. 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.
const array1 = [1, 4, 9, 16];// pass a function to map
const map1 = array1.map(x => x * 2);console.log(map1);
// expected output: Array [2, 8, 18, 32]
2. Array.prototype.find()
The find() method returns the value of the first element in the provided array 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
3. Array.prototype.findIndex()
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
const array1 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 13;console.log(array1.findIndex(isLargeNumber));
// expected output: 3
4. Array.prototype.filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];const result = words.filter(word => word.length > 6);console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
5. Array.prototype.reduce()
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + 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
The reducer function takes four arguments:
- Accumulator (
acc) - Current Value (
cur) - Current Index (
idx) - Source Array (
src)
Your reducer function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.
6. Array.prototype.concat()
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
7. Array.prototype.slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
8. Array.prototype.splice()
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
const months = ['Jan', 'March', 'April', 'June'];months.splice(1, 0, 'Feb');
// inserts at index 1console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]months.splice(4, 1, 'May');
// replaces 1 element at index 4console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
Syntax
let arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])Parameters
startThe index at which to start changing the array.
deleteCount | Optional — An integer indicating the number of elements in the array to remove from start. If deleteCount is 0 or negative, no elements are removed. In this case, you should specify at least one new element
item1, item2, ...| Optional — The elements to add to the array, beginning from start. If you do not specify any elements, splice() will only remove elements from the array.
Return value
An array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.
Note — If the specified number of elements to insert differs from the number of elements being removed, the array’s
lengthwill be changed.
Let’s deep dive to understand splice() method better —
1. Remove 0 (zero) elements before index 2, and insert “drum”
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed
2. Remove 0 (zero) elements before index 2, and insert “drum” and “guitar”
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum', 'guitar')// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed
3. Remove 1 element at index 3
let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
let removed = myFish.splice(3, 1)// myFish is ["angel", "clown", "drum", "sturgeon"]
// removed is ["mandarin"]
4. Remove 1 element at index 2, and insert “trumpet”
let myFish = ['angel', 'clown', 'drum', 'sturgeon']
let removed = myFish.splice(2, 1, 'trumpet')// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]
5. Remove 2 elements from index 0, and insert “parrot”, “anemone” and “blue”
let myFish = ['angel', 'clown', 'trumpet', 'sturgeon']
let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue')// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]
6. Remove 2 elements from index 2
let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']
let removed = myFish.splice(2, 2)// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]
7. Remove 1 element from index -2
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(-2, 1)
// -ve index means start indexing from end of the array// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]
8. Remove all elements from index 2
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2)// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]
Hope these methods will be helpful for you to improve your code.
