Static Array Methods

Contact Us or call 1-877-932-8228
Static Array Methods

Static Array Methods

Array.isArray()

A useful - and fairly simple - static method of the Array class: isArray returns true if its argument is an array:

Array.isArray(object)

The following would all return true:

Array.isArray(new Array());
Array.isArray([]);
Array.isArray([17, 100, 3]);

and the following would all return false:

Array.isArray(17);
Array.isArray('Jane Doe');
Array.isArray();
Array.isArray(null);
Array.isArray({fname:'Jane', lname:'Doe'});
Array.isArray(false);

Since none of a number, a string, null, an Object, nor a Boolean value is an array.

Array.from()

The static from method allows us to create a new array from an array-like or iterable object:

Array.from(collection, mapFunction?, thisArgument?)

The first parameter of from is the object to use to create the new array; optionally, we can supply a callback function (mapFunction) to call on each element and a value for the callback function to use as this.

We might use from to create an array from a string, from a Map or Set object, or from the arguments of a function (recall that the local arguments object for any function is similar to an array, but does not have any Array properties except length).

The following examples illustrate the use of from to create arrays:

Code Sample:

AdvancedArrays/Demos/from.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Array.from</title>
</head>
<body>
	<h1>Array.from</h1>
	<p>sample markup code</p>
	<ul>
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
	</ul>
	<script>
		function arrayFromArguments() {
			return Array.from(arguments);
		}
		// create array from the arguments supplied to a function:
		document.write(arrayFromArguments(11, 21, -17));
		document.write('<br>Array?: ' + Array.isArray(arrayFromArguments(11, 21, -17)));

		document.write('<hr>');

		var str = 'I am a string';
		// create array from the characters in a string:
		document.write(Array.from(str));
		document.write('<br>Array?: ' + Array.isArray(Array.from(str)));

		document.write('<hr>');

		var m = new Map();
		m.set(0, 'apple');
		m.set(1, 'banana');
		m.set(2, 'cherry');
		// create multidimensional array from map:
		document.write(Array.from(m));
		console.log(Array.from(m));
		document.write('<br>Array?: ' + Array.isArray(Array.from(m)));

		document.write('<hr>');

		// create array from collection of DOM elements:
		document.write(Array.from(document.getElementsByTagName('li')));
		document.write('<br>Array?: ' + Array.isArray(Array.from(str)));

		document.write('<hr>');

		// create array from array, with map function
		document.write(Array.from([10, 20, 30], function(i) {
			return i*i;
		}));
		document.write('<br>Array?: ' + Array.isArray(Array.from(str)));

		document.write('<hr>');

		// same as above, but using arrow function:
		document.write(Array.from([10, 20, 30], i => i*i));

	</script>
</body>
</html>

Code Explanation

On line 11 we call function arrayFromArguments which returns an array from its arguments object; calling arrayFromArguments(11, 21, -17) thus returns the array [11, 21, -17].

On line 28 we create an array from the string 'I am a string', getting the array ['I',' ','a','m',' ','a',' ','s','t','r','i','n','g'].

On line 38 we use Array.from to create an array from a Map object, getting a multidimensional array. Here's the output from our call to console.log(Array.from(m)) on line 39, using the developer tools in our browser to inspect the value of the multidimensional array that is created from the Map:

console output of Array.from(map)

On line 45 we create an array from the collection of <li> elements (at the top of our HTML page).

The final two examples show how can apply a map function to each element from which we create the array. On line 51 we create a new array containing the squares of each element of the original array; we do the same thing on line 59 but here use an arrow function as the map function.

Note that we use Array.isArray to make sure that the object returned by each of our calls to Array.from is indeed an array.

Array.of()

The static of method lets use create a new array from an enumerated list of elements:

Array.of(element0?, element1?, ...)

with as many (or few) elements as we wish. The difference between creating an array from Array.of and the Array.new constructor is that Array.new(17) creates an array with 17 elements (each with value undefined), whereas Array.of(17) creates a single-element array with value 17.

The following examples show the use of Array.of:

Code Sample:

AdvancedArrays/Demos/of.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Array.of</title>
</head>
<body>
	<h1>Array.of</h1>
	<script>
		//these two arrays have the same elements
		var array1 = Array.of(10, 20, 30);
		var array2 = new Array(10, 20, 30);
		document.write(array1);
		document.write('<br>' + array2);
		
		document.write('<hr>');

		//these two arrays differ
		var array3 = Array.of(5);
		var array4 = new Array(5);
		document.write(array3);
		document.write('<br>' + array4);

	</script>
</body>
</html>

Code Explanation

In the first example, we create array1 (using Array.of) and array2 (using Array.new); array1 and array2 contain the same elements.

In the second example, we demonstrate the difference when Array.new is called with a single value: Array.of(5) is an array with one element (with value 5), while new Array(5) is an array with five elements, each with value undefined.

Next