ECMAScript 5: The Future is Now

ECMAScript 5 was finalized over five years ago and it is well supported in all modern browsers. So, with ECMAScript 6 nearing standardization, let’s talk about ECMAScript 5.

Do you know what features were added in ECMAScript 5?

Do your target browsers support ECMAScript 5 yet?

Arrays

Underscore.js is a popular JavaScript library containing “a whole mess of useful functional programming helpers”. Most of these helpers work on arrays and other enumerable objects (collections, as Underscore calls them).

The ECMAScript 5 spec includes a handful of these functional programming helpers as methods on native JavaScript Array objects.

indexOf and lastIndexOf, like _.indexOf and _.lastIndexOf, return the index (or last index) at which a value can be found in the array
every, like _.every, returns true if all the values in the array pass the test implemented by the provided function
some, like _.some, returns true if any of the values in the array pass the test implemented by the provided function
forEach, like _.each, executes a provided function once for each array item
map, like _.map, returns a new array with the results of calling a provided function on each item of the array
filter, like _.filter, returns a new array with all array items that pass the given test function included.
reduce and reduceRight, like _.reduce and _.reduceRight, reduce a list of values into a single value using an accumulator function (either left-to-right or right-to-left)

Miscellaneous

Here are a variety of other features that were added to ECMAScript 5, in addition to array helper functions:

Object.keys, like _.keys, returns an array of a given object’s enumerable properties
Array.isArray, like _.isArray, returns true if a given object is an array
Date.now, like _.now returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC
JSON.stringify converts JavaScript objects to JSON strings and JSON.parse converts JSON strings to JavaScript objects.
Function.prototype.bind, like _.bind, returns a function that when called has its this keyword argument set to the provided value
String.prototype.trim, returns a copy of the string with whitespace removed from the beginning and end of the string
parseInt no longer treats strings starting with 0 as octal values
Strict mode, Object.create, Object.seal, Object.freeze, getters/setters, and more were also added in ECMAScript 5

Underscore.js vs Native

I try to use native array methods instead of their Underscore.js equivalents whenever possible. However, these native array methods don’t work in all cases.

Not all enumerables are arrays

Here’s two enumerable objects which are not arrays:

NodeList objects in the browser
File buffers in Node.js

You cannot use array methods like forEach on these enumerables, but you can the Underscore.js equivalents like _.each.

So why not use Underscore for everything?

Native methods are more understandable

Web developers know JavaScript. Web developers may not Underscore or your Underscore-like library of choice. Don’t stray far from vanilla JavaScript when you don’t need to.

Underscore is less portable

Underscore doesn’t come bundled with your rendering engine.

Native methods are future-proof

Underscore is cool today, but lodash might be cooler tomorrow. Or maybe you’d prefer to use JFP.

Native methods can be faster

As browser engines improve their optimization of native code, your code improves in speed. Underscore’s equivalents of these methods cannot be further optimized at the low-level as their native equivalents.

This claim as a theoretical one. Here’s some jsPerf links to test the real performance difference:

What browsers support ECMAScript 5?

ECMAScript 5 is fully supported in Internet Explorer 10 and nearly fully supported in IE9. Modern versions of Chrome and Firefox also fully support ECMAScript 5.

What if you need to support IE7 or IE8?

Fortunately, all of the array methods discussed above and some of the other ECMAScript 5 features can be polyfilled using es5-shim.

ECMAScript 5 all the things!

With these pollyfills in place, you should be able to use the majority of ECMAScript 5 features everywhere. Go forth and ES5-ify your code!

Trey Hunner

I help developers level-up their Python skills