NotionCommotion Posted February 23, 2020 Share Posted February 23, 2020 Trying to better understand arrow functions and came up with the following script. Other than being longer and renaming this as _this and arguments as _arguments, is the following identical to an arrow function? Thanks return (function(_this, _arguments) { return function() { /* bla bla bla*/ }; })(this, arguments); https://jsbin.com/fazujup/1/edit?html,js,output <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Closure</title> </head> <body> <script type="text/javascript"> const test = { name: 'test object', createAnonFunction: function() { return function() { console.log('createAnonFunction this.name', this.name); console.log('createAnonFunction arguments', arguments); }; }, createArrowFunction: function() { return () => { console.log('createArrowFunction this.name', this.name); console.log('createArrowFunction arguments', arguments); }; }, createClosureFunction: function() { return (function(_this, _arguments) { return function() { console.log('createClosureFunction this.name', this.name); console.log('createClosureFunction arguments', arguments); console.log('createClosureFunction _this.name', _this.name); console.log('createClosureFunction _arguments', _arguments); }; })(this, arguments); }, createArrowFunctionSingleExp: function(a, b) { // if the function body is a single expression, you can leave off the brackets and put it inline. console.log('createArrowFunctionSingleExp this, a, b', this, a, b); return (a, b) => a + b; }, createArrowFunctionSingleArg: function(array) { //if there is only a single argument, you can even leave off the parenthesis around the argument console.log('createArrowFunctionSingleArg this, array', this, array); return array => array[0]; }, createArrowFunctionSingleExpObj: function(name, description) { //To indicate that instead you want a single expression that happens to be an object, you wrap the object with parentheses // ERROR => return (name, description) => {name: name, description: description}; console.log('createArrowFunctionSingleExpObj this', this); return (name, description) => ({name: name, description: description}); } }; const anon = test.createAnonFunction('hello', 'world'); const arrow = test.createArrowFunction('hello', 'world'); const closure = test.createClosureFunction('hello', 'world'); const arrowSingleExp = test.createArrowFunctionSingleExp('hello', 'world'); const arrowSingleArg = test.createArrowFunctionSingleArg('hello', 'world'); const arrowSingleExpObj = test.createArrowFunctionSingleExpObj('hello', 'world'); anon(); arrow(); closure(); console.log('arrowSingleExp', arrowSingleExp(4,5)); console.log('arrowSingleArg', arrowSingleArg(['zero','one'])); console.log('arrowSingleExpObj', arrowSingleExpObj('theName', 'theDescription')); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
kicken Posted February 23, 2020 Share Posted February 23, 2020 (edited) 6 hours ago, NotionCommotion said: Other than being longer and renaming this as _this and arguments as _arguments, is the following identical to an arrow function? More or less for most use cases, as far as I understand them. Arrow functions do not create their own this and arguments variables so they will inherit those of the parent context. This is usually what a person wants to happen anyway so it makes them more convenient to use and their syntax is shorter. There are a couple other things they handle differently according to MDN. new.target and super are also not defined, neither of which are likely to be used all that often imo. I didn't even know new.target was a thing until I read that page. Not having their own this property makes them not useful in some situations, and apparently they can't be used as a generator using yield for some reason. Edited February 23, 2020 by kicken Quote Link to comment Share on other sites More sharing options...
NotionCommotion Posted February 23, 2020 Author Share Posted February 23, 2020 Thanks kicken, Didn't know about target and super, but good to know the rest is not that foreign. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.