The JavaScript blog.


tutorials javascript games

You are a Robot...

Posted on .

That smiling face is you.

You are a robot, that smiling face represents you.

My digital residual self image isn't what it once was, but surely I'm more than a smiling face glyph! JS Robot by Pavel Evsegneev an open source game for learning JavaScript. The GitHub repository is here: Ahineya / jsrobot.

The levels are unit tested with Mocha, and the author accepts pull requests for new levels. Levels are defined as text files, like this:

#_  $f #

The _ is the start position, $ and # are walls, and f is the finish. The player must write JavaScript that pushes the robot to the f position. The full list of symbols is defined in map.js:

var SYMBOL_TYPES = {  
  '#': 'wall',
  '$': 'wall',
  'space': 'space',
  '_': 'start',
  'f': 'finish'

It's a fun game that may have a few surprises for beginners learning JavaScript, and the code is clean. You could easily extend it to have fancier graphics or a different narrative, but I like the text-based interface. It would be nice to optionally play it in a terminal by installing it with npm.


tutorials javascript

What Type?

Posted on .

Whilst reading Object-to-Primitive Conversions in
I wondered: what's a good way of checking types in JavaScript? A lot of
my work reflects on properties to detect capabilities, so I thought it
was an interesting question.

Given that Objects have a constructor property, I dimly
remembered that I'd seen this used somewhere to detect types. In fact,
it's pretty obvious that this is a good way to check for type

[1, 2, 3].constructor === Array
// true
[1, 2, 3].constructor === Number
// false

Certain types aren't objects though, because JavaScript does have
built-in types that behave differently. Section 8 of
ECMA-262 lists each of the types:

  1. Undefined
  2. Null
  3. Boolean
  4. String
  5. Number
  6. Object

As we've previously seen on DailyJS, using typeof on these
types can yield unintuitive results. A type checking algorithm should be
aware of this to filter out special cases for undefined and

After half-an-hour of experimenting I wrote this:

(function() {
  function isNull(obj, type) {
    return obj === null && type === null;

  function isUndefined(obj, type) {
    return typeof obj === 'undefined' && obj === type;

  function matchesConstructor(obj, type) {
    return obj.constructor === type;

  isType = function(obj, type) {
    if (isUndefined(obj, type)) {
      return true;
    } else if (isNull(obj, type)) {
      return true;
    } else if (matchesConstructor(obj, type)) {
      return true;
    return false;

I wrote some tests as I was developing it and it seems to hold up fairly
well. Check out the code and tests on GitHub:
istype.js. The code is intentionally explicit to make it easy for beginners to follow.


I had a related problem when writing a unit testing library -- what's
the best way of checking equality? Although this sounds simple, the
solution is quite deep. It requires a solid understanding of the
underlying types, objects and their behaviour. The best code I found was
in another testing library,

 equal: function(a, b) {
   if (typeof a != typeof b) return
   if (a === b) return true
   if (a instanceof RegExp)
     return a.toString() === b.toString()
   if (a instanceof Date)
     return Number(a) === Number(b)
   if (typeof a != 'object') return
   if (a.length !== undefined)
     if (a.length !== b.length) return
       for (var i = 0, len = a.length; i < len; ++i)
         if (!equal(a[i], b[i]))
   for (var key in a)
     if (!equal(a[key], b[key]))
   return true

What I liked about this approach was a lot of cases will shortcut early.

Even though these examples might seem mundane, it's worth remembering
that although JavaScript is generally a simple and clean language,
seemingly easy problems can require some attention to detail.


javascript blogs

JavaScript, JavaScript

Posted on .

JavaScript, JavaScript is a blog by Angus Croll in which he discusses high-level JavaScript concepts
and techniques. Recent articles include tutorials on
closures, throw, and

It's a blog that's worth following if you're interested in improving
your JavaScript fundamentals.

var undefined = true

This post on reddit is amusing: var undefined = true; /* the best way
to screw up whole javascript apps

It's not really as bad as it sounds because most of us do this:

if (typeof made_up_variable === 'undefined') { alert("it's cool, I'm cool.") }

The other way would be to write the following:

var magic_var;
if (magic_var == undefined) { alert('undefined!'); }

undefined = true;
magic_var = true;
if (magic_var == undefined) { alert('undefined!'); }

This has the worrying outcome of displaying undefined for both cases.


javascript humour


Posted on .

wtfjs is a blog of JavaScript's irregularities, inconstancies and unintuitive aspects. The author posts humorous code
snippets which are similar to the bad parts from Crockford's
JavaScript: The Good Parts.

Other than the obvious examples based around the confusing nature of
falsy and NaN, there are some interesting examples that might test your knowledge of JavaScript:

("foo" + + "bar") === "fooNaN"
(x=[].reverse)() === window // true

Am I suffering from a kind of blindness due to writing JavaScript for
too long, or does the following make sense?

"string" instanceof String; // false
(new String("string")) instanceof String; // true

Of course it's false, it's a string literal rather than an instance of
String! Is it useful to distinguish between string literals and
instances of String?


javascript graphics

JavaScript 3D: Pre3D

Posted on .

WebGL is coming, and is in fact already present in developer preview
builds of Firefox, WebKit nightly and Chrome. Technically it's possible
to draw 3D graphics without WebGL. The
Pre3d library by Dean McNamee does this, citing Kragen's
as inspiration.

It has a simple API, with syntax like this:

var path = new Pre3d.Path();
path.points = new Array(size);
path.curves = new Array(size);

Dean has some interesting comments in the source for
pre3d.js with details on his design philosophy:

Because Arrays always go through the key lookup path, and there is no way to do a named lookup, it is faster to use objects than arrays for fixed size storage. You can think of this like the difference between a List and Tuple in languages like python

What about WebGL?

If you're dying to start using WebGL now, I found an excellent blog
called Learning WebGL. It has thorough
lessons and a