JS: Going deeper

Станислав Говоров,
Системный инженер

Objects & Inheritance
Concurrency model & Event Loop
Asynchronous Programming

Объекты и наследование

Objects & Inheritance

Object

{
    key1 : value,
    key2 : value2,
}
//...and a bit magic

key-value pairs
No schema and metadata

//create empty object
let obj1 = {}; // not really empty
let obj2 = Object.create(Object.prototype);
let obj3 = Object.create(null);

Object properties

unique
- coerced to strings
- Symbol
  - avoids name collision (always unique)
  - Symbol('val') === Symbol('val') //false !!!
  - “hidden” property
dynamic
- add any prop
- remove any prop
- any time

Object properties

let obj    = {};
obj['123'] = {a:'b'};
obj[123]   === obj['123']; //true
//obj.123 - ERROR - not valid identificator

let obj1   = { name : 'Doge' };
obj.wow    = 'much prop';
obj['wow'] = 'such value';

ES6 features:

//Calculated property names:
let calculated = 'doge';
let obj2 = {[calculated] : 'WOW'};

//ES5:
var calculated   = 'doge';
var obj2         = {};
obj2[calculated] = 'WOW';

//Shorthand property names
let name = 'Ilya';
let obj3 = {name};

//ES5:
var obj3 = { name: name };

Add some magic

Object.defineProperty(obj1,'anotherProp',{
    value        : 'another value',
    writeable    : true,
    configurable : true,
    enumerable   : true,
});
//!! not obj.defineProperty !!!

//same as
obj1.anotherProp = 'another value';

Object property descriptors

Object.defineProperty(obj, prop, descriptor)

Descriptor:

data descriptors
accessor descriptors

{
    //descriptors and default values
    configurable : false,
    enumerable   : false,
    value        : undefined,
    writeable    : false,
    get          : undefined,
    set          : undefined,
}

Object property descriptors

Configurable - delete prop and change it
Enumerable - for .. in and Object.keys
Writeable - prop is writeable :)
get and set

Get and set

let obj = {};
Object.defineProperty(obj,'magicProp',{
    get: function(){
        console.log('getter invoked');
        return 42;
    },
    set: function(){
        console.log('setter invoked');
        this.magicProp = '21';
    },
});

Object.defineProperties(obj, descriptors)

Object.keys(obj),

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyDescriptor(obj, prop)

Object.preventExtensions(obj)

Object.seal(obj)

Object.freeze(obj)

Object.isExtensible(obj)

Object.isSealed(obj)

Object.isFrozen(obj)

No classes in JS

class ThisIsNotAClass {
    static whoAmI(){
        return typeof this;
    }
}

ThisIsNotAClass.whoAmI()

"function"

WAT

Only prototypes

JavaScript classes introduced in ECMAScript 6 are syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

MDN

ECMA-262

“Classes” in JS

ES6 way:

class MyAwesomeClass {
    constructor(){
        this.importantProp = 'importantValue';
    }

    coolMethod(){
        console.log('coolMethod invoked');
    }

    static andStaticOne(){
        console.log('static method invoked');
    }
}

let instance = new MyAwesomeClass();

are just syntax sugar

Pre-ES6 way:

const MyAwesomeClass = function(){
    this.importantProp = 'importantValue';
}

MyAwesomeClass.prototype = {
    coolMethod: function(){
        console.log('coolMethod invoked');
    },
};
MyAwesomeClass.andStaticOne = function(){
    console.log('static method invoked');
};

let instance = new MyAwesomeClass();

Ok. What about inheritance?

Inheritance

ES6 way:

class AwesomeChildClass extends MyAwesomeClass {
    childMethod(){
        console.log('child method invoked');
    }
    coolMethod(){
        console.log('redeclared method');
    }
}

Inheritance

Pre-ES6 way:

const AwesomeChildClass.prototype = Object.create(MyAwesomeClass);

AwesomeChildClass.prototype.childMethod = function(){
    console.log('child method invoked');
}

