2. Why JavaScript?
Simple
Multi paradigm
Works on the server and the browser
Lots of libraries
JSON
Thursday, September 20, 12
3. I heard it sucks, its broken
Implicit globals
Confusing this keyword
Confusing OO features, lack of class
syntax
Type coercion
Thursday, September 20, 12
5. Type system
Weak typing means that a language
implicitly converts types when used.
A programming language is said to use
dynamic typing when type checking is
performed during run-time as opposed
to compile-time.
Thursday, September 20, 12
10. Type system
Avoid coercion
Define API’s with clear types
Use the === operator
Read the spec or this article http://
webreflection.blogspot.com.es/2010/10/
javascript-coercion-demystified.html
Thursday, September 20, 12
11. Type system
/**
* Adds two numbers
*
* @param {Number} a
* @param {Number} b
* @return {Number}
*/
function add(a, b) {
return a + b;
}
/**
* Returns the sumatory of a list of numbers
*
* @param {Array<Number>} list
* @return {Number}
*/
function sum(list) {
return list.reduce(add, 0);
}
Thursday, September 20, 12
12. Type system: Casting
Use the constructors Number(‘3’) === 3
Use the prefix + operator +‘3’ === 3
Use the infix + operator 3 + ‘0’ === ’30’
Use the prefix ! operator !!1 === true
Thursday, September 20, 12
13. Variables
Variables are function scoped
The var operator is evaluated statically
It instantiates all the variables on the
current scope
It assigns them the undefined value
Assignment on variables that have not
been instantiated create a global
Thursday, September 20, 12
14. Variables
// Hoisting: Cannot read property 'name' of undefined
var name = user.name
, user = {name: 'John'};
// This creates a global!
foo = ‘bar’;
// Function scope
var a = 10;
if (true) {
var a = 20;
}
(function () {
var a = 30;
}());
a == 20;
Thursday, September 20, 12
15. Functions: Declaration vs Expression
// Function declaration (static)
function add(a, b) {
return a + b;
}
// Function expression (runtime)
var add = function (a, b) {
return a + b;
}
// Function named expression (runtime)
var recursiveAdd = function inc(a, b) {
if (a > 100) return a;
return inc(a + b, b);
}
Thursday, September 20, 12
16. Functions: Higher order
Functions can accept functions as a
parameters and can return functions
Functions are objects after all, they can
even have attributes!
// Returns a function that will have a delay
function delayFunction(fn, delay) {
fn.delayed = true;
return function () {
setTimeout(fn, delay);
};
});
Thursday, September 20, 12
17. Functions: Closures
Closures are function that “remember”
the variables on their scope
// Gets a function to inspect the given object
function getInspector(obj) {
return function (attr) {
return obj[attr];
};
};
var inspect = getInspector({name: ‘john’, age: 21});
[‘name’, ‘age’].map(inspect) == [‘john’, 21];
Thursday, September 20, 12
18. OOP: Prototypes
Each object can have a pointer to another
object called prototype
When we read an attribute from an
object but its not present, it will try to
find it through the prototype chain
Prototypes are powerful but can be
confusing. Delegation is easy.
Thursday, September 20, 12
20. OOP: Constructors
Calling a function with the new operator
makes it behave like a constructor
The keyword this will point to the newl
object
The constructor will have an implicit
return of the new object
The pointer to the prototype is
assigned to the new object
Thursday, September 20, 12
21. OOP: Constructors
var animal = {eats: true};
function Rabbit(name) {
this.name = name;
this.jumps = true;
}
Rabbit.prototype = animal;
var rabbit = new Rabbit('John')
rabbit.eats === true
rabbit.jumps === true
rabbit.name === ‘John’
Thursday, September 20, 12
22. OOP: The `this` keyword
The global object if its on the main scope
The parent object of a method if the
function is called as a method
The newly created object from a
constructor called with the new operator
The first argument passed to call or
apply inside function code
Thursday, September 20, 12
23. OOP: Constructors
// global
this.Boolean = function () {return false;};
Boolean(2) === false
// method invocation
var button = {
toggle: function () {
this.enabled = !!this.enabled;
}
};
button.toggle();
button.enabled === true;
var toggle = button.toggle;
toggle();
button.enabled === true;
Thursday, September 20, 12
24. OOP: Constructors
// Constructors
function Rabbit(name) {
this.name = name;
}
var rabbit = new Rabbit('John')
rabbit.name === ‘John’;
var rabbit = Rabbit(‘John’);
rabbit.name === undefined;
window.name === ‘John’;
// call or apply
[].reduce.call(
"Javascript is cool!"
, function (memo, a) {
return a + memo;
}
);
Thursday, September 20, 12
25. Semicolons
Use them all the time
If a cool kid trolls you for using them,
send them this link http://asi.qfox.nl/
Thursday, September 20, 12