CheatSheet: 20 JavaScript Array methods

Arrays are one of the most important concepts in JavaScript.

Arrays are objects that enable storing a collection of items and data under a single variable name and have the capability to perform a certain operation.

In this article, we’ll go through 20 methods we can use with an array to manage the data we have.

1)- pop()

One of the array methods is the pop() method.

ngest_content - longest_content -->

The pop() method removes the last element of an arr

ay.

JavaScript
var phones=["Nokia","Iphone","Samsung","Xiaomi"];

        phones.pop();

        console.log(phones);

If we console.log the array, it becomes:

-- End Ezoic - wp_incontent_8 - incontent_8 -->
The last element removed

2)- push()

Unlike pop() method, push() method adds an element to the end of an array.

JavaScript
var phones=["Nokia","Iphone","Samsung","Xiaomi"];

        phones.push("Oppo");

        console.log(phones);

The array now becomes:

The new element added to the end of the array

3)- shift()

shift() method removes the first element of an array.

JavaScript
var phones=["Nokia","Iphone","Samsung","Xiaomi"];

        phones.shift();

        console.log(phones);

The array becomes then:

The first element removed

4)- unshift()

unshift() method adds an element at the beginning of an array.

JavaScript
var phones=["Nokia","Iphone","Samsung","Xiaomi"];

        phones.unshift("Sony");

        console.log(phones);

The array becomes:

An element is added ta the beginning of the array

5)- splice()

To add or remove elements to/from a specific position in the array the splice() method allows us to do that.

a)- Add an element to a specific position

JavaScript
var phones=["Nokia","Iphone","Samsung","Xiaomi"];

        phones.splice(2,0,"Sony","Oppo");

        console.log(phones);

To add an element to a specific position we use splice() method. It takes 3 parameters at least:

  • The first parameter is where, or at what position we want to add our elements. In this example we want to add them at position 2, which means after “Iphone”, hence “2” is added as first parameter of splice().
  • The second parameter reflects how many elements we want to delete. In this example we don’t want to delete any element, so we added “0” as second parameter of splice().
  • The third parameter and beyond are the elements that we want to add.

So the array becomes:

Elements added to the –

b)- Remove a specific element

splice() method, unlike pop() and shift() methods, allows us to remove any element from an array. All we have to do is to specify its position.

JavaScript
var phones=["Nokia","Iphone","Samsung","Xiaomi"];

        phones.splice(2,1);

        console.log(phones);

To remove a specific element from the array we use splice() method. It takes 2 parameters:

  • The first parameter is where, or at what position we want to add our elements. But here we will use the first parameter to specify from where the “delete” operation should start. In this example it should start from position 2.
  • The second parameter is to specify how many elements should be removed. In this example we want to remove one element.

At the end we have the following array:

One element removed

6)- map()

map() method generally accepts a function as argument. This function runs through each element of the array and returns a new array based on these elements.

JavaScript
var numbers=[10, 20, 30, 40];

       var newArray= numbers.map(function(element){
       
           return element*2;
        })

        console.log(newArray);

So here the function took every element of the array “numbers” and multiplied it by 2, and at the end returned a new array with the new results.

map() results

7)- filter()

filter() method returns a new array that contains all the elements that pass the test.

JavaScript
var age=[70,45,15,39];

       var newArray= age.filter(function(ages){
       
        return ages>30;
        
       })

        console.log(newArray);

Here the function returns the age if the age is greater than 30 and stores it in the new array.

New array returned

8)- concat()

concat() method helps us merge arrays to get one array.

JavaScript
var vegetables=["broccoli","eggplants","potatoes"];

       var fruit=["banana","kiwi","apple"];

       var mixed=vegetables.concat(fruit);

       console.log(mixed);

The new array is:

Arrays concatenated

9)- fill()

To fill an array with a static value we use fill() method.

JavaScript
var numbers=[100,10,20,25,15];

var static=numbers.fill("kiwi");

   console.log(static);

The array becomes:

static value

We can also add the static value at a specific position of the array.

JavaScript
var numbers=[100,10,20,25,15];

var static=numbers.fill("kiwi", 2, 4);

   console.log(static);

The array becomes:

static values added to specific positions

To add static values to specific positions of the array we pass the fill() method some parameters:

  • The first parameter is the static value, in this example it is “Kiwi”.
  • The second parameter is starting from which position this value should be added, in this example it should be added starting from position 2.
  • The third value is at what position we should stop adding the static value. In this example it is at position 4.

