Until now, we've always dealt with one piece of information at a time: one number, one string, one element on a page. However, we often need to group things together when we are coding. 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. If we start with an empty array, we are almost certainly going to want to change it. After all, an array isn't very useful if we aren't using it to hold things. 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 other 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. In this case, it's
1. 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.
That's not the case with arrays, though. When we modify an array, we aren't reassigning or redeclaring the variable. It's still the same array even though we've made changes to it. In the case of using
const with an array, it's kind of like a permit that protects a house from being knocked down or altered (as you'll often see for historic homes). However, you can still change the furniture in the house even though the permit won't allow the house to be replaced. In this analogy, the array is the house and the elements are the furniture.
> 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 means 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 42
Last updated May 26, 2022