• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

I Heart Object.observe()

Javascript · November 27, 2014

If you have used AngularJS, or EmberJS and any other front-end Javascript based framework, then you would be familiar with the concept of data binding. Essentially being able to watch a Javascript object for changes and then call a function when this takes place.

Currently without using a third party library which implements a non-native method for observing changes in a object like Angular or a polyfill, there is no cross-browser method for observing objects for changes which doesn’t involve some kind of hack at the expense of performance.

While Object.observe() is really only currently supported in Chrome, it is without-a-doubt the future of Javascript. It means that the need for a front-end framework is lessened, not for now, but eventually, it will. Sadly, Object.observe() is not scheduled to land until ES7.

A basic example:

var someObj = {};

Object.observe(someObj, function(changes) {
    changes.forEach(function(change) {
        console.log({
            propertyNameAffected: change.name,
            oldValue: change.oldValue,
            changeType: change.type,
            affectedObject: change.object
        });
    });
});

// This will trigger an event and output the following in the console
// {propertyNameAffected: "myVal", oldValue: undefined, changeType: "add", affectedObject: Object}
someObj.myval = 'Dwayne';

// Changing the value of a pre-existing property will output the following in the console
// {propertyNameAffected: "myVal", oldValue: "Dwayne", changeType: "update", affectedObject: Object}
someObj.myval = 'Dwayne Again';

// Deleting the property from the object will output the following in the console
// {propertyNameAffected: "myVal", oldValue: "Dwayne Again", changeType: "delete", affectedObject: Object}
delete someObj.myval;

One of the best polyfills out there for Object.observe() support in all browsers, through the use of either the native method or dirty-checking is Observe-js.

As you can see one of the most touted benefits of front-end frameworks is data-binding and eventually people will favour native Javascript over frameworks as tasks that once required polyfills/frameworks/libraries to do can be done in a few lines of native JS.

The future is bright, man.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz