Hello guys! morning to you all. Firstly let me welcome you to my new tutorial on JavaScript. In my previous tutorial, I talked about how to implement the various various JavaScript Array Properties. In this tutorial post, am going to be discussing about the various JavaScript array methods available.
We will be looking at 21 various array methods available in JavaScript, each of these methods will be explained properly with the help of an example. Take your time to go through them properly and ask your questions where necessary and your questions will be attended to as soon as possible. Now we will be starting with the concat() method.
We will be looking at 21 various array methods available in JavaScript, each of these methods will be explained properly with the help of an example. Take your time to go through them properly and ask your questions where necessary and your questions will be attended to as soon as possible. Now we will be starting with the concat() method.
Array concat() Method
JavaScript array concat() method returns a new array comprised of this array joined with two or more arrays.
Syntax
Its syntax is as follows -
array.concat(value 1, value2, ....., valueN);
valueN - Arrays or values to concatenate to the resulting array.
Return Value
Returns the length of the array.
Example
You can try the following example below for better understanding on how to implement the array concat() method.
<html>
<head>
<title>JavaScript Array concat Method</title>
</head>
<body>
<script type ="text/javascript">
var alpha = ["x", "y", "z"];
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric);
document.write("alphaNumeric : " + alphaNumeric );
</script>
</body>
</html>
<head>
<title>JavaScript Array concat Method</title>
</head>
<body>
<script type ="text/javascript">
var alpha = ["x", "y", "z"];
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric);
document.write("alphaNumeric : " + alphaNumeric );
</script>
</body>
</html>
Output
Below is the output of the above example.
alphaNumeric : x, y, z, 1, 2, 3
You can also check out our tutorial post on: Exploring JavaScript Boolean methods with simple and clear examples
Array every() Method
JavaScript array every method tests whether all the elements in an array passes the test implemented by the provided function.
Syntax
Its syntax is as follows -
array.every(callback[, thisObject] );
Parameter Details
- callback - Function to test for each element.
- thisObject - Object to use as this when executing callback.
Return Value
Returns true if every element this array satisfies the provided testing function.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.every) {
Array.prototype.every = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && !fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}
Array.prototype.every = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && !fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array every Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.every) {
Array.prototype.every = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && !fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
document.write("First Test Value : " + passed + "<br />" );
passed = [12, 54, 18, 130, 44].every(isBigEnough);
document.write("Second Test Value : " + passed );
</script>
</body>
</html>
<head>
<title>JavaScript Array every Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.every) {
Array.prototype.every = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && !fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
document.write("First Test Value : " + passed + "<br />" );
passed = [12, 54, 18, 130, 44].every(isBigEnough);
document.write("Second Test Value : " + passed );
</script>
</body>
</html>
Output
Below is the output of the above example.
First Test Value : false
Second Test Value : true
Second Test Value : true
You can also read our tutorial post on: Css outline
Array filter() Method
JavaScript array filter method creates a new array with all elements that passed the test implemented by the provided function.
Syntax
Its syntax is as follows -
array.filter(callback[, thisObject] );
Parameter Details
- callback - Function to test for each element.
- thisObject - Object to use as this when executing callback.
Return Value
Returns created array.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
var val = this[ i ]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
Array.prototype.filter = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
var val = this[ i ]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array filter Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
var val = this[ i ]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
function isBigEnough(element, index, array) {
return (element >= 10);
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
document.write("Filtered Value : " + filtered );
</script>
</body>
</html>
<head>
<title>JavaScript Array filter Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
var val = this[ i ]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
function isBigEnough(element, index, array) {
return (element >= 10);
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
document.write("Filtered Value : " + filtered );
</script>
</body>
</html>
Output
Below is the output of the above example.
Filtered Value : 12, 130, 44
You can also read our tutorial post on: Css table
Array forEach() Method
The array forEach() method calls a function for each element in the array.
Syntax
Its syntax is as follows -
array.forEach(callback[, thisObject] );
Parameter Details
- callback - Function to test for each element.
- thisObject - Object to use as this when executing callback.
Return Value
Returns the created array.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
fun.call(thisp, this[ I ], i, this);
}
};
}
Array.prototype.forEach = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
fun.call(thisp, this[ I ], i, this);
}
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array forEach Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
fun.call(thisp, this[ i ], i, this);
}
};
}
function printBr(element, index, array) {
document.write("<br />[" + index + "] is : " + element);
}
[12, 5, 8, 130, 44].forEach(printBr);
</script>
</body>
</html>
<head>
<title>JavaScript Array forEach Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this ) {
fun.call(thisp, this[ i ], i, this);
}
};
}
function printBr(element, index, array) {
document.write("<br />[" + index + "] is : " + element);
}
[12, 5, 8, 130, 44].forEach(printBr);
</script>
</body>
</html>
Output
Below is the output of the above example.
[ 0 ] is 12
[ 1 ] is 5
[ 2 ] is 8
[ 3 ] is 130
[ 4 ] is 44
[ 1 ] is 5
[ 2 ] is 8
[ 3 ] is 130
[ 4 ] is 44
You can also check out this recommended post on: Step by step tutorial guide which explains how to implement JavaScript void keyword with examples
Array indexOf() Method
The JavaScript array indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
Syntax
Its syntax is as follows -
array.indexOf(searchElement[, fromIndex] );
Parameter Details
- searchElement - Element to locate in the array.
- fromIndex - The index at which to begin the search. Defaults to 0, I.e. the whole array will be searched. If the index is greater than or equal to the length of the array, -1 is returned.
Return Value
Returns the index of the found element.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
Array.prototype.indexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array indexOf Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
var index = [12, 5, 8, 130, 44].indexOf(8);
document.write("index is : " + index + "<br />" );
var index = [12, 5, 8, 130, 44].indexOf(13);
document.write("index is : " + index );
</script>
</body>
</html>
<head>
<title>JavaScript Array indexOf Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
var index = [12, 5, 8, 130, 44].indexOf(8);
document.write("index is : " + index + "<br />" );
var index = [12, 5, 8, 130, 44].indexOf(13);
document.write("index is : " + index );
</script>
</body>
</html>
Output
Below is the output of the above example.
index is : 2
index is : -1
index is : -1
You can can also read one of our recommended post on: JavaScript Variables
Array join() Method
JavaScript array join() method joins all the elements of an into a string.
Syntax
Its syntax is as follows -
array.join(separator);
Parameter Details
separator - Specifies a string to separate each element of an array. If omitted, the array element are separated with a comma.
Return Value
Returns a string after joining all the array elements.
Example
You can try the following example below for better understanding on how to implement the array join() method.
<html>
<head>
<title>JavaScript Array join Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("First" , "Second" , "Third");
var str = array.join();
document.write("str : " + str + "<br />" );
var str = array.join(" , ");
document.write("str : " + str + "<br />" );
var str = array.join(" + ");
document.write("str : " + str );
</script>
</body>
</html>
<head>
<title>JavaScript Array join Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("First" , "Second" , "Third");
var str = array.join();
document.write("str : " + str + "<br />" );
var str = array.join(" , ");
document.write("str : " + str + "<br />" );
var str = array.join(" + ");
document.write("str : " + str );
</script>
</body>
</html>
Output
Below is the output of the above example.
str : First, Second, Third
str : First, Second, Third
str : First + Second + Third
str : First, Second, Third
str : First + Second + Third
You can also read our tutorial post on: Html JavaScript
Array lastIndexOf() Method
The JavaScript array lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.
Syntax
Its syntax is as follows -
array.lastIndexOf(searchElement[, fromIndex] );
Parameter Details
- searchElement - Element to locate in the array.
- fromIndex - The index at which to begin the search backwards. Defaults to array's length, I.e. the whole array will be searched. If negative, it is taken as the offset from the end of the array.
Return Value
Returns the index of the found element from the last.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.lastIndexOf) {
Array.prototype.lastIndexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]);
if (isNAN(from)) {
from = len -1;
} else {
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
else if (from >= len)
from = len -1;
}
for (; from > -1; from--) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
Array.prototype.lastIndexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]);
if (isNAN(from)) {
from = len -1;
} else {
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
else if (from >= len)
from = len -1;
}
for (; from > -1; from--) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array lastIndexOf Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.lastIndexOf) {
Array.prototype.lastIndexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]);
if (isNAN(from)) {
from = len -1;
} else {
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
else if (from >= len)
from = len -1;
}
for (; from > -1; from--) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
var index = [12, 5, 8, 130, 44].lastIndexOf(8);
document.write("index is : " + index + "<br />" );
var index = [12, 5, 8, 130, 44, 5].lastIndexOf(5);
document.write("index is : " + index );
</script>
</body>
</html>
<head>
<title>JavaScript Array lastIndexOf Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.lastIndexOf) {
Array.prototype.lastIndexOf = function(elt /*, from*/) {
var len = this.length;
var from = Number(arguments[ 1 ]);
if (isNAN(from)) {
from = len -1;
} else {
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
else if (from >= len)
from = len -1;
}
for (; from > -1; from--) {
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
var index = [12, 5, 8, 130, 44].lastIndexOf(8);
document.write("index is : " + index + "<br />" );
var index = [12, 5, 8, 130, 44, 5].lastIndexOf(5);
document.write("index is : " + index );
</script>
</body>
</html>
Output
Below is the output of the above example.
index is : 2
index is : 5
index is : 5
You can also check out this recommended post on: JavaScript Operators
Array map() Method
JavaScript array map() method creates a new array with the results of calling a provided function on every element in this array.
Syntax
Its syntax is as follows -
array.map(callback[, thisObject] );
Parameter Details
- callback - Function that produces an element of the new Array from an element of the current one.
- thisObject - Object to use as this when executing callback.
Return Value
Returns the created array.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.map) {
Array.prototype.map = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[ 1 ];
for (var i = 0; i < len; i++) {
if ( i in this )
res[ i ] = fun.call(thisp, this[ i ], i, this);
}
return res;
};
}
Array.prototype.map = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[ 1 ];
for (var i = 0; i < len; i++) {
if ( i in this )
res[ i ] = fun.call(thisp, this[ i ], i, this);
}
return res;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array map Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.map) {
Array.prototype.map = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if ( i in this )
res[ i ] = fun.call(thisp, this[ i ], i, this);
}
return res;
};
}
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
document.write("Root is : " + roots );
</script>
</body>
</html>
<head>
<title>JavaScript Array map Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.map) {
Array.prototype.map = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if ( i in this )
res[ i ] = fun.call(thisp, this[ i ], i, this);
}
return res;
};
}
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
document.write("Root is : " + roots );
</script>
</body>
</html>
Output
Below is the output of the above example.
Root is : 1, 2, 3
You can also read our tutorial post on: How to add JavaScript to Html(JavaScript placement)
Array pop() Method
JavaScript array pop() method removes the last element from an array and returns that element.
Syntax
Its syntax is as follows -
array.pop();
Return Value
Returns the removed element from the array.
Example
You can try the following example below for better understanding on how to implement the array pop() method.
<html>
<head>
<title>JavaScript Array pop Method</title>
</head>
<body>
<script type ="text/javascript">
var numbers = [1, 4, 9];
var element = numbers.pop();
document.write("element is : " + element + "<br />" );
var element = numbers.pop();
document.write("element is : " + element );
</script>
</body>
</html>
<head>
<title>JavaScript Array pop Method</title>
</head>
<body>
<script type ="text/javascript">
var numbers = [1, 4, 9];
var element = numbers.pop();
document.write("element is : " + element + "<br />" );
var element = numbers.pop();
document.write("element is : " + element );
</script>
</body>
</html>
Output
Below is the output of the above example.
element is : 9
element is : 4
element is : 4
You can also read our tutorial post on: How to Embed Multimedia into a Html web page
Array push() Method
JavaScript array push() method appends the given element(s) in the last of the array and returns the length of the new array.
Syntax
Its syntax is as follows -
array.push(element1, ...., elementN);
Parameter Details
element1, ...., elementN: The elements to add to the end of the array.
Return Value
Returns the length of the new array.
Example
You can try the following example below for better understanding on how to implement the array push() method.
<html>
<head>
<title>JavaScript Array push Method</title>
</head>
<body>
<script type ="text/javascript">
var numbers = new Array(1, 4, 9);
var length = numbers.push(10);
document.write("new numbers are : " + numbers + "<br />" );
var length = numbers.push(20);
document.write("new numbers are : " + numbers );
</script>
</body>
</html>
<head>
<title>JavaScript Array push Method</title>
</head>
<body>
<script type ="text/javascript">
var numbers = new Array(1, 4, 9);
var length = numbers.push(10);
document.write("new numbers are : " + numbers + "<br />" );
var length = numbers.push(20);
document.write("new numbers are : " + numbers );
</script>
</body>
</html>
Output
Below is the output of the above example.
new numbers are : 1, 4, 9, 10
new numbers are : 1, 4, 9, 10
new numbers are : 1, 4, 9, 10
You can also check out one of our recommended post on: Python on Os X
Array reduce() Method
The array reduce() method applies a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.
Syntax
Its syntax is as follows -
array.reduce(callback[, initialValue] );
Parameter Details
- callback - Function to execute on each value in the array.
- initialValue - Object to use as the first argument to the first call of the callback.
Return Value
Returns the reduced single value of the array.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[ 1 ];
} else {
do {
if (i in this) {
rv = this[ i++ ];
break;
}
// if array contains no values, no initial value to return
if (++i >= len)
throw new TypeError();
}
while (true);
}
for (; i < len; i++) {
if ( i in this )
rv = fun.call(null , rv, this[ i ], i, this);
}
return rv;
};
}
Array.prototype.reduce = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[ 1 ];
} else {
do {
if (i in this) {
rv = this[ i++ ];
break;
}
// if array contains no values, no initial value to return
if (++i >= len)
throw new TypeError();
}
while (true);
}
for (; i < len; i++) {
if ( i in this )
rv = fun.call(null , rv, this[ i ], i, this);
}
return rv;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array reduce Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[ i ];
} else {
do {
if (i in this) {
rv = this[ i++ ];
break;
}
// if array contains no values, no initial value to return
if ( ++i >= len )
throw new TypeError();
}
while (true);
}
for (; i < len; i++) {
if ( i in this )
rv = fun.call(null, rv, this[ i ], i, this);
}
return rv;
};
}
var total = [0, 1, 2, 3].reduce( function(a, b) { return a + b; } );
document.write("Total is : " + total );
</script>
</body>
</html>
<head>
<title>JavaScript Array reduce Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[ i ];
} else {
do {
if (i in this) {
rv = this[ i++ ];
break;
}
// if array contains no values, no initial value to return
if ( ++i >= len )
throw new TypeError();
}
while (true);
}
for (; i < len; i++) {
if ( i in this )
rv = fun.call(null, rv, this[ i ], i, this);
}
return rv;
};
}
var total = [0, 1, 2, 3].reduce( function(a, b) { return a + b; } );
document.write("Total is : " + total );
</script>
</body>
</html>
Output
Below is the output of the above example.
Total is : 6
You can also read one of our recommended tutorial post on: How to implement JavaScript for...in loop with examples
Array reduceRight() Method
Array reduceRight() method applies a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.
Syntax
Its syntax is as follows -
array.reduceRight(callback[, initialValue] );
Parameter Details
- callback - Function to execute on each value in the array.
- initialValue - Object to use as the first argument to the first call of the callback.
Return Value
Returns the reduced right single value of the array.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.reduceRight) {
Array.prototype.reduceRight = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = len -1;
if (arguments.length >= 2) {
var rv = arguments[ 1 ];
} else {
do {
if (i in this) {
rv = this[ i-- ];
break;
}
// if array contains no values, no initial value to return
if (--i < 0)
throw new TypeError();
}
while (true);
}
for (; i >= 0; i--) {
if ( i in this )
rv = fun.call(null , rv, this[ i ], i, this);
}
return rv;
};
}
Array.prototype.reduceRight = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = len -1;
if (arguments.length >= 2) {
var rv = arguments[ 1 ];
} else {
do {
if (i in this) {
rv = this[ i-- ];
break;
}
// if array contains no values, no initial value to return
if (--i < 0)
throw new TypeError();
}
while (true);
}
for (; i >= 0; i--) {
if ( i in this )
rv = fun.call(null , rv, this[ i ], i, this);
}
return rv;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array reduceRight Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.reduceRight) {
Array.prototype.reduceRight = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = len -1;
if (arguments.length >= 2) {
var rv = arguments[ i ];
} else {
do {
if (i in this) {
rv = this[ i-- ];
break;
}
// if array contains no values, no initial value to return
if ( --i < 0 )
throw new TypeError();
}
while (true);
}
for (; i >= 0; i--) {
if ( i in this )
rv = fun.call(null, rv, this[ i ], i, this);
}
return rv;
};
}
var total = [0, 1, 2, 3].reduceRight( function(a, b) { return a + b; } );
document.write("Total is : " + total );
</script>
</body>
</html>
<head>
<title>JavaScript Array reduceRight Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.reduceRight) {
Array.prototype.reduceRight = function(fun /*, initial*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
// no value to return if no initial value and an empty array
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = len -1;
if (arguments.length >= 2) {
var rv = arguments[ i ];
} else {
do {
if (i in this) {
rv = this[ i-- ];
break;
}
// if array contains no values, no initial value to return
if ( --i < 0 )
throw new TypeError();
}
while (true);
}
for (; i >= 0; i--) {
if ( i in this )
rv = fun.call(null, rv, this[ i ], i, this);
}
return rv;
};
}
var total = [0, 1, 2, 3].reduceRight( function(a, b) { return a + b; } );
document.write("Total is : " + total );
</script>
</body>
</html>
Output
Below is the output of the above example.
Total is : 6
You can also read our tutorial post on: Python on Window
Array reverse() Method
JavaScript array reverse() method reverses the element of an array. The first array element becomes the last and the last becomes the first.
Syntax
Its syntax is as follows -
array.reverse();
Return Value
Returns the reversed single value of the array.
Example
You can try the following example below for better understanding on how to implement the array reverse() method.
<html>
<head>
<title>JavaScript Array reverse Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = [0, 1, 2, 3].reverse();
document.write("Reversed array is : " + arr );
</script>
</body>
</html>
<head>
<title>JavaScript Array reverse Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = [0, 1, 2, 3].reverse();
document.write("Reversed array is : " + arr );
</script>
</body>
</html>
Output
Below is the output of the above example.
Reversed array is : 3, 2, 1, 0
Array shift() Method
JavaScript array shift() method removes the first element from the array and also returns that element
Syntax
Its syntax is as follows -
array.shift();
Return Value
Returns the removed single value of the array.
Example
You can try the following example below for better understanding on how to implement the array shift() method.
<html>
<head>
<title>JavaScript Array shift Method</title>
</head>
<body>
<script type ="text/javascript">
var element = [105, 1, 2, 3].shift();
document.write("Removed element is : " + element );
</script>
</body>
</html>
<head>
<title>JavaScript Array shift Method</title>
</head>
<body>
<script type ="text/javascript">
var element = [105, 1, 2, 3].shift();
document.write("Removed element is : " + element );
</script>
</body>
</html>
Output
Below is the output of the above example.
Removed element is : 105
You can also read our tutorial post on: Css Layers
Array unshift() Method
JavaScript array unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
Syntax
Its syntax is as follows -
array.unshift(element1, ...., elementN);
Parameter Details
element1, ...., elementN: The elements to add to the front of the array.
Return Value
Returns the length of the new array. It returns undefined in IE browser.
Example
You can try the following example below for better understanding on how to implement the array unshift() method.
<html>
<head>
<title>JavaScript Array unshift Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar" );
var length = arr.unshift("water");
document.write("Returned array is : " + arr + "<br />" );
document.write("Length of the array is : " + length );
</script>
</body>
</html>
<head>
<title>JavaScript Array unshift Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar" );
var length = arr.unshift("water");
document.write("Returned array is : " + arr + "<br />" );
document.write("Length of the array is : " + length );
</script>
</body>
</html>
Output
Below is the output of the above example.
Returned array is : water, orange, mango, banana, sugar
Length of the array is : 5
Length of the array is : 5
You can also read our tutorial post on: Steps on how to implement JavaScript Nested functions with examples
Array slice() Method
JavaScript array slice() method extracts a section of an array and returns a new array.
Syntax
Its syntax is as follows -
array.slice(begin [, end] );
Parameter Details
- begin- Zero based index at which to begin extraction. As a negative index, start indicates an offset from the end of the sequence.
- end - Zero based index at which to end the extraction.
Return Value
Returns the extracted array based on the passed parameters.
Example
You can try the following example below for better understanding on how to implement the array slice() method.
<html>
<head>
<title>JavaScript Array slice Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
document.write("arr.slice(1, 2) : " + arr.slice(1, 2) + "<br />" );
document.write("arr.slice(1, 3) : " + arr.slice(1, 3) );
</script>
</body>
</html>
<head>
<title>JavaScript Array slice Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
document.write("arr.slice(1, 2) : " + arr.slice(1, 2) + "<br />" );
document.write("arr.slice(1, 3) : " + arr.slice(1, 3) );
</script>
</body>
</html>
Output
Below is the output of the above example.
arr.slice(1, 2) : mango
arr.slice(1, 3) : mango, banana
arr.slice(1, 3) : mango, banana
You can also read our tutorial post on: Html Introduction
Array some() Method
JavaScript array some() method tests whether sone element in the array passes the test implemented by the provided function.
Syntax
Its syntax is as follows -
array.some(callback[, thisObject] );
Parameter Details
- callback - Function to test for each element.
- thisObject - Object to use as this when executing callback.
Return Value
If some elements passes the test, then it returns true, otherwise false.
Compatibility
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present or available in other implementations of the standard. To make it work, you need to add the following code at the top of your script.
if (!Array.prototype.some) {
Array.prototype.some = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && fun.call(thisp, this[ I ], i, this))
return true;
}
return false;
};
}
Array.prototype.some = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && fun.call(thisp, this[ I ], i, this))
return true;
}
return false;
};
}
Example
Try the following example below.
<html>
<head>
<title>JavaScript Array some Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.some) {
Array.prototype.some = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && fun.call(thisp, this[ I ], i, this) )
return true;
}
return false;
};
}
function isBigEnough(element, index, array) {
return (element >= 10);
}
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
document.write("Returned Value is : " + retval + "<br />" );
var retval = [12, 5, 8, 1, 4].some(isBigEnough);
document.write("Returned Value is : " + retval );
</script>
</body>
</html>
<head>
<title>JavaScript Array some Method</title>
</head>
<body>
<script type = "text/javascript">
if (!Array.prototype.some) {
Array.prototype.some = function(fun /*, thisp*/) {
var len = this.length;
if (typeof fun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this && fun.call(thisp, this[ I ], i, this) )
return true;
}
return false;
};
}
function isBigEnough(element, index, array) {
return (element >= 10);
}
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
document.write("Returned Value is : " + retval + "<br />" );
var retval = [12, 5, 8, 1, 4].some(isBigEnough);
document.write("Returned Value is : " + retval );
</script>
</body>
</html>
Output
Below is the output of the above example.
Returned Value is : false
Returned Value is : true
Returned Value is : true
You can also read our tutorial post on: JavaScript while Loop
Array toSource Method
JavaScript array toSource() method returns a string representing the source code of the array. This method is supported by Mozilla Firefox.
Syntax
Its syntax is as follows -
array.toSource();
Return Value
Returns a string representing the source code of an array.
Example
You can try the following example below for better understanding on how to implement the array toSource() method.
<html>
<head>
<title>JavaScript Array toSource Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var str = arr.toSource();
document.write("Returned string is : " + str );
</script>
</body>
</html>
<head>
<title>JavaScript Array toSource Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var str = arr.toSource();
document.write("Returned string is : " + str );
</script>
</body>
</html>
Output
Below is the output of the above example.
Returned string is : ["orange", "mango", "banana", "sugar"]
Array sort() Method
JavaScript array sort() method sorts the elements of an array.
Syntax
Its syntax is as follows -
array.sort(compareFunction);
Parameter Details
compareFunction - Specifies a function that defines the sort order. If omitted, the array is sorted lexicographically.
Return Value
Returns a sorted array.
Example
You can try the following example below for better understanding on how to implement the array sort() method.
<html>
<head>
<title>JavaScript Array sort Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var sorted = arr.sort();
document.write("Returned string is : " + sorted );
</script>
</body>
</html>
<head>
<title>JavaScript Array sort Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var sorted = arr.sort();
document.write("Returned string is : " + sorted );
</script>
</body>
</html>
Output
Below is the output of the above example.
Returned string is : banana, mango, orange, sugar
You can also read our tutorial post on: Variable
Array splice() Method
JavaScript array splice() method changes the content of an array, adding new elements while removing the old elements.
Syntax
Its syntax is as follows -
array.splice(index, howMany, [element 1] [, ...., elementN] );
Parameter Details
- index - Index at which to start changing the array.
- howMany - An integer that indicates the number of old array elements to remove. If howMany is 0, no elements are removed.
- element 1, ..., elementN - The elements to add to the array. If you don't specify any elements, splice simply removes the elements from the array.
Return Value
Returns the extracted array based on the passed parameters.
Example
You can try the following example below for better understanding on how to implement the array splice() method.
<html>
<head>
<title>JavaScript Array splice Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
var removed = arr.splice(2, 0, "water");
document.write("After adding 1 : " + arr + "<br />" );
document.write("Removed is : " + removed );
removed = arr.splice(3, 1);
document.write("After adding 1 : " + arr + "<br />" );
document.write("Removed is : " + removed );
</script>
</body>
</html>
<head>
<title>JavaScript Array splice Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
var removed = arr.splice(2, 0, "water");
document.write("After adding 1 : " + arr + "<br />" );
document.write("Removed is : " + removed );
removed = arr.splice(3, 1);
document.write("After adding 1 : " + arr + "<br />" );
document.write("Removed is : " + removed );
</script>
</body>
</html>
Output
Below is the output of the above example.
After adding 1 : orange, mango, water, banana, sugar, tea
Removed is :
After adding 1 : orange, mango, water, sugar, tea
Removed is : banana
Removed is :
After adding 1 : orange, mango, water, sugar, tea
Removed is : banana
Array toString() Method
JavaScript array toString() method returns a string representing the source code of the specified array and its elements.
Syntax
Its syntax is as follows -
array.toString();
Return Value
Returns a string representing the array.
Example
You can try the following example below for better understanding on how to implement the array toString() method.
<html>
<head>
<title>JavaScript Array toString Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var str = arr.toString();
document.write("Returned string is : " + str );
</script>
</body>
</html>
<head>
<title>JavaScript Array toString Method</title>
</head>
<body>
<script type ="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");
var str = arr.toString();
document.write("Returned string is : " + str );
</script>
</body>
</html>
Output
Below is the output of the above example.
Returned string is : orange, mango, banana, sugar
Alright guys! we have come to the end of this tutorial post on JavaScript array methods. In my next tutorial, I will be moving on to JavaScript date Object. Feel free to drop your questions via the comment box below.
Don't forget to like our facebook page, also follow us on the rest of our social media platforms available to stay updated with our latest tutorials. You can also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.
Don't forget to like our facebook page, also follow us on the rest of our social media platforms available to stay updated with our latest tutorials. You can also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.