angular.module("module") is an anti pattern


There are two ways to use the angular.module() function. There is the call with one parameter, that returns an existing module and there is an option of using two parameter which creates a new module. The second way, where a new module is created, is perfectly fine and should be used. However the first option, where an existing module is loaded should be considered and anti pattern in most cases and should not be used unless there is an exceptional and very good reason.


What is wrong with angular.module(“module”)?

Why should this usage be seen as an anti pattern? Well both creating and retrieving using angular.module() returns the module so it can be extended. And that is exactly where the problem is. When you create a new module in a JavaScript file you can use that reference to add anything you want, no need to load it again. So the only place loading an exiting module is needed is when you want to add something to it in another JavaScript file.

Splitting modules introduces a big risk. As soon as you split an AngularJS module into separate files you can run into the possibility of loading a partially configured module. Where AngularJS checks if all module dependencies can be satisfied at load time it has no way of seeing if these modules are complete or not.  Missing a complete module produces a very clear error message right at startup time like this:

Uncaught Error: [$injector:modulerr] Failed to instantiate module mainApp due to:
Error: [$injector:modulerr] Failed to instantiate module due to:
Error: [$injector:nomod] Module ‘’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you

As the complete application fails to load very obvious and hard not to spot.


However if you fail to load just a part of a module the errors are a lot less obvious. In this case the error doesn’t appear until the missing component is actually needed, everything up to that point will run just fine.  The king of error message you will see is something like:

Error: [$injector:unpr] Unknown provider: productsProvider <- products

The error in itself is clear enough but discovering it might not be as easy. If the error occurs in a part of that application that is not used often it might go completely unnoticed.


My rule of the thumb: Always define a complete AngularJS module in one JavaScript file.


Want to split the functionality into multiple files. By all means go ahead but make sure to do so in a new module and take use module dependencies to make sure everything is loaded right at the application start time. And as angular.module(“module”) is only required to load a module defined in another file there really should almost never be a need to use it.


Using browserify to manage JavaScript dependencies

Managing JavaScript dependencies in the browser is hard. Library scripts typically create global variables and functions. Other scripts now depend on those global objects to do their work. This works but in order to load all required scripts we have to add <script> elements to our HTML, making sure to add them in the right order, and basically know what each exposes.

The problem

Consider the following client side code:

   1: // Print a message
   2: utils.print("Hello");


This depends on another piece of script below:

   1: // Expose the utility object with it's print function
   2: var utils = {
   3:     print: function(msg){
   4:         console.log(msg);
   5:     }
   6: };


And for all of that to work we have to load the scripts in the right order using some HTML as below:

   1: <!DOCTYPE html>
   2: <html>
   3: <head lang="en">
   4:     <meta charset="UTF-8">
   5:     <title>Browserify demo</title>
   6: </head>
   7: <body>
  10: <script src="utils.js"></script>
   2: <script src="demo.js">
  12: </body>
  13: </html>


Not really rocket science here but if we want update utils.print() to call a printIt() function loaded from yet another library we have to go back to our HTML and make sure we load the printIt.js as well. Easy in a small app but this can become hard and error prone with larger applications.


Browserify to the rescue

Using browserify will make managing these dependencies a lot easier. To understand how it works we first must take a quick look at how NodeJS modules work.

With node each module can take a dependency on another module by requiring it using the require() function. And each module can define what it exports to other modules by using module.exports. The NodeJS runtime takes care of loading the files and adding dependencies inside a module will not require a change anywhere else in the program.

This system works really nice but unfortunately the browser doesn’t provide this NodeJS runtime capability. One problem here is that a call to require() is a synchronous call that returns the loaded module while the browser does all of its IO asynchronously. In the browser you can use something like RequireJS to asynchronously load scripts but while this works file this is not very efficient due to its asynchronous nature. As a result people usually use RequireJS during development and then create a bundle with all the code for production.

Browserify on the other hand will allow us to use the synchronous NodeJS approach with script loading in the browser. This is done by packaging up all files required based on the require() calls and creating one file to load at runtime. Converting the example above to use this style requires some small changes in the code.

The demo.js specifies it requires utils.js. The syntax “./utils” means that we should load the file from the same folder.

   1: var utils = require("./utils");
   2: // Print a message
   3: utils.print("Hello");


