Basic Array Operations
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'];
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 😉.
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.
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 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.
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
unshift but instead it returns the removed element.
const removedElement = fruits.pop(); console.log(removedElement); // Result ==> 'Citrus'
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 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
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 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
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