JavaScript: Understand JS Array

By Xah Lee. Date: . Last updated: .

This page is advanced understanding of JavaScript array.

For basics of JavaScript array, such creating array and access elements, see: JavaScript: Array Basics.

JavaScript array is a object data type, with a magic property key "length", and special treatement of properties whose names are non-negative integers. 〔►see JavaScript: What's Object?

JavaScript array is not a linear sequence of memory locations. Forget what you know about “array” in other languages.

By understanding array is just a special JavaScript object, you avoid lots mysterious bugs from using JavaScript array.

Array as Object

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

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

Array also has the attribute “extensible”, just like other JavaScript object. 〔►see JavaScript: Prevent Adding Property

var aa = [3,4]; // array object
console.log(Object.isExtensible(aa)); // true

Object methods also work on array.

// array indexes are just property keys
var ee = ["b", "c"];
console.log(Object.getOwnPropertyNames(ee)); // [ '0', '1', 'length' ]
// array indexes are just property keys
var rr = ["b", "c"];
console.log(Object.getOwnPropertyDescriptor(rr, "1"));
// prints
// { value: 'c',
//   writable: true,
//   enumerable: true,
//   configurable: 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 has a value of 「undefined」, just like accessing a object with non-existent property
var arr = [3];
console.log(arr[200] === undefined); // true

var obj = {"a":1};
console.log(obj["h"] === undefined); // true

To understand JavaScript object, see:

Check If a Object is Array

Array.isArray(value) → return true if value is a array object.

console.log(
    Array.isArray([]) // true
);

console.log(
    Array.isArray({}) // false
);

Note: You should not use typeof value, because typeof [1,2,3] returns "object".

Note: You should avoid using value instanceof Array because “instanceof” is not in general for checking on data type, and can get unexpected result for user created object. 〔►see JavaScript “instanceof” Operator

Creating Array

JavaScript: Create Array

Sparse Array

JavaScript: Sparse Array

Array Length Special Property

Array has a length property. It's a special property. The “length” property is automatically updated when array elements are added or removed using array 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

var 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

var 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' ]

Array Methods: Add, Remove, Extract, Elements, Join Array …

Common array operations should be done using array methods. Such as prepend, append, join, select sub-array, delete elements.

〔►see JavaScript: Array.prototype

To add/remove element(s) in middle, use splice. 〔►see JavaScript: Array.prototype.splice

Warning: Never use delete to remove element in a array, because that creates a sparse array. 〔►see JavaScript: Sparse Array

Split String to Array

To split a string into a array, use string method str.split(…). 〔►see JavaScript: String.prototype

Array Comparison

JavaScript: Array Compare Equality

Array-like Objects

JavaScript: What's Array-Like Object?

Max Number of Elements

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

ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-array-exotic-objects

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 treated as a property key.

var hh = ["a"];
hh[1] = "b";
hh[4294967296] = "c";

console.log(hh); // [ 'a', 'b' ]

// but has a property
console.log(
    Object.getOwnPropertyNames(hh)
); // [ '0', '1', 'length', '4294967296' ]

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

Array How-To

JavaScript: Array How-To

Array Topic

  1. JavaScript: Array Basics
  2. JavaScript: Understand JS Array
  3. JavaScript: Create Array
  4. JavaScript: Sparse Array
  5. JavaScript: What's Array-Like Object?
  6. JavaScript: How to Convert Array-Like Object to Array?
  7. JavaScript: Array How-To

  1. JavaScript: Array Object
  2. JavaScript: Array.prototype
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.