Ravi Rathore's Blog

JavaScript Basics : Important Array Methods

JavaScript Basics : Important Array Methods

Ravi Rathore's photo
Ravi Rathore

In the previous blog, we have discussed about some of the most important String Method. Today, we'll learn about Array Methods. We'll cover some important array methods in this blog

So without wasting time, Let's become master in Array Methods.

toString() Method :

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"]

console.log(sportsName);

// Output  ["Cricket", "Football", "Hockey", "Tennis", "Baseball"]

If we want to check its output,it's obvious that it'll show a whole array list as shown in our code.

Now, we want to convert it into String. So let's see the below code -

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"]

console.log(sportsName.toString());

// Output - Cricket,Football,Hockey,Tennis,Baseball

.join() Method :

The .join() methods work similar to our previous .toString() but it provides an extra ability to add separator.

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"]

console.log(sportsName.join(" + "));

// Output - Cricket + Football + Hockey + Tennis + Baseball

We have written + in our join(), that's why it prints + after every Array elements. You can try with other symbols or words too.

Let's see one more example with .join() -

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"]

console.log(sportsName.join(" and "));

// Output - Cricket and Football and Hockey and Tennis and Baseball

Instead of + that we used in our previous example, now we are using and. After seeing this output, you must have understood about .join()

Have you noticed that this .join() Method also return output as a String ?

.pop() and .push() Method -

In a nutshell, .pop() removes an array elements from end. .push() add an array elements at ending.

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.pop());

console.log(sportsName);

// Output - ["Cricket", "Football", "Hockey", "Tennis"]

We have successfully removed last element i.e. Baseball from our original array.

Now can you please add Swimming at the end of array ?

Yes,we can do it easily by using .push(). Let's see it :

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.push("Swimming"));

console.log(sportsName);


// Output - ['Cricket', 'Football', 'Hockey', 'Tennis', 'Baseball', 'Swimming']

.shift() and .unshift() Method:

.shift() removes the first element of an array. .unshift() add the first element in an array.

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.shift());

console.log(sportsName);


//  Output - [ 'Football', 'Hockey', 'Tennis', 'Baseball']

In above example, we have used.shift(), so that our Cricket element was removed.

In the below example, we have used .unshift("Swimming"). Meaning, we want to add Swimming to very first index.

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.unshift("Swimming"));

console.log(sportsName);

// //  Output - ['Swimming', 'Cricket' 'Football', 'Hockey', 'Tennis', 'Baseball']

.fill() Method-

.fill() removes all elements of an array, only return that value which we passed inside the () in .fill

Below in this example, we are going to remove all our sports name and only want Racing name by using .fill("Racing)

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.fill("Racing"));

// Output - ['Racing', 'Racing', 'Racing', 'Racing', 'Racing']

The output of the above example is enough to tells the story.

.reverse() Method -

As it name indicates, reverse, it return the all our array elements but in reverse order.

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.reverse());

// Output - ['Baseball', 'Tennis', 'Hockey', 'Football', 'Cricket']

.includes() Method -

  • Does our array include Chess game ? No, so it'll return False.

  • Does our array include Cricket game ? Yes, so it'll return True

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.includes("Chess"));

// Output - False

.at() Method -

This method is used to check the position of an array elements.

var sportsName = ["Cricket", "Football", "Hockey", "Tennis", "Baseball"];

console.log(sportsName.at(4));

// Output - Baseball

As we can clearly see from our Array that at no.4, there is a Baseball.

Slice () and Splice() Method -

These two terms Slice and Splice often looks confusing but we'll understand it in the simplest way -

Slice() Method

var fname = ['Ravi', 'Arpita', 'Ajay', 'Shahrukh','Kat', 'Alex'];

var newName = fname.slice(1)

console.log(newName)

// Output - ["Arpita", "Ajay", "Shahrukh", "Kat", "Alex"]

The word Slice means extracting a piece. And using .slice(), we are extracting value from our array. We have passed only single parameter in .slice(1). As we know that our array indexing starts from 0 but we want an Array from index no.1 i.e. Arpita. That's why we got the output.

Now let's take two parameters -

var fname = ['Ravi', 'Arpita', 'Ajay', 'Shahrukh','Kat', 'Alex'];

var newName = fname.slice(1,4)

console.log(newName)

// Output - ["Arpita", "Ajay", "Shahrukh"]

Now, in the above example. we have used 2 parameters in .slice(1,4). It means at 1, we have value Arpita and at 4, we have Kat.

But it will always return value till Shahrukh which is at position 3. In a nutshell, last value will be -1.

Splice() Method

We want to add some values inside our array. We can do with push() and unshift() but these two methods only add value either in starting or ending.

Similarly, if we want to delete some value, we can use pop() and shift() but again it will delete either from starting or ending.

Whats about if we want to add or delete value from middle of array ? Here is the solution for it by using splice().

var fname = ['Ravi', 'Arpita', 'Ajay', 'Shahrukh','Kat', 'Alex'];

 fname.splice(2)

console.log(fname)

// Output - ["Ravi", "Arpita"]

