What is an Array?

An Array, in Javascript is a unique variable which can store multiple values in one single element.

An array data structure can be either an ordered list of items or a collection of elements which can be accessed via their index or key.

The items within an array can be of varying data types: numbers, strings or even... more arrays! In the situation that you have an array inside another array, this is called array nesting.

How can I create an array?

Arrays are referenced with [] notation. They can be declared one of two ways:

const myArray = [];
const myArray2 = new Array(5);

Using the Array class allows you to specify the length of the array you are declaring.

Got it, but how can I access the properties of an array?

You can access an item within in an array using either its key or index. The index of an array is the location of that element within the array.

This is where it gets slightly confusing and something you may not have seen previously, but Arrays are indexed starting at 0.

const myArray = ['pink','purple','blue'];
myArray[2]; // is equal to 'blue'

They like to keep you on your toes otherwise it would be boring.

Cool, but how about the length of an Array?

The total number of items in an array is the length of the array. You can work that out using the length property.

const myArray = ['pink','purple','blue'];
myArray.length; // is equal to 3

Wait...huh?

OK - lets try digest that a little more with an example dataset. Every week I go to the supermarket with my shopping list containing a list of items and the quantity needed for each item. My shopping list can be written into an array like this using a javascript object which stores an array of named key value pairs.

let myShoppingList = {
  cheese: '1',
  eggs: '6',
  milk: '1',
  bread: '1',
  juice: '2',
  chocolate: '10'
};

The keys in this array are the items: cheese, eggs, milk etc. And the values are the quantity. These can be matched together to form key value pairs. I can get the value by using the key.

myShoppingList['juice'] returns a value of 2.

Nice one! 👏 You've made it this far and hopefully now you understand what an array is, how to declare one and how you can access its elements.

Let's now chat about how to manipulate the elements within an array.

Array Methods 🎉

Arrays have some built-in properties (like length which we spoke about earlier) and methods. We can use methods to add, remove, iterate, or manipulate data dependant on our use case.

You may find yourself in a situation where you have an array and you know what you want to do to it, but you're not sure how.

Not to worry - I'm going to cover 9 array methods that you can use to manipulate your data. There are more than 9 so if one of these doesn't quite cut it, take a look at the MDN docs.

.push() adds one or more elements to the end of an array.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];
colours.push('Zayn');

// oneDirection = ['Harry','Liam','Niall', 'Louis', 'Zayn'];

.pop() removes the last element in an array.

const oneDirection = ['Harry','Liam','Niall', 'Louis', 'Zayn'];
colours.pop();

// oneDirection = ['Harry','Liam','Niall', 'Louis'];

.shift() similar to pop, this removes the first element in an array.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];
colours.shift();

// oneDirection = ['Liam','Niall', 'Louis'];

.unshift() adds an element to the beginning of an array.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];
colours.unshift('Zayn');

// oneDirection = ['Zayn','Harry','Liam','Niall', 'Louis'];

.forEach() - performs a function once for each element in the array.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];

oneDirection.forEach(name => console.log(name));

// Harry
// Liam
// Niall
// Louis

.map() this allows you to iterate over items within an array, performing a function on each and then returning a new array with the results.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];
const myMap = oneDirection.map(name => name + '!');

console.log(myMap); // ["Harry!", "Liam!", "Niall!", "Louis!"]

.includes() returns true or false depending on whether an array includes a certain value.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];

console.log(oneDirection.includes('Zayn')); // logs false

.find() returns the values of the first element in an array to pass the function provided.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];
const found = oneDirection.find(name => name.startsWith('L'));

console.log(found); // logs 'Liam'

.filter() returns a new array with all the elements from the original array which pass the provided function.

const oneDirection = ['Harry','Liam','Niall', 'Louis'];
const found = oneDirection.filter(name => name.startsWith('L'));

console.log(found); // logs ['Liam', 'Louis']

Congrats! If you made it this far you're now a whizz at JS Array methods! If you think I've missed any core info, please don't hesitate to get in touch.

Thanks for taking the time to read this, I'll be posting blog posts regularly. I've got blogs on web accessibility and resources for beginners lined up, so stay tuned 👀