The arrow functions at first might seem confusing (for me (β(β) ), but after a while, you can understand their shorter syntax and the magic of the scope of this.
Multiple parameters
Without arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var oldWay = function(name, nickname) { | |
| return 'My name is ' + nickname + ', ' + name; | |
| }; | |
| console.log( oldWay('James Bond', 'Bond') ); | |
| // My name is Bond, James Bond |
With arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let newWay = (name, nickname) => { | |
| return 'My name is ' + nickname + ', ' + name; | |
| }; | |
| console.log( newWay('James Bond', 'Bond') ); | |
| // My name is Bond, James Bond |
Or in a shorter way.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let newWay2 = (name, nickname) => 'My name is ' + nickname + ', ' + name; | |
| console.log( newWay2('James Bond', 'Bond') ); | |
| // My name is Bond, James Bond |
Only one parameter
Without arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var one = function(what) { | |
| return 'I ' + what + ' you'; | |
| }; | |
| console.log( one('hate') ); | |
| // I hate you |
With arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var oneNew = what => 'I ' + what + ' you'; | |
| console.log( oneNew('hate') ); | |
| // I hate you |
Scope
Without arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var sandwich = { | |
| bread: 'integral', | |
| cheese: 'white', | |
| prepare: function() { | |
| return 'I want a sandwich with ' + this.bread + ' bread and ' + this.cheese + ' cheese'; | |
| }, | |
| make: function() { | |
| var that = this; // (βοΈ΅β) | |
| window.setTimeout( function () { | |
| console.log( that.prepare() ); | |
| }, 100 ); | |
| } | |
| }; | |
| // sandwich.make(); | |
| // I want a sandwich with integral bread and white cheese |
With arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let newSandwich = { | |
| bread: 'integral', | |
| cheese: 'white', | |
| prepare: function() { | |
| return 'I want a sandwich with ' + this.bread + ' bread and ' + this.cheese + ' cheese'; | |
| }, | |
| make: function() { | |
| window.setTimeout( () => console.log(this.prepare()), 100 ); | |
| } | |
| }; | |
| // newSandwich.make(); | |
| // I want a sandwich with integral bread and white cheese |
Example with map
Without arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var sample = [1, 2, 3, 4, 5]; | |
| var double = sample.map(function(item) { | |
| return item * 2; | |
| }); | |
| // console.log(double); | |
| // [2, 4, 6, 8, 10] |
With arrow functions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let sample = [1, 2, 3, 4, 5]; | |
| let newDouble = sample.map(item => item * 2); | |
| // console.log(newDouble); | |
| // [2, 4, 6, 8, 10] |
Here you can find a JS Bin with the examples.