Array Methods with Clear Examples.
Tags: webdev, javascript, tutorial, react
Published: 2023-02-21 07:27:02

In Javascript, Variable names are used to store one (1) value per time, albeit numbers, strings, objects, Booleans, or any other data type. These values can be mutable (changed) or reassigned depending on the declaration keyword used to declare them; var, let or const.

Arrays allow us to assign more than one value to a variable name. These values can be a collection of different data types stored in a single variable name.

We will create our Arrays using 2 methods, first by using an array constructor and then assigning our array value to a variable.

USING AN ARRAY CONSTRUCTOR:

![array constructor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u22vpfzu5cg998kw3p2.png)

DIRECT ASSIGNMENT TO A VARIABLE:

![direct assignment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tbzo86lskoa9q9xelnn.png)

These are the 2 most popular methods you’ll encounter as a beginner while creating an array, moreover, there is the **_Spread Operator (…) method_** too, and it’s really handy, especially when performing iteration from an API. We will talk about this in the next article.

The output of both methods above can be seen here:

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3vo9fjuzr4pafvgaq3f.png)

Arrays are objects, their values grow and shrink. They can be modified, added to, removed from, merged, and deleted. As objects, arrays have several properties and methods that can be performed on them and we will perform a few of those operations.

ACCESSING THE VALUES OF AN ARRAY

To access the values of an array, we use the bracket [ ] symbol beside our variable name, followed by the property or method name we want to perform on them. For example, to check the value of the second item in **_ourArray_**, we access it like this:

To begin with, remember, arrays are Zero (0) index based; meaning the items in **_ourArray_** starts counting from 0.

![accessing values in an array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/613fp966kwryvbtfeotl.png)

From the above example, the value of the second item in ourArray is ‘Steve’. Let’s list the indexes of the items in ourArray for better understanding.

```
index 0= 100,

index 1= Steve,

index 2= {name: ‘Toby’},

index 3= [Jolene, Bob],

index 4= true.
```

Let’s try some other properties and methods on a new set of arrays.

![example array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ak15l40flg5a69g9z1vg.png)

1. The concat() method.

The **concat()** method joins 2 or more arrays and returns one single array with a list of the joined arrays. Let’s create a new array and concatenate it with **_ourNewArray_**.

![concat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ym09jc56ae4mlweisb3o.png)

To concatenate the previous array with this new one, we will run this code;

![concat code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l5az9x963udwpi5p4m6.png)

In return, it will print the items in ourNewArray, followed by the items in the concatenated array.

![concat result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5fug8sumcmg671efeon.png)

2. The **Length** of an array.

To check the length of **_ourNewArray_**, we don’t need the bracket symbol to achieve that. Let’s play with the code. It’s a short one.

![array length](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vogb46yeziqgsckzjwcd.png)

The output of this is 5 because there are 5 items in the array.

Don’t confuse the length of an array with the index. **The index count of an array is usually the length of the array -1**.

3. The **toString()** method.

This method converts the items of an array into bare strings.

![tostring example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6or0iiza9j5bzbcen10q.png)

It outputs the items in the array as is, except without the quotes around them.

![tostring result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukudwwhp4o6mnio2rd5h.png)

4. The **join()** method.

This method also returns the items in the array as they are, only just that this time, with a separator as determined by you. It removes the white space and replaces it with whatever you replace it with. We will use the ‘#’ symbol as the separator in this example, so you see how the join() method works.

![join example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yp1jxllw0h5eqxrepdf.png)

The return goes thus:

![join result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9hdwmodor6cqif8lkjj.png)

5. The **pop()** method.

This method removes the last item in the array and returns it. It’s not a difficult method to remember.

![pop example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2iz253zapv3a7lqnnmh.png)

The output of this would be 

```
Toby
```

6. The **push()** method.

This method adds to the end of the array, but only returns the length of the array. Here we will log the push() method in the console and then log the ourNewArray once again so you can see the newly added item in the array.

Let’s see how this works.

![push example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx2z7lxflfksvfctbry3.png)

We are pushing a new item into the array in line 6, and then we are logging our new array list in line 7. Let’s see the result.

![push result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yehxmqbpkfllkd8czeg.png)

As I said earlier, the push() method adds to the end of the array, but only returns the length of the new array, as shown in our index.js line 6 and our new array item list in the index.js line 7.

7. The **reverse()** method.

As the name states, it reverses the order of the items in the array. This should be easy to remember, as the name easily gives it out.

![reverse method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsf4zr19o7b8m60femii.png)

The code returns this:

![reverse result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x3ai4ez64zf64uonue0.png)

8. The **shift()** method.

This is the opposite of the pop() method, as this method removes the first item in an array and returns only the item.

![shift example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd6zncybyzrehwo50grq.png)

Its output:

![shift result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz8ypr2uouye0qddwtc2.png)

9. The **slice()** method.

This method selects a part of an array, removes it and returns a new array list. It’s easier to understand in an example, so let’s see how it works.

We will run 2 slice methods with 2 different slice parameters, so it’s easier to understand in real practice.

![slice example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlnl7rrvuqjmbf6r054q.png)

Let’s see the result of lines 6–7 in the console.

![slice result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd7i6dj7491kfr7s4ulv.png)

10. The **splice()** method.

This method can be a little confusing, but it’s not so hard to understand. It takes 2 parameters; the starting point of action and the number of changes to be made, and then returns a new array. Let’s take a look at the below example and I’m sure it would become clearer.

![splice code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkbyzpvo8lj4spow0s9i.png)

The parameters here are, at index 1, remove 2 items. After doing that, it returns the 2 items that were removed.

![splice result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n81p30xrqefjr3lk8yhd.png)

So here, it’s saying at index 1 (Oranges), remove 2 items. So it removes Oranges and Paperplanes and returns them in a new array.

I hope this explains it better.

11. The **unshift()** method.

This acts like the push method, just that it adds a new item at the beginning of the array, and returns the length of the array.

We will unshift a new item into the array, which increases the length of the array by 1, and then console.log the new array list.

Let’s give it a try.

![unshift example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3l9gasjalhqxuwbpduv.png)

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wot8uo2m1lhgr11egpwo.png)

There are still several very important array methods like the map(), reduce(), filter(), some(), includes() etc. I regard these array methods as Higher Order array methods because they are best used in Array Iteration. We will talk about them in the next article.

Thanks for taking out time to read this article, and I hope it helped you.

I am open to corrections and additions, so feel free to let me know if there is something I need to know or update.

Also, you can give me ideas on topics you’d like me to write about.

Thanks once again.