How to not suck at JavaScript

by tommymontgomery § may 21 2010
How to Not Suck at JavaScript

Why you should love JavaScript

It’s everywhere

It’s everywhere
You have to

The most important thing

The most important thing
Scope
JavaScript has no block scope
JavaScript has lots of lexical scope
JavaScript has function scope

JavaScript does not have block scope

Firebug Confirms

What about var?
var PREVENTS global scope inside functions
Scoping 

Lexical Scope
Language parsing happens in phases:
Phase 1: Lexing (tokenizing)
Phase 2: Parsing
Phase 3: Other stuff, like compiling to machine code, etc.

Lexical Scope
Variables declared in the current lexical environment are in lexical scope
E.g. function parameters are usually only available inside a function (function scope)
Also known as static scope, because it only requires static analysis
E.g. the runtime value of the variable is irrelevant

Dynamic Scope
Remember when we didn’t use varthat one time? That’s called dynamic scope.
Global stack of variables
Any time a variable is referenced, it pushes (or pops) the global stack, always using the most recent value of the variable

Closures
Lexical scope allows us to use closures

Closures
A closure is:

Closures
A closure is: difficult to explain

Closure Example

Closure Example
How can this be more awesome?

Closure Example
Problem: the symbols variable is global

Closure Example
Problem: the symbols variable is global
Solution: be awesome

Closure Example

Closure Example
symbols is no longer global because it’s scope is limited to the function

Currying
Currying is:

Currying
Currying is: difficult to explain

Currying Example
So, I totally thought I had an example of where I used currying, but I was actually uncurrying. But it’s still awesome.

Triple your fun…

Solution #1

Solution #1
Still a lot of duplicated code
Looks stupid

Solution #2: Uncurrying

Currying
Currying is when you have a function that takes two parameters, and you turn it into a function that takes one parameter, lexically binding one of them, and return that lexically bound function (closure).

Currying (and uncurrying)
Currying is when you have a function that takes two parameters, and you turn it into a function that takes one parameter, lexically binding one of them, and return that lexically bound function (closure).
Uncurrying is exactly the opposite

lolcat

The Module Pattern
Coined by Douglas Crockford of JSON/Yahoo! fame
A JavaScript design pattern for creating private variables
Awesome

The Module Pattern
Makes heavy use of the fact that functions are the only way to create lexical scope
Creates public APIs that use internal, private variables

The Module Pattern

The Module Pattern
That’s all there is to it
But always remember…

DON’T EVER POLLUTE THE GLOBAL NAMESPACE.

Inheritance
Inheritance is tricky in JavaScript
There are two types:
Classical (like Java)
Prototypal (not like Java)

Classical Inheritance
Classical inheritance is hard in JavaScript
There is no extends
There is no implements
The constructor is hidden
The constructor doesn’t do what you think it will
The new keyword doesn’t do what you think it will
The this keyword is not always in the scope you think it is

If you don’t use prototype, then evict is not defined on our Cat instance
Think of it as a static method, and you can’t execute a static method non-statically

What’s missing?
Access to super/base/parent
Private/protected members
Interfaces

Don’t ever do it yourself
Use John Resig’s implementation
http://ejohn.org/blog/simple-javascript-inheritance/

The Juiciest Part

Prototypal Inheritance
Scary
Unknown
Sounds cool

Inherit from object, rather than classes

Object.create() from Douglas Crockford
Everybody uses it
Because JavaScript’s new keyword is eft up

Inheritance
Classical
Classes inherit from classes
Prototypal
Objects inherit from objects

http://www.redditmedia.com	116
http://www.slideshare.net	15

How to not suck at JavaScript

by tmont on May 21, 2010

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 131

Statistics

How to not suck at JavaScript Presentation Transcript