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];
Top comments (0)