JavaScript Arrays Tutorial - Getting Started

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

const arr = [];

Create an Array with Elements Already In It

const arr = [1,2,3,4,5,6];

Create an Array with Elements Already In It (different data types)

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

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

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

const arr = [1,2,3,4,5,6];
arr[0];//1

Get the Last Element of the Array

const arr = [1,2,3,4,5,6];
arr[arr.length-1];//6

Update the First Element of the Array

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

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!

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

const arr = ["Jess", "James", "Padfoot", "Lily", "Sevi"];
for(let i = 0; i< arr.length; i++){
console.log(arr[i]);
}

Using Let Of

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.

Using For Each for Looping

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;

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.

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

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

Spread Operator

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