JavaScript: Array Overview

By Xah Lee. Date: . Last updated: .

For basics of array syntax, see: Array Basics .

JavaScript array is a Object data type, with a magic property key "length", and special treatement of non-negative integer string property keys "0", "1", "2", etc.

[see Object Overview]

Array is Object

JavaScript Array is of object data type. Meaning, it is a key/value pairs. For example, we can add property to array:

console.log( typeof [3,4] === "object"); // true
// array is a object, you can add properties to it
const aa = [3,4];
aa.xx = 7;

console.log( Reflect.ownKeys ( aa ) ); // [ '0', '1', 'length', 'xx' ]

Array also has the attribute “extensible”, just like other objects. [see Prevent Adding Property]

console.log( Object.isExtensible( [3,4] ) ); // true

Index vs Property Key

The index of array is just string property key.

console.log([3, 4].hasOwnProperty("0")); // true

Accessing Array with Non-Existent Index

Accessing array with non-existent index returns undefined, just like accessing a object with non-existent property.

// accessing array with non-existent index results 「undefined」
const arr = [3];
console.log(arr[200] === undefined); // true

Check If a Object is Array

Call Array.isArray(value)

[see Array.isArray]

Length Special Property

Every array has a own property string key "length" . It's a special property. The “length” property is automatically updated when array elements are added or removed using Array.prototype methods.

Array length can be set. If you set it, the array will be lengthened or shortened.

// creating a sparse array by setting the length property

const aa = ["a", "b"];

// set the length property beyond the last index
aa.length = 3;

console.log(aa.length); // 3

console.log( Object.getOwnPropertyNames(aa)); // [ '0', '1', 'length' ]

console.log(aa); // [ 'a', 'b',  ]
// truncating a array by setting its length

const aa = ["a", "b", "c"];
console.log(aa.length); // 3

aa.length = 1;

console.log(aa.length); // 1
console.log(aa[1]);     // undefined

console.log( Object.getOwnPropertyNames(aa)); // [ '0', 'length' ]

[see Array.prototype.length]

Array Methods

Common array operations should be done using array methods, such as shift, unshift, push, pop. [see Array.prototype]

To add/remove element(s) in middle, use Array.prototype.splice.

Warning: Never use Delete operator to remove element in a array, because that creates a Sparse Array.

String to Array

String.prototype.split

Max Number of Elements

The max number of elements is 2^32 - 1 (which is 4 294 967 295).

When the index is a number between 0 to 2^32-2, inclusive, it is treated as array index, else it's just a property key.

// When array index is beyond 2^32 - 2, it is treated as a property key.

const hh = ["a"];
hh[1] = "b";
hh[2**32] = "c";

console.log( 2**32 === 4294967296 ); // true

console.log(hh); // [ 'a', 'b', '4294967296': 'c' ]
// note, the c is printed differently

console.log(
 Object.getOwnPropertyNames(hh)
); // [ '0', '1', 'length', '4294967296' ]
// all are property keys

Note: if you create a array with just 1,000,000 items, the browser will become not responsive.

JavaScript Array

JS in Depth
XAH  BUY NOW

JS in Depth

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc