Revision 970849 of Object.unobserve()

<div>{{JSRef}} {{non-standard_header}}</div>

<p>The <strong><code>Object.unobserve()</code></strong> method is used to remove observers set by {{jsxref("Object.observe()")}}.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
<code>Object.unobserve(<var>obj</var>, <var>callback</var>)</code></pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>obj</code></dt>
 <dd>The object to stop observing.</dd>
 <dt><code>callback</code></dt>
 <dd>The reference to the observer to stop calling each time changes are made on the object <strong>obj</strong>.</dd>
</dl>

<h2 id="Description">Description</h2>

<p><code>Object.unobserve()</code> should be called after {{jsxref("Object.observe()")}} in order to remove an observer from an object.</p>

<p>The callback should be a reference to a function and not an anonymous function, because this reference will be used to unset the previous observer. It's useless to call <strong>Object.unobserve() </strong>with an anonymous function as callback, it will not remove any observer.</p>

<h2 id="Examples">Examples</h2>

<h3 id="Unobserving_an_object">Unobserving an object</h3>

<pre class="brush: js">
var obj = {
  foo: 0,
  bar: 1
};

var observer = function(changes) {
  console.log(changes);
}

Object.observe(obj, observer);
​
obj.newProperty = 2;
// [{name: 'newProperty', object: &lt;obj&gt;, type: 'add'}]

Object.unobserve(obj, observer);

obj.foo = 1;
// The callback wasn't called</pre>

<h3 id="Using_an_anonymous_function">Using an anonymous function</h3>

<pre class="brush: js">
var person = {
  name : 'Ahmed',
  age : 25
};

Object.observe(person, function (changes) {
  console.log(changes);
});

person.age = 40; 
// [{name: 'age', object: &lt;obj&gt;, oldValue: 25, type: 'update'}]

Object.unobserve(person, function (changes) {
  console.log(changes);
});

person.age = 63;
// [{name: 'age', object: &lt;obj&gt;, oldValue: 40, type: 'update'}]
// The callback will always be called
</pre>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome("36")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera("23")}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome("36")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera("23")}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li>
 <li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li>
 <li>{{jsxref("Array.unobserve()")}} {{non-standard_inline}}</li>
</ul>