Matt Kruse on Javascript

gistfile1.txt

http://easycaptures.com/fs/uploaded/710/7202210039.gif

Here is my outline. I have some code examples and details that I am going to
mix in as I talk. It's a bit more rough than I wanted it to be, but oh well.
It's an informal training session and I can talk through it.

Quick Testbeds: JSBin.com , JSFiddle.net , TinkerBin.com

Fundamentals
============
- JS is loosely typed
  - Only a few data types: boolean, number, and string - everything else is an
object (even functions)
  - JS automatically converts objects between types as necessary
  - objects are just storage for key/value pairs. They are NOT Objects in the
same sense as in Java
    - No classical inheritance
    - No encapsulation
        - ex:  { name: "Bob", age: 43 }
  - null and undefined are special types

- Literals get automatically converted to objects when used as objects, then
"unwrapped" back to literals
  - "string".valueOf()
  - false.toString()
  - 3.toString() doesn't work because JS expects . to be beginning of decimal
    - (3).toString() works instead
        - () is the grouping operator and evaluates to the expression contained
within it
          - new Date().getDate() doesn't work
          - (new Date()).getDate() does

- Everything (except literals) is an object! Even functions!
- Everything (except the global object) is a property of another object! Even
functions!

Identifiers (variables)
=======================
- Identifiers (variables) are just properties of objects
- Default to being 'undefined' aka empty ( typeof=="undefined" )
  - Not the same as null, which is a value
- The 'var' keyword creates a key in the current context object (more on this
later)
- Identifier resolution is the process of finding a key with the given name,
then returning its value (more on this later)

Example:
var a = 2; // Creates a property named "a" in the global scope and assigns it
to be 2
var b; // Creates a property named 'b' but it is undefined
c = 3; // Tries to resolve "c", doesn't find it, so creates the property in the
global scope
alert(a); // "a" is resolved and the value is 2
alert(d); // There is no property named "d" so it cannot be resolved and an
error is thrown

Identifier Types
================
- Since JS is loosely typed, the ability to determine data types is very
limited
- The typeof operator returns a string with the identifier's type
  Object=='object'
  Array=='object' // Unfortunate
  Function=='function'
  String=='string'
  Number=='number'
  Boolean=='boolean'
  null=='object' // Unfortunate
  undefined=='undefined'
- Typeof is helpful, but not robust
- Much more helpful: Object.prototype.toString(Array) == '[Object Array]'
- Coding based on identifier types is a bad practice because it can be fragile

Global Object
=============
- The "container" for everything
- In browsers, this is 'window'
- The last resort to resolve identifiers

Functions
=========
- Functions are just objects. Named functions are always properties of some
other object.
- Function declaration aka statement
  - ex: function count() { ... }
  - Maps a function expression to a name
- Function expression
  - function() { ... }
  - No name, so doesn't map to a property. aka, anonymous function
  - var func = function() { ... }
    - Function expression creates a function object, and maps it to the
property func
- Function declarations are "hoisted", expressions are not
  - They are evaluated before is executed, so function names exist before the
function is declared
  - The functions are "hoisted" to the top
  - This way, code need not be in dependency order
- The () operator executes a function object
- A function's name is really just the name of the property referencing it
  - function abc() {...} === window.abc
  - A single function can be referenced via multiple properties, so it can be
called by multiple names.
    - var x = function() {...}; var y=x; y();
  - Since references to functions can be made in lots of ways, functions can be
called in lots of different ways and in different contexts
    - var x = function(){...}; var y={func:x}; y.func();
- Functions can be passed into and returned from other functions
  - ex: var newfunc = myfunc( function(){...} );
  - Functions are just objects!
- Immediately Invoked Function Expressions (IIFE)
  - ex:  (function(){ ... })();
  - Define a function expression, use () to return the expression, then () to
execute it
  - Useful for creating a new scope (see below)

Scope
=====
- Javascript has lexical scoping - scope is defined by definition, not by
context
- When an identifier (variable) needs to be resolved, it needs to be found
first!
  - variables are just properties of objects - but which object?
  - The scope chain is checked for any object with the desired property name
- When a function is defined, it sits "on top of" its containing function,
creating a new "execution context" object in the scope chain
  - Properties in the containing scope are available inside the nested
function's scope
  - A function's scope chain is determined by its list of containing functions
- Identifiers are resolved by looking up the scope chain
  - If not found as a property of the current scope, the parent is checked
- "var" creates a property in the current execution context
  - It will be found first during identifier resolution, so the rest of the
scope chain is not checked
  - var "hoists" identifiers in the same way that functions are hoisted
    - When a function is entered, all "var" statements are found and all
properties are created BEFORE code is executed
          - alert(x); var x=2; // Alerts "undefined" but does not error out,
because x is created before the alert is executed!
            - Hoisting happens first, but assigned to value "2" happens as the
line is executed
- Javascript does not have block scope!
  - for (var i=0; i<10; i++) { ... }
    - i is a property of the function, not a property of the for loop
  - var i=0; for (var i=0; i<10; i++) { ... }
    - These are the same i!
        - The for loop is over-writing the other i!

Closures
========
- A closure is a function that is referenced from outside its scope chain,
forcing its entire scope chain to stay intact and available with every
execution
  - Useful to implement encapsulation
  - Maintain state on asynchronous calls

this
====
- (Almost) always refers to the object to the left of the .
- Can be explicitly set using function.call() and function.apply()
- Since functions can be called many ways, "this" inside a function may change
from what you think it should be