Jump to content
Sign in to follow this  
NotionCommotion

Is closure and an arrow function just about the same?

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites
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 by kicken

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.