objects vs. arrays

{} vs. []

what you get with arrays in javascript

Array.length
Array.prototype
Array.from()
Array.isArray()
Array.observe()
Array.of()
Array.prototype.concat()
Array.prototype.copyWithin()
Array.prototype.entries()
Array.prototype.every()
Array.prototype.fill()
Array.prototype.filter()
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.forEach()
Array.prototype.includes()
Array.prototype.indexOf()
Array.prototype.join()
Array.prototype.keys()

Array.prototype.lastIndexOf()
Array.prototype.map()
Array.prototype.pop()
Array.prototype.push()
Array.prototype.reduce()
Array.prototype.reduceRight()
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.slice()
Array.prototype.some()
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.toLocaleString()
Array.prototype.toSource()
Array.prototype.toString()
Array.prototype.unshift()
Array.prototype.values()
Array.prototype[@@iterator]()

Array.length
Array.prototype
Array.from()
Array.isArray()
Array.observe()
Array.of()
Array.prototype.concat()
Array.prototype.copyWithin()
Array.prototype.entries()
Array.prototype.every()
Array.prototype.fill()
Array.prototype.filter()
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.forEach()
Array.prototype.includes()
Array.prototype.indexOf()
Array.prototype.join()
Array.prototype.keys()

Array.prototype.lastIndexOf()
Array.prototype.map()
Array.prototype.pop()
Array.prototype.push()
Array.prototype.reduce()
Array.prototype.reduceRight()
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.slice()
Array.prototype.some()
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.toLocaleString()
Array.prototype.toSource()
Array.prototype.toString()
Array.prototype.unshift()
Array.prototype.values()
Array.prototype[@@iterator]()

{}

Is it a single thing?

Does it need to by really fast at large sizes?

Is it a key value pair?

[]

A collection of things?

Does order of its parts matter?

Do you want to use the Array functions to operate on it?

Is it a list?

observable

every change on an object executes a callback.

var boat = {};

Object.observe(boat, function (changes) {

    //Iterate over the changes that have happened
    changes.forEach(function (change) {
        //do something here... 
        console.log(change.name, change.type);
    });
});


boat.type = "skiff";

//observe would output:
type add

boat.type = "canoe";

//observe would output:
type update

var boat = {
    motor: 'Johnson Outboard'
};

Object.observe(boat, function (changes) {

    //Iterate over the changes that have happened
    changes.forEach(function (change) {
        if(change.name === 'motor' && change.object.motor !== 'Johnson Outboard'){
            //We don't want people to be able to change this element...
            //    So we roll it back
            change.object.motor = change.oldValue;
        } 
    });
});

boat.motor = "Honda Outboard"; // boat.motor still equals Johnson Outboard

that is kind of a lame example...

<input type="text" class=".boat-motor">


var boat = {
        motor: 'Johnson Outboard'
    }
    , elem = document.querySelector('.boat-motor');

Object.observe(boat, function (changes) {
    changes.forEach(function (change) {
        if(change.name === 'motor' && change.type === 'update'){
            elem.value = change.object.motor;
        } 
    });
});

boat.motor = "Honda Outboard"; // The change will be reflected in the DOM

better?

observables allow you to be notified of any change to any object.

Object.observe -> ES 7

sorry... :-(

chrome and opera have it now

polyfills are available

also angular... sort of does this. sort of.*

* not really

digest-loop-dirty-checking-madness-in-the-real-world

not good. but it works. mostly.