Understanding JavaScript

Understanding
JavaScript

Thursday, September 20, 12

Why JavaScript?

Simple
Multi paradigm
Works on the server and the browser
Lots of libraries
JSON


I heard it sucks, its broken

Implicit globals
Confusing this keyword
Confusing OO features, lack of class
syntax
Type coercion


The good parts


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.


Type system
Constructors Literals typeof
Object() {a: ‘b’} ‘object’

Array() [0, 1, ‘foo’, 3] ‘object’

RegExp() /foo.*/ ‘object’

Date() - ‘object’

- null ‘object’

Boolean() true false ‘boolean’

String() “foo” ‘bar’ string’

Number() 30 0.5 Infinity NaN ‘number’

Function() function foo() {} ‘function’

- undefined ‘undefined’


Type system: Falsy values

0
null
undeﬁned
false
""
NaN

Type system: Coercion
undefined == undefined
",,," == new Array(4)
NaN != NaN
"wat" - 1 == NaN
{} + {} == NaN
[] + [] == “”
[] + {} == “[object Object]”


Type system


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


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);
}


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


Variables

Variables are function scoped
The var operator is evaluated statically
It instantiates all the variables on the
current scope
It assigns them the undeﬁned value
Assignment on variables that have not
been instantiated create a global

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;


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);
}


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);
};
});


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];


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
ﬁnd it through the prototype chain
Prototypes are powerful but can be
confusing. Delegation is easy.


OOP: Prototypes

// Using non-standard __proto__
var animal = {eat: true}
, rabbit = {jump: true};

rabbit.__proto__ = animal;
rabbit.jump === true
rabbit.eat === true

// Using Object.create
var animal = {eat: true}
, rabbit;

rabbit = Object.create(animal);
rabbit.jump = true;

rabbit.eat === true
rabbit.jump === true


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

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’


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 ﬁrst argument passed to call or
apply inside function code

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;


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;
}
);


Semicolons

Use them all the time
If a cool kid trolls you for using them,
send them this link http://asi.qfox.nl/


Understanding JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Understanding JavaScript

Similar to Understanding JavaScript (20)

Recently uploaded

Recently uploaded (20)

Understanding JavaScript