Array.observe()

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

The Array.observe() method was used for asynchronously observing changes to Arrays, similar to Object.observe() for objects. It provided a stream of changes in order of occurrence. It's equivalent to Object.observe() invoked with the accept type list ["add", "update", "delete", "splice"]. However, this API has been deprecated and removed from Browsers. You can use the more general Proxy object instead.

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.

Changes done via Array methods, such as Array.prototype.pop() will be reported as "splice" changes. Index assignment changes which do not change the length of the array may be reported as "update" changes.

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'], addedCount: 3}]

Specifications

Strawman proposal specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
observe
DeprecatedNon-standard
Chrome No support 36 — 52Edge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support Nonodejs No support No

Legend

No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also

Topik Terkait
  1. Standard built-in objects
  2. Array
  3. Properties
    1. Array.length
    2. Array.prototype[@@unscopables]
  4. Methods
    1. Array.from()
    2. Array.isArray()
    3. Array.observe()
    4. Array.of()
    5. Array.prototype.concat()
    6. Array.prototype.copyWithin()
    7. Array.prototype.entries()
    8. Array.prototype.every()
    9. Array.prototype.fill()
    10. Array.prototype.filter()
    11. Array.prototype.find()
    12. Array.prototype.findIndex()
    13. Array.prototype.flat()
    14. Array.prototype.flatMap()
    15. Array.prototype.forEach()
    16. Array.prototype.includes()
    17. Array.prototype.indexOf()
    18. Array.prototype.join()
    19. Array.prototype.keys()
    20. Array.prototype.lastIndexOf()
    21. Array.prototype.map()
    22. Array.prototype.pop()
    23. Array.prototype.push()
    24. Array.prototype.reduce()
    25. Array.prototype.reduceRight()
    26. Array.prototype.reverse()
    27. Array.prototype.shift()
    28. Array.prototype.slice()
    29. Array.prototype.some()
    30. Array.prototype.sort()
    31. Array.prototype.splice()
    32. Array.prototype.toLocaleString()
    33. Array.prototype.toSource()
    34. Array.prototype.toString()
    35. Array.prototype.unshift()
    36. Array.prototype.values()
    37. Array.prototype[@@iterator]()
    38. Array.unobserve()
    39. get Array[@@species]
  5. Inheritance:
  6. Function
  7. Properties
    1. Function.arguments
    2. Function.arity
    3. Function.caller
    4. Function.displayName
    5. Function.length
    6. Function.name
    7. Function.prototype
  8. Methods
    1. Function.prototype.apply()
    2. Function.prototype.bind()
    3. Function.prototype.call()
    4. Function.prototype.isGenerator()
    5. Function.prototype.toSource()
    6. Function.prototype.toString()
  9. Object
  10. Properties
    1. Object.prototype.__count__
    2. Object.prototype.__noSuchMethod__
    3. Object.prototype.__parent__
    4. Object.prototype.__proto__
    5. Object.prototype.constructor
  11. Methods
    1. Object.prototype.__defineGetter__()
    2. Object.prototype.__defineSetter__()
    3. Object.prototype.__lookupGetter__()
    4. Object.prototype.__lookupSetter__()
    5. Object.prototype.hasOwnProperty()
    6. Object.prototype.isPrototypeOf()
    7. Object.prototype.propertyIsEnumerable()
    8. Object.prototype.toLocaleString()
    9. Object.prototype.toSource()
    10. Object.prototype.toString()
    11. Object.prototype.unwatch()
    12. Object.prototype.valueOf()
    13. Object.prototype.watch()
    14. Object.setPrototypeOf()