If you’ve been developing for the web any length of time, you’ve probably written some JavaScript. You know the basics of the language and you can get things done, and applications shipped. But as the proliferation of JavaScript continues into frameworks like UnderscoreJS, KnockoutJS, AngularJS, Any-Other-Thing-You-Can-Think-Of-JS, and even to the server (with Node.js) you may find yourself struggling to understand how to write professional, full-fledged applications using JavaScript. In this session you will LevelUp your JavaScript skills by learning about closures and how they help to modularize your javascript. Prototypal inheritance and how you can extend JavaScript. You will also learn about JavaScript design patterns and how they can take your JavaScript skills to the next level!

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. Дякую!