Next the utils.js specifies what it exports:

   1: // Expose the utility object with it's print function
   3: var utils = {
   4:     print: function(msg){
   5:         console.log(msg);
   6:     }
   7: };
   9: module.exports = utils;


Next we need to run browserify to bundle the file for use in the browser. As browserify is a node application we need to install node and then, through the node package manager NPM, install browserify with

   1: npm install -g browserify


With browserify installed we can bundle the files into one using:

   1: browserify demo.js > bundle.js

This will create a bundle.js with the following content:

   1: (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
   2: var utils = require("./utils");
   3: // Print a message
   4: utils.print("Hello");
   6: },{"./utils":2}],2:[function(require,module,exports){
   7: // Expose the utility object with it's print function
   9: var utils = {
  10:     print: function(msg){
  11:         console.log(msg);
  12:     }
  13: };
  15: module.exports = utils;
  16: },{}]},{},[1]);


Not the most readable but then that was not what it was designed to do. Instead we can see all code we need is included. Now by just including this generated file we ready to start our browser application.

Adding the printIt() function

Doing the same change as above is simple and best of all doesn’t require any change to the HTML to load different files. Just update utils.js to require() printIt.js and explicity export the function in printIt.js, rerun browserify and you are all set.

   1: function printIt(msg){
   3: }
   5: module.exports = printIt;


Note that it’s fine to just export a single function here.


   1: // Expose the utility object with it's print function
   2: var printIt = require("./printIt");
   4: var utils = {
   5:     print: function(msg){
   6:         printIt(msg);
   7:     }
   8: };
  10: module.exports = utils;

And the result of running browserify is:

   1: (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
   2: var utils = require("./utils");
   3: // Print a message
   4: utils.print("Hello");
   6: },{"./utils":3}],2:[function(require,module,exports){
   7: function printIt(msg){
   9: }
  11: module.exports = printIt;
  13: },{}],3:[function(require,module,exports){
  14: // Expose the utility object with it's print function
  15: var printIt = require("./printIt");
  17: var utils = {
  18:     print: function(msg){
  19:         printIt(msg);
  20:     }
  21: };
  23: module.exports = utils;
  24: },{"./printIt":2}]},{},[1]);

Again not the most readable code but the printIt() function is now included. Nice and no changes required to the HTML :-)

Proper scoping

As a side benefit browserify also wraps all our JavaScript files in a function ensuring that proper scope for variables is used and we don’t accidently leak variables to the proper scope.


Using browserify works really nice but this way we do have to start it after every time. In the next blog post I will show how to use Gulp or Grunt to automate this making the workflow a lot smoother.



X things every JavaScript developer should know: Automatic Semicolon Insertion

As with many other things in JavaScript Automatic Semicolon Insertion is usually not a problem but it can occasionally bite you if you are unaware of it. What Automatic Semicolon Insertion does is really simple. It basically boils down to semicolons being optional in JavaScript and the parser  injecting them when it is appropriate. That might sound very nice, after all you can leave semicolons out and the right thing will happen. For example the following code, without a single semicolon, is completely valid and will print a sum of 3 as expected:

   1: console.log(add(1, 2))
   3: function add(x, y) {
   4:     var sum
   5:     sum = x + y
   6:     return sum
   7: }


What basically happens is that the JavaScript parser adds a semicolon at the end of each line if that doesn’t cause the syntax to become invalid. See section 7.9.1 of the ECMA-262 standard or read it online here.

