Callbacks

Most Basic way to deal with async

                    
                        function fetchStuff(callback) {
                            setTimeout(() => {
                                callback('Look what I found!');
                            }, 500);
                        }

                        fetchStuff(fetchedData => console.log(fetchedData));
                    
                

What about errors?

                    
                        function fetchStuff(callback) {
                            setTimeout(() => {
                                throw 'I found nothing :(';
                            }, 500);
                        }

                        try {
                            fetchStuff(fetchedData => console.log(fetchedData));
                        } catch (e) {
                            console.log(e);
                        }
                    
                

Callback Parameter

                    
                        function fetchStuff(callback) {
                            setTimeout(() => {
                                try {
                                    // some black magic
                                    callback(undefined, 'I found data');
                                } catch (error) {
                                    callback(error);
                                }
                            }, 500);
                        }

                        fetchStuff((error, fetchedData) => {
                            error ? console.log('Outch') : console.log(fetchedData);
                        });
                    
                

Callback Hell

                    
                        asyncFetch((error, fetchedData) => {
                            // Do something with fetched Data
                            asyncPost(data, (error2, result) => {
                                // Do something with result
                                asyncFetch((error3, fetchedData3) => {
                                    console.log(error); // Wat?
                                });
                            });
                        });
                    
                

There has to be a better solution...

Promises ($q)

• A proxy for a value that is not yet known
• Single Error Stream
• All Browsers Except IE <= 11...

Basic Usage

                    
                        const myPromise = new Promise((resolve, reject) => {
                            setTimeout(() => resolve('Found data'), 500);
                        });

                        myPromise
                            .then(data => console.log(data));
                    
                

Single Error Stream

                    
                        const myPromise = new Promise((resolve, reject) => {
                            setTimeout(() => throw 'No data found :(');
                        });

                        myPromise
                            .then(
                                success => /* Do something */,
                                error => console.error(error)
                            );
                    
                

.then(onResolve, onReject)

• Registers handler that gets fired on resolve
• Getting called in order of registering
• Returns Promise that resolves with return value of onResolve
• onReject will not catch errors from onResolve

onResolve Error

                    
                        const myPromise = new Promise((resolve, reject) => {
                            setTimeout(() => resolve('Found something');
                        });

                        myPromise
                            .then(
                                result => throw 'Ooops!',
                                error => console.error(error)
                            );
                    
                

.catch(onReject)

• Same as calling .then(null, onReject)
• Will return resolved Promise
• Unless onReject returns a rejected Promise

Chainable

                    
                        myPromise
                            .then(() => {
                                // Do something
                                return asycPush();
                            })
                            .catch(error => console.error(error));
                            .then((resultOfOtherPromise) => {
                                return asyncFetch();
                            })
                    
                

Promise.all

                    
                        Promise.all([
                            myFirstPromise,
                            mySecondPromise,
                        ])
                            .then((promiseResults) => {
                                /* Array of Promise results */
                            })
                            .catch(error => console.error(error);
                    
                

$q.defer

• Creates an object with .promise property
• Can be resolved, rejected from outside
• Almost always hints to a hack/workaround for Promises

Create resolved/rejected Promise

• Promise.resolve() / Promise.reject()
• $q.resolve() / $q.reject()
• Useful for Tests or default return values

Let's excercise

Types

• null
• undefined
• boolean
• number
• string
• object
• symbol

Equality

                 
                     const value1 = undefined;
                     const value2 = null;

                     if(value1 == value2) {
                        console.log('Y though?');
                     }
                 
             

Truthy und Falsy

• false
• 0
• "" (empty string)
• null
• undefined

Null checks & Triple equals

                 
                     const customer = getCustomer();
                     if(customer === null || customer === undefined) {
                        // do sth.
                     }

                     if(!customer) {
                        // do sth.
                     }
                 
             

If you want to know the specifics of type coercion check out You don't know JS