A Review of Arrays in Javascript

Arrays in Javascript are a simple, one-dimensional way to store simple sets of data. Arrays are non-unique, which means they can store duplicates (unlike sets). They also follow typical prototype inheritance, as with other Javascript types. That just means that all arrays inherit a certain set of specific methods, like , some(), every(), concat(), any many more. length Making a Javascript Array The most straightforward way to create an array is by putting items in square brackets. Each comma-separated item is an array element, and the square brackets dictate where the array begins and ends: let myArray = [ 1, 2, 3, 4, 5, 6 ] Although this is a common way to define an array, you can also use : new Array() let myArray = new Array(1, 2, 3, 4, 5, 6) Above we have defined a simple array of 6 items, those being all the numbers from 1 to 6. We have now stored our data in the array format. Similarly, we can also store strings or other standard Javascript types; let myArray = [ 'hello', 'world' ] let mySecondArray = [ (hi) => { console.log(hi) }, { some: "Object" }, 1, 2, 3, new Set([1, 2, 3, 4, 4]) ] let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] Getting the length of an array As mentioned before, all arrays have a standard set of methods that work on them. The most commonly used is perhaps , which we can use to get the size of an array: lngth let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] let getArrayLength = myArray.length; // Returns 5, since there are 5 items. Accessing properties in an array Arrays are basically objects in Javascript, where every element is indexed by a number. As such, we can access array elements using the method as we do in objects, where will always be a number. obj[key] key As with other languages, we usually start counting at 0, so the first item has an index of 0, and as such, the second item has an index of 1. To access the second item, we may do this: let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] let getOrange = myArray[1] // Returns 🍊 Getting the last element of an array Since we know the length of an array, we can use that information to get the last element in an array. That looks a bit like this: let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] let getArrayLength = myArray.length // Returns 5, since there are 5 items. let getOrange = myArray[getArrayLength-1] // Returns 🍠 Another easy way to do this is to just use the method: at let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] let getOrange = myArray.at(-1) // Returns 🍠 Iterating over an array Another important feature of arrays is they are . That means they work with any function expecting an iterable, or within for loops. Using loops is an easy way to iterate over every item in an array. iterable for In the below example, we will console log every array item: let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] for(let i = 0; i < myArray.length; ++i) { // Since i changes +1 every time, the below line will be run for every array item // Thus every array item will be console logged for us. console.log(myArray[i]) } You may also see this written like this, which turns into the array element itself: i let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] for(let i of myArray) { console.log(i) } which you might find useful is in the form , which instead of returning the array element returns the key for that array element: One more loop let i in myArray let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ] for(let i in myArray) { console.log(myArray[i]) } Turning strings into arrays If we have a string separated by a specific character, we can split it into an array. Imagine we have all of our fruit and vegetables in a string separated by '-'. If we apply the function to that string, we will get an array: split let myString = "🍅-🍊-🥬-🍓-🍠"; // Returns [ '🍅', '🍊', '🥬', '🍓', '🍠' ] let myArray = myString.split('-'); Manipulating existing arrays Since arrays can be modified after they are created, we have a number of methods and operators available to modify them. For example, using we can easily merge two arrays: the three dots operator let array1 = [ '🍅', '🍊' ] let array2 = [ '🍅', '🍊' ] let array3 = [ ...array1, ...array2 ] // [ '🍅', '🍊', '🍅', '🍊' ] To add or remove elements from each end of an array, we have 4 methods - , , and . push pop shift unshift push We can also add new items to an array using the method, which adds one item at the end of an array: push let array = [ '🍅', '🍊' ] array.push('🥬') console.log(array) [ '🍅', '🍊', '🥬' ] pop If we wanted to instead remove the last element of an array, we can use : pop() let array = [ '🍅', '🍊' ] array.push('🥬') array.pop() console.log(array) // [ '🍅', '🍊', '🥬' ] unshift Similarly, we can add items to the start of an array using . This is slower than , since it requires moving everything to one side as well as inserting an item. unshift push let array = [ '🍅', '🍊' ] array.unshift('🥬') console.log(array) [ '🥬', '🍅', '🍊' ] shift If is to , then is to - we can use to remove the first element of an array: unshift push pop shift shift let array = [ '🍅', '🍊' ] array.shift() console.log(array) [ '🍊' ] Conclusion Arrays are really important in Javascript. Understanding how they work is crucial in understanding Javascript. Although they can seem daunting, the important things to remember are: Javascript arrays can be defined with square brackets or [] new Array() Arrays can contain any standard Javascript types, for example - functions, objects, or sets. Arrays are essentially objects - each array element is given a numbered index allowing us to access it with notation obj[key] Arrays are iterable, meaning they can be iterated on in for loops. Arrays have a number of standard methods and properties, for example - , , , , and length. split() concat() some() pop() shift() Also published here.