Using FP to prevent ‘Cannot read property of undefined errors’ (A.K.A. Array.reduce rocks)

‘Cannot read property of undefined errors’ are common when using JavaScript or TypeScript.  While some languages, such as CoffeeScript, have the existential operator which checks for the existence of an object, it doesn’t currently exist in JavaScript.

This means the following will throw an exception:

 const myObject = {};
  const zipcode = myObject.homeOwner.address.zipcode;

Of course it’s easy to see in this example.  However, if you receive myObject from a REST service call and it may not return the full object, it’s easy to miss.

The first approach to resolving this is typically:

let zipcode = {};
if (myObject && myObject.homeOwner
   && myObject.homeOwner.address) {
    zipcode = myObject.homeOnwer.address;
  }

Of course, this becomes very cumbersome and obfuscates what you’re really trying to do. Functional programming techniques can provide shortcuts for preventing these kinds of errors.  This is where Array.reduce comes to the rescue:

let _ = function (instance, path) {
  return path.split('.').reduce((p, c) => p ? p[c] : undefined,instance);
}

let zipcode = _(myObject,'homeOwner.address.zipcode');

Super cool!  This 1-line function splits the path parameter into an array of accessors and uses reduce to iterate through them and either return undefined or the value of the final property.

Check out the safe-get github repo or npm package for more info, tests and examples.

TL;DR

Functional programming rocks.  Use safe-get

A project template for WebPack + TypeScript (A.K.A. Framework Fragmentation Frags Developers)

hand grenade

wet-template

One of the wonderful things about the rise of open source is the corresponding increase in framework and library options.  One of the biggest disadvantages is the huge fragmentation caused by this increase in options.

If you’ve ever played a first-person shooter, you’re probably familiar with the term “fragging“.  Gamers frequently use this term, although it was coined during the Vietnam war to represent deliberate killing of an unpopular team-member.  The number of JavaScript library/framework combinations is staggering (26,000 listed on GitHub) and easily leads to developer brain implosion — hence the title: “Framework Fragmentation Frags Developers”.

dynamite

After researching numerous various options and prototyping with several different frameworks / libraries, languages and build tools (Babel, TypeScript, Grunt, Gulp, Bower,Webpack, Aurelia, React, ad infinitum), I’ve found what I consider to be the best (read most likely not to be dead/deprecated within 6 months).

Truthfully, this is a fairly minimalist solution as it allows me to customize each project easily.  It includes the following:

  • A testing framework (Mocha + Chai  — run-away community favorites)
  • Build scripts (NPM scripts are powerful, cross-platform and minimalist)
  • A bundler (Webpack -relatively easy, powerful, well-supported)
  • A linter (TypeScript — okay, this is more a language than a linter but close enough)
  • An initial project structure (it’s amazing how much time teams spend arguing about this)
  • VS Code bindings (An excellent, minimalist, hackable editor)

So, without further ado, here’s how to use the template:

  1. clone the wet-template repository (WEbpack + Typescript – ‘wet’, get it?)
  2. From a shell / command prompt do the following:
    1. ‘npm install -dev’
    2. ‘code .’
  3. Create a new git repo in a separate folder
  4. Copy everything except the .git folder into your new repo.
  5. Modify the package.json in this new folder to account for your git repo, description, keywords, author, etc.

Dude, where’s my code

wet-template folder structure
wet-template folder structure
  • src – All of your source code (TypeScript files) should be in the src folder.
  • test – Tests, surprisingly, are placed in the test folder (again, TypeScript here).
  • build – The TypeScript compiler places files that are compiled into JavaScript (by pressing ctrl+shift+B) in the build folder
  • dist – bundled (via webpack) JavaScript ready for distribution (e.g. via npm) are located here
  • example – examples (html pages, etc.) are placed here.  This folder can also be used for hosting an app if desired

Tips ‘n Tricks

Automatic Provisioning (typings)

In Visual Studio Code, press ctrl+shift+B (or ‘npm run build’ from a command line).  This will build the example code so you can ensure everything works.  The first time the build task runs, it executes the provision.js script which installs TypeScript typings and then removes itself from the build script of the package.json file so typings aren’t reinstalled every time you build.

Webpack loaders

I’ve included an html loader (commonly used for requiring templates in various front-end frameworks like vue.js)

TL;DR

wet-template is a minimalist project template for WebPack and Typescript — clone it, npm install it and go.