<commit_before>---
layout: default
title: Observable - A shim of ES7 Object.observe() by value-holder object
---

# Observable

`Observable` (now moved to [decor](https://github.com/ibm-js/decor) project) is an object working as a shim of ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe).
`Observable` has `.set()` method for automatic emission of change record, and static `Observable.observe()` method to observe for that, for example:

<iframe width="100%" height="225" src="http://jsfiddle.net/ibmjs/pngb8/embedded/js,result" allowfullscreen="allowfullscreen" frameborder="0"><a href="http://jsfiddle.net/ibmjs/pngb8/">checkout the sample on JSFiddle</a></iframe>

Similar to ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe), change records are delivered in batch at end of [micro-task](http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#microtask). In above example, you'll see that change to `foo` property and change to `bar` properties are notified in a single callback, in a format of array. The format of change records is compatible with ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe).

Under the hood, `Observable.observe()` directly uses ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe) if it's available natively in browser.

## Synchronous delivery of change record

There are some cases you want to deliver change records immediately, instead of waiting for end of [micro-task](http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#microtask). For that purpose, you can use `Observable.deliverChangeRecord()` that synchronously delivers change records that are queued for callback. Here's an example:

<iframe width="100%" height="300" src="http://jsfiddle.net/ibmjs/S83Ey/embedded/js,result" allowfullscreen="allowfullscreen" frameborder="0"><a href="http://jsfiddle.net/ibmjs/S83Ey/">checkout the sample on JSFiddle</a></iframe>

## Manual emission of change record
<commit_msg>Add keywords meta tag to Observable doc.<commit_after>---
layout: default
title: Observable - A shim of ES7 Object.observe() by value-holder object
keywords: ['Object.observe', 'Array.observe', 'shim']
---

# Observable

`Observable` (now moved to [decor](https://github.com/ibm-js/decor) project) is an object working as a shim of ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe).
`Observable` has `.set()` method for automatic emission of change record, and static `Observable.observe()` method to observe for that, for example:

<iframe width="100%" height="225" src="http://jsfiddle.net/ibmjs/pngb8/embedded/js,result" allowfullscreen="allowfullscreen" frameborder="0"><a href="http://jsfiddle.net/ibmjs/pngb8/">checkout the sample on JSFiddle</a></iframe>

Similar to ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe), change records are delivered in batch at end of [micro-task](http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#microtask). In above example, you'll see that change to `foo` property and change to `bar` properties are notified in a single callback, in a format of array. The format of change records is compatible with ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe).

Under the hood, `Observable.observe()` directly uses ES7 [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe) if it's available natively in browser.

## Synchronous delivery of change record

There are some cases you want to deliver change records immediately, instead of waiting for end of [micro-task](http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#microtask). For that purpose, you can use `Observable.deliverChangeRecord()` that synchronously delivers change records that are queued for callback. Here's an example:

<iframe width="100%" height="300" src="http://jsfiddle.net/ibmjs/S83Ey/embedded/js,result" allowfullscreen="allowfullscreen" frameborder="0"><a href="http://jsfiddle.net/ibmjs/S83Ey/">checkout the sample on JSFiddle</a></iframe>

## Manual emission of change record

{'fraction_non_alphanumeric': 0.13863259995268512, 'fraction_numerical': 0.011828720132481665, 'mean_word_length': 5.711111111111111, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '611622', 'n_tokens_mistral': 1371, 'n_tokens_neox': 1275, 'n_words': 378}