Module 3 JavaScript Arrays: CS 112 : Javascript Prog - Minassian N. -... https://ilearn.laccd.edu/courses/283068/pages/module-3-javascript-arra...

Module 3 JavaScript Arrays

Arrays in JavaScript
An array is a special type of variable used to store multiple values under the same variable name.
It can be conceptualized as a container or bucket that holds items. It's often used when you are
working with many values or if you don't know how many items you may need to store. These
elements can either be initialized in code, or left to be added later when the program is running.

Crea�ng an array with JavaScript

var names = ["Amy", "Mike", "John", "Emily"];

The names variable is now an array that holds 4 names. You may now ask how you access these
values when the variable name itself is the same for all of the names. The answer is the array's
indexer. The indexer is a number used to access the elements. The first element is accessed with
index 0. Let's take a look to see how we can now access these elements:

alert(names[0]); // outputs Amy

alert(names[1]); // outputs Mike
alert(names[2]); // outputs John
alert(names[3]); // outputs Emily

As you can see, you access the elements using the name of the variable, followed by the index in
brackets. Also note that the last element in the array has the indexer one less than the total
number of elements, 3 in this case even though the array holds 4 items. The reason for this is
because the index begin with 0 so the first index is 0 and the last index is array's length - 1.

You can also use the indexer to change the value. Let's say you want to change John's name to
Juan:

names[2] = "Juan";

Array Methods & Proper�es

Array's in JavaScript come with a number of properties and methods or functions that allow you
do various operations. We are going to take a look at only a few here.

1 of 3 9/28/2024, 12:40 PM
Module 3 JavaScript Arrays: CS 112 : Javascript Prog - Minassian N. -... https://ilearn.laccd.edu/courses/283068/pages/module-3-javascript-arra...

Ge�ng Length

The length property is used to return the number of elements that exist in the array.

var names = ["Amy", "Mike", "John", "Emily"];

var x = names.length; // x is set to 4

Sor�ng

JavaScript has a built-in sort function that sorts the elements in the array in alpha-numeric order.
Let's take a look to see how this works:

var names = ["Amy", "Mike", "John", "Emily"];

names.sort(); // The array is now ordered ["Amy", "Emily", "John", "Mike"]

Searching

Searching allows you to have JavaScript look through an array to see if an element exists. This is
done using the includes() function. See example below:

var names = ["Amy", "Mike", "John", "Emily"];

if (names.includes("John")) { // Searches the array for John

alert("John exists in the array!");
}

Adding Array Elements

There are three ways to add elements to an array, at the beginning of the array, at the end of the
array and somewhere in the middle. We will take a look at adding elements at the beginning and
at the end for now.

• push(): Adds an element to the end of the array

• unshift(); Adds an element to the beginning of the array

var names = ["Amy", "Mike", "John", "Emily"];

names.push("Nick"); // adds "Nick" to the end of the array

names.unshift("Angie"); // adds "Angie at the beginning of the array

// The names array is now ["Angie", "Amy", "Mike", "John", "Emily", "Nick"]

Dele�ng Array Elements

2 of 3 9/28/2024, 12:40 PM
Module 3 JavaScript Arrays: CS 112 : Javascript Prog - Minassian N. -... https://ilearn.laccd.edu/courses/283068/pages/module-3-javascript-arra...

There are three ways to delete elements from an array, from the beginning of the array, from the
end of the array and somewhere in the middle. We will take a look at deleting elements from the
beginning and from the end for now.

• pop(): Deletes the last element of the array and also returns that element.
• shift(): Deletes the first element of the array and also returns that element.

var names = ["Amy", "Mike", "John", "Emily"];

names.pop(); // Deletes "Emily"
names.shift(); // Deletes "Amy"

// The names array is now ["Mike", "John"]

Adding/Dele�ng Array Elements From The Middle

JavaScript has a single function that is used to add or delete items from the middle of an array.
This method is the splice() method. The interesting thing about the splice function is you can use
a single function call to both add and delete elements at the same time. However, to keep it
simple, these two operations are broken down into two separate examples. The splice() function
has a definition of: splice(index, number_of_items_to_remove, items_to_be_added)

• index: This is the index of where you want to add or remove items from.
• number_of_items_to_remove: This is the number of elements to remove from the array
beginning at the index.
• items_to_be_added: One or more items you want to add beginning at the index.

Let's take a look at adding some elements to the middle of the array first

var names = ["Amy", "Mike", "John", "Emily"];

names.splice(2, 0, "Steve"); // Adds "Steve" after "Mike"

// The names array is now ["Amy", "Mike", "Steve", "John", "Emily"]

Now let's take a look at deleting an element from the middle of the array

var names = ["Amy", "Mike", "John", "Emily"];

names.splice(2, 1); // Deletes "John"

// The names array is now ["Amy", "Mike", "Emily"]

3 of 3 9/28/2024, 12:40 PM