As a professional developer, most of my time I have to play with arrays to perform manipulation in data to get the desired outcome.
To play with arrays very well we must have to remember inbuilt array functions, So I make a list of arrays which I use most of my time.
These methods are the most used ones, they cover 99% of use cases
To add/remove elements:
Array.push(...items) – adds items to the end,
const array = [1, 2, 3, 4]
array.push(10) // 5 (push returns the length of the new array)
// array = [1, 2, 3, 4, 10]
Array.pop() – extracts an item from the end,
const array = [1, 2, 3 , 4]
array.pop() // 4 (pop returns the element removed)
// array = [1, 2, 3]
Array.shift() – extracts an item from the beginning,
const array = [1, 2, 3, 4]
array.shift() // 1(shift returns the removed element)
// array = [2, 3, 4]
Array.unshift(...items) – adds items to the beginning.
const array = [1, 2, 3, 4]
array.unshift(9, 10) // 6 (unshift returns the length of new array)
// array = [9, 10, 1, 2, 3, 4]
Array.splice(pos, deleteCount, ...items) – at index pos delete deleteCount elements and insert items.
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
Array.slice(start, end) – creates a new array, copies elements from position start till end (not inclusive) into it.
const array = [1, 2, 3, 4]
const slicedArray = array.slice(0, 2)
// array = [1, 2, 3, 4]
// slicedArray = [1, 2]
Array.concat(...items) – returns a new array: copies all members of the current one and adds items to it. If any of items is an array, then its elements are taken.
const array = [1, 2, 3, 4]
const concatArray = array.concat([5, 6, 7, 8])
// array = [1, 2, 3, 4]
// concatArray = [1, 2, 3, 4, 5, 6, 7, 8]
To search among elements:
Array.indexOf/lastIndexOf(item, pos) – look for item starting from position pos, return the index or -1 if not found.
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// expected output: 3
Array.includes(value) – returns true if the array has value, otherwise false.
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
Array.find/filter(func) – filter elements through the function, return first/all values that make it return true.
const array = [1, 2, 3, 4]
const filteredArray = array.filter(element => element%2)
// array = [1, 2, 3, 4]
// filteredArray = [1, 3]
Array.findIndex(func) - like find, but returns the index instead of a value.
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// expected output: 3
To iterate over elements:
Array.forEach(func) – calls func for every element, does not return anything.
const array = [1, 2, 3, 4]
array.forEach((element, index) => {
console.log(`Element ${element} at index ${index}`)
})
\\ Element 1 at index 0
\\ Element 2 at index 1
\\ Element 3 at index 2
\\ Element 4 at index 3
To transform the array:
Array.map(func) – creates a new array from results of calling func for every element.
const array = [1, 2, 3, 4]
const mapArray = array.map(element => element * 2)
// array = [1, 2, 3, 4]
// mapArray = [2, 4, 6, 8]
Array.sort(func) – sorts the array in-place, then returns it.
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
Array.reverse() – reverses the array in-place, then returns it.
const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]
Array.split()/Array.join() – convert a string to array and back.
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
const string = "Fire,Air,Water";
console.log(string.split(','));
// output: ["Fire", "Air", "Water"]
Array.reduce(func, initial) – calculate a single value over the array by calling func for each element and passing an intermediate result between the calls.
const array = [1, 2, 3, 4]
const result = array.reduce((accumulator, current) => (
accumulator + current
), 10)
// array = [1, 2, 3, 4]
// result = 20
Additionally:
Array.isArray(arr) - checks arr for being an array.
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.keys() - returns a new Array Iterator object that contains the keys for each index in the array.
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
console.log(key);
}
// expected output: 0
// expected output: 1
// expected output: 2
Array.values() - returns a new Array Iterator object that contains the values for each index in the array.
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"
Array.some() - at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
const array = [1, 2, 3, 4, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// expected output: true
Array.every() - all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true
Top comments (0)