AwesomeChildClass.prototype.coolMethod = function(){
    console.log('redeclared method');
}

Inheritance

:) Mix ES6 and pre-ES6:

const MyAwesomeClass = function(){
    this.importantProp = 'importantValue';
}

class ChildClass extends MyAwesomeClass();

let instance = new ChildClass();

How Inheritance Works

Prototype Chain

MDN

Prototype Chain and Performance

property found
- ok
property not found
- up and up
- and up
- ok
- or undefined
nonexistent properties
- will always traverse the full prototype chain

instanceOf

class Coffee {}
let latte    = new Coffee();
let isCoffee = latte instanceof Coffee; // true

let arr = [];
arr instanceof Array;  // true
arr instanceof Object; // true

instanceOf

obj instanceof Constructor

obj.__proto__ === Constructor.prototype
obj = obj.__proto__
repeat :)

Own properties and inherited properties

Own properties

vs

Inherited properties

??

hasOwnProperty!

Object.prototype.hasOwnProperty()

Own properties and inherited properties

To check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnProperty method which all objects inherit from Object.prototype. hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain.

Note: It is not enough to check whether a property is undefined. The property might very well exist, but its value just happens to be set to undefined.

Extending native prototypes

(monkey patching)

is a bad idea

Array.prototype.forEach = function(){
    console.log('PWNED')
};
[1,2,3,4,5,6,7].forEach(function(element,index,arr){
    console.log(element);
});

"PWNED"

Prototype.js

JavaScript is a dynamic scripting language

very dynamic :)

class PepperoniPizza {
    get type() {
        return 'pepperoni';
    };
}

class QuattroFormaggiPizza {
    get type() {
        return 'quattro formaggi';
    }
}

class BigTastyPizza extends PepperoniPizza {
    size() {
        return '40cm';
    }
}

console.log(Object.getPrototypeOf(BigTastyPizza) === PepperoniPizza);

true

let hotPizza = new BigTastyPizza();
console.log(hotPizza.size());

"40cm"

Object.setPrototypeOf(BigTastyPizza,QuattroFormaggiPizza);

console.log(Object.getPrototypeOf(BigTastyPizza) === PepperoniPizza);

false

console.log(
    Object.getPrototypeOf(BigTastyPizza) === QuattroFormaggiPizza
);

true

Warning: Changing the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, a very slow operation, in every browser and JavaScript engine. The effects on performance of altering inheritance are subtle and far-flung, and are not limited to simply the time spent in obj.__proto__ = ... statement, but may extend to any code that has access to any object whose [[Prototype]] has been altered. If you care about performance you should avoid setting the [[Prototype]] of an object. Instead, create a new object with the desired [[Prototype]] using Object.create().

`new` operator in a nutshell

let object = new Constructor(arguments);

//1
let obj  = {};

//2
Object.setPrototypeOf(obj,Object.getPrototypeOf(Constructor));

//3
let constructorResult = Constructor.apply(obj,arguments);

//4
return constructorResult instanceof Object ? constructorResult : instance;

MDN

ECMA-262

Цикл событий и модель исполнения

Concurrency model & Event loop

Runtime concepts

One thread

(web workers API)

Event Loop

while(queue.waitForMessage()){
  queue.processNextMessage();
}

Functions in Stack

Objects allocated in a Heap

Callback Queue

“Run-to-completion”

Runtime concepts

non-blocking

almost :)
alert, confirm, prompt
debugger

setTimeout, setInterval

let timerId = setTimeout(func,timeout);

console.log('3.. 2.. 1.. Go!');
setTimeout(function(){
    console.log('horse finished');
}, 5);

let carTimer = setTimeout(function(){
   console.log('racecar finished');
}, 20);
clearTimeout(carTimer);

var endDate = +new Date() + 100;
while (+new Date() < endDate){} //do nothing
console.log('turtle finished');

setTimeout, setInterval

"turtle finished"
"horse finished"

setTimeout, setInterval

