Array methods in JavaScript
Array methods in JavaScript are built-in functions that you can use to perform operations on arrays. They provide a way to manipulate arrays and work with the elements stored in them.
Array Push
Thepush() method is used to add one or more elements to the end of an array. It modifies the original array, returns the new length of the array, and is a destructive method.
let fruits=['apple','banana'];fruits.push('orange');// fruits is now ['apple', 'banana', 'orange']
‘orange’ is added to the end of thefruits array.
You can also add multiple elements at once:
let fruits=['apple','banana'];fruits.push('orange','pineapple');// fruits is now ['apple', 'banana', 'orange', 'pineapple']
‘orange’ and ‘pineapple’ are added to the end of thefruits array.
Array Pop
Thepop() method is used to remove the last element from an array and return that element. This method changes the length of the array.
let fruits=['apple','banana','orange'];let lastFruit= fruits.pop();// lastFruit is 'orange', fruits is now ['apple', 'banana']
pop() removes the last element ‘orange’ from thefruits array and returns it, storing it in thelastFruit variable. Thefruits array is now [‘apple’, ‘banana’].
Array Shift
Theshift() method is used to remove the first element from an array and return that element. This method changes the length of the array.
let fruits=['apple','banana','orange'];let firstFruit= fruits.shift();// firstFruit is 'apple', fruits is now ['banana', 'orange']
shift() removes the first element ‘apple’ from thefruits array and returns it, storing it in thefirstFruit variable. Thefruits array is now [‘banana’, ‘orange’].
Array Unshift
Theunshift() method is used to add one or more elements to the beginning of an array and returns the new length of the array. This method changes the length of the array.
let fruits=['banana','orange'];fruits.unshift('apple');// fruits is now ['apple', 'banana', 'orange']
unshift() adds the element ‘apple’ to the beginning of thefruits array. Thefruits array is now [‘apple’, ‘banana’, ‘orange’].
You can also add multiple elements at once:
let fruits=['banana','orange'];fruits.unshift('apple','pineapple');// fruits is now ['apple', 'pineapple', 'banana', 'orange']
‘apple’ and ‘pineapple’ are added to the beginning of thefruits array.
Array Concat
Theconcat() method is used to merge two or more arrays into one. This method does not change the existing arrays, but instead returns a new array that contains all the elements from the arrays you want to combine.
let fruits1=['apple','banana'];let fruits2=['orange','pineapple'];let allFruits= fruits1.concat(fruits2);// allFruits is ['apple', 'banana', 'orange', 'pineapple']
concat() merges thefruits1 andfruits2 arrays into a new arrayallFruits.
You can also concatenate more than two arrays:
let fruits1=['apple','banana'];let fruits2=['orange','pineapple'];let fruits3=['mango','kiwi'];let allFruits= fruits1.concat(fruits2, fruits3);// allFruits is ['apple', 'banana', 'orange', 'pineapple', 'mango', 'kiwi']
concat() merges thefruits1,fruits2, andfruits3 arrays into a new arrayallFruits.
Array Slice
Theslice() method returns a shallow copy of a portion of an array into a new array object selected fromstart toend (end not included). The original array will not be modified.
let fruits=['apple','banana','orange','pineapple','mango'];let citrusFruits= fruits.slice(2,4);// citrusFruits is ['orange', 'pineapple']
slice() returns a new arraycitrusFruits that contains the elements from the third position to the fourth position (0-indexed) in thefruits array. Thefruits array remains unchanged.
Ifend is not specified,slice() will return all elements fromstart to the end of the array:
let fruits=['apple','banana','orange','pineapple','mango'];let someFruits= fruits.slice(2);// someFruits is ['orange', 'pineapple', 'mango']
slice() returns a new arraysomeFruits that contains all elements from the third position to the end of thefruits array.
Array Splice
Thesplice() method changes the contents of an array by removing, replacing, or adding elements. It modifies the original array and returns an array containing the deleted elements, if any.
- Removing elements:
let fruits=['apple','banana','orange','pineapple','mango'];let removedFruits= fruits.splice(2,2);// removedFruits is ['orange', 'pineapple'], fruits is ['apple', 'banana', 'mango']
splice() removes two elements starting from index 2 (0-indexed) in thefruits array. The removed elements are returned in theremovedFruits array.
- Adding elements:
let fruits=['apple','banana','mango'];fruits.splice(2,0,'orange','pineapple');// fruits is ['apple', 'banana', 'orange', 'pineapple', 'mango']
splice() adds ‘orange’ and ‘pineapple’ starting from index 2 in thefruits array. No elements are removed in this case.
- Replacing elements:
let fruits=['apple','banana','mango'];fruits.splice(1,1,'orange');// fruits is ['apple', 'orange', 'mango']
Here,splice() replaces the element at index 1 (‘banana’) with ‘orange’ in thefruits array.
Array Join
Thejoin() method is used to join all elements of an array into a string. The elements will be separated by a specified separator. The default separator is a comma (,).
let fruits=['apple','banana','orange'];let fruitsString= fruits.join();// fruitsString is 'apple,banana,orange'
join() combines all elements of thefruits array into a string, with each element separated by a comma.
You can specify a different separator:
let fruits=['apple','banana','orange'];let fruitsString= fruits.join(' - ');// fruitsString is 'apple - banana - orange'
join() combines all elements of thefruits array into a string, with each element separated by ’ - '.
Array Reverse
Thereverse() method is used to reverse the order of the elements in an array. It mutates the original array.
let fruits=['apple','banana','orange'];fruits.reverse();// fruits is now ['orange', 'banana', 'apple']
reverse() reverses the order of the elements in thefruits array. Thefruits array is now [‘orange’, ‘banana’, ‘apple’].
Array Sort
Thesort() method is used to sort the elements of an array in place and returns the array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code unit values.
let fruits=['banana','apple','orange'];fruits.sort();// fruits is now ['apple', 'banana', 'orange']
sort() sorts the elements in thefruits array in alphabetical order.
Please note thatsort() can behave unexpectedly with numbers, as it converts numbers to strings for sorting. To sort numbers in ascending order, you can use a compare function:
let numbers=[40,1,5,200];numbers.sort(function(a, b){return a- b;});// numbers is now [1, 5, 40, 200]
sort() sorts thenumbers array in ascending order. The compare function subtractsb froma. If the result is negative,a is sorted to an index lower thanb. If the result is positive,a is sorted to an index higher thanb. If the result is 0, no changes are done with the sort order of the two values.
Array IndexOf
TheindexOf() method is used to search an array for a specific element and returns its first index. If the element is not found, it returns -1.
let fruits=['apple','banana','orange'];let index= fruits.indexOf('banana');// index is 1
indexOf() searches thefruits array for ‘banana’ and returns its index, which is 1.
If the element is not in the array,indexOf() returns -1:
let fruits=['apple','banana','orange'];let index= fruits.indexOf('pineapple');// index is -1
indexOf() searches thefruits array for ‘pineapple’, which is not in the array, so it returns -1.
Array FindIndex
ThefindIndex() method is used to find the index of the first element in an array that satisfies a provided testing function. If no elements satisfy the testing function, it returns -1.
let numbers=[5,12,8,130,44];letisLargeNumber=(element)=> element>13;let index= numbers.findIndex(isLargeNumber);// index is 3
findIndex() uses theisLargeNumber function to find the first element in thenumbers array that is greater than 13 and returns its index, which is 3.
If no element satisfies the testing function,findIndex() returns -1:
let numbers=[5,12,8,10,4];letisLargeNumber=(element)=> element>13;let index= numbers.findIndex(isLargeNumber);// index is -1
findIndex() uses theisLargeNumber function to find an element in thenumbers array that is greater than 13. Since no such element exists, it returns -1.
Array Find
Thefind() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
let numbers=[5,12,8,130,44];letisLargeNumber=(element)=> element>13;let found= numbers.find(isLargeNumber);// found is 130
find() uses theisLargeNumber function to find the first element in thenumbers array that is greater than 13 and returns its value, which is 130.
If no element satisfies the testing function,find() returns undefined:
let numbers=[5,12,8,10,4];letisLargeNumber=(element)=> element>13;let found= numbers.find(isLargeNumber);// found is undefined
find() uses theisLargeNumber function to find an element in thenumbers array that is greater than 13. Since no such element exists, it returns undefined.
Array Filter
Thefilter() method creates a new array with all elements that pass the test implemented by the provided function.
let numbers=[5,12,8,130,44];letisLargeNumber=(element)=> element>13;let filtered= numbers.filter(isLargeNumber);// filtered is [130, 44]
filter() uses theisLargeNumber function to create a new array with elements from thenumbers array that are greater than 13.
If no elements pass the test,filter() returns an empty array:
let numbers=[5,12,8,10,4];letisLargeNumber=(element)=> element>13;let filtered= numbers.filter(isLargeNumber);// filtered is []
filter() uses theisLargeNumber function to create a new array with elements from thenumbers array that are greater than 13. Since no such elements exist, it returns an empty array.
Array Map
Themap() method creates a new array with the results of calling a provided function on every element in the calling array.
let numbers=[1,4,9,16];let roots= numbers.map(Math.sqrt);// roots is [1, 2, 3, 4]
map() uses theMath.sqrt function to create a new array with the square root of each element in thenumbers array.
You can also usemap() with a function that you define:
let numbers=[1,4,9,16];let doubles= numbers.map((num)=> num*2);// doubles is [2, 8, 18, 32]
map() uses the provided function to create a new array with each element in thenumbers array multiplied by 2.
Array Reduce
Thereduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
let numbers=[1,2,3,4];let sum= numbers.reduce((accumulator, currentValue)=> accumulator+ currentValue);// sum is 10
reduce() uses the provided function to add up the elements in thenumbers array. The function takes two arguments: the accumulator and the current value. The accumulator is the value returned by the last invocation of the function (or the initial value, if provided), and the current value is the current element being processed.
You can also provide an initial value for the accumulator:
let numbers=[1,2,3,4];let sum= numbers.reduce((accumulator, currentValue)=> accumulator+ currentValue,10);// sum is 20
reduce() starts with an initial accumulator value of 10, and then adds each element in thenumbers array to this accumulator.
Array Every
Theevery() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
let numbers=[1,30,39,29,10,13];letisBelowThreshold=(currentValue)=> currentValue<40;let result= numbers.every(isBelowThreshold);// result is true
every() uses theisBelowThreshold function to check if every element in thenumbers array is less than 40. Since all elements pass this test,every() returns true.
If not all elements pass the test,every() returns false:
let numbers=[1,30,39,50,13];letisBelowThreshold=(currentValue)=> currentValue<40;let result= numbers.every(isBelowThreshold);// result is false
every() uses theisBelowThreshold function to check if every element in thenumbers array is less than 40. Since the element 50 does not pass this test,every() returns false.
Array Some
Thesome() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
let numbers=[1,2,3,4,5];letisEven=(element)=> element%2===0;let result= numbers.some(isEven);// result is true
some() uses theisEven function to check if there’s at least one element in thenumbers array that is even. Since the number 2 is even,some() returns true.
If no elements pass the test,some() returns false:
let numbers=[1,3,5,7,9];letisEven=(element)=> element%2===0;let result= numbers.some(isEven);// result is false
some() uses theisEven function to check if there’s at least one element in thenumbers array that is even. Since no elements are even,some() returns false.
Array ForEach
TheforEach() method executes a provided function once for each array element.
let numbers=[1,2,3,4,5];numbers.forEach((element)=> console.log(element));
forEach() uses the provided function to print each element in thenumbers array to the console.
Please note thatforEach() does not return a value. It simply executes the provided function on each element in the array. If you need to create a new array based on the original array, consider usingmap() instead. If you need to test elements in the array and return a Boolean, consider usingevery() orsome(). If you need to find an element in the array, consider usingfind().
Array isArray
TheArray.isArray() method is used to determine whether the passed value is an Array. It returns a Boolean.
let fruits=['apple','banana','orange'];let result= Array.isArray(fruits);// result is true
Array.isArray() checks iffruits is an array. Sincefruits is indeed an array,Array.isArray() returns true.
If the passed value is not an array,Array.isArray() returns false:
let number=123;let result= Array.isArray(number);// result is false
Array.isArray() checks ifnumber is an array. Sincenumber is not an array,Array.isArray() returns false.
Array Includes
Theincludes() method is used to determine whether an array includes a certain value among its entries, returning true or false as appropriate.
let fruits=['apple','banana','orange'];let result= fruits.includes('banana');// result is true
includes() checks iffruits includes ‘banana’. Since ‘banana’ is indeed in the array,includes() returns true.
If the value is not in the array,includes() returns false:
let fruits=['apple','banana','orange'];let result= fruits.includes('pineapple');// result is false
includes() checks iffruits includes ‘pineapple’. Since ‘pineapple’ is not in the array,includes() returns false.
Array Fill
Thefill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.
let numbers=[1,2,3,4,5];numbers.fill(0);// numbers is now [0, 0, 0, 0, 0]
fill() changes all elements in thenumbers array to 0.
You can also specify a start index and an end index:
let numbers=[1,2,3,4,5];numbers.fill(0,1,3);// numbers is now [1, 0, 0, 4, 5]
fill() changes the elements at index 1 and 2 in thenumbers array to 0. The start index is inclusive, and the end index is exclusive.
Array Flat
Theflat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
let nestedArray=[1,2,[3,4]];let flatArray= nestedArray.flat();// flatArray is [1, 2, 3, 4]
flat() flattens thenestedArray into a new array,flatArray.
By default,flat() only flattens one level deep. If you have a more deeply nested array, you can specify the depth as an argument:
let deeplyNestedArray=[1,[2,[3,[4]]]];let flatArray= deeplyNestedArray.flat(3);// flatArray is [1, 2, 3, 4]
flat() flattens thedeeplyNestedArray into a new array,flatArray, up to 3 levels deep.
Array FlatMap
TheflatMap() method first maps each element using a mapping function, then flattens the result into a new array. It’s essentially equivalent to amap() followed by aflat() of depth 1, butflatMap() is often quite useful, as merging both into one method is slightly more efficient.
let arr=[1,2,3,4];let newArr= arr.flatMap(x=>[x*2]);// newArr is [2, 4, 6, 8]
flatMap() first maps each element in the array to an array containing its double (i.e.,[x * 2]), and then flattens the result (i.e.,[[2], [4], [6], [8]]) into a new array.
You can also useflatMap() to interleave different data:
let arr=["it's Sunny in","","California"];let newArr= arr.flatMap(x=> x.split(' '));// newArr is ["it's", "Sunny", "in", "", "California"]
flatMap() first maps each string in the array to an array of words (i.e.,x.split(' ')), and then flattens the result into a new array.
Array From
TheArray.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.
let string='hello';let array= Array.from(string);// array is ['h', 'e', 'l', 'l', 'o']
Array.from() creates a new array from the string ‘hello’. Each character in the string becomes an element in the new array.
You can also useArray.from() with a map function:
let numbers=[1,2,3,4];let doubles= Array.from(numbers,x=> x*2);// doubles is [2, 4, 6, 8]
Array.from() creates a new array from thenumbers array. The map function is applied to each element in thenumbers array, so each element in the new array is twice the corresponding element in the original array.
Array Keys
Thekeys() method returns a new Array Iterator object that contains the keys for each index in the array.
let array=['a','b','c'];let iterator= array.keys();for(let keyof iterator){ console.log(key);// logs 0, then 1, then 2}
keys() creates a new Array Iterator object for thearray. The for-of loop then iterates over each key in the iterator, logging each key to the console.
Please note that the keys are the indices of the array elements, not the elements themselves. If you need to iterate over the elements in the array, consider usingforEach(),map(), or a for-of loop with the array directly.
Array Values
Thevalues() method returns a new Array Iterator object that contains the values for each index in the array.
let array=['a','b','c'];let iterator= array.values();for(let valueof iterator){ console.log(value);// logs 'a', then 'b', then 'c'}
values() creates a new Array Iterator object for thearray. The for-of loop then iterates over each value in the iterator, logging each value to the console.
Please note that the values are the elements of the array, not the indices. If you need to iterate over the indices in the array, consider usingkeys(), or a for-in loop with the array directly.
Array Entries
Theentries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.
let array=['a','b','c'];let iterator= array.entries();for(let[index, value]of iterator){ console.log(`index:${index}, value:${value}`);// logs 'index: 0, value: a', then 'index: 1, value: b', then 'index: 2, value: c'}
entries() creates a new Array Iterator object for thearray. The for-of loop then iterates over each entry in the iterator, logging each index and value to the console.
Please note that the entries are key/value pairs in the form of [index, element]. If you need to iterate over the indices or elements in the array separately, consider usingkeys(),values(), or a for-in loop with the array directly.