Using underscore.js to simplify a JavaScript code

I'd like to show how using underscore.js library can simplify a JavaScript code.

This is the original code:

	app.factory('DateStringsInsideObjectsIntoDates', [
	function () {
	function convertDateStringsToDates(input) {
	var regexIso8601 = /^(\d{4}|\+\d{6})(?:-(\d{2})(?:-(\d{2})(?:T(\d{2}):(\d{2}):(\d{2})\.(\d{1,})(Z|([\-+])(\d{2}):(\d{2}))?)?)?)?$/;
	if (typeof input !== "object") {
	return input;
	}
	for (var key in input) {
	if (!input.hasOwnProperty(key)) continue;
	var value = input[key];
	var match;
	// Check for string properties which look like dates.
	if (typeof value === "string" && (match = value.match(regexIso8601))) {
	var milliseconds = Date.parse(match[0])
	if (!isNaN(milliseconds)) {
	input[key] = new Date(milliseconds);
	}
	} else if (typeof value === "object") {
	convertDateStringsToDates(value);
	}
	}
	return input;
	}
	return {
	convert: convertDateStringsToDates
	};
	}
	]);

view raw DateStringsToDates.js hosted with ❤ by GitHub

It wasn't tested, so I wrote some tests before start refactoring it:

	describe(
	'Conversion of strings in objects representing a date into dates',
	function () {
	describe(
	'DateStringsInsideObjectsIntoDates',
	function () {
	var DateStringsInsideObjectsIntoDates,
	stringRepresentingDate = "2014-03-20T14:02:41.000000Z";
	beforeEach(module("project"));
	beforeEach(inject(function (_DateStringsInsideObjectsIntoDates_) {
	DateStringsInsideObjectsIntoDates = _DateStringsInsideObjectsIntoDates_;
	}));
	it("only converts strings representing a date when they are inside an object",
	function () {
	var stringRepresentingDate = "2014-03-20T14:02:41.000000Z";
	expect(
	DateStringsInsideObjectsIntoDates.convert(stringRepresentingDate)
	).toEqual(stringRepresentingDate);
	expect(
	DateStringsInsideObjectsIntoDates.convert({
	a: stringRepresentingDate
	})
	).toEqual({
	a: new Date(Date.parse(stringRepresentingDate))
	}
	);
	}
	);
	it("strings not representing a date inside an object are ignored",
	function () {
	expect(
	DateStringsInsideObjectsIntoDates.convert({
	a: "koko"
	})
	).toEqual({
	a: "koko"
	}
	);
	}
	);
	it("converts strings representing a date inside an object with any level of nesting",
	function () {
	expect(
	DateStringsInsideObjectsIntoDates.convert({
	a: "koko",
	b: {
	c: stringRepresentingDate
	},
	d: 4
	})
	).toEqual({
	a: "koko",
	b: {
	c: new Date(Date.parse(stringRepresentingDate))
	},
	d: 4
	}
	);
	}
	);
	it("ignores empty objects", function () {
	expect(
	DateStringsInsideObjectsIntoDates.convert({})
	).toEqual({});
	}
	);
	}
	);
	}
	);

view raw DateStringsInsideObjectsIntoDatesSpec.js hosted with ❤ by GitHub

Once I had the tests in place, I separated the responsibility of converting strings into dates from the traversing of the object:

	app.factory('DateStringsInsideObjectsIntoDates', [
	function () {
	function convertDateStringsToDates(input) {
	if (typeof input !== "object") {
	return input;
	}
	for (var key in input) {
	if (!input.hasOwnProperty(key)) continue;
	var value = input[key];
	if (typeof value === "string") {
	input[key] = convertDateStringToDate(value);
	} else if (typeof value === "object") {
	convertDateStringsToDates(value);
	}
	}
	return input;
	}
	return {
	convert: convertDateStringsToDates
	};
	function convertDateStringToDate(str) {
	var regexIso8601 = /^(\d{4}|\+\d{6})(?:-(\d{2})(?:-(\d{2})(?:T(\d{2}):(\d{2}):(\d{2})\.(\d{1,})(Z|([\-+])(\d{2}):(\d{2}))?)?)?)?$/,
	match = str.match(regexIso8601),
	milliseconds;
	if (!match) {
	return str;
	}
	milliseconds = Date.parse(match[0])
	if (!isNaN(milliseconds)) {
	return new Date(milliseconds);
	}
	return str;
	}
	}
	]);

view raw DateStringsInsideObjectsIntoDatesStep2.js hosted with ❤ by GitHub

and extracted it to another factory:

	app.factory('StringToDate', [
	function () {
	function convertDateStringToDate(str) {
	var regexIso8601 = /^(\d{4}|\+\d{6})(?:-(\d{2})(?:-(\d{2})(?:T(\d{2}):(\d{2}):(\d{2})\.(\d{1,})(Z|([\-+])(\d{2}):(\d{2}))?)?)?)?$/,
	match = str.match(regexIso8601),
	milliseconds;
	if (!match) {
	return str;
	}
	milliseconds = Date.parse(match[0])
	if (!isNaN(milliseconds)) {
	return new Date(milliseconds);
	}
	return str;
	}
	return {
	convert: convertDateStringToDate
	};
	}
	]);

