The Trailhead

I’ve been hiking my desk for nearly a year now, and the road gets ever longer. I’ve had a book published. I’ve been promoted. We’ve had a daughter, survived a flood, lost and learned, and survived baby kidney surgery. Eli more fully experienced his latest Chanukah, Winter Solstice and Christmas. He survived both Saint Nick and the Solstice Squid. I’ve slept less this year than any year prior–including years in Iraq. In short, I’ve continued my hike up the Mountain of Lif.

This year, I also learned JavaScript. Thanks [in no small part to the team at ChemSW, Alex Russel, Douglas Crockford* (and far too many more to name by name) and otherswho dedicated their time to write, blog, speak, evangelize, scrutinize and mock the little language that could] to the tubes which connect us all, I’ve come to know and love the beauty and elegance that JavaScript has to offer.

Even if you’re not a programmer or even if you are and you’re a JavaScript expert: give yourself a belated Holiday gift. Watch episode 1 of Crockford’s “On JavaScript” series. It’s simply profound.

The brief primer (forgive the hubris) which follows is redundant with much of the work that the aforementioned have already produced. I have extended surprisingly (to me) little creative energy in adding my own material–much of this is taken verbatim from its respective sources; however, it does consolidate in one page what it has taken me a year to begin learning. I’ve tried to give attribution whenever I have borrowed from someone else–if I missed you, please let me know. If for no other reason that to learn by writing (it produced two books already), here is:

Hiking JavaScript, A Primer



JavaScript(TM) Oracle is a language developed under Netscape in 1995 by Brendan Eich in about 8 days. Originally named LiveScript, JavaScript fuses the syntax of Java with the richness of Self and Scheme (a successor of LISP). It is a functional language which is easily adapted to a variety of programming styles. LiveScript was originally intended to be a proprietary language for Netscape. This design choice was one of the motivating factors for the Browser Wars in the late 90s, early 00s. Microsoft reverse engineered LiveScript into JScript, and in their dedication, they preserved nearly every bug in the original version of the language. In response, Netscape took JavaScript to the W3C standards committee for ratification as a standard.  Trademark threats from then Java trademark owner Sun Micro forced the standard name to ECMAScript. ECMAScript 5 was ratified in 2009 and is often associated with HTML5 and CSS3 under the blanket “HTML5” alias. ES5 is fully supported by the latest versions of Chrome, Safari, Opera and Firefox. Internet Explorer 9 implements most of the standard, though strict mode is still not fully implemented in the pre-release versions of IE 10.


JavaScript is a loosely typed language. Nearly everything in JavaScript inherits from the Object type. The notable exceptions are null, undefined and a limited number of reserved keyword operators like typeof and instanceof (which should be used with caution). JavaScript implements native types for String, Number, Date, Boolean, Array and Function. Functions in JavaScript are Objects. They are first-class, an feature derived from LISP/Scheme. This is the feature that makes JavaScript one of the best modern programming languages.


In the Neolithic era, JavaScript was interpreted at run-time, line-by-line, by the browser. All modern browsers now compile at least some portion of loaded JavaScript into byte-code.

The Language


JavaScript supports a standard set of operators:


+ - * / %


== === != !== < <= > >=


&& || !


& | ^ >> >>> <<


? :


Never use single or double operator syntax!…!! Equality should always be evaluated using triple operator syntax. For example:

const x = 'false';    
!x; // true    
x == false; // true    
x === false; // false    

Single operator equality evaluation is only possible in the negative (!). Double operator evaluation can be either negative or positive (!= or ==). Each perform type coercion PRIOR to equality evaluation.

Unfortunately, greater than/less than operators perform type coercion as well.

‘1’ > 0; // true

'1' > '0'; // true    
'a' > 1; // false    
'a' < 1; // false    
'a' > '1'; // true    
'a' > 'b'; // false    



The following values are falsey in JavaScript, that is, type coercion will evaluate these to false:

  • false
  • null
  • undefined
  • "" (empty string)
  • 0
  • NaN

All other values (including objects [that means functions]) are truthy: 0 and false. Type coercion will evaluate these to true.

Never use the auto-increment or auto-decrement syntax (++/–)!! The plus and minus operators both add and subtract as well as concatenate. This has the potential to inject unanticipated bugs, as + will inconsistently induce type coercion. The + rule: if (both operands are numbers) { then add them } else { convert them both to strings and concatenate them }.

const x = `${1}1`; // 11    
const y = 1 + +'1'; // 2    
const z = ++[[]][+[]] + [+[]]; // "10"    

