const - JS | lectureJavaScript Fundamentals 2

JavaScript has some built-in functions that we can apply directly on arrays. These built-in functions are called methods, and we can think of methods as array operations.

Let's now learn some useful array methods. Before we start, I want to let you know that there are countless array methods in JavaScript. I plan to provide a dedicated section to arrays very soon, telling you how important they are in JavaScript.

In this lecture, as mentioned above, we are only going to see some basic ones you need to know and so that you start getting used to the idea of using methods on arrays.

Let's consider again our fruits array:

const fruits = ['Apple', 'Banana', 'Melon', 'Watermelon'];

Here are some of the basic methods used on JavaScript arrays:

PUSH

The push method adds an element to the end of an array.

fruits.push('Citrus'); // Result ==> ['Apple', 'Banana', 'Melon', 'Watermelon', 'Citrus']

push is a method that we call, and we call that function really attached to the fruits array itself, and that's what the dot (.) just after the fruits array stands for.

If we now log our fruits array, you will see that we get the original array but now with our new element at the end.

Since push is a function, it means that it can return a value. We already know that we can pass arguments into functions, and we did that when we passed 'Citrus' into the push function. The function can then do some work, which is to add the element to the array, and actually, the push function does return a value, and the value that it returns is the length of the new array.

If we want to capture that value, we can create a new variable for that.

const newArrayLength = fruits.push('Citrus');
console.log(newArrayLength.length); // Result ==> 5

Most of the time, we don't do this. We just push an element and call it a day because we don't immediately need the length of the new array, but in case you need it, you already know what to do that 😉.

UNSHIFT

Besides the push method that adds an element to the end of the array, we use the unshift method to add elements to the beginning of the array.

fruits.unshift('Raspberries');

If you now log the fruits array, you should find yourself with six elements, and the first element or fruit of the array should be 'Raspberries'. Just like the push method, the unshift method also returns the length of the new array.

POP

The pop method is the opposite of the push method. It removes the last element of an array. We don't need to pass an argument in this method because there is no information needed to take out the last element.

fruits.pop();

When logging it, you will see that the 'Citrus' fruit is gone. The pop method does not return the length of the new array like push and unshift but instead it returns the removed element.

const removedElement = fruits.pop();
console.log(removedElement); // Result ==> 'Citrus'

SHIFT

The shift method is used to remove the first element of the array.

const removedElement = fruits.shift();

By running the above function, we will now be left with our initial array. Once again, on the shift method, we didn't need any argument, and just like the pop method, it will return the element that was removed.

INDEXOF

The indexOf method is a method that tells us at what position an element is in the array.

console.log(fruits.indexOf('Apple')) // Result ==> 0

If we try the same thing for an element that is not in the array we will get -1.

To finish this lecture, there is a method a bit similar to indexOf, but which is more modern, I will say. It is an ES6 method, and it is called includes. The includes method does not return the index at which an element is found in an array but instead returns true if the element is in the array or false if it isn't.

console.log(fruits.includes('Apple')) // Result ==> true
console.log(fruits.includes('Lettuce')) // Result ==> false

The includes method uses strict equality to check if an element is in the array. You can try the below code snippet to check what I'm saying.

fruits.push(17)
console.log(fruits.includes('17')) // Result ==> false
console.log(fruits.includes(17)) // Result ==> true