Beginner's Guide to Array Methods in JavaScript
Tags: javascript, beginners, programming
Published: 2022-08-22 17:11:03

JavaScript has a number of helpful array methods integrated into the language. This guide will cover a few of the methods I use the most. It's helpful to note that arrays are JavaScript objects, and can contain a mix of different data types. You can recognize an array in JavaScript by the use of `square brackets [ ]`

Here is an example of an array with multiple elements: 

`const myNewArray = [30, 40, true, 'Megan'];`

Each element in an array has an `index` beginning at [0]. In our example above, the element 30 is at `myNewArray[0]`, 40 is at `myNewArray[1]`, and so on. This is very important information when you are working with JavaScript methods. This will become more apparent as we work through the examples. Now, on to the methods! 

## Array.length()

The `length` property returns the number of elements in an array. Let's call it on our array:

```javascript
const myNewArray = [30, 40, true, 'Megan'];

let arrayLength = myNewArray.length;
console.log(arrayLength);

// Output: 4
```

As you can see the syntax to access the `length` property is yourArray.length. This property becomes very useful in things like for loops. 

## Array.push() 

The `push` method adds any number of items to the end of an array. It will return the new length of the array. This is considered a **destructive** method because it changes the original array. Let's see how it works with an example:

```javascript
const animals = ['cat', 'dog', 'horse'];

// add 'pig' to the array
animals.push('pig');

console.log(animals);

// Output: ['cat', 'dog', 'horse', 'pig']
```

Now we have our 'pig' added to the end of the original animals array! 

## Array.pop()

The `pop` method removes a single item from the end of an array. Let's say we want to remove the pig from our animals array above. We simply use the following syntax: 

```javascript
animals.pop();

console.log(animals);

// Output: ['cat', 'dog', 'horse']
```

Our pig is gone. This method, like push, is **destructive** because it removes the element from our original array. It also returns the removed element. 

## Array.shift()

The `shift` method removes the first element of an array. Let's see how it works on our original animals array:

```javascript
const animals = ['cat', 'dog', 'horse'];

// Remove the first element from the array
animals.shift();

console.log(animals);

// Output: ['dog', 'horse']
```

The shift method is also **destructive** because it removes the element from the original array. 

## Array.unshift()

The `unshift` method will add any number of items to the beginning of an array. Much like push, this method is **destructive** and makes changes to the original array. Let's try a new example using the unshift syntax: 

```javascript
const colors = ['blue', 'red', 'green'];

// Add two new colors to the beginning of the array
colors.unshift('purple', 'yellow');

// Output: ['purple', 'yellow', 'blue', 'red', 'green']
```

We've added our two new colors to the original array! As you can see they've been added in the original order that we passed them in. 

## Array.slice()

You may be thinking to yourself that all of these destructive methods seem a little, well, destructive! There are array methods that are **nondestructive** and return a new array that is a copy or a section of the original. `Slice` is one such method. When passed no arguments, `slice` will return a new shallow copy of the original array. 

```javascript
const colors = ['blue', 'red', 'green'];

// Make a copy 
const colorsCopy = colors.slice();

console.log(colorsCopy);

// Output: ['blue', 'red', 'green']
```

This can be a very useful tool for when we don't want to change our original array. `Slice` can be used to copy a portion of an array when passed additional arguments. `Slice` takes in a start and an end so that JavaScript knows what portion of the array you'd like to copy. The syntax looks like this:

`arr.slice(start, end);`

'Start' being the index of the element you want to start the 'copy' from, and 'end' being the index of the last element you want to include. If you do not provide an end, the selection will end at the index of the last array element. For example:

```javascript
const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint'];

// Slice only the elements we want to copy to our new array
let newArray = iceCream.slice(1, 3);

console.log(newArray);

// Output: ['vanilla', 'rocky road']

// Remember, our original array will be untouched
console.log(iceCream);

// Output: ['chocolate', 'vanilla', 'rocky road', 'mint']
```

## Array.splice()

The `splice` method is perhaps the most confusing on this list, but is super useful for adding, updating, or removing elements in an array. It is **destructive** and does modify the original array. It also returns a new array of the deleted elements (if you did so). Let's take a look at the syntax first:

`splice(start, deleteCount, item1, item2...)`

- `start` is the index at which to start changing the array. If your start number is greater than the length of your array, no elements will be deleted. Instead it will add the elements you provide as arguments. 
- `deleteCount` is an optional parameter, and is an integer indicating the number of elements that should be removed. 
- `item1`, `item2`, etc. are the elements you want added to the array, beginning from `start`. If you don't add these elements, `splice` will only remove things from the array.

Although it seems like a lot of information, let's see it in action with our iceCream array: 

```javascript
const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint'];

// Starting at array index 1 we are deleting one element and then adding a new element
iceCream.splice(1, 1, 'coffee');

console.log(iceCream);

// Output: ['chocolate', 'coffee', 'rocky road', 'mint']
```

What would happen if we don't delete any elements? We would have the following output! 

```javascript
iceCream.splice(1, 0, 'coffee');

console.log(iceCream);

// Output: ['chocolate', 'coffee', 'vanilla', 'rocky road', 'mint']
```
As you can see nothing has been deleted, but 'coffee' has been inserted where our `start` indicated. 


As you can see, array methods are crucial to any programmer's skillset. JavaScript has many more built-in methods, a list of which can be found on MDN's Web Docs: 
[MDN's Array Information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1os3j74i5jugqnpexzn9.png)

Let me know in the comments below if there are more array methods you'd like explained!