A plus/minus prefixed to a string is the right way to cast a string as a number. This type coercion is desired and expected. To avoid confusion, use parens to clearly communicate the intention of your code (when adding a coerced string to a number). For elaboration on z, see.

When your intention is to increment use the += 1/-=1 metaphor.


typeof returns unexpected results if handed null or an array. As such, it should be used with extreme caution. This is the return table for typeof:

Type typeof returns
Object ‘object’
Function ‘function’
Array ‘object’
Number ‘number’
String ‘string’
Boolean ‘boolean’
Null ‘object’
undefined ‘undefined’


The instanceof operator compares the constructors of its two operands. It is only useful when comparing custom objects. Used on native types, it is nearly as useless as the typeof operator.

Custom Objects:

function Foo() {}    
function Bar() {}    
Bar.prototype = new Foo();    
new Bar() instanceof Bar; // true    
new Bar() instanceof Foo; // true    
Bar.prototype = Foo;    
// This just sets Bar.prototype to the function object Foo    
// But not to an actual instance of Foo    
new Bar() instanceof Foo; // false    

Native Types:

new String('foo') instanceof String; // true    
new String('foo') instanceof Object; // true    
'foo' instanceof String; // false    
'foo' instanceof Object; // false    


All objects are declared either as variables or functions.

const number = 1;    
const string = 'string';    
const boolean = false;    
const date = new Date('10/13/2011');    
const array = [1, 2, 3];    
const object = { prop: 'prop' };    
function objFunction() {    
} // equivalent to var objFunction = function() { alert('hello'); };    

Type is not declared in variable declaration, which has lead some to call JavaScript an “untyped” language. This is not true. JavaScript is only loosely-typed. Type is inferred on assignment and a variable’s type can be changed at any time by reassignment or modification of the object prototype.

All types derived from Object have a few critical methods: constructor, prototype, hasOwnProperty and toString. In order to later determine a variable’s type, use the prototype.toString() method.


An object is a dynamic collection of properties. Every property has a key string that is unique within that object.

Unfortunately, property keys must resolve to strings–a key cannot be an more complex object. To address the issue of string resolution for property names, Object properties can be accessed literally or by string:

prop.key = '1';    
prop.key; // "1"    
prop.key = '1';    
prop.key; // "1"    
prop.key === prop.key; // true    

Object properties can be get, set and deleted:

const newObject = { prop1: 'new prop' };    
// get    
const x = newObject.prop1;    
const y = newObject.prop1;    
// set    
newObject.prop1 = 'changed prop';    
newObject.prop1 = 'changed prop';    
// delete    
delete newObject.prop1;    
delete newObject.prop1;    

Object literal notation:

