const - JS | lectureWorking With Arrays

Let's begin this new section with very simple and easy-to-understand array methods to expand our array toolkit a little more. Before we start writing any code, let's quickly talk about why arrays actually have methods. Remember that methods are simply functions that we can call on objects. Hence, if we have array methods, then arrays are also objects. And so, these array methods are simply functions attached to all arrays we create in JavaScript.

We will learn why all arrays have access to these methods in a later section when we talk about prototypal inheritance. But for now, I want you to understand that arrays are objects, and they get access to special built-in methods that we can essentially see as tools for arrays.

As mentioned at the beginning of this lecture, we'll start by learning some very simple tools we can use on arrays. So let's start by defining a simple test array we can work with.

const arr = ['a', 'b', 'c', 'd', 'e'];

SLICE

The first method we will learn is the slice method. This method is very similar to the slice method available on strings. With the slice method, we can extract a portion of an array without modifying the original array. Just like the slice method on strings, the slice method takes two arguments, the first one is the index at which to start the extraction, and the second one is the last index to be extracted but not included. The result of the slice method is a new array that contains the extracted portion of the original array.

Let's have some examples of how the slice method works.

console.log(arr.slice(2)); // ['c', 'd', 'e']

From the above example, we can see that we only provided the start index to the slice method. This means that the slice method will extract the entire array starting from the index provided. In this case index 2.

console.log(arr.slice(2, 4)); // ['c', 'd']

In this second example, we provided the start and end indices to the slice method. This means that the slice method will extract the array from index 2 to index 4, but not including the element at index 4. The length of the output array will be the difference between the end index and the start index. In this case, the length of the output array will be 2.

Next, we can specify a negative start index. This means that the slice method will start extracting from the end of the array.

console.log(arr.slice(-2)); // ['d', 'e']

This actually makes it easy if we want to get the last elements of an array.

console.log(arr.slice(-1)); // ['e']

We can also use a negative end index.

console.log(arr.slice(1, -2)); // ['b', 'c']

From the above example, the slice method will extract the array from index 1 to index 3, but not including the element at index 3. That is, it extracts everything statring from index one, but not including the last two elements.

To finish with the slice method, we can use it to create a shallow copy of an array.

// Slice without arguments
console.log(arr.slice()); // ['a', 'b', 'c', 'd', 'e']

We did something similar in one of the previous lectures. We created a shallow copy of an array using the spread operator instead of the slice method.

// Shallow copy
console.log([...arr]); // ['a', 'b', 'c', 'd', 'e']

Now, the question you are certainly asking yourself is, should we use the slice method or the spread operator? Well, that's entirely up to you. It's just a matter of personal preference. The only time you really need to use the slice method is when you want to chain multiple methods together. We will cover this in a later lecture. Lets move on to the next method.

SPLICE

The splice method works in almost the same way as slice. The first fundamental difference is that the splice method modifies the original array. That is, it mutates the array. The second difference is that the splice method takes three arguments. The first argument is the index at which to start the splice. The second argument is the number of elements to be removed. The third argument are the elements to be added.

console.log(arr.splice(2)); // ['c', 'd', 'e']
console.log(arr) // ['a', 'b']

You will notice that when logging the original array after executing the splice method, we are left with the first two elements. The extracted elements were deleted from the original array. In practice, most of the time, the value that the splice method returns don't even interest us. We are usually interested in just deleting one or more elements from an array. One common use case is removing the last element of an array.

console.log(arr.splice(-1)); // ['e']
console.log(arr) // ['a', 'b', 'c', 'd']

Let's now say we want to remove two elements after the first element, or after index 1.

console.log(arr.splice(1, 2)); // ['b', 'c']
console.log(arr) // ['a', 'd']

If we now want to add an element after the first element, here is how we can do it.

console.log(arr.splice(1, 0, 'f')); // []
console.log(arr) // ['a', 'f', 'd']

In case you want to learn more about any particular method, you can check out the MDN documentation.

REVERSE

The reverse method reverses the order of the elements in an array.

const newArr = ['y', 'm', 'k', 'l', 'o', 'g']
console.log(newArr.reverse()); // ['g', 'o', 'l', 'k', 'm', 'y']

What's important to note note here is that the reverse method mutates the original array.

console.log(newArr); // ['g', 'o', 'l', 'k', 'm', 'y']

CONCAT

The concat method is used to merge or concatenate two or more arrays.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const arr3 = ['g', 'h', 'i'];
const newArr = arr1.concat(arr2, arr3);
console.log(newArr); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

Once again we already did this before in another way using the spread operator.

console.log([...arr1, ...arr2, ...arr3]); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

It gives us the same result and does not mutate any of the involved arrays. Just like concat which doesn't mutate the original array (arr1).

JOIN

The join method as we've already seen in some previous lectures is used to join all the elements of an array into a string. And it takes one argument, the separator that is used to separate the elements of the array.

const arr = ['a', 'b', 'c'];
console.log(arr.join('-')); // 'a-b-c'

I'll finish this lecture by saying that, if you ever lose track of all these different methods, you can always come back to this lecture or check out the MDN documentation. No developer can ever remember all the different methods available in JavaScript because it's just too many methods to keep track of.