Until now, we've always dealt with one piece of information at a time: one number, one string, one element on a page. But often, we need to group things together. In programming, a group of things is often referred to as a collection.
In this lesson, we will cover a very common form of collecting items: the array. Arrays are enclosed in square brackets like this:
let array = ;
In the example above, we've created an empty array with square brackets. Note that we use
let here, not
const. We are going to want to change our array, after all. Also, we'll find that
const doesn't stop arrays from being mutated. We'll cover that soon.
We can also create an array that already has items in it. Here's an array that holds the months of the year:
> const months = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
Why did we use
const here? Well, presumably the months of the year aren't going to change. We can still communicate our intentions to other developers. We'll revisit this array in just a moment.
[2, 5, 7, 3423, 85, 65]
["e", "p", "i", "c", "o", "d", "u", "s"]
["word", 45, "word2", 123]
Here's an example that holds a variable:
> const variable = "I'm a variable!"; > const things = [variable, "I'm not a variable!"]; > things; ["I'm a variable!", "I'm not a variable!"]
Here's an example that holds an expression:
> const numbers = [62, 62 / 2]; > numbers; [62, 31]
Here's one that holds not just strings and numbers but also arrays:
> const mixOfArraysAndPrimitives = ["string", 123, ["another string", 456], 321, "yet another string", true];
Let's look at our original empty array again:
let array = ;
What if we want to add things to this array? There are many different methods that can be called on arrays. One of the most common is
Array.prototype.push(), which allows you to add new objects to the end of an array.
Let's take a look:
let array = ; array.push("hi"); > 1 array > ["hi"] array.push("there"); > 2 array > ["hi", "there"]
When we use the
Array.prototype.push() method on an array, the return value of the method is the new length of the array. To see how the array has been modified, we can just check the variable.
What happens if we try to push a new value into our
> const months = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"]; > months.push("I'm not a month mwa ha ha"); 13 > months ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december", "I'm not a month mwa ha ha"];
We can see that
const doesn't stop an array from being modified.
const just stops variables from being reassigned or redeclared. That works great with primitives. If we change a variable holding the number
8 for instance (such as by trying to add another number to it), we are reassigning the variable.
> const array = ; > array = ["hi"]; Uncaught TypeError: Assignment to constant variable.
This is like building a house and then knocking it down and replacing it with another one. We assign an empty array to the variable
array and then we try to reassign the value of
array. As the error shows, we can't do that with a
Note the difference here:
> const array = ; > array.push("hi"); 1 > array ["hi"]
We didn't knock down the house here. Our array still exists - we just added an item to it. This is like adding a new piece of furniture to the house.
This is an important gotcha about using
const with arrays. We can still modify the array (whether that is adding or removing items from it) so it's not truly constant. Why use
const with arrays at all then?
Well, this is when we can use our code to communicate our intentions. When we use
const with an array, we're telling other developers that the array shouldn't be modified. It also makes clear that you won't be modifying the array yourself.
When refactoring your code, you should always check to see if any of your variables need to be changed from
const or vice versa.This makes your code clearer and easier to read.
In this lesson, we covered a few of the basics of arrays. By this point, you should know that an array is just a collection that can contain just about anything. We've also covered the
Array.prototype.push() method, one of the most ubiquitous array methods, and discussed why
const doesn't work as you might expect with arrays - and when you should use
const with arrays anyway.
In the next lesson, we'll learn about the
Array.prototype.length property of arrays. We'll also cover bracket notation, which we can use to look at specific values inside an array. Then, in the lesson after that, we'll cover commonly used array methods.
Arrays can have just about anything as elements, even other arrays:
["string", 123, true, ["another string", 456], 321, 52 / 3]
Common array method:
Array.prototype.push(): Add an element to the end of an array.
let when you plan to modify an array and
const when the array won't be modified. However, be aware that
const won't actually stop you from modifying an array!
Lesson 4 of 31
Last updated June 22, 2020