// literal    
var myObject = { foo: bar };    
// explicit    
var myObject = Object.defineProperties(Object.create(Object.prototype), {    
  foo: {    
    value: bar,    
    writeable: true,    
    enumerable: true,    
    configurable: true,    


Object exposes a toString() method. Do not use it.

const obj = { a: 1, b: 2 };    
// toString === bad    
obj.toString(); // "[object Object]"    
obj.toString(); // "[object Object]"    
// JSON === good    
JSON.stringify(obj); // "{"a":1,"b":2}"    
JSON.stringify(obj); // "{"a":1,"b":2}"    


The most idiotically named type in any language, JavaScript implements a native type of String. String support is fully implemented in all current browsers (including IE 8). String’s indexOf() method should not be confused with Array’s. String also implements a length property, which is also not to be confused with Array. In the context of the type of String, length denotes the number of characters (including spaces) in a String object. String’s implementation is designed to remove most of the feature of the Object type to simplify and reduce string operation complexity.


The string.length property determines the number of 16-bit characters in a string. Extended characters are counted as 2.

The two most common errors with String manipulation occur out of its implementation of length.

First, when passing strings into (particularly 3rd party) modules which makes logical assumptions based on the existence of length, strings will produce unexpected behavior.

Second, if accidentally passed to a for() loop.

for (const i in 'string') {    

ES5 does not implement forEach() on the String type, but it is still possible to iterate a string in a for loop due to the indexOf() method. Because each character in a string has a unique, linear index number–String must also have a hasOwnProperty() implementation to find the character at a particular index.

const str = 'string';    
str[0]; // 's'    
str.hasOwnProperty('s'); // false    
str.hasOwnProperty(0); // true    


String implements a variety of useful methods which operate much as their names suggest:

  • charAt
  • charCodeAt
  • compareLocale
  • concat
  • indexOf
  • lastIndexOf
  • localeCompare
  • match
  • replace
  • search
  • slice
  • split
  • substring
  • toLocaleLowerCase
  • toLocaleUpperCase
  • toLowerCase
  • toString
  • toUpperCase
  • trim
  • valueOf


Calling toString() on a string returns itself–which is exactly what you would expect.


The Boolean type has no widespread, documented issues. Boolean variables can only be a strict true or false. Boolean implements hasOwnProperty() but is not subject to any of the potential problems with string as it does not have indexOf() or length.

const t = true;    
t.toString(); // "true"    
t.toString(); // "true"    


Boolean toString() works as expected.


Number is 64-bit floating point, similar to Double. There is no integer type. Division between two integers may produce a fractional result. Number also includes the special values NaN (not a number) and Infinity. The Number type in JavaScript is the most imperfectly implemented type.


Like most other languages:

(NaN === NaN)(    
  // false    
  NaN !== NaN,    
); // true    

When evaluating for NaN, always use an isNaN() method, such as the one in jQuery.

Floating Point

The first problem with floating point based number systems is that they cannot accurately represent decimal fractions. This means that:

0.2+0.7===0.9 //false

The Associative Law does not hold in JavaScript. This was not remedied in ES5 and will not likely be fixed anytime soon. As such:

(((a + b)+ c)+ d)!==((a + b)+(c + d))

Decimal computation in JavaScript is just bad. There is no way around it except to eliminate the decimal from math operations and return it later. This means that currency operations should begin with multiplying by 100 and end by dividing by the same. Decimal math should either be resolved server-side, or the server should eliminate decimals in communication with the client.


Math is not implemented on the Number type. It is its own object, which is good and bad. Bad that basic math methods are not available as immediate extensions of the number type and the subsequent code construction becomes heavy. Good, because almost all of the Math object’s methods are implemented correctly. Math implements constants for Pi and other common constant numbers as well as various methods for random(), log(), etc. Math is good–use it.


Number correctly implements toString().

const num = 1;    
num.toString(); // "1"    
num.toString(); // "1"    

Number Methods

  • toExponential
  • toLocaleString
  • toString
  • toFixed
  • toPrecision
  • valueOf


Date is the only type which really requires construction and assignment using the ‘new’ keyword. Dates cannot be easily inferred or coerced from String, Number or Object types–except in the case where the value of an Object property is a non-string literal date as sent from the server (in this case JSON.parse() can frequently cast the property value correctly as a date). So, date assignment is best done in the syntax:

var time =newDate('12:00');


Do not use the toString() method on Date types. Instead, use the date/time locale methods to generate an appropriate date string: toLocaleString(), toLocaleDateString(), etc.

Date Math

Date methods such as getTime() return as Integers, which means that Date math works without the problems inherent to the Number type.


JavaScript does not implement a true array. Instead, it augments the Object type into an array-like object which has a length property (count of indexes) and can access members by index number.

Arrays in JavaScript are also hashtable objects. This makes them very well suited to sparse array applications. When you construct an array, you do not need to declare a size. Arrays grow automatically, much like Java vectors. The values are located by a key, not by an offset. Indexes are converted to strings and used as names for retrieving values.

This makes JavaScript arrays very convenient to use, but not well suited for applications in numerical analysis. Each look-up by index requires a complete hash conversion, which makes arrays the least efficient type in the language.

Always prefer the literal form of array declaration (var x = [];) and remember that all your commas are belong to array.

// assignment by literal is preferred    
var arr = [1, 'bob', { x: 2 }, true, null];    
// assignment by constructor is valid but not preferred    
var arr = [1, 'bob', { x: 2 }, true, null]; // valid, but d    

Arrays are not typed, which means the value at each index can be of any type.


Unless you are certain that the value of every index in an Array is a string, boolean or number: do not use the toString() method–use JSON.stringify() instead.  NOTE: You can almost never be certain, so just use JSON.stringify().

const arr = [1, 'bob', { x: 2 }, true, null];    
arr.toString(); // "1,bob,[object Object],true,"    
arr.toString(); // "1,bob,[object Object],true,"    
JSON.stringify(arr); // "[1,"bob",{"x":2},true,null]"    
JSON.stringify(arr); // "[1,"bob",{"x":2},true,null]"    


Arrays, unlike objects, have a special length property. It is always 1 larger than the highest integer subscript.

const bobs = ['bob', 'robert']; // indexes 0, 1    
bobs[bobs.length] = 'rob'; // index 2    
bobs[bob.length] = 'bobby'; // index 3    

Array.length makes it possible to iterate an array in a for(var prop in arr) loop. Do not do this. Always prefer the for(var i =0; i < arr.length; i += 1) syntax, if you are not able to use Csw methods.


  • Do not delete array elements using delete.
const x = [0, 1, 2, 3];    
x.length; // 4    
delete x[1]; // true    
x.length; // 4x //[0, undefined, 2, 3]    
x.splice(1, 1); // undefined    
x.length; // 3x // [0,2,3]    

This sets the value of the element at the specified index === undefined. In almost all cases, this is not desired.

  • Internet Explorer < 9 does not fully implement Array. Most notably, in IE, Array’s do not have an indexOf() method.
  • In the context of an array, hasOwnProperty() should be used to verify the presence of an index position–not the value at an index.
  • indexOf() as with String is used to find the position of a value.
  • IE doesn’t always get length right. Beware.
  • DO NOT use the dot notation with Arrays. Always use brackets for fetch/assignment:
bobs[0]  // good    
bobs.0  //bad    

Array Methods

  • concat
  • every
  • filter
  • forEach
  • indexOf
  • join
  • lastIndexOf
  • map
  • pop
  • push
  • reduce
  • reduceRight
  • reverse
  • shift
  • slice
  • some
  • splice
  • toLocaleString
  • toString
  • unshift


Everything in JavaScript is an Object. Repeat this in a mirror three times.  Everything in JavaScript is an Object. Repeat this in a mirror three times.

In JavaScript, functions are objects. Functions are first class.

Objects can be passed as arguments to functions, and objects can be returned by functions.

  • Objects are passed by reference.
  • Objects are not passed by value.

This means that functions can be passed as arguments to functions, and that functions can be returned by functions.


The var statement declares and initializes a variable within a function. There is no other variable statement beyond var–type is not specified, it is inferred. Variables are scoped to functions: a variable declared anywhere in a function is visible everywhere in a function.

All defined variables are instanced when their function scope is instanced–this is known as hoisting. Variable instancing and assignment are thus split into two steps:

// As written:    
(function () {    
  const x = 1;    
  const y = [0, 1, 2, 3];    
  for (let z = 0; z < y.length; z += 1) {    
    const a = `yuppie_${z}`;    
// As executed:    
(function () {    
  let x;    
  let y;    
  let z;    
  let a;    
  x = 1;    
  y = [0, 1, 2, 3];    
  for (z = 0; z < y.length; z += 1) {    
    a = `yuppie_${z}`;    
  } // Observe that the value of 'a' will always be the value of 'yuppie_' + y.length-1. This is critical to understanding closure.    

Functions may be declared explicitly as variables or implicitly using shorthand, but they are compiled and interpreted identically.

// As written    
function MyFoo(id, value) {    
  return id === value;    
// As executed    
var MyFoo = undefined;    
MyFoo = function (id, value) {    
  return id === value;    


By design, all functions return a value. If no return statement is specified, the return value is undefined. With the use of return,any type of Object may be returned from a function.

The only exception to this rule is within functions called as constructors, that is called with the new prefix. When calling a function with new, such as in new Date(), the return is a new instance of the prototype of the specified object.

With few exceptions, we never need to do this in JavaScript.


var myDate =  new  Date('01/20/2011');    
throw  new  Error('unhandled exception');    
throw  new  TypeError('expected a type of function');    


JavaScript does not implement a classical inheritance model, it uses a prototypical one. A prototype based model can be extended to support a classical model, but the inverse is not true. While you can bend JavaScript to look like a classic model, it is almost always more efficient, readable and maintainable to work with the functional model.

Pseudo-classical style
function Gizmo(id) { = id;    
Gizmo.prototype.toString = function () {    
  return `gizmo ${}`;    
function Hoozit(id) { = id;    
Hoozit.prototype = new Gizmo();    
Hoozit.prototype.test = function (id) {    
  return === id;    
Functional Style
function gizmo(id) {    
  return {    
    toString() {    
      return `gizmo ${}`;    
function hoozit(id) {    
  const that = gizmo(id);    
  that.test = function (testid) {    
    return testid ===;    
  return that;    

The functional approach delivers the exact same result as the pseudo-classical approach, but it is cleaner and easier to understand.


Closure is one of the best parts of the language. When a function is instanced–assigned to a variable, it maintains the private variables which were declared within it. These variables are hidden from the global object and indeed from every other object in the same scope. Without closure, we write code like this:

// Globally scoped    
const names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];    
const digit_name = function (n) {    
  return names[n];    
alert(digit_name(3)); // 'three'    
  • This is problematic, because names is exposed to the global object. It can be modified by any other object at any time.

Slightly better, using function scope to protect names:

const digit_name = function (n) {    
  const names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];    
  return names[n];    
alert(digit_name(3)); // 'three'    
  • This is better. Names is protected and no one outside of digit_name can modify the names array; however, this is extremely slow. Names is redefined on every invocation of the function. In almost all practical use cases, the result will be slow execution.

Much better, using Closure:

const digit_name = (function () {    
  const names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];    
  return function (n) {    
    return names[n];    
alert(digit_name(3)); // 'three'    
  • This is much better. Names is still protected. This is also much faster. We are assigning the instance of an anonymous function which returns the function we need to perform the lookup. As long as digit_names remains in scope, it will persist a private closure with local, in-memory access to the names collection. Names is instanced only once and persists for the life of digit_names. Our behavior is fast and our variable is protected.

One of the nice features of closure is the ability to securely create, seal and open objects. In JavaScript, this kind of functionality is trivial to create:

function makeBoxes() {    
  const boxes = [];    
  const values = [];    
  return {    
    sealer(value) {    
      let box;    
      const i = boxes.length;    
      box = {};    
      boxes[i] = box;    
      values[i] = value;    
      return box;    
    unsealer(box) {    
      return values[boxes.indexOf(box)];    


Bells and Kazoos

Y Combinator

function y(le) {    
  return (function (f) {    
    return f(f);    
  })(function (f) {    
    return le(function (x) {    
      return f(f)(x);    
const factorial = y(function (fac) {    
  return function (n) {    
    return n <= 2 ? n : n * fac(n - 1);    
const number120 = factorial(5);    


Function implements toString(). Don’t use it.



ECMAScript does not specify a standard console object, but all modern browsers implement console. IE 8 included the last updates to the console object, carrying bugs in its support into IE 9. Firefox, Chrome, Opera and Safari keep feature parity on console through iteration: almost all changes to console by one vendor are adopted by the others in the next iteration.

Console is accessible in the DOM, which means that console calls can be placed inside JavaScript and then viewed in the actual browser console (ABC) at a later time. Console is also accessible outside the DOM, which means that console methods can be called in the ABC at any time.


  • log(context, arg1, arg2, n): Write an object to the console. log can take an arbitrary number of parameters (which it will concatenate together), and it supports inline parameter definition in the style of printf:
    • console.log("This function is %s %s.","foo","bar");//This function is foo bar.
      | - | Pattern | Type | | —– | ——- | | %s | String | | %d %i | Number | | %o | Object |
  • debug(context, arg1, arg2, n): console.log an object to the console with a link to the line number of execution.
    • In Chrome, log === debug === info
  • info(context, arg1, arg2, n): console.log an object to the console with a styling of info. (Blue circle with ‘i’).
    • In Chrome, log === debug === info
  • warn(context, arg1, arg2, n): console.log an object to the console with a styling of warning. (Yellow triangle with ‘!’).
  • error(context, arg1, arg2, n): console.log an object to the console with a styling of error. (Red circle with ‘x’).
  • assert(true === false): Output a truthy evaluation to the console if the assertion is false with a styling of error.


  • time: used to capture the start and end time for a particular identifier
console.time("Beginning Async Call #1");  //undefined    
console.timeEnd("Beginning Async Call #1");  //Beginning Async Call #1: 6319ms    
  • time(identifier) defines a string name to mark for a later timeEnd(identifier) to match against.
    • Multiple instances of console.time()..timeEnd() may be defined within the same function scope as long as each identifier is unique.
  • profile: used to capture verbose performance information for a particular identifier
console.profile("Begin Async Call #2");    
console.profileEnd("Begin Async Call #2");    
  • profile(identifier) defines a string name to mark for a later profileEnd(identifier) to match against.
    • profile behaves in the same manner as time, except the output will be more verbose.
    • profile verbose output appears in the “Profiles” tab of the console window.
  • timeStamp(indentifier): Used to output a timestamp with a string identifier.
    • markTimeline(): Parallel implementation
  • profiles: An array containing all currently defined profiles on the console object
  • memory: An object defining current memory consumption in the DOM
  • count(identifier): Outputs a count of the number of times identifier was called to the log. Useful for evaluating redundant method calls.


Console operations can be grouped into a single, collapsible console output: useful for outputting data across methods, modules and files and grouping the output together.

  • group: defines a logical grouping for a particular identifier"Async Calls #1");    
console.groupEnd("Async Calls #1");    
  • group(identifier) defines the beginning of a logical collection which groupEnd(identifier) terminates.
  • groupCollapsed(identifier): outputs a group by identifier to the log.


  • trace(): Outputs the call stack (at the moment trace is called) to the console
  • dir(element): Outputs an interactive representation of a DOM object with all of its properties to the console.
  • dirxml(element): Outputs an XHTML representation of a DOM object to the console.


**Your attempts to verify this claim may vary. Please update when an authoritative answer is found.