Iterator Example


Iterator Example

This is a poor example as you could certainly accomplish this more easily with .map(), however, this demonstrates that the iterator ‘remembers’ its position and picks up where it left off. A better example would be where other procedures or logic are executed between calls.

function makeIterator(array) {
    var nextIndex = 0;
    return {
        next: ()=>(nextIndex < array.length) && array[nextIndex++],
        remain: ()=>array.length - nextIndex
var fun = makeIterator(['fe', 'fi', 'fo', 'fum', 'I', 'smell']);


Array Iteration


Two quick ways to iterate through an array (from .length to 0).

What’s the point?

  • It’s fast to compare something to zero
  • Less code overall

Why it’s weird…

We’re used to counting from zero to length – not vice-versa

When not to use

The only place I can think of that this wouldn’t be a good idea would be when you need to iterate over the array in ascending key order.

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var b = a.length;

// quickly iterate through array
while (b--) {

// declaring var in same line
for (var c = a.length; c--; ) {

// of course THIS is best
a.forEach(i => console.log(i));

Thoughts on coercion


Thoughts on coercion

Here’s an interesting tidbit. If you’ve ever used indexOf to determine if a string contains another string (perhaps I could word this better…), then you’ve probably used something like:

var a = 'Jim';
a.indexOf('i') !== -1; // true

As you’re probably aware, if the string is not found, –1 is the return value.

A simpler and more efficient way to accomplish this test is:

var a = 'Jim';
~a.indexOf('i'); // true (coerced)


Boolean(~a.indexOf('i')); // true

A lot of people will state that coercion in JS is evil. I’d state that what is really evil is when people don’t know what that coercion is doing. I recently watched a video series by Kyle Simpson where he illustrated a few places where using coercion to your advantage will create simpler, easier to understand, less error-prone code. For example:

var foo; // undefined

Let’s say that foo, in this case could be undefined or null.
Using explicit coercion, our check for this value would be:

if ( foo===undefined || foo===null ) {
    // should work, all bases are covered

A simpler, more readable check:

if ( foo == null ) {
    // works for null or undefined

Partially-Applied Function – Practical Example


Partially-Applied Function – Practical Example

This example demonstrates several concepts:

  • modules
  • partially applied functions
  • functional programming techniques

The partialGetElID function creates a partially applied function that replaces hyphenated, underscored, or dotted names with their camelCased variant.

module.exports = {
    partialGetElID: (wf, pg) =>el=>`${sepsToCamelCase(wf)}-${sepsToCamelCase(pg)}-${sepsToCamelCase(el)}`

var sepsToCamelCase = function(arg) {

    var upperFirst = s => s.replace(s.charAt(0), s.charAt(0).toUpperCase());
    var lowerFirst = s => s.replace(s.charAt(0), s.charAt(0).toLowerCase());

    return (


var X = require('path/to/module');
var getID = X.partialGetElId('', 'step_name');

getID('element-name') // returns workflowName-stepName-elementName

Functional Programming Example – using Ramda


Functional Programming Example – using Ramda

Copy and paste this code into your console. It automatically loads Ramda and uses that to process the beerData.

Two concepts covered in this example:

  • Loading external scripts into the console (which works in chrome developer tools snippets at minimum). I can’t seem to find a way to make it work in firefox.
  • Functional programming.

#functional, #loadingScripts

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//';

beerData = [
    {"name": "Bitter Hop", "type": "ipa", "locale": "domestic", "abv": 7.9},
    {"name": "Dragonblood Black IPA", "type": "ipa", "locale": "domestic", "abv": 6.5},
    {"name": "Good Dog Lager", "type": "lager", "locale": "domestic", "abv": 4.8},
    {"name": "Good Dog Snowpants", "type": "stout", "locale": "domestic", "abv": 8.1},
    {"name": "Lake Erie 2x IPA", "type": "ipa", "locale": "domestic", "abv": 9.3},
    {"name": "Lake Erie Session", "type": "ale", "locale": "domestic", "abv": 4.2},
    {"name": "Samwell British Pale Ale", "type": "ale", "locale": "import", "abv": 6.5},
    {"name": "Samwell Oatmeal Stout", "type": "stout", "locale": "import", "abv": 5.5},
    {"name": "Samwell Winter Ale", "type": "ale", "locale": "import", "abv": 6.8},
    {"name": "Sparkwood Beer Five", "type": "lager", "locale": "domestic", "abv": 6.2},
    {"name": "Sparkwood Campfire Lager", "type": "lager", "locale": "domestic", "abv": 5.8},
    {"name": "Tartan Scottish Ale", "type": "ale", "locale": "import", "abv": 7.5}



var uniqueTypes = R.pipe(R.pluck('type'), R.uniq, R.sort((a, b) => a > b));
var typeList = uniqueTypes(beerData);

console.log('typeList: ', typeList);

var displayBeerByType = R.pipe(
    R.filter(R.__, beerData),

R.forEach(displayBeerByType, typeList);

Credit Card Pattern Matching


popular-credit-cardsThis is a simple prototype that highlights the type of credit card number a user is entering based on the first n characters.

Try entering a few digits to see it in action, or play with the code on CodePen to see how it works!

Sample Numbers


See the Pen Credit card input pattern matching by Jim Horn (@JDHorn) on CodePen.


Rain, snow or sunshine: More Vancouver cyclists willing to battle the weather each year


bike-laneCount me in. I’ve taken to cycling to and from work for the past year and a half – day or night, hot or cold, rain or shine, I’m out there. Heck, I even bought studded tires for my second bike so that I wouldn’t have to worry about a bit of frost or snow! Fortunately I don’t have to deal with snow very often.

Rain, snow or sunshine: More Vancouver cyclists willing to battle the weather each year.