Now that might sound great but it turns out that Automatic Semicolon Insertion can cause some interesting issues :-(

JavaScript style rules

One thing you might have noticed that the normal style of writing JavaScript is different than that of C# or Java. Compare the JavaScript code above with the same C# code below:

   1: public int Add(int x, int y)
   2: {
   3:     int sum;
   4:     sum = x + y;
   5:     return sum;
   6: }

Besides the obvious difference with the typing and the required semicolons the open curly brace for the add function is on the same line as the declaration in JavaScript and the next line in C#. While the JavaScript conventions would work fine in C# the reverse is not always the case. If we reformatted the JavaScript to the following the code, in this case, would still run fine.

   1: function add(x, y)
   2: {
   3:     var sum
   4:     sum = x + y
   5:     return sum
   6: }


However if we would return an object literal and format our code the same way we would run into a problem. Consider the following code:

   1: console.log(add(1, 2))
   3: function add(x, y) {
   4:     var sum
   5:     sum = x + y
   7:     return
   8:     {
   9:          sum: sum
  10:     }
  11: }

You might expect this to print an object with a property sum containing the value 3. However the code prints “undefined”. Compare that with the following code that is only formatted differently:

   1: console.log(add(1, 2))
   3: function add(x, y) {
   4:     var sum
   5:     sum = x + y
   7:     return {
   8:         sum: sum
   9:     }
  10: }


This will print the expected object with a sum of 3.


Blame JavaScript Automatic Semicolon Insertion

This unexpected behavior is caused by semicolon insertion. instead of the code you most likely think will execute the following executes:

   1: console.log(add(1, 2));
   3: function add(x, y) {
   4:     var sum;
   5:     sum = x + y;
   7:     return;
   8:     {
   9:         sum: sum
  10:     };
  11: }

Notice the semicolon after the return statement?

That actually means return nothing, i.e. undefined, and just have some unreachable code on the next few lines. That is completely valid so that is what happens :-(

Best practices

The general advice, even though it doesn’t protect you is to always add semicolons and not leave it up the the JavaScript parser. It doesn’t really help a lot because the parser will still inject semicolons of it thinks it is appropriate. So the only real solution is to use the JavaScript formatting conventions and ensure that the open curly brace of the object literal is after the return statement. That way adding a semicolon there is invalid and you can be sure the right thing happens.

Unfortunately ‘use strict’ doesn’t help here either. It will prevent some errors but it doesn’t make semicolons required :-(


X things every JavaScript developer should know: Comparisons

Another item of things every JavaScript developer should know is how comparisons work. Just like with some of the other JavaScript, or I should really say ECMAScript, features anything you know about C# or Java could actually be misleading here.


To == or to ===

One of the weird things is there are actually two comparison operators in JavaScript, the double and the triple equals. The == is called the equals operator, see section 11.9.1 of the ECMAScript standard, and was the original equality operator. Unfortunately the way this operator works is quite some cause for confusion and as a result the === or Strict Equals operator was introduced, see section 11.9.4 of the ECMAScript standard. It would have been nice if they had just fixed the original problem but if they had they would have broken existing JavaScript applications.

In general I would always advise you to use the Strict Equals Operator or === whenever you do a comparison unless you have a specific need for the behavior or the original operator.


What is the problem with ==

I mentioned that == has problems and should be avoided but its still helpful to understand these problems. These problems basically boil down to the fact that the == operator does type conversions if the two types being compared are not the same. For example the following all evaluate to true:

   1: 0 == "0" // true

   2: 1 == "1" // true

   3: 2 == "2" // true

Sounds reasonable enough right?


Unfortunately it isn’t quite that simple all of the following evaluate to false:

   1: false == "false" // false

   2: true == "true" // false

These might seem weird, especially since the following evacuates to true again:

   1: true == !!"true" // true

So what is going on here?

The Abstract Equality Comparison Algorithm

Section 11.9.3 of the ECMAScript standard describes what is happening here. If one operand is a number and the other a string, as was the case in the first examples, the string is converted to a number and the comparison is done based on those. So basically these comparisons where:
   1: 0 == 0 // true

   2: 1 == 1 // true

   3: 2 == 2 // true


So what was the case in the other two comparisons?

In these cases almost the same happens and the Boolean values are converted to a number. That leaves a number to string comparison where the string is also converted to a number. And the result of converting true and false to a number is 1 and 0 but the result of the string to number conversions is an invalid number or NaN. And NaN being not equal to any other number means those comparisons result in false.

So why did the last comparison true == !!”true” evaluate to true? Well simple the double bang operator !! is evaluated first and a non empty string is truthy. End result of that is the expression true == true and that is obviously true. Sounds reasonable but that also means that any non empty string will result in true, so even true == !!"false" evaluates to true :-(



The double equality operator is a confusing part of the JavaScript history. You are best of to avoid it an use the Strict Equals Operator === instead.



Converting the RavenDB Northwind database to a more denormalized form

In a previous blog post I demonstrated how to denormalize the RavenDB sample database and use the DenormalizedReference<T> and INamedDocument types from the RavenDB documentation to make life really sweet. That leaves us with one small problem and that is that the original sample database doesn’t work with our improved document design. With the sample database, small as it is, loading all document as a dynamic type, converting them and saving them would be easy enough but in a real database that would not be practical. So lets look at a better solution fixing the database.


Updating the database on the server

Instead of downloading each document, updating the structure and saving it back to the server it is much better to do these sort of actions on the server itself. Fortunately RavenDB has the capability to execute database commands on the server. These update commands can be PatchRequest objects that will let you do a large number of things using a nice C# API. And a the ultimate fallback there is the ScriptedPatchRequest which will let you execute a block of JavaScript code on the server. Why JavaScript? Well RavenDB stores things in JSON and the server is really not dependent on a .NET client.

Using the ScriptedPatchRequest we can either execute a patch on a single document or on a collection of documents. In this case I want to update all Order documents to reflect their new structure. It turns out this is quite simple


   1: using (IDocumentStore documentStore = new DocumentStore

   2: {

   3:     ConnectionStringName = "Northwind"

   4: }.Initialize())

   5: {

   6:     var javaScript = @"...";


   8:     documentStore.DatabaseCommands.UpdateByIndex(

   9:         "Raven/DocumentsByEntityName",

  10:         new IndexQuery

  11:         {

  12:             Query = "Tag:Orders"

  13:         },

  14:         new ScriptedPatchRequest

  15:         {

  16:             Script = javaScript

  17:         });

  18: }

This code will execute the JavaScript code to patch the document once for each document in the Orders collection.


The JavaScript code to execute is quite simple, just make the changes required to the document and you are set.

   1: var company = LoadDocument(this.Company); 

   2: this.Company = {Id: this.Company, Name: company.Name};


   4: var employee = LoadDocument(this.Employee);

   5: this.Employee = {Id: this.Employee, Name: employee.FirstName + ' ' + employee.LastName};


   7: var shipVia = LoadDocument(this.ShipVia); 

   8: this.ShipVia = {Id: this.ShipVia, Name: shipVia.Name};


  10: this.Lines.forEach(function(line){

  11:     var product = LoadDocument(line.Product); 

  12:     line.Product = {Id: line.Product, Name: product.Name};

  13:     delete line.ProductName;

  14: });


In this case I am converting the Company, Employee, ShipVia and Product properties to have the new structure. Additionally I am removing the ProductName from the OrderLine as that is no longer needed.


Sweet :-)

Denormalizing data in RavenDB

One of the things with RavenDB, or NoSQL document databases in general, is that you don’t do joins to combine data. Normally you try to model the documents you store in such a way that the data you need for most common actions is stored in the document itself. That often means denormalizing data. When you first get started with document databases that feels strange, after all with relational databases we are taught to normalize data as much as possible and not repeat the same values. Where normalizing data is great for updates and minimizing the size of databases it is less than ideal for querying. This is because when querying we need to join various tables to turn abstract foreign keys into something that is actually understandable by the end user. And while relational databases are pretty good at joining tables these operations are not free, instead we pay for the that with every query we do. Now it turns out that most applications are read heavy and not write heavy. And as a result optimizing writes  actually hurts something like 99% of the database operations we do.

With document database like RavenDB we can’t even do a join action. When we normalize data the client actively has to fetch related data and turn those abstract identities to other documents into, for a user, meaningful values. Normally the documents in a RavenDB database are much more denormalized that similar data in a SQL server database would be. The result is that for most operations a single IDocumentSession.Load() is enough to work with a document.


That data makes sense to denormalize?

Not everything makes sense to denormalize, normally only relatively static data that is frequently needed is denormalized. Why relatively static data? Simple, every time the master document for that piece of data is updated all documents where it might be denormalized also need to be updated. And while not especially difficult it would become a bottleneck if it happened to often. Fortunately there is enough data that fits the criteria.


The RavenDB example data

The de-facto sample data for SQL Server is the Northwind database. And by sheer coincidence it so happens that RavenDB also ships with this same database, except now in document form. With lots of .NET developers being familiar with SQL Server this Northwind database is often the first stop at how a document database should be constructed.


As you can see in the screenshot from the RavenDB studio a relatively small number of collections replaces the tables from SQL Server. Nice :-)


The structure used to save an order is also nice and simple, just the Order and OrderLine classes saved in a single document.

   1: public class Order

   2: {

   3:     public string Id { get; set; }

   4:     public string Company { get; set; }

   5:     public string Employee { get; set; }

   6:     public DateTime OrderedAt { get; set; }

   7:     public DateTime RequireAt { get; set; }

   8:     public DateTime? ShippedAt { get; set; }

   9:     public Address ShipTo { get; set; }

  10:     public string ShipVia { get; set; }

  11:     public decimal Freight { get; set; }

  12:     public List<OrderLine> Lines { get; set; }

  13: }


  15: public class OrderLine

  16: {

  17:     public string Product { get; set; }

  18:     public string ProductName { get; set; }

  19:     public decimal PricePerUnit { get; set; }

  20:     public int Quantity { get; set; }

  21:     public decimal Discount { get; set; }

  22: }


One missing thing

Nice as this may be there is one missing thing. Other than the product name being sold and it’s price there is no data denormalized. This means that if we want to display to the user for even the most basic of uses we will need to load additional document. For example the Company property in an order just contains the identity of a customer. If we want to display the order the very least we would have to do is load the company and display the customers name instead of its identity. And the same it true for the employee and shipper.

While this sample database is not denormalized it turns out is is quite easy to do so ourselves.


Denormalizing the RavenDB Northwind database

The first step is to store the related name along with each referred to identity as seen below.



The order is the same but this time we can do common user interaction operations with just the one document and not be required to load additional documents. It turns out this is quite easy to do. The RavenDB documentation has a nice description on how to do that using INamedDocument and DenormalizedReference<T>. Using this technique makes it really easy and consistent to work with denormalized data and create a document structure like the one above. The change to the Order and OrderLine classes are minimal. All I had to do is replace the string type Company property with one of type DenormalizedReference<Company>.

   1: public class Order

   2:  {

   3:      public string Id { get; set; }

   4:      public DenormalizedReference<Company> Company { get; set; }

   5:      public DenormalizedReference<Employee> Employee { get; set; }

   6:      public DateTime OrderedAt { get; set; }

   7:      public DateTime RequireAt { get; set; }

   8:      public DateTime? ShippedAt { get; set; }

   9:      public Address ShipTo { get; set; }

  10:      public DenormalizedReference<Shipper> ShipVia { get; set; }

  11:      public decimal Freight { get; set; }

  12:      public List<OrderLine> Lines { get; set; }

  13: }


  15: public class OrderLine

  16: {

  17:     public DenormalizedReference<Product> Product { get; set; }

  18:     public string ProductName { get; set; }

  19:     public decimal PricePerUnit { get; set; }

  20:     public int Quantity { get; set; }

  21:     public decimal Discount { get; set; }

  22: }


The DenormalizedReference<T> and INamedDocument are also really simple and straight from the RavenDB documentation.

   1: public class DenormalizedReference<T> where T : INamedDocument

   2: {

   3:     public string Id { get; set; }

   4:     public string Name { get; set; }


   6:     public static implicit operator DenormalizedReference<T>(T doc)

   7:     {

   8:         return new DenormalizedReference<T>

   9:         {

  10:             Id = doc.Id,

  11:             Name = doc.Name

  12:         };

  13:     }

  14: }


  16: public interface INamedDocument

  17: {

  18:     string Id { get; }

  19:     string Name { get; }

  20: }


The implicit cast operator in the DenormalizedReference<T> makes using this really simple. Just assign a property and it will take case of the proper reference needed.

   1: var order = session.Load<Order>("orders/42");

   2: order.Company = session.Load<Company>("companies/11");


One useful extension method

Loading the single document and doing common operations should be easy now but there are still operations where you will need more data from the related entity. Loading them is easy enough.

   1: var customer = session.Load<Company>(order.Company.Id);


However using the DenormalizedReference<T> the structure and type is already captured in the Order class. Using this with a simple extension method makes the code even simpler which is always nice :-)

   1: public static class IDocumentSessionExtensions

   2: {

   3:     public static T Load<T>(this IDocumentSession session, DenormalizedReference<T> reference)

   4:         where T : INamedDocument

   5:     {

   6:         return session.Load<T>(reference.Id);

   7:     }

   8: }


This simple extension method will let is load the customer as follows:

   1: var customer = session.Load(order.Company);


Saves another few keystrokes and completely type safe. Sweet :-)