Here, we only give a single parameters in .splice(2). At 2, we have value Ajay. So it means starting from Ajay, it'll delete all value and only return Ravi and Arpita

Let's see example :

var fname = ['Ravi', 'Arpita', 'Ajay', 'Shahrukh','Kat', 'Alex'];


 fname.splice(1,3)


console.log(fname)

// Output - ["Ravi", "Kat", "Alex"]

The second parameter is how many values do you want to delete ? We wrote 3, it means it'll delete 3 value from indexing 1

One more example :

var fname = ['Ravi', 'Arpita', 'Ajay', 'Shahrukh','Kat', 'Alex'];


 fname.splice(2,2)


console.log(fname)

// Output - ["Ravi", "Arpita", "Kat", "Alex"]

.splice(2,2) means from index number 2, i.e. Ajay, delete 2 value i.e. Ajay and Shahrukh

So far we have discussed how we can delete middle values. Now we'll add some values inside our array using .splice()

var fname = ['Ravi', 'Arpita', 'Ajay', 'Shahrukh'];


 fname.splice(2,0,"Akshay")


console.log(fname)

// Output - ["Ravi", "Arpita", "Akshay", "Ajay", "Shahrukh"]

Now, we have give 3 parameters in .splice().Let's understand it what does it means -

  • 2 means we want to add new name Akshay to index number 2.
  • 0 means we don't want to delete any items from our array.
  • Akshay, name we want to add.

.map() Method-

So far we have just understood the basics of Array methods. Now let's read about some complex methods of Array. Our first method is .map(). This method creates a new array from the existing one and runs a function for each array elements.

Let's understand it in a more simple way but before moving to .map(), have a look at the below example.

  • I have an Array of numbers and want to multiply all the numbers by 2. How'll you do it ?
var arr_1 = [1,2,3,4,5];

// Expected Output : [2,4,6,8,10]

First, we'll do it by for loop then we'll learn it by our .map()

Using for loop

var arr1 = [1,2,3,4,5];

var arr2 = [];


for(var i = 0; i < arr1.length; i++)
{
  arr2[i] = arr1[i]*2
}

console.log(arr2);

// output - [2,4,6,8,10]

This is how we got the output of our array elements with multiply by 2.

Now, let's see the how we can achieve the same output using the .map()

Using .map()

var arr1 = [1,2,3,4,5];

var arr2 = arr1.map(function(value){


    return value * 2

})

console.log(arr2);

// Output - [2,4,6,8,10]

Similar to the previous example, we also created the same array and want to multiply its elements by 2.

  • We created a new array arr2 because .map() always return a new array.
  • Now, we apply .map() to our original array arr1 and as you can see we wrote a function in it because this function will work for every single array elements.
  • Inside .map(), we provide an anonymous function and passed an argument named value, so in a nutshell, we can assume that this value is linked with our array elements.
  • Inside an anonymous function, we simple wrote return value * 2 it means our array elements should get multiplied with 2
  • I repeat, this function will work for every single array elements.

Let's understand with one more example of .map() -

  • We want to greet "Hello" to everyone that includes in our array.
var myName = ['Ravi', 'Shweta', 'Arpita', 'Kat']

var myName_2 = myName.map(function(value){

return `Hello `+value 

})

console.log(myName_2)
// Output - ['Hello Ravi', 'Hello Shweta', 'Hello Arpita', 'Hello Kat']

For more simplicity, you can directly pass a named function inside .map()

Let's see with another example:

const arr = [1,2,3,4,5]

function named(elem)
{
    return elem*4
}

const newArr = arr.map(named)


console.log(newArr)

// [4, 8, 12, 16, 20]

.filter() Method -

As it name indicates, filter, it used to apply filter on our array. Let's understand it with example -

Suppose, we have an array and it contains numbers from 1 - 100 and the condition is that we want to extract numbers which are greater than 10.

To achieve this, we'll use .filter() on our array -

var numbers_1 = [1,2,3,4,5,20,30,40,90,100];
console.log(numbers_1)

var newNumbers = numbers_1.filter(tests);


function tests(num)
{
  return num > 10
}

console.log(newNumbers)

// Output - [20, 30, 40, 90, 100]
  • First we create an array numbers_1 and it contains some numbers [1,2,3,4,5,20,30,40,90,100]
  • Now, we want to filter numbers_1 array. To do this, We'll create a new variable newNumbers and apply .filter() on our first array i.e. numbers_1
  • In .filter(), we apply a function inside (tests), it means this function will work for every single elements.
  • Inside function tests(), we passed an argument num. We can assume that this num is attached with our array elements i.e.numbers_1 array.
  • this function will return only value that are > 10 . All our new value will be stored in newNumbers.

Array.from() Method -

Array.from() is used to create a new array from an existing one. In case of string, every alphabets is stored in array as a element.

var sportsName = "Cricket"

console.log(Array.from(sportsName));

// Output : ["C", "r", "i", "c", "k", "e", "t"]

Using this method, every single alphabet of string Cricket is stored in an Array.

I hope you must have understood about these Array methods.

JavaScriptWeb DevelopmentFrontend Developmentarrayarray methods