React JS Certification Training Course
- 10k Enrolled Learners
- Weekend
- Live Class
(4000)
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:
- Concat Method
- CopyWithin Method
- Every Method
- ToString Method
- Join Method
- Pop And Push Method
- Shift And Unshift Method
- Splice Method
- Slice Method
- ForEach Method
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
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. For more check out this web developer course now.
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"]
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.