Tracking dirty objects in AngularJS

Tracking if an object is changed or not in AngularJS is quite easy but is also part of the UI so not always completely obvious. If you want to see if there are changes the $scope or the model will not tell you. Instead you need to take a look at the ngForm FormController. It has a $dirty flag that will tell you if an object is dirty or not. Saving that to the model itself is really easy, just use an ngForm directive, and the form element is automatically an ngForm directive, and the FormController will be added to the scope under the name you added, in the example below it is named frm. Next just set up a $watch() and Bob is your uncle :-)


   1: <!DOCTYPE html>

   2: <html>

   3: <head>

   4:     <style>

   5:         [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],

   6:         .ng-cloak, .x-ng-cloak {

   7:             display: none !important;

   8:         }

   9:     </style>

  10: </head>

  11: <body ng-app="app" ng-controller="demoCtrl">

  12:     <form name="frm">

  13:         <input type="text" ng-model="person.firstName" />

  14:         <hr />

  15:         {{person | json}}

  16:     </form>


  18:     <script src="scripts/angular.js"></script>
   2:     <script src="Script1.js">

  19: </body>

  20: </html>


   1: (function (angular) {

   2:     function demoCtrl($scope) {


   4:         $scope.person = {

   5:             firstName:"Maurice"

   6:         };


   8:         $scope.$watch("frm.$dirty", function(newValue) {

   9:             $scope.person.isDirty = $scope.person.isDirty || newValue;

  10:         });

  11:     }


  13:     angular.module("app", [])

  14:         .controller("demoCtrl", demoCtrl);

  15: }(angular));



X things every JavaScript developer should know: Truthy and falsy

One thing that developers often confuses with JavaScript is Boolean logic. It seems to simple, you use for example an if statement and put a boolean expression in there and if it is true the block of code is executed other wise the else block is executed. Something like this:

   1: (function () {

   2:     var data = [];


   4:     if (data.length > 0) {

   5:         console.log("The data array is not empty");

   6:     } else {

   7:         console.log("The data array is empty");

   8:     }

   9: }());


And if you run it it will do exactly what you would expect, so what is the big deal here?


There is more to Boolean logic in JavaScript

Well it turns out that most JavaScript developers don’t write the code like this. In fact the code would probably look more like this:

   1: (function () {

   2:     var data = [];


   4:     if (data.length) {

   5:         console.log("The data array is not empty");

   6:     } else {

   7:         console.log("The data array is empty");

   8:     }

   9: }());

Instead of comparing the array length to a number the array length is used as the actual boolean operator. But that is a number so what gives?


Instead JavaScript uses Truthy and Falsy

Instead of just using booleans JavaScript actually uses truthy and falsy instead. The rules are actually quite simple, a few values are considered to be falsy and all others are truthy. The falsy ones are:

  • false (obviously)
  • The number 0.
  • The empty string “”.
  • null
  • undefined
  • NaN (Not a Number)

