JavaScript/Notes/Array
In this lesson, I explain what an Array
is, properties of Array instances, and methods of Array.prototype
that were added in EcmaScript 5.
Array Instances
Array instances also have a special definition for the internal method called [[DefineOwnProperty]] ( P, Desc, Throw )
used for property assignment and a special length
property that affects and is affected by the properties in the array. The [[Class]]
internal property value is "Array" (§ 15.4.5).
Array instances inherit properties from the Array prototype
(§15.4.4) object. === Length and [[DefineOwnProperty]] ===
<source lang="javascript">
// length.
var a = ["a", "b" , "c", undefined];
"3" in a; // true;
a[3]; // undefined;
a.length = 2;
"2" in a; // false.
// DefineOwnProperty a[4] = "CC"; a.length; // 5; "3" in a; // true. a[3]; // undefined.
// Sparse array DO NOT DO THIS. delete a[2]; // true "2" in a; // false </source>
NodeLists Are Not Arrays
There are many collections in the DOM that have indexed properties but are not Arrays. NodeList is one such example. For example, <source lang="javascript"> document.getElementsByTagName("div"); </source> — returns a live collection.
In modern browsers Array methods can be used generically on these Array-like host objects. For example:
<source lang="javascript"> var slice = Array.prototype.slice;
var divs = document.getElementsByTagName("div"); divArray = slice.call(divs); // create a new Array
function filterOutEmptyDivs(el) { // Using ES5 String.prototype.trim; assuming textContent is supported.
return el.getElementsByTagName("*").length > 0 && !el.textContent.trim();
}
divArray.filter(filterOutEmptyDivs); </source>
However, IE8 and below will throw an error when slice is called on a Host object. See also:
- String.prototype.slice (start, end)
- Re: [whatwg WebIDL and HTML5]
- Slice:MDN
- What is a Host Object?
EcmaScript 5 Array Methods
The normative reference for Array is the EcmaScript 5.1 specification, a mature, official standard. See § 15.4.4 Array.
EcmaScript 5 formally standardized the "Array Extras" that were previously introduced in Firefox 1.5 (Mozilla JavaScript™ 1.6) in 2006.
These added methods are present in common modern browsers, but can have a noticeable performance impact for lengthy arrays, particularly on limited devices, and especially with large data sets.
<source lang="javascript"> Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.prototype.some Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.reduce Array.prototype.reduceRight </source>
Each method description has an overview of what it does, followed by the algorithm. Here is the link to Array.prototype: [1].
MDC on Array: [2]
It is interesting that these methods can also be used generically on something that is Array-like. <source lang="javascript"> var filter = Array.prototype.filter;
filter.call("foo", function (ch) { return ch == "o"; }).join(""); </source>
Array-like was proposed as a standard interface (I championed this idea for a while), but was not included. Perhaps it will be, some day.
But for now, it is useful to know that these methods are natively supported in modern browsers.
Assignment 1 Write a function that removes an element from an array.
Write a function that removes an element from an array.
Given: <source lang="javascript"> var thing = {}, f = function(){}; var input = [f, [], /foo/, thing, []]; removeElement(input, thing); // [f, [], /foo/, []]; </source>
Assignment 2 Write a function that removes duplicate numbers from an array.
<source lang="javascript"> var input = [1, 2, 3, 1, 0, 1]; var result = arrayUnique( input ); // [1, 2, 3, 0]; </source>
Assignment 3 Write a function that sorts an array of strings case-insensitively.
Write a function that sorts an array of strings case-insensitively.