Array.observe()

The Array.observe() method is used for asynchronously observing changes to Arrays, similar to Object.observe() for objects. It provides a stream of changes in order of occurrence. It's equivalent to Object.observe() invoked with the accept type list ["add", "update", "delete", "splice"].

Syntax

Array.observe(arr, callback)

Parameters

arr

The array to be observed.

callback

The function called each time changes are made, with the following argument:

changes

An array of objects each representing a change. The properties of these change objects are:

• name: The name of the property which was changed.
• object: The changed array after the change was made.
• type: A string indicating the type of change taking place. One of "add", "update", "delete", or "splice".
• oldValue: Only for "update" and "delete" types. The value before the change.
• index: Only for the "splice" type. The index at which the change occurred.
• removed: Only for the "splice" type. An array of the removed elements.
• addedCount: Only for the "splice" type. The number of elements added.

Description

The callback function is called each time a change is made to arr, with an array of all changes in the order in which they occurred.

Examples

Logging different change types

var arr = ['a', 'b', 'c'];

Array.observe(arr, function(changes) {
  console.log(changes);
});

arr[1] = 'B';
// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}]

arr[3] = 'd';
// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}]

arr.splice(1, 2, 'beta', 'gamma', 'delta');
// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}]

Specifications

Strawman proposal for ECMAScript 7.

Browser compatibility

See also

• Under what condition would Array.observe's “add” event trigger?
• Array.unobserve()
• Object.observe()