10)- join()

join() method joins the elements of the array and returns a string.

JavaScript
var fruit=["banana","orange","kiwi","apple"];

       var elements=fruit.join("/");
       
       console.log(elements);

In the browser we have:

array elements joined

join() method accepts a separator that is added between the parenthesis. In this example we chose the backslash “/” as separator, we can choose any separator we want.

If we choose a hyphen as separator the code will be:

JavaScript
var fruit=["banana","orange","kiwi","apple"];

       var elements=fruit.join("-");
       
       console.log(elements);

And so the results will be:

elements joined by a hyphen

11)- IndexOf()

indexOf() method returns the first index at which a given element can be found in the array. If the element is not in the array, then the method returns -1.

JavaScript
var fruit=["banana","orange","kiwi","apple","mango","kiwi"];

       var element=fruit.indexOf("kiwi");
       
       console.log("the index of this fruit is " + element);
       

In the browser we have:

Kiwi index

Here the index of “Kiwi” is 2. Because indexOf() returns the index of the first occurrence of the element. If we try this with “apple” we’ll have 3 as an index.

However, what about if we have the same element repeated twice or 3 times or more in the array, and we want to know the index of the second occurrence or third or fourth occurrence?

Let’s see that with “Kiwi”. “Kiwi” is repeated twice. So the index of the first “Kiwi” is 2. To know the index of the second “Kiwi” we’ll add:

JavaScript
var fruit=["banana","orange","kiwi","apple","mango","kiwi"];

       var element=fruit.indexOf("kiwi",3);
       
       console.log("the index of this fruit is " + element);

3 represents the start point from where the array should start looking. And here it should start after the first “Kiwi”, which means at position 3.

In the browser we have:

Index of the second “Kiwi”

12)- includes

includes() helps to check if an element is in the array. If so, it returns true.

JavaScript
var fruit=["banana","orange","kiwi","apple","mango"];

       var element=fruit.includes("orange");
       
       console.log(element);
       
       //true

13)- reverse()

reverse() method reverses the order of the array elements.

JavaScript
var fruit=["banana","orange","kiwi","apple","mango"];

        fruit.reverse();
        
       console.log(fruit);

In the browser we have:

Elements reversed

14)- every()

every() method returns true if all the elements of the array pass the test. This method accepts a function that runs through all the array’s elements.

JavaScript
var ages=[70,54,36,19,33];

        var check= ages.every(function(age){
        
            return age>18;
        })

        console.log(check);
        
        //true

15)- some()

some() is a method that returns true if at least one element in the array passes the test given by the function passed as argument.

JavaScript
var ages=[70,54,36,19,33];

        var check= ages.some(function(age){
        
            return age>60;
        })

        console.log(check);
        
        //true

16)- at()

at() returns the element that is in the index specified in the parenthesis.

JavaScript
var cars=["BMW","Audi","Ford","Tesla"];

       var carName=cars.at(2);

       console.log(carName + " is at index 2");

In the browser we have:

element returned

17)- of()

This method creates a new array from a variable number of arguments, regardless of number or type of the arguments.

JavaScript
var newArray=Array.of("Thomas","John","Liam","Michael");

       console.log(newArray);

In the browser we have an array that is created:

new array created

18)- slice()

slice() method returns a slice or a part of the array.

JavaScript
var names=["Thomas","John","Liam","Michael"];

       var slicedArray=names.slice(1,3);

       console.log(slicedArray);

The new portion of the array will be:

Portion of the array

19)- Array.isArray()

This method returns true if the declared variable is an array.

JavaScript
var names=["Thomas","John","Liam","Michael"];

       console.log(Array.isArray(names));
       
       //true

20)- delete()

This methods deletes an element from the array by specifying the index we want to be deleted. However, the delete() method leaves undefined or empty holes in the array after the element is deleted.

Which means even if the element is deleted, the length of the array does not change.

If for example the length of the array is 5, then after an element is being deleted the length will stay 5.

JavaScript
var names=["Thomas","John","Liam","Michael"];

       delete names[2];

       console.log(names);

In the browser we have:

One element deleted

It is not advisable to use this method to delete elements from an array.

To delete an element from an array use splice() method instead.

Read More

HTML tags CheatSHeet

What are the different types of inputs in HTML forms?

Understanding JavaScript Objects: From Basic Concepts to Practical Usage

How to loop through an array in JavaScript?

Leave a Reply

%d bloggers like this: