• 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

  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How to Fast Launch Microsoft Flight Simulator 2020 (decrease game loading time)
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • A review of the Neural DSP Quad Cortex: is this the future of amp-modelling?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How To Mock uuid In Jest
  • How To Install Eufy Security Cameras Without Drilling or Using Screws

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz