Common idioms in Javascript

idioms.js

// Use Array.join to concatenate strings.

//INSTEAD OF

var html = '<div class="button-set">' +
  '<span class="button">OK</span>' +
  '<span class="button">Apply</span>' +
  '<span class="button">Cancel</span>' +
'</div>';

// USE

 var html = [
  '<div class="button-set">'
      '<span class="button">OK</span>',
      '<span class="button">Apply</span>',
      '<span class="button">Cancel</span>',
  '</div>'
].join('');


// Minimize use of if/else blocks by creating object hashes

//INSTEAD OF  

function showView(type) {
  if (_.isObject(type)) {
      // read object structure and prepare view
  }
  else if (_.isString(type)) {
      // validate string and show the view
  }
}

function showWeatherView(condition){
  
  if (condition === 'sunny') showView('sunny-01');
  else if (condition === 'partly sunny') showView('sunny-02');
  else if (condition === 'cloudy') showView('cloudy-01');
  else if (condition === 'rain') showView({ type: 'rain-01', style:'dark' })
}

$.get('http://myapp.com/weather/today', function(response){
  
  var condition = response.condition;

  // Show view based on this condition
  showWeatherView(condition);
});

// USE
function showWeatherView(condition){

  var viewMap = {
      'sunny': 'sunny-01',
      'partly sunny': 'sunny-02',
      'cloudy': 'cloudy-01',
      'rain': { type: 'rain-01', style:'dark' }
  };   

  showView(viewMap[condition]);
}

// Make the parameter value be of any-type

/*
When you are building a simple utility library/module, it is good to expose an option that can be any of string, number, array or function type. This makes the option more versatile and allows for some logic to be executed each time the option value is needed. I first saw this pattern used in libraries like HighCharts and SlickGrid and found it very natural.

Let’s say you want to build a simple formatter. It can accept a string to be formatted using one of the pre-defined formats or use a custom formatter. It can also apply a chain of formatters, when passed as an array. You can have the API for the formatter as below:
*/

function format(formatter, value) {
  var knownFormatters = {
      '###,#': function(value) {},
      'mm/dd/yyyy': function(value) {},
      'HH:MM:ss': function(value) {}
  },
      formattedValue = value;

  if (_.isString(formatter)) {

      // Lookup the formatter from list of known formatters
      formattedValue = knownFormatters[formatter](value);

  }
  else if (_.isFunction(formatter)) {

      formattedValue = formatter(value);

  }
  else if (_.isArray(formatter)) {

      // This could be a chain of formatters
      formattedValue = value;
      _.each(formatter, function(f) {
          formattedValue = format(f, formattedValue); // Note the recursive use format()
      });

  }

  return formattedValue;
}

// Use IIFE to compute on the fly

var options = {
  title: (function(){
      var html = '<h1>' + titleText + '</h1>';
      var icons = '<div class="icon-set"><span class="icon-gear"></span></div>';

      return html + icons;
  })(),
  buttons: ['Apply', 'Cancel', 'OK']
};

// found this on http://blog.pixelingene.com/