Understanding JavaScript

transcript

Understanding

JavaScript

Thursday, September 20, 12

Why JavaScript?

Simple

Multi paradigm

Works on the server and the browser

Lots of libraries

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 typeofObject()

Array()

RegExp()

Date()

Boolean()

String()

Number()

Function()

{a: ‘b’} ‘object’

[0, 1, ‘foo’, 3] ‘object’

/foo.*/ ‘object’

- ‘object’

null ‘object’

true false ‘boolean’

“foo” ‘bar’ string’

30 0.5 Infinity NaN ‘number’

function foo() {} ‘function’

undefined ‘undefined’

Type system: Falsy values

undefined

Type system: Coercion

undefined == undefined

",,," == new Array(4)

NaN != NaN

"wat" - 1 == NaN

{} + {} == NaN

[] + [] == “”

[] + {} == “[object Object]”

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 undefined value

Assignment on variables that have not been instantiated create a global

Variables// Hoisting: Cannot read property 'name' of undefinedvar name = user.name , user = {name: 'John'};

// This creates a global!foo = ‘bar’;

// Function scopevar 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 delayfunction 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 objectfunction 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 find 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 === truerabbit.eat === true

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

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

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

OOP: ConstructorsCalling 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 === truerabbit.jumps === truerabbit.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 first argument passed to call or apply inside function code

OOP: Constructors

// globalthis.Boolean = function () {return false;};Boolean(2) === false

// method invocationvar button = { toggle: function () { this.enabled = !!this.enabled; }};button.toggle();button.enabled === true;

var toggle = button.toggle;toggle();button.enabled === true;

OOP: Constructors

// Constructorsfunction 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

Technology