ECMAScript 5

The future is now (December 2009)

Created by Trey Hunner / @treyhunner

What is ECMAScript?

“ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript.”

So what about ECMAScript 5?

  • Array goodies: forEach, indexOf, map, filter, …
  • Object goodies: properties, sealing/freezing, …
  • Function.prototype.bind
  • String.prototype.trim
  • Strict mode
  • Native JSON support
  • And more!

indexOf

Return first index at which a value can be found in the array

          
var colors = ['red', 'green', 'red', 'blue'];
var indexOfRed = colors.indexOf('red');
console.log(indexOfRed); // 0
          
          

lastIndexOf

Return last index at which a value can be found in the array

          
var colors = ['red', 'green', 'red', 'blue'];
var indexOfRed = colors.lastIndexOf('red');
console.log(indexOfRed); // 2
          
          

forEach

Executes a provided function once for each array item

          
var numbers = [1, 2, 3];
numbers.forEach(function (number, index) {
  console.log("Index " + index + " is " + number);
});
// Index 0 is 1
// Index 1 is 2
// Index 2 is 3
          
          

map

Return new array with the results of calling a provided function on each item of the array

          
var numbers = [1, 2, 3];
var squaredNumbers = numbers.map(function square(n) {
  return n * n;
});
console.log(squaredNumbers); // [1, 4, 9]
          
          

filter

Return new array including only array items that pass the given test function.

          
var numbers = [1, 2, 3];
var oddNumbers = numbers.filter(function isOdd(number) {
  return number % 2 == 1;
});
console.log(oddNumbers); // [1, 3]
          
          

every

Return true if all the values in the array pass the test implemented by the provided function

          
var numbers = [1, 2, 3];
var allAreOdd = numbers.every(function isOdd(number) {
  return number % 2 == 1;
});
console.log(allAreOdd); // false
          
          

some

Return true if any of the values in the array pass the test implemented by the provided function

          
var numbers = [1, 2, 3];
var anyAreOdd = numbers.some(function isOdd(number) {
  return number % 2 == 1;
});
console.log(anyAreOdd); // true
          
          

reduce and reduceRight

Reduces a list of values into a single value using an accumulator function (either left-to-right or right-to-left)

          
var numbers = [1, 2, 3];
var totalSum = numbers.reduce(function sum(previous, current) {
  return previous + current;
});
console.log(totalSum); // 6
          
          

How's the browser support?

  • Specification finalized in December 2009
  • Fully-supported in all modern browsers
  • Nearly full support in Internet Explorer 9+
  • No support in Internet Explorer 8

Polyfill

“A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.”

Shim

“In computer programming, a shim is a small library that transparently intercepts API calls and changes the arguments passed, handles the operation itself, or redirects the operation elsewhere.”

Polyfill

“A shim that mimics a future API, providing fallback functionality to older browsers.”

ES5 Shim

es5-shim is a collection of ECMAScript 5 compatibility shims for legacy JavaScript engines

What if I use Underscore.js?

          
// Underscore works on NodeList objects
var nodeList = document.querySelectorAll('div');
_.each(nodeList, function(div) { console.log(div.id); });

// Underscore works on Node.js Buffer objects
var buffer = fs.readFileSync('myfile.txt')
var isASCII = _.every(buffer, function(c) { return (c <= 127); });

          
          

Reasons to use native support

  • More understandable
  • More portable (vanilla JS is everywhere)
  • Future-proof
  • Potentially more efficient

End

treyhunner.com

@treyhunner