More on Arrays

Previously, we touched on arrays, in this lesson, we'll take a depper dive into arrays in JavaScript. You'll learn more about how to handle arrays and different array functions that exist.

Accessing Every Array Element

There is a for..of construct in JavaScript that helps to quickly navigate through every element in an array. The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object such as Array, and String. This construct is similar to the for loop syntax in Python.

for (variable of iterable)
    statement

Arrays are Objects

Do you remember the typeof operator used to determine the datatype of a variable, let's use that operator on an array and see what happens.

You see, the operator returned object because Arrays are actually a type of objects.

Array Methods

Arrays are objects, therefore they have properties and methods. We already saw one property of the array, length, which returns the size of an array, that is the number of elements in the array. Next, we'll review some array methods.

Watch this video on Array Methods

isArray() - Checking for an Array

From the previous example, we see that the typeof function cannot help us to confirm precisely whether a data type is actually an Array object. However, the Array object itself has a static method that can be used to determine if the value passed to it is actually an Array object.

	const anArray = [1,2,3,4,5];

   console.log(Array.isArray(anArray));
   //returns true

Read more about the isArray method here.

map()

If you need to modify every element in an array in a similar manner, you can use the map function. The map function itself takes in a function. For example, let's assume we have an array of numbers, and we want to multiply every element of the array by a certain number.

push()

The push() method is used add items into an array. It adds items to the end of an array. It takes in the value you want to add to the array.

Try it!

const shoppingList = ["Rice", "Bread", "Fish", "Beans"];

//Let's add a new item to our shopping list
shoppingList.push("Gaari");

console.log(shoppingList)

unshift()

The unshift() method is used to add an item to the start of the array. It takes in the value you want to add to the array.

Try it!

const shoppingList = ["Rice", "Bread", "Fish", "Beans"];

//Let's add a new item to our shopping list
shoppingList.unshift("Gaari");

console.log(shoppingList)

pop()

The pop() function is used to remove the last item from the array.

Try it!

const shoppingList = ["Rice", "Bread", "Fish", "Beans"];

//Let's remove "Beans" from our shopping list
shoppingList.pop();

console.log(shoppingList)

shift()

The shift() method is used to remove the first item from the array.

Try it!

const shoppingList = ["Rice", "Bread", "Fish", "Beans"];

//Let's remove "Rice" from our shopping list
shoppingList.shift();

console.log(shoppingList);

splice() and indexOf()

The splice() method is used to remove an item from a particular position, using its index. In last week's lesson, we saw the use of the indexOf() method, it simply returns the index of an item if it is present in the array. We want to remove the Bread item from our shoppingList, but Bread is neither at the beginning nor at the end of our array - the splice() method comes to the rescue.

Try it!

const shoppingList = ["Rice", "Bread", "Fish", "Beans"];

position = shoppingList.indexOf("Bread");
shoppingList.splice(position,1);
console.log(shoppingList);