JavaScript Arrays Tutorial - Getting Started
Tags: javascript, arrays, tutorial
Published: 2019-06-21 01:36:03

---
title: JavaScript Arrays Tutorial - Getting Started
published: true
description: Arrays are one of the most common data types in any language. In this video, we will explore working with arrays in JavaScript. We will cover creation, updating, sorting, making copies, Map and Reduce functions
tags: JavaScript, Arrays, Tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z0wzuookfjmwag1hac56.png
---

{% youtube xh7njXASFjU %}

Arrays are one of the most common data types in any language. In this article, let's explore using arrays in JavaScript.

##What are Arrays

Arrays are a data type that allow you to store a series or list of data. In JavaScript, arrays...

- are dynamic in size
- can hold any type of data

##Creating an Array
Here are a few different ways to create an array.

###Create an Empty Array

```JavaScript
const arr = [];
```

###Create an Array with Elements Already In It
```JavaScript
const arr = [1,2,3,4,5,6];
```

###Create an Array with Elements Already In It (different data types)
```JavaScript
const arr = [1,2,"James", "Jess", true];
```

##Add Elements to an Array
Here are a few different ways to add elements to your array.

###Add an Element at the End with Push
```JavaScript
const arr = [1,2,3,4,5,6];
arr.push(7); //[1,2,3,4,5,6,7]
```

###Add an Element at the Beginning with Unshift
```JavaScript
const arr = [1,2,3,4,5,6];
arr.unshift(0); //[0,1,2,3,4,5,6]
```


##Getting Elements out of an Array
Now, how do we get access to specific elements in an Array? To do this, you use the index (zero-based).

###Get the First Element of the Array
```JavaScript
const arr = [1,2,3,4,5,6];
arr[0];//1
```

###Get the Last Element of the Array
```JavaScript
const arr = [1,2,3,4,5,6];
arr[arr.length-1];//6
```

###Update the First Element of the Array
```JavaScript
const arr = [1,2,3,4,5,6];
array[0] = 0; //[0,2,3,4,5,6]
```

##Array Sorting
Arrays have a sort function that can attempt to sort automatically, or you could customize it to determine how to specifically sort the items.

###Sorting Numbers
```JavaScript
const arr = [4,2,6,8,3];
const sortedArr = arr.sort(); //[2,3,4,6,8]
```

###Sorting Names
I'll be sorting my wife's name and mine along with our three dogs. Yes, our dogs are named after Harry Potter characters!

```JavaScript
const arr = ["Jess", "James", "Padfoot", "Lily", "Sevi"];
const sortedArr = arr.sort() //["James", "Jess", "Lily", "Padfoot", "Sevi"];
```

##Iterating Through an Array


###Using a Standard For Loop
```JavaScript
const arr = ["Jess", "James", "Padfoot", "Lily", "Sevi"];
for(let i = 0; i< arr.length; i++){
console.log(arr[i]);
}
```

###Using Let Of
```JavaScript
const arr = ["Jess", "James", "Padfoot", "Lily", "Sevi"];
for(let name of arr){
console.log(name);
}
```



##Extra Array Functions
These functions will use the Arrow Function syntax so take some time to read up on them if you are not already.

> At this point, you might need to look into [ES6 Arrow Functions](https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/).

###Using For Each for Looping

```JavaScript
const arr = ["Jess", "James", "Padfoot", "Lily", "Sevi"];
arr.forEach( name => console.log(name));
```

###Map
Map lets you create a new array from the existing array by transforming each item in some way. For example, let's try to create a new array by adding 1 to each element in an existing array;

```JavaScript
const arr = [1,2,3,4];
const newArr = arr.map(item => item+1); //[2,3,4,5]
```

###Reduce
Reduce function will allow you to convert an array to one final result. The most common example for using Reduce is to sum up all elements in an array.


```JavaScript
const nums = [1,2,3,4,5];
nums.reduce( (total, num) => total += num, 0);
```

##Copying Arrays
There are several different ways to copy arrays. Let's look at two of the most modern ways.

###Slice
```JavaScript
const arr = [1,2,3,4,5];
const copy = arr.slice();
```

###Spread Operator

```JavaScript
const arr = [1,2,3,4,5];
const copy = [...arr];
```