Javascript 1O1 series: Array’s Methods And Iterators Part(1), Methods.
Tags: javascript, programming, tutorial, webdev
Published: 2022-04-24 20:19:25

![javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv9xhesujkhwq4issjtt.png)

---

## You'll learn:
Some useful array methods to make dealing with arrays is an easy thing, I hope you won't find any issues with handling arrays operations from now on.

---

## Insert and Remove:
**shift:**
shift() is used to remove the first element of the array.
`Array.shift()`
![shift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3h93sms9o9akw62ruyg.png)
 
**unshift:**
unshift is used to insert an element into the array, unshift will add the element to the start of the array
![unshift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75sz55bilvgyd1epdcap.png)

**push:**
push is used to append elements to the array, (add to the end)
![push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd3zqbncb2kn1id2decf.png)

**pop:**
pop is used to pop out (remove) the last element of the array
![pop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0z4i01g3w20l98weta7.png)

## Sub-arrays:
**slice:**
slice is used to copy elements in a specific range.
e.g.you have an array and you want to get the elements between index 1 and index 3
![slice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyuey0bo35gn0iwghjt8.png)

when the end parameter is not defined, then the slice extends to the end of the array

`let slicedArr2 = arr.slice(1)
// [2,3,4,5,6,7,8,9]`


**spliced:**
slice is used to REMOVE elements from an array.
![spliced](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc2mzqdvy7lkyemev0ir.png)
 
![slice and splice meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8go88oky9pffwlql7bxv.png)

---

## Reordering:
**reverse:**
used to reverse the array's elements.
![reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/med3l3kimrvk4jc17g4z.png)

**sort:**

> By default, the sort() function sorts values as strings.
> This works well for strings ("Apple" comes before "Banana").
> However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".
> Because of this, the sort() method will produce incorrect result when sorting numbers.
> You can fix this by providing a compare function.

![sort](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfd79b169zewkf1aozfc.png)
 
so without compare function, sort() is not that useful.
more about sort: 
{% embed https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
 %}

---

## Search and Sort:
**includes:**
used to check if an element does exist or not.
![includes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roes1oej4483ntinjt9p.png)

**at:**
simple, you pass an index and you get the value in that index.
![at](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kpaua2temyr2v1qqeeb.png)
 
**indexOf:**
indexOf() is the opposite of at(), you pass a value and get the value's index in the array.
![indexOf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90lz35bekrfkj4pjlkyv.png)


**sort:**
sort can be used here as well
> By default, the sort() function sorts values as strings.
> This works well for strings ("Apple" comes before "Banana").
> However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".
> Because of this, the sort() method will produce incorrect result when sorting numbers.
> You can fix this by providing a compare function.

![sort](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfd79b169zewkf1aozfc.png)
 
so without compare function, sort() is not that useful.
more about sort: 
{% embed https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
 %}

---

## Adding and combining arrays :
**concat:**
used to combine (add together) two or more arrays, non of the combined arrays will be modified, concat() will return a new array instead.
 ![concat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0hr22nkeojwpu6ki3v7.png)

---

## Array to String conversion:
**toString:**
used to represent an array in string format.
 
![toString](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzl8n16tmt1qz7i8g2le.png)

there is also toLocalString(), search about it as an exercise and learn the difference between toString() and toLocalString(), if you know, please share the answer in a comment.

---

## Other methods:
**flat:**
when you have a nested arrays and want to pull out all these nested arrays to a new array, flat() is used.
flat() doesn't modify the array, it returns a new array instead.
![flat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz4mx72pz8h6sjl6ytuj.png)

**fill:**
used to fill the whole or part of the array with a specific value. 
![fill](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atj953ve9c3m3ylji6to.png)
 
---

## References:

{% embed https://javascript.plainenglish.io/all-about-arrays-in-javascript-4d8267fe7ef8
 %}
{% embed https://www.oreilly.com/library/view/javascript-the-definitive/9781491952016/
 %}
{% embed https://javascript.info/array-methods
 %}
{% embed https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
 %}
{% embed https://www.geeksforgeeks.org/javascript-basic-array-methods/
 %}
{% embed https://livecodestream.dev/post/15-must-know-javascript-array-methods/
 %}

---
Thanks for reading, and feel free to ask any question about javascript or this series, and I appreciate any feedback to improve My content.

Find me on [twitter](https://twitter.com/Osam1010), [github](https://github.com/osama865/) and [my portfolio](http://o-portfolio.netlify.com/).