ES6 shorthand function declaration, a (more or less) terse primer:
1. The Basics,
ECMAScript 2015, otherwise known as ES6, includes many new features covered FAR more in depth on Babel’s Learn ES2015 page. In the spirit of what ES6 really delivers, I’ll try to be terse and focus on one particularly handy feature. Shorthand function declaration, a faster, cleaner, and more functional way to get the job done! World, meet the new hotness!
() => 'Hello, World!’
2. Wait What?!
So, yeah that’s it, a real working function. The first time I saw it, that was my reaction to. let’s break down the pieces for clarity, () is the variable declaration, in this case blank, nothing new there. Then the fun starts, => is the actual declaration, replacing function and moving it to the right of the variables. Following that is the body of the function. You might have noticed a few key things are omitted, like { , return , and } in the new style these can be left off when you’re performing simple operations like simply returning a string or performing a one line(short) operation. For example:
(x,y) => y + x
// is the same as
function (x, y) { return y + x };With more complex operations, you’ll need to bring back the {} . For example:
numbers = [1, 2, 3, 4, 5, 6];
let doubleValues = (array)=> {
var result = [];
for(var i = 0; i < array.length ; i++) {
result.push(array[i] *2);
}
return result;
}3. But wait there’s more!!
Not only is the new shorthand, shorter… it’s also more powerful. Functions declared with the new shorthand, or ‘arrow function’ will actually retain the this binding that existed at declaration time meaning, code like the following example from Babel works perfectly without resorting to .bind(this) or other such methods.
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};Additionally, ‘arrow functions’ also share access to lexical arguments when found inside another function as seen in the below example:
function square() {
let example = () => {
let numbers = [];
for (let number of arguments) {
numbers.push(number * number);
}
return numbers;
};
return example();
}
square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 4. A few fine points…
This shorthand does work in most instances, but there are a few places when you’ll need to revert to the standard declaration. if you are using Functional, Prototypal or Pseudo-classical instantiation, you will need to actually write out function to make them work properly. Fortunately ES6 introduces classes for objects. Designed to be familiar to those who come from other languages that rely on classes the new class constructor makes adding methods to classes and sub-classes a breeze! There is a lot to appreciate about the class constructor, so to keep this post terse I’ll focus on method declaration. First the ES5 way:
//ES5 class object:
function ClassObj = (props) {
this.props = props;
};
ClassObj.prototype.method = function(x, y) {
return x + y;
};functional, if a little verbose for what it does, and typing ClassObj.prototype every time you add a method, is quite a bit of repetition. Now the new way, note the difference in method declaration.
//ES6 class object
class ClassObj {
constructor(props) {
this.props = props;
}
method (x, y) {
return x + y;
};
}As you can tell just from these two changes, ES6 simplifies function and method declaration and helps make a JavaScript developer’s life a little bit easier. Say, Hello to more concise and readable code!