Lesson 6: Arrays

Arrays are created in a similar way to a basic variable but the values of the array are wrapped in square brackets [ ].

Example

let shoppingList = ["Math", "English", "Science", "French"];
console.log(shoppingList[0]);

As you can see we created an array with 4 items in it. Each item has an index number which tracks where the item is in the array.

Array indexes start at [0]. The following examples illustrate this. This is an example of an array called my_subject. We will use it to show the differences between indexes and values.

The values inside an array can be manipulated and changed using the following methods:

• Changing an element
• Deleting an element
• Pushing an element into the array
• Popping an element out of the array
• Slicing an element out of the array
• Splicing an element into the array
• Shifting the array

Change

To change an element, define the array name followed by brackets and the value that you’d like to input.

The value inside the [] means that an index is used.

var my_subjects = ["Math", "English", "Science"];
my_subjects [2] = "French";
console.log(my_subjects);

Delete

To remove elements from an array, use the ‘delete’ keyword.

Use the delete keyword first, followed by the array name and the index value.

var my_subjects = ["Math", "English", "Science"];
delete my_subjects[2];
console.log(my_subjects);

Try It!

Switch over to the index.js file

You can add elements to an array using the ‘push’ keyword. Itadds the element to the end of the array.

It’s called by typing the array name followed by the push keyword and parenthesis for the value.

var mySubjects = ["Math", "English", "Geography"];
mySubjects.push("Science");
console.log(mySubjects);

You can removefrom an array using the ‘pop’ keyword. It removes the last element from the array.

Like the push method, the pull method is called after the array name with empty parenthesis.

Why empty parenthesis? As the pop method removes the last element in the array, no value is needs to be inputted inside the parenthesis.

var mySubjects = ["Math", "English", "Geography"];
mySubjects.pop();
console.log(mySubjects);

Slice removes an element from an array.

What’s the difference between slice and pop? Slice allows you to pick the element you would like to remove, as pop removes the last element in the array. We use the element number not the index value.

The value inside the () means that the element is used.

var my_subjects = ["Math", "English", "Science"]
my_subject.slice(1);

Splice allows you to pick the position of your value/values in the array as well as removing values from the array.

The splice method takes three, comma separated, parameters within brackets:

1. the position of the new element
2. the number of elements to be removed
3. the value of the new element

var my_subjects = ["Math", "English", "Science"];
my_subject.splice(2, 0 ,“Geography”);

In this example:

• 2 is the position of where the new element should be added
• 0 is how many elements should be removed from the array. In this case, no values will be removed.
• "Geography" is the value of the element to be added

The array sequence can be reversed using the ‘reverse’ keyword.

var my_subjects = ["Math", "English", "Science"];
my_subject.reverse()

The length of an array

You can find the length of the array by typing array_name.length.

var myFruits = ["Mango", "Kiwi", "Orange", "Apple"];
console.log(myFruits.length);

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

var my_subjects = [1, 2, 3];
var firstElement = my_subjects.shift();
console.log(my_subjects);

var my_subjects = [1, 2, 3];
var firstElement = my_subjects.shift();
console.log(firstElement);

The code below prints **undefined** because we console log for the 4th element actually, and in the array list we only have 3 elements starting from the 0 position.

const variables = ['a', 'b', 'c'];
console.log(variables[3]);