DEV Community

Kelvin Sowah
Kelvin Sowah

Posted on

Useful Array Methods In Javascript

The most popular programming language in use today is Javascript. The most recent Stack Overflow developer survey is shown in the image below.

2022 Stack Overflow developer survey

Initially, Javascript was mostly used to build straightforward dynamic webpages, but in the past decade or so, Javascript has seen significant development. It has developed into a programming language that can also be used to build mobile applications (React Native) and the backend of other applications (using Node.js).

Multiple data types make up Javascript as a programming language. The majority are regarded as primitives. A primitive is a data type or value that is neither an object nor has any methods. There are six primitive data types: symbol, null, boolean, number, and string as per the new ECMAScript 2015.

This blog post will concentrate on the Array object and some of the most widely used Javascript built-in methods.

In case you forgot, arrays are just lists of things. The list may include a variety of data kinds. The index of each item in the list can be used to refer to it. Javascript arrays are zero-based indexed, which means that the array's first element has an index of zero. Here are a few instances of arrays and how we can access any individual element within them.

array indexing

shift()
The first element in an array can be eliminated using this array method. Returns the value of the element being removed at the same time.

running node on command promp

You can see that we created an array and saved it in the array variable on the first line. The shift() method was then used on it. As a result, it returned and deleted the array's first entry. The array's appearance after invoking the shift() method is shown in the last line. Don't worry about the undefined in the code.

unshift()
This method allows you to easily add one or more elements to the start of an array and returns the new length of the array.

javascript unshift() method

Once more, a new array is created and stored to the variable called arr. Then, we applied the unshift() method, passing two arguments that represented the elements we wished to insert at the array's beginning. The length of the array comprising the recently added members is then returned by the method. The array's appearance following use of the unshift() method is displayed in the final line of code.

push()
The only difference between this method and unshift() is that it appends one or more elements to the end of the array. After adding the new element, it also returns the array's length.

js push method

As you can see, the push() method extended the array by two elements and returned the updated array length.

pop()
The pop() method removes and returns the last element from an array. The array's length is then updated by this method.

js pop method

You can probably tell by now that the pop() method and the shift() method are very similar. The only distinction is, the last element is removed by pop().

slice()
Slice() creates a shallow copy of a section of an array into a new array object that is picked at random from start to finish (end not included). The initial array won't be changed. The slice() method requires at least one argument, which is the index at which the slice should start.

The method will create a copy of the array starting at the specified index and continuing to the end of the array if only one argument is supplied to it. The slice() method will return a copy of the array if a second argument is given, starting at the index indicated with the first argument and ending at the index specified with the second argument (not including the element with this index).

JS slice method

Let's go through the above code step by step. Similar to before, a variable was set to an array. The slice() method is then called with just one argument. As you can see, the array copy created by the slice() method spans from index 2 all the way to the end of the array. The original array was returned when I verified the value of the arrTwo variable in the following line of code. This indicates that the original array is unaffected by the slice() method.

In the last line I added two arguments and it returned a copy of the elements within those indexes, but not including the element that has the index that is equal to the second argument passed to the method.

includes()
This method may check whether an array has a specific value, which makes it incredibly useful. If the value is in the array, it will return true, otherwise, if the value is not in the array, it will return false.

JS includes method

As you can see from the example above, if we call the includes() method on an array and feed it an argument, the method will determine whether the array has a value that is equal to the input. I want to draw your attention to the includes() method's case sensitivity. In the last line of code, where it returned false, you can see an illustration of this. Although "david" is present in our array, it still returns false. The cause is that we gave the method "David" as an argument.

There are other additional methods that may be applied to arrays and are included into Javascript. I'll cover methods for iterating over an array in a future blog post.

I appreciate your reading and hope that this article has helped you better comprehend these methods.

Top comments (0)