Everything else is considered to be truthy!


This is why the test if (data.length) actually works the same as the first example. If the data array is empty the length is 0 and therefore falsy. Otherwise the length is larger than 0 and it is truthy.


Common JavaScript logic

In JavaScript this falsy behavior is commonly for all sort of logic, for example:

   1: function doSomething(options) {

   2:     options = options || {};

   3:     // Do something usefull with the options object

   4: }


   6: doSomething();

   7: doSomething({});


In the function doSomething we basically check if the options if truthy. If it is passed the way it is supposed to, like in the second call, it will be thruthy and the value will be used as is. On the other hand if it is not passed the value will be undefined, which is falsy, and the logic will default it to the empty object. This is what happens in the first call.


The double bang operator

One trick that sometimes baffles people when they first see it is the double bang operator !!. Just like with many other languages the ! operator inverts a boolean expression. In the case of JavaScript it’s effect is to turn a truthy/falsy expression into the equivalent opposite and then back into the equivalent boolean of the original expression. Often used if you need to pass a boolean value and want to make sure some other code can’t misbehave with the variable passed.

   1: (function () {

   2:     var data = [];

   3:     var noData = null;


   5:     console.log(!!data); // true

   6:     console.log(!!data.length); // false

   7:     console.log(!!noData); // false

   8: }());


