JavaScript and JQuery Essentials Trainin... (56 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (28 Blogs)
  • jQuery UI Development (2 Blogs)
  • The Complete WebDeveloper (38 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

Array Methods In JavaScript: Everything You Need To Know About Array methods

Last updated on Jul 19,2019 56 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Efficiency is very important when one plans to code a solution. The array object in JavaScript consists of various methods. These methods are used in codes for their efficient running. This article will focus on various Array Methods in JavaScript.

Following pointers will be touch up in this article:

Let us continue with the first topic of this article,

Array Methods In JavaScript

Concat Method

The concat() method joins 2 or more arrays, and then returns a copy of the joined array.


<html>
<body>
<script type = "text/javascript">
var alphabet = ["r", "s", "t"];
var num = [5, 6, 7];
var AlphabetNum = alphabet.concat(num);
document.write("AlphabetNum : " + AlphabetNum );
</script>
</body>
</html>

In the example given, the concat method joins the two arrays alphabet and num and returns a new concatenated array: AlphabetNum.

Output:

AlphabetNum : r,s,t,5,6,7

Next is the CopyWithin Method,

CopyWithin Method

The copyWithin() method present in JavaScript is used to copy a part of the array, into the same array, and then returns it.

Syntax:   

array.copyWithin(target, start, end)

This method consists of three parameters:

  • Target: The index position at which the element is to be copied. It is mandatory to specify target.
  • Start: The index position to start copying the elements from. It is optional. The default value of start is 0.
  • End: The index position to end the process of copying the element. This too is an optional parameter, and the default value is length .

<!DOCTYPE html>
<html>
<body>
<script>
var number = ["One", "Two", "Three", "Four", "Five", "Six", "Seven"];
document.write(number);
document.write("<br>"+number.copyWithin(3,0,4));
</script>
</body>
</html>

Output:

One,Two,Three,Four,Five,Six,Seven

One,Two,Three,One,Two,Three,Four

As shown in the example, the values in the array are copied to the same array. The target index is: 3,  the start index is: 0 and the end index is: 4.

The next bit in this Array methods in javascript is,

Every Method

This method examines or checks whether all the elements present in the array satisfy a specified condition. The syntax of the method is as follows:

array.every(function[, This_arg])

The argument for this function is another function. It defines the condition that must be checked. It has the following arguments:

  • Array : The array on which the every() function is called. It is an optional argument.
  • Index : Index of the current element. This too is optional.
  • Element : Current element that is being processed by the function. It is mandatory to use this argument.

The this_arg is used to tell the function to use this value. In the following example we check whether each element in the array is positive or not.


function positive(element, index, array)
{
return element > 0;
}
function func() {
var array = [ 11, 89, 23, 7, 98 ];
//check for positive number
var value = array.every(positive);
document.write(value);
}
func();
</script>

It must be noted that the function returns the value in terms of true or false. Since all the elements present in the array are positive, the output will be:

true

Next is the ToString method.

ToString Method

This method converts a number to a string. The numbers can be converted by specifying a base value as well.


<script type="text/javascript">
var number=569;
document.write("Output : " + number.toString());
</script>

In the example given, the toString() method is called without any parameter or a base value.

Output:

569

Now let us take a look at the join method,

Join Method

The join() method joins every element present in the array. In addition, we can specify a separator to separate the elements.


<html>
<body>
<script type = "text/javascript">
var a = new Array("I","Love","Music");
var string = a.join();
document.write("string : " + string );
var string = a.join(" * ");
document.write("<br />string : " + string );
var string = a.join(" + ");
document.write("<br />string : " + string );
</script>
</body>
</html>

In the example provided, the first method of join does not contain any separator, thus a default separator is used. In the other two methods, “ * “ and “ + “ are specified operators.

Output:

string : I,Love,Music

string : I * Love * Music

string : I + Love + Music

Next in this article on array methods on javascript is,

Pop And Push Method

The pop() method removes the element from the end of an array, much like a stack. The push() method, on the other hand, adds an element to the end of an array.

The methods implement the concept of LIFO (Last-In-First-Out).


["Rock", "Metal", "Blues", "Jazz"]
list.pop();
["Rock", "Metal", "Blues"]

The code removes the last element in the array i.e. “Jazz”.

The push() method appends the element back to the array.


["Rock", "Metal", "Blues"]
list.push("Jazz");
["Rock", "Metal", "Blues", "Jazz"]

Let us move further,

Shift And Unshift Method

The shift() method removes the element from the beginning of an array. The unshift() method, on the other hand, adds the element back to the beginning of the array.


["Rock", "Metal", "Blues", "Jazz"]
list.shift();
["Metal", "Blues", "Jazz"]

The code removes the first element i.e. Rock from the array.

On using the unshift() method, “Rock” will be added back to the array.


["Rock", "Metal", "Blues", "Jazz"]
list.unshift("Rock");
["Rock”, “Metal", "Blues", "Jazz"]

We are in the final bits of this array methods in javascript blog,

Splice Method

The splice() method removes a particular or a selective part of the array. It proves to be resourceful method of removing, replacing or adding elements to the array.


["Rock", "Metal", "Blues", "Jazz"]
list.splice(2, 1);
// Starting at index position 2, remove one element
["Rock", "Metal", "Jazz"]
list.splice(2,2);
// Starting at index position 2, remove two elements
["Rock", "Metal"]

In the above example, the slice method removes the elements according to the index specified.

“Blues” is removed from the first example as it is placed at index 2.

In the second example, two elements i.e. “Blues” and “Jazz” are removed, as the index specifies that 2 elements must be removed, starting at index 2.

It must be noted that arrays are zero-indexed in JavaScript. 

Slice Method

The slice() method slices an element from the initial array, and returns a new array containing that element. It must be noted that the slice() method does not remove any element from the initial array.


<html>
<body>
<script type = "text/javascript">
var array = ["Rock", "Pop", "Jazz", "Blues", "Metal"];
document.write("array.slice( 1, 2) : " + array.slice( 1, 2) );
document.write("<br />array.slice( 1, 3) : " + array.slice( 1, 3) );
</script>
</body>
</html>

The output of the following code is as follows:

array.slice( 1, 2) : Pop

array.slice( 1, 3) : Pop,Jazz

The final method in this array method in javascript is,

ForEach Method

This method calls the function for each element present in the array.


<script>
function funct() {
// Initial array
const items = [2, 18, 28];
const copy = [];
items.forEach(function(item){
copy.push(item*item);
});
document.write(copy);
}
funct();
</script>

In the example, we calculate the square of every element present in the array.

The output is as follows:

4,324,784

With this we have come to the end of this blog on ‘Array Method In JavaScript’. I hope you found this informative and helpful, stay tuned for more tutorials on similar topics.You may also checkout our training program to get in-depth knowledge on jQuery along with its various applications, you can enroll here for live online training with 24/7 support and lifetime access.

Got a question for us? Mention them in the comments section of  this blog and we will get back to you.

 

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.