Up to this point, you have been using variables for a while to store the values. Variables make it possible to keep a collection of data that you will use later in the program.

Surely, a variable is incredible and all, but let’s imagine this scenario for a minute.

Suppose, you create a variable called students and you’re storing three students' names.

let student1 = "Peter"
let student2 = "John"
let student3 = "Rick"

What happens when you want to store twenty students? No big deal, right? You could just add another seventeen variables and that will be it.

Fine, but what if you have to store hundreds or thousands of students? Not only that, but you also want to easily search their names too.

This is the point when you start to realize the limits of variables and a need for another way of storing a large number of values. This is where an Array comes into play.

An array is the main programming concept and is used to store a collection of data (or lists) in one variable.

Creating an Array

There are different ways you can create an Array in JavaScript. The simplest one is Array literal.

For example:

let students = ['Peter', 'John', 'Rick'];

Here, we created a simple array called students by using the object literals. It contains three strings that are enclosed with square brackets []. The square brackets are what will declare this code an array.

The main difference between arrays and objects is how they close the bracket. Objects use curly braces {} to close the bracket and the Array uses square brackets [] to close the bracket.

You can also create an array like this which is easier to read when it contains lots of data:

let students = [
  'Peter',
  'John',
  'Rick'
];

console.log(students)

An array can store any values like strings, numbers, booleans, objects, and even another array!

For example:

let arrays = ['Peter', 'John', 6, 32, true, false ,{name: 'Rick'}, ['apple', 'banana']];

console.log(arrays)

Output:

[
  'Peter',
  'John',
  6,
  32,
  true,
  false,
  { name: 'Rick' },
  [ 'apple', 'banana' ]
]

When the output displays the code that is covered with square brackets, then it is an array.

Accessing an Array value

You can access the value of an Array by using the bracket notation which you may have learned from the object lessons. For example:

let arrays = ['Peter', 'John', 'Rick'];

let student = arrays[1]

console.log(student) // John

Notice that the index starts with the number 0 and not the number 1. In other words, to access the first value, you have to write the number 0, and to get the second value, write number 1, and so on.

Coding tasks

Time to test your knowledge for this lesson by writing code. Read the instructions carefully before attempting the tasks.

The first and second tasks will involve adding a new code to get the desired output. In the third task, you will change the existing code to fix the problem, and finally, in the fourth task, you will write a small code from scratch.

At the end of each task, be sure to hit the “RUN” button to run the program.

Task 1

A new array named fruits is created but the values are empty. Add three strings apple, orange, and banana to the array so that the output will display[ 'apple', 'orange', 'banana' ].

let fruits = [];

console.log(fruits)

Task 2

Here is an array called clothes which contains three strings: shirt, jeans, and hat. We want you to access the value hat by using the bracket notation method.

Type the following command in the editor and click the “RUN” button to run the program.

let clothes = ['shirt', 'jeans', 'hat'];

let getCloth = clothes[2]

console.log(getCloth)

Task 3

The following code is broken and producing an error.

let cities = {'London', 'Tokyo', 'New York'};

console.log(cities)

Find the source of the error and fix it so that it will display [ 'London', 'Tokyo', 'New York' ].

Hint: A wrong type of bracket has been used here.

Task 4

Let’s create a simple array from blank. Create an array called languages and include the following strings: English, French, Spanish, German, and Italian.

Lastly, add the console log with the value of the array languages so that the output display [ 'English', 'French', 'Spanish', 'German', 'Italian' ].

When you finish it, hit the “RUN” button to check the results.