It might look weird the first time you see it but once you understand the way JavaScript works it makes perfect sense :-)



X things every JavaScript developer should know: use strict

In the previous blog post I explained that you should normally use an Immediately-Invoked Function Expression (IIFE) to give variables function scope. That works fine as log as we remember to declare our variables using the var keyword. However when we forget the var keyword we are back to the original problem as the variables are added to the global scope.


Leaking undeclared variables

As you can see in the two code snippets below the text variables are not declared using var. Even though they are only used inside a function they are still added to the global scope. The end result is that the variables are added to the window object and the second scripts overwrites the variable from the first script. And JavaScript being really relaxed doesn’t really case about missing var keywords, it will just do its thing, however wrong the result may be :-(


   1: (function() {

   2:     text = "Hello from script 1";


   4:     setTimeout(function () {

   5:         console.log(text);

   6:     }, 1000);

   7: }());


   1: (function() {

   2:     text = "Hello from script 2";


   4:     setTimeout(function () {

   5:         console.log(text);

   6:     }, 1000);

   7: }());


These two scripts result in the following output:



Running JavaScript in strict mode

Fortunately there is a way that the JavaScript runtime can help us prevent this. The way to do that is by adding the string ‘use strict’ to our code. This might seem a bit strange as it is just a string. The reason for this is that it was added in ECMAScript 5 and doing it this way doesn’t cause an error in older browsers. All they see is a string that is not assigned to a variable. Not very useful but not an error either.

Just like variables ‘use strict’ is scoped to a function. So adding it applies it to that function and all nested ones. You could also add it outside of a function scope but that would change the default for all JavaScript executed in that window. This is because it changes the global scope and all other functions are defines as children of that global scope. In all likelihood you will be using some third party library and you cannot really know if all of them are compatible with ‘use strict’ so never go and change the global scope.


Adding ‘use strict’ to the IIFE in script2.js produces the following result. As you can see it only affects script2.js and that now throws and error about the missing var statement while script1.js runs unaffected.

   1: (function () {

   2:     'use strict';

   3:     text = "Hello from script 2";


   5:     setTimeout(function () {

   6:         console.log(text);

   7:     }, 1000);

   8: }());




Other effects of ‘use strict’

In this case I am mostly concerned about using ‘use strict’ to find missing variable declaration it actually does more than just that. It will disable a number of potential dangerous JavaScript features. One of the other things it disables is using the call stack from a JavaScript function. See this article for more information.



The drawback of ‘use strict’

While I would live to recommend that you always use ‘use strict’ it turns out there are a few potential issues. While ‘use strict’ is scoped the function and nested functions it turn out it also affects non nested functions that might be called. I mentioned the fact that walking the call stack is disabled. However the way this is done is not consistent between browsers and can result in unexpected results. Take the following program:

   1: (function() {

   2:     function printCaller() {

   3:         var fn = arguments.callee;

   4:         while (fn) {

   5:             console.log(fn.toString().split("\n")[0]);

   6:             fn = fn.caller;

   7:         }

   8:     }


  10:     function doMoreWork() {

  11:         printCaller();

  12:     }


  14:     function doWork() {

  15:         'use strict';


  17:         doMoreWork();

  18:         console.log("All done");

  19:     }


  21:     doWork();

  22: }());


The doWork() function enables ‘use strict’ and calls doMoreWork() which calls printCaller(). Neither of the last two run with ‘use strict’.

When run in Chrome this produces the following result:


With FireFox we see the following:


And with Internet Explorer 11 we get the following:


Both IE and FireFox throw a runtime error when trying to read doWork() but Chrome just returns a null so the code doesn’t throw an error and continues.

The reason this turns out to be an issue for some people is that the Microsoft AJAX libraries contain similar stack walking code that starts failing on FireFox and IE as soon as you enable ‘use strict’. I am sure there are similar problems with other libraries but this is one Microsoft developers frequently run into if they are still using the AJAX libraries.


Use ‘use strict’ wherever you can but be aware of the differences in browser implementations that can trip you up.