view raw StringToDate.js hosted with ❤ by GitHub

that I could directly test:

	describe(
	'Conversion of strings in objects representing a date into dates',
	function () {
	describe('StringToDate',
	function () {
	var StringToDate;
	beforeEach(module("project"));
	beforeEach(inject(function (_StringToDate_) {
	StringToDate = _StringToDate_;
	}));
	it("changes a string representing a date in the desired format into a date",
	function () {
	expect(
	StringToDate.convert("2014-03-20T14:02:41.000000Z")
	).toEqual(new Date(Date.parse("2014-03-20T14:02:41Z")));
	expect(
	StringToDate.convert("2014-03-20T14:02:41.000000")
	).toEqual(new Date(Date.parse("2014-03-20T14:02:41Z")));
	}
	);
	it("leaves unchanged strings not representing a date in the desired format",
	function () {
	expect(
	StringToDate.convert("koko")
	).toEqual("koko");
	expect(
	StringToDate.convert("2014/03/20T14")
	).toEqual("2014/03/20T14");
	expect(
	StringToDate.convert("2014/03/20T14:02:41.000000Z")
	).toEqual("2014/03/20T14:02:41.000000Z");
	expect(
	StringToDate.convert("2014-03-20T14-02-41.000000Z")
	).toEqual("2014-03-20T14-02-41.000000Z");
	expect(
	StringToDate.convert("2014-03-2014:02:41.000000Z")
	).toEqual("2014-03-2014:02:41.000000Z");
	}
	);
	}
	);
	describe(
	'DateStringsInsideObjectsIntoDates',
	function () {
	var DateStringsInsideObjectsIntoDates,
	stringRepresentingDate = "2014-03-20T14:02:41.000000Z";
	beforeEach(module("project"));
	beforeEach(inject(function (_DateStringsInsideObjectsIntoDates_) {
	DateStringsInsideObjectsIntoDates = _DateStringsInsideObjectsIntoDates_;
	}));
	it("only converts strings representing a date when they are inside an object",
	function () {
	var stringRepresentingDate = "2014-03-20T14:02:41.000000Z";
	expect(
	DateStringsInsideObjectsIntoDates.convert(stringRepresentingDate)
	).toEqual(stringRepresentingDate);
	expect(
	DateStringsInsideObjectsIntoDates.convert({
	a: stringRepresentingDate
	})
	).toEqual({
	a: new Date(Date.parse(stringRepresentingDate))
	}
	);
	}
	);
	it("strings not representing a date inside an object are ignored",
	function () {
	expect(
	DateStringsInsideObjectsIntoDates.convert({
	a: "koko"
	})
	).toEqual({
	a: "koko"
	}
	);
	}
	);
	it("converts strings representing a date inside an object with any level of nesting",
	function () {
	expect(
	DateStringsInsideObjectsIntoDates.convert({
	a: "koko",
	b: {
	c: stringRepresentingDate
	},
	d: 4
	})
	).toEqual({
	a: "koko",
	b: {
	c: new Date(Date.parse(stringRepresentingDate))
	},
	d: 4
	}
	);
	}
	);
	it("ignores empty objects", function () {
	expect(
	DateStringsInsideObjectsIntoDates.convert({})
	).toEqual({});
	});
	}
	);
	}
	);

view raw Spec2.js hosted with ❤ by GitHub

Finally I used underscore.js library to simplify all the JavaScript plumbing that was happening in the object traversing inside DateStringsInsideObjectsIntoDates convert function:

	"use strict";
	app.factory('DateStringsInsideObjectsIntoDates', [
	'StringToDate',
	function (StringToDate) {
	function convert(input) {
	if (!_.isObject(input)) {
	return input;
	}
	_.each(
	_.keys(input),
	function (key) {
	var value = input[key];
	if (_.isString(value)) {
	input[key] = StringToDate.convert(value);
	} else {
	convert(value);
	}
	}
	);
	return input;
	}
	return {
	convert: convert
	};
	}
	]);
	app.factory('StringToDate', [
	function () {
	function convertDateStringToDate(str) {
	var regexIso8601 = /^(\d{4}|\+\d{6})(?:-(\d{2})(?:-(\d{2})(?:T(\d{2}):(\d{2}):(\d{2})\.(\d{1,})(Z|([\-+])(\d{2}):(\d{2}))?)?)?)?$/,
	match = str.match(regexIso8601),
	milliseconds;
	if (!match) {
	return str;
	}
	milliseconds = Date.parse(match[0])
	if (!isNaN(milliseconds)) {
	return new Date(milliseconds);
	}
	return str;
	}
	return {
	convert: convertDateStringToDate
	};
	}
	]);

view raw DateStringsInsideObjectsIntoDatesUsingUnderscore.js hosted with ❤ by GitHub

By separating the traversing and conversion responsibilities and by using underscore.js, I managed to get to a much more readable version of the code.