Arrays in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-02-01 19:07:21

## What is an array?
- An array is a finite collection of elements stored under one name.
- **Syntax**
![Array Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w96qsx3544peb7gpl2e.png)
 
- **Example**
![Array Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fnyjcogvjabfh4q3juh.png)
 
- From above example, we can note that -  **Array index in JavaScript starts from 0.**

## Accessing Array Elements
- Array elements can be accessed using their index number.
![accessing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnux78fonze4sg57yvbt.png)
 

## Modifying Array Elements
- Array elements can be modified by assigning value at some particular index to some other value
- **Example**
![Modify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxsi444vo1tim9wqm40c.png)

## Methods in Arrays
- Methods allow us to manipulate arrays. 
-  In this article we'll be looking some of them, let's go :)

## 1. length
- As the name suggests, `length` returns the length of the array i.e. number of elements present in the array.
![Length](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3s2zar57dexr7fcdet9.png)
 

## 2. concat()
- This method combines two arrays and returns a new array with combined elements.
![concat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgmz5ad3s6ggdpymk2zh.png)


## 3. push()
- This method adds item to the end of the array.
![push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzjv42392mmjzy4l9bah.png)

## 4. pop()
- Removes last item of an array, and returns the modified array.
![pop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tesg657f0wz4hokfaxuq.png)

## 5. slice(start, end)
- This method returns selected elements in an array.
- Selects elements from a given `start`, up to a given `end`
 (exclusive).
- `slice()` method does not mutate the original array, but returns a new array.
![Slice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j7jcp12onp1iqc93hqy.png)

## 6. splice()
- The `splice()` method modifies an array, by adding, removing and inserting elements.
- **Syntax**
![Splice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xeydbswe61soy6odbt1.png)
<ul>
<li>`index` here is the starting point for removing elements from the array. 
![splice index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49xm23z7o09f2m3rm2i5.png) </li>
<li> `count` specifies the number of elements to be deleted from the given index. This is optional parameter.
![splice count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a0vr43xhbktniedkm3h.png)
</li>
<li> `value` specifies the value to be added to the original array
![splice value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8mxaqo0rducosmdd7bp.png) 
- In above example, `count` parameter is set to `0`, therefore it doesn't remove any elements from the array.
- `value` parameter Cedric is added to array at position 1.
</li>

</ul>

## 7. reverse()
- As the name says, `reverse()` method reverses the order of elements in the array.
- `reverse()` method modifies the original array.
![array reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sizsnl9whk15o32idfuw.png)

## 8. join()
- Returns array as string.
- Doesn't modify the original array.
- `join()` method accepts an optional parameter - a **separator**.
- Any separator can be specified. The default is comma (,).
![join](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2y5zpn0yi9nefq8s2ym.png)
- Example with separator
![join separator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fiu0zz1n517z685io98.png)

## 9. map(fn)
- One of the most used array methods in JavaScript.
- Takes in function as a parameter, and creates a new array by calling a function for every array element.
- Doesn't modify the original array.
![map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jgh5huf887f8h9ifno8.png)
- In above example, `map()` takes every element from the `arr` and applies `square` function to it. 
- Inshort, `map()` method, maps every elements of the array to the specified function and returns a new array.


## 10. filter()
- Another most used array method in JS.
- This method creates a new array if the elements of an array pass a certain condition.
- Doesn't modify the original array.
![filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0bccqzum2ozzzgkgyzs.png)
- `filter` method in above example filters the elements based on the function provided in as its parameter. The function returns only the even numbers from the array.
- Hence, `filter` method creates a new array with even numbers.


## 11. indexOf()
- `indexOf()` method returns the first occurence of a specified value.
- Returns -1 if the value is not found.
![indexOf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4u8szm1g90iolfpazjh.png)

## 12. lastIndexOf()
- `lastIndexOf()` method returns the last occurence of the element in the array.
- Returns -1 if the value is not found.
![lastIndexOf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjbf9oinnbiykpwxsxhy.png)

## 13. forEach()
- `forEach()` method calls a function for every element in an array.
- Very useful for iterating through an array.
![forEach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9keu99ut9g4e45f9ied.png)
- In above example, `forEach()` takes in an arrow function as its parameter, and logs every number multplied by 100 to the console.
 
## Summary
- `concat()` combines two arrays together.
- `push()` adds item(s) to the end of an array .
- `pop()` removes the last item of an array.
- `splice()` changes an array, by adding, removing and inserting elements.
- `indexOf()` searches for an element in the array and returns the index of its first occurence, else it returns -1.
- `lastIndexOf()` searches for an element and returns the last index where the item was found.
- `filter()` creates a new array if the elements of an array pass a certain condition.
- `map()` creates a new array by calling a function for every array element.
- `forEach()` iterates through an array, and applies a function on every element in an array.
- `reverse()` reverses the order of elements in the array.

## Conclusion
- I hope this article provides you the basics of JavaScript arrays and its methods.
- This article discusses some of the basic array methods, and there are many [other methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) out there.

#### Happy Learning!!