for (var i=1; i <= 5; i++){
    setTimeout(function(){
        console.log(i);
    },0);
}

setTimeout, setInterval

for (let i=1; i <= 5; i++){
    setTimeout(function(){
        console.log(i);
    },0);
}

setTimeout, setInterval

innacurate
< 10ms (up to 1 second in background tabs)
High Resolution Time

Асинхронное программирование в Javascript

Asynchronous Javascript

Callbacks

//...
http.get(
    'cat.gif',
    onComplete(cat){
        console.log(cat);
    },
    onError(e){
        console.error('details');
    }
);
//...

Callbacks

askServiceOne(
    param,
    onCompleteOne(),
    onErrorOne(),
);

Callbacks

askServiceOne(
    param,
    function onCompleteOne(){
        doSomething();
        askServiceTwo();
    },
    function onErrorOne(){
        //error handling one
    },
);

Callbacks

askServiceOne(
    param,
    function onCompleteOne(){
        doSomething();
        askServiceTwo('param',
            function onCompleteTwo(){
                doSomethingTwo();
            },
            function onErrorTwo(){
                //error handling two
            },
        });
    }),
    function onErrorOne(){
        //error handling one
    }),
);

Callbacks

askServiceOne(
    param,
    onCompleteOne(function(){
        doSomething();
        askServiceTwo('param',
            function onCompleteTwo(){
                doSomethingTwo();
                askService100500({
                    'param100500',
                    function onComplete100500(){
                        console.log('OH GOD WHY??');
                    },
                    function onError100500(){
                        //error handling logic
                    },
                });
            }),
            function onErrorTwo(){
                //error handling two
            }),
        });
    }),
    onErrorOne(function(){
        //error handling one
    }),
);

Callbacks

Callbacks

Callback hell

Events

Promises

.. .. ..

http://callbackhell.com/

Callbacks vs Events

askService('param');

listener.on('service:success', function(){
});

listener.on('service:pending', function(){
});

listener.on('service:fail', function(){
});

listener.on('service:done', function(){
});

listener.on('service:accessDenied', function(){
});

Promises

askServiceOne(
    param,
    onCompleteOne(function(){
        doSomething();
        askServiceTwo('param',
            function onCompleteTwo(){
                doSomethingTwo();
                askService100500({
                    'param100500',
                    function onComplete100500(){
                        console.log('OH GOD WHY??');
                    },
                    function onError100500(){
                        //error handling logic
                    },
                });
            }),
            function onErrorTwo(){
                //error handling two
            }),
        });
    }),
    onErrorOne(function(){
        //error handling one
    }),
);

Promises

let flags = [];

askServiceOne(
    param,
    onCompleteOne(function(){
        doSomething();
        flags.push('one');
        askServiceTwo('param',
            function onCompleteTwo(){
                doSomethingTwo();
                flags.push('two');
                askService100500({
                    'param100500',
                    function onComplete100500(){
                        flags.push('100500');
                        console.log('OH GOD WHY??');
                    },
                    function onError100500(){
                        //error handling logic
                    },
                });
            }),
            function onErrorTwo(){
                //error handling two
            }),
        });
    }),
    onErrorOne(function(){
        //error handling one
    }),
);

Promises

askService(param)
    .then(callback1)
    .catch(handler1)
    .then(callback2)
    .catch(handler2)
    .then(callback3)
    .catch(handler3)
    .then(callback4)
    .catch(handler4)

Chaining

Asynchronous catch

Promises

jQuery Promises (1.6)
- then
- done
- fail
- always
- …

jQuery ajax()

fetch()

jQuery deffered spec

Promises

Q
Promises A proposal
A+ spec
Bluebird
ES6 native

Promises

var promise = new Promise(function(resolve, reject) {
    //business logic
    //call resolve(result) or reject(error) when you need it
});

promise.then(onResolve,onReject);

pending
fulfilled (resolved)
rejected
can’t change state after resolve/reject
thenable

Promises

let monkey = new Promise(function(resolve,reject){
    let r = Math.round(Math.random());
    if (r === 0){
        resolve('OK');
    }
    else {
        reject('o0');
    }
});

Promises

//async one
let asyncMonkey = new Promise(function(resolve,reject){

    let res = Math.round(r);
    let r   = Math.random();

    setTimeout(function(){
        if (res === 0){
            resolve('OK');
        }
        else {
            reject('o0');
        }
    },r*10000);
});

Promises

asyncMonkey.then(
    function(result){
        console.log(result); //OK
    },
    function(error){
        console.error(error); //o0
    }
);

asyncMonkey.then(
    //logic
);
asyncMonkey.then(
    //logic
);
asyncMonkey.then(
    //logic
);

Promises

{
    PromiseState            : "pending", //rejected/resolved
    PromiseResult           : undefined,
    PromiseFulFillReactions : [],
    PromiseRejectReactions  : [],
}

Promises

then - the magic
- then may be called multiple times on the same promise.
- then must return a promise
- ???
- PROFIT
all
race

Reactive Programming

It’s like an asynchronous immutable array

underscore for events

/* Get stock data somehow */
const source = getAsyncStockData();

const subscription = source
  .filter(quote => quote.price > 30)
  .map(quote => quote.price)
  .subscribe(
    price => console.log(`Prices higher than $30: ${price}`),
    err => console.log(`Something went wrong: ${err.message}`)
  );

/* When we're done */
subscription.dispose();

Reactive Programming

let previousValue;
let currentRequest;
const callback = _.debounce(function(e){
    let value = $input.val();
    if (previousValue !== value) {
        //fetch autocomplete results
        if (currentRequest){
            currentResuest.cancel();
        }

        currentRequest = http.get('/url')
            .then(function(){
                //callback
            });
        //...
        previousValue = value;
    }
});

$input.on('input',callback);

Reactive Programming

//assume we have rxjs-based http service
//this.requestSubscription;

this.inputField.onValueChange()
    .debounce(400)
    .distinctUntilChanged()
    .subscribe((value)=>{
        requestSubscription = this.http.get('/url')
            .subscribe((data)=>{
                //callback
            });
    });


this.requestSubscription.unsubscribe(); //will cancel automatically!

Reactive Programming

decoupling components
data flow
realtime applications
callback hell :)

Reactive Programming

ReactiveX

Introduction to reactive programming

Rx Marbles

Rx Book

Useful resources

google.com :)

telegram: @govorov
github.com/govorov
mail@govorov.se.com

JS: Going deeper

Объекты и наследование

Objects & Inheritance

Object

Object properties

Object properties

ES6 features:

Add some magic

Object property descriptors

Object property descriptors

Get and set

No classes in JS

WAT

Only prototypes

“Classes” in JS

are just syntax sugar

Inheritance

Inheritance

Inheritance

How Inheritance Works

Prototype Chain

Prototype Chain and Performance

instanceOf

instanceOf

Own properties and inherited properties

Own properties and inherited properties

Extending native prototypes

(monkey patching)

is a bad idea

JavaScript is a dynamic scripting language

new operator in a nutshell

Цикл событий и модель исполнения

Concurrency model & Event loop

Concurrency model & Event loop

Runtime concepts

Runtime concepts

setTimeout, setInterval

setTimeout, setInterval

setTimeout, setInterval

setTimeout, setInterval

setTimeout, setInterval

Асинхронное программирование в Javascript

Asynchronous Javascript

Callbacks

Callbacks

Callbacks

Callbacks

Callbacks

Callbacks

Callbacks

Callbacks vs Events

Callbacks vs Events

Promises

Promises

Promises

Promises

Promises

Promises

Promises

Promises

Promises

Promises

Promises

Reactive Programming

Reactive Programming

Reactive Programming

Reactive Programming

Reactive Programming

Reactive Programming

Reactive Programming

Reactive Programming

Useful resources

`new` operator in a nutshell