JavaScript arrays

JavaScript arrays

In JavaScript, variables can hold single values. They cannot hold multiple values. Thus we use arrays.

Arrays allow us to store multiple values.

The array declaration in JavaScript starts with a opening square bracket [ symbol and ends with a opening square bracket ] symbol.

Let's create a shopping list array.

let shopping_list = ["Bread", "Butter", "Jam", "Milk"];

As you can see we stored various string literals inside each array item. Similarly we can store numbers.

let shopping_list_id = [1, 2, 3, 4];

Here, we created a numbered array. As you can see you do not need to use the quotation marks if the array holds numbers.

You could also create an array that hold both numbers and string literals.

var item_details = ["Shoes", 25, "In stock"];

Arrays, can contain other arrays within them. We call these multi dimensional arrays. See how we use the brackets and commas to separate them.

var array_list = [[1,2,3],[8,9,0]];

Accessing data inside each array items

To access data contained within the array, we use array index's. The index of an array in JavaScript starts at 0. For instance, we could access the string literal: Shoes in item_details array like so -


Modify value of array item/element

Just like you can modify variables once they are declared, you can modify the data stored in each array item/element. Set price to 30 in item_details array. This changes the existing value, which is 25 to 30.

item_details[1] = 30;

Awesome. Hope, you like our content. Please share these with others who are still new to JavaScript. We appreciate it.

Array functions

Just like we have string methods we have array functions to work with arrays. There are a lot of functions, let's look at the most common ones.

We can easily append data to the end of the array using the push method. It can take one or more parameters. Parameters are contained within the function call. Lets look at an example.

var numbers = [5, 10, 15];

As you can see in the output, it added 20 at the end of numbers array. 
You could also push string literals at the end. Now it would contain: [5, 10, 15, 20, "Five"]


Just like you push a string literal or number to the end of the array, you could remove it from the end as well using the pop function. After removing the last element the result would be [5, 10, 15, 20].

numbers.pop(["Five"]); //You could also do number.pop();

There's shift function to remove the first element. Let us remove 5 from numbers. The resultant array is [10, 15, 20] now.


You could use unshift function to add element at the beginning of numbers array. The resultant array would be  [69, 10, 15, 20]


Arrays are very important, please practice these before you take the next lesson.

Assignment: Create a multi dimensional array that holds each shopping item and respective price, and print it to console. For example, it should contain individual items like these:
  1. Milk, 25
  2. Choco, 50
  3. Cherry, 10

Post a Comment