1. JavaScript LevelUp

2. Ласкаво просимо

3. Who is THIS freakin’ guy?

4. Lee Brandt
Director R&D @PaigeLabs
Programmer
Teacher
Star of Finding Bigfoot
JavaScript, All day, every day
Keeper of Keys and Grounds @Hogwarts

5. IDoSomethingAwesomeJS

6. Our Agenda
Scope and Closure
Prototypal Inheritance
Modularity
JavaScript Quirks
Tips & Tricks
Asynchronicity

7. Lexical Scope
function outerFunction() {
var foo = 5;
function innerFunction(){
foo++;
var bar = 5;
}
console.log(bar);
}

8. Closure
var add = (function(){
var counter = 0;
return function(number){
console.log(counter += number);
};
})();
for (var i = 0; i < 10; i++) {
add(1);
}

9. Prototypal Delegation
Object.prototype
.toString()
.valueOf()
.hasOwnProperty()

10. Prototypal Delegation
var Foo = function(){
// magic
};
var a = new Foo();
var a = Object.create(Foo);

11. Modularity (AMD)
define(function(){
return function CallMe(){
console.log('Inside module one.');
};
});
define(['FirstModule'], function(mod1){
mod1();
});
FirstModule.js
Main.js

12. Modularity (CommonJS)
module.exports = function callMe(){
console.log(‘called’);
};
var thingie = require(‘./FirstModule');
thingie();
FirstModule.js
Main.js

13. Why So Asynchronous?

14. Asynchronicity Callbacks
function callbackFunction(){
// stuff and such
}
function asynchronousThing(cb){
// asynchronous stuff
cb();
}
asynchronousThing(callbackFunction);

15. Asynchronicity Promises
function asynchronousThing(){
var promise = $q.defer();
if(successful){
promise.resolve(results);
}else{
promise.reject();
}
return promise;
}

16. Asynchronicity Promises
asynchronousThing()
.progress(function(status){})
.then(function(result){})
.success(function(result){})
.error(function(err){})
.catch(function(err){})
.finally(function(){});

17. Quirks JavaScript
this != this
unless you bind(), call(), or apply()
function clickHandler(e){
console.log(this === e.currentTarget);
}
(function clickHandler(e){
console.log(this === myThisContext);
}).bind(myThisContext);

18. Hoisting
console.log(foo); // undefined
console.log(bar); // undefined
var foo = ‘baz';
var bar = 'bam';
console.log(foo); // baz
console.log(bar); // bam

19. Hoisting
foo(); // I am in foo
bar(); // undefined
// function declaration
function foo(){
console.log('I am in foo');
}
// function expression
var bar = function bar(){
console.log('I am in bar');
}

20. Tips & Tricks
Use ‘use strict’
use === instead of ==
use a module pattern
truthy and falsy
Bookmark MDN
Namespacing

21. Revealing Module
function myModule(){
var myPrivateThing = function(){
// does something
};
return {
MyPublicThing: myPrivateThing
};
}

22. Useful Links
Mozilla Developer Network
- https://developer.mozilla.org
ECMA Website
- http://www.ecma-international.org/ecma-262/5.1/
jsbin.com
jsfiddle.com
plnkr.co
codepen.io

23. Дякую!