Important array methods
Tags: javascript, webdev, beginners, programming
Published: 2021-12-22 16:24:26

**1. <u>concat</u>()**
Joins two or more arrays, and returns a copy of the joined arrays
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcz6ex9h9g3r5ijes24n.png)
the num will return [1, 2, 3, 4, 5, 6]

**2. <u>every</u>((element, index, array) => { /* ... */ })**
Checks if every element in an array pass a test
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brkm560g0t3t4cj1ppbc.png)
teenager will reply true while adult while reply false. The every() method only returns true or false. The every() method does not execute the function for empty elements. Every element has to pass the test for the every() method to work.

**3. <u>filter</u>((element, index, array) => { /* ... */ })**
Creates a new array with every element in an array that pass a test
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg9l5d55s1s56tl2qobb.png)
adult will return a new array ["18","19","20"]

**4. <u>find</u>((element, index, array) => { /* ... */ })**
Returns the value of the first element in an array that pass a test
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sge0hcz5tk6t5bxhrycc.png)
adult will return 18.

**5. <u>findIndex</u>((element, index, array) => { /* ... */ })**
Returns the index of the first element in an array that pass a test
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwr02mdjx43cjh2t8ag6.png)
adult will return 3. Will return -1 if no element matches the condition.

**6. <u>forEach</u>((element, index, array) => { /* ... */ })**
Calls a function for each array element
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yqr5etc4m33ag249x4c.png)
adult will return undefined. It is very important to note that forEach only iterate through a array. It doesn't return any value.

**7. <u>Array.form</u>(arrayLike, (element, index) => { /* ... */ })**
Creates an array from an object
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmvp9rjsagzth9j76cun.png)
nameArray will return ["p", "r", "i", "t", "o", "m"]

**8. <u>includes</u>(searchElement, fromIndex)**
Check if an array contains the specified element
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qluv281bfkuh8yfhrxt.png)
adult will return true.

**9. <u>indexOf</u>(searchElement, fromIndex)**
Search the array for an element and returns its position
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7vm1i80qwq6e8i5mz57.png)
adult will return 3. Will return -1 if no element matches the condition.

**10. <u>lastIndexOf</u>(searchElement, fromIndex)**
Search the array for an element, starting at the end, and returns its position
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxp9tuf0lo5etu6qa550.png)
adult will return 4. Will return -1 if no element matches the condition.

**11. <u>map</u>((element, index, array) => { /* ... */ })**
Creates a new array with the result of calling a function for each array element
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnl1s231c067dnzqubi8.png)
everyone will return [14, 15, 16, 17, 18, 19, 20]

**12. <u>pop</u>()**
Removes the last element of an array, and returns that element
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qj2mrwkvbc1s26dp6kn.png)
newAges will return 20. pop() returns the element it removed.

**13. <u>push</u>(element0, element1, /* ... ,*/ elementN)**
Removes the last element of an array, and returns that element
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/501x13zxnkvg33bashve.png)
newAges will return 8. The push() method adds new items to the end of an array. The push() method returns the new length.

**14. <u>reduce</u>((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)**
Reduce the values of an array to a single value (going left-to-right)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gxngg5chlsr1lq21mrk.png)
total will return 10. The reduce() method returns a single value: the function's accumulated result.

**15. <u>reduceRight</u>((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)**
Reduce the values of an array to a single value (going right-to-left)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epprkrx34mj6dqu5d1oz.png)
total will return 10. The reduceRight() method returns a single value: the function's accumulated result.

**16. <u>reverse</u>()**
Reverses the order of the elements in an array
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi7mefoq94nearhsvavr.png)
newAges and ages both will return [4, 3, 2, 1]. The reverse() method overwrites the original array.

**17. <u>shift</u>()**
Removes the first element of an array, and returns that element
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx1ki24om43s4m5osyul.png)
newAges will return 1. The shift() method returns the shifted element.

**18. <u>slice</u>(start, end)**
Selects a part of an array, and returns the new array
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqxkwyo8xvrn69sjvf9p.png)
newAges will return [1, 2]. The slice() method returns selected elements in an array, as a new array.

**19. <u>some</u>((element, index, array) => { /* ... */ } )**
Checks if any of the elements in an array pass a test
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oudt6ddjoj50jew2hfh0.png)
newAges will return true. The some() method only returns true or false. Only one element has to pass the test for some() method to work.

**20. <u>splice</u>(start, deleteCount, item1, item2, itemN )**
Adds/Removes elements from an array
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/st6owumpx6y49etma6dq.png)
newAges will return [15, 16, 17]. ages will return [18, 19, 20]. The splice() method overwrites the original array.

**21. <u>toString</u>()**
Converts an array to a string, and returns the result
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pukvasgcqchpfmuly6ub.png)
newAges will return "1,2,3,4,5". The toString() method returns a string with array values separated by commas.

**22. <u>unshift</u>(element0, element1, /* ... ,*/ elementN)**
Adds new elements to the beginning of an array, and returns the new length
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oowgsepcyxw0t7il713b.png)
newAges will return 6. The unshift() method overwrites the original array.