loading...
Cover image for JavaScript Arrays Tutorial - Getting Started

JavaScript Arrays Tutorial - Getting Started

jamesqquick profile image James Q Quick ・3 min read

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 = [];
Enter fullscreen mode Exit fullscreen mode

Create an Array with Elements Already In It

const arr = [1,2,3,4,5,6];
Enter fullscreen mode Exit fullscreen mode

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

const arr = [1,2,"James", "Jess", true];
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Get the Last Element of the Array

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

Update the First Element of the Array

const arr = [1,2,3,4,5,6];
array[0] = 0; //[0,2,3,4,5,6]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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]);
}
Enter fullscreen mode Exit fullscreen mode

Using Let Of

const arr = ["Jess", "James", "Padfoot", "Lily", "Sevi"];
for(let name of arr){
console.log(name);
}
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

Spread Operator

const arr = [1,2,3,4,5];
const copy = [...arr];
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide