All You Need to Know About JavaScript Arrays 
Tags: javascript, programming, tutorial, webdev
Published: 2022-01-26 18:21:05

In this Article, I try to explain what is array & some array methods that we should know about to work with an array.

### **1. What is Array?**
Arrays are a special type of objects in JavaScript. In JavaScript array is a simple variable that contains multiple values. When we need to store the same type of data in one variable we use an array. 
<br />

### **2. How array looks?**
We can declare an array by using Square brackets. We can also declare an array by using the new Array. But when declaring this it is slow our application. So we always try to declare an array by using square brackets. 



![array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/am4uw8o5mispf035dvv0.png)
<br />

### **3. How many property/item in our Array?**
To check how many items are in our array we can use a method that is (array. length).

![Array Length](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7snt63fqwk5541tfbd5d.png)
<br />

### **4. How to Add new items in Array?**
We can add new items in an array in many ways (index, length, push, unShift, splice).

- Index: If we want to add an element in the last, we can add the item by index. By using index we can can also update array item.


![Index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15ia9xl4xp9q9r4mlnro.png)

- Length: if the array is too big it's difficult to know this. There is also a problem in a previous way. That is if we change the array in our code and want to add a new element we get false result. To avoid this kind of bug we can simply add our array length number and add a new element.


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

- Push: We can add an element by using the push method. This is the simplest way to add an element in the last of an array.


![Push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81e5gwxawgr5nzsk431e.png)

- Unshift: Sometimes we need to add an element as the first element of the array. That time we can use unshift method.

![unShift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8apfufiu84xmgnbafwdu.png)

- Splice: When we need to add an element inside an array that time we use splice. The first parameter of spice defines the position where new elements should be added (spliced in). The second parameter defines how many elements should be removed. The rest of the parameters define the new elements to be added. The splice method returns an array with the deleted items.


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

Now we have some basic idea how to add an element in array.
<br />

### **5. How to remove items from an Array?**

We can remove items from an array in many ways (pop, shift, delete, slice).

- Pop: if we want to remove from last an array we can use the pop method.

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

- Shift: if we want to remove from first an array we can use the pop method.

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

- Delete: when we need to remove items from the array without changing array length that time we can use delete. By using this it makes some undefined hole in our array. So, we don’t use this if we are sure what we are doing.


![Delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hqugwp79gnr2nxl3l1q.png)

- Slice: When we need some array elements from the existing array we use the slice method. The first parameter of this method is received where we start slicing & the second parameter it’s received where we stop slicing. If we don’t pass the second parameter it returns the rest of the array elements. Slice doesn’t change the main array. 


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

Now we have some basic idea how to remove an element from array.
<br />

### **6. How to convert an array to a string?**

 To convert an array to a string we can use the toString method. But if we don’t do this & try to display our array in HTML, we found the same result also. Because we know that JavaScript is a smart programming language. So when we want to display an array in HTML it smartly does this in the backend and gives us the same output. But it gives a coma in every element. But if we want our own custom design we use the join method. In the parameter of this method, we can simply say how we want to format our strings.


![array to string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti0v3jl43ha2xfutfaeh.png)
<br />

### **7. How to add multiple arrays in one array?**

By using concat method we can make a new array by adding existing multiple arrays. 


![concat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nu6h47tj5cpsgk3hlm5.png)
<br />