Converting Functions to Arrow functions












6















I'm learning ES6, I just want to convert my ES5 knowledge to ES6.



here's my ES5 code:



function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};


and here's my ES6 code:



const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}


My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.




Is this method don't work on arrow functions?











share|improve this question







New contributor




code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
















  • 1





    this is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function yes, it did, you just don't know what you're doing yet

    – Jaromanda X
    1 hour ago








  • 2





    this keyword functions differently in arrow functions. Read this section of the documentation.

    – Yong Quan
    1 hour ago






  • 2





    Aside - Consider using el.classList.add('grab') (and el.classList.remove('grab')) instead of manipulating the string of class names manually. more info

    – James
    1 hour ago






  • 1





    This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate

    – Jaromanda X
    1 hour ago











  • Possible duplicate of What does "this" refer to in arrow functions in ES6?

    – adiga
    44 mins ago
















6















I'm learning ES6, I just want to convert my ES5 knowledge to ES6.



here's my ES5 code:



function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};


and here's my ES6 code:



const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}


My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.




Is this method don't work on arrow functions?











share|improve this question







New contributor




code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
















  • 1





    this is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function yes, it did, you just don't know what you're doing yet

    – Jaromanda X
    1 hour ago








  • 2





    this keyword functions differently in arrow functions. Read this section of the documentation.

    – Yong Quan
    1 hour ago






  • 2





    Aside - Consider using el.classList.add('grab') (and el.classList.remove('grab')) instead of manipulating the string of class names manually. more info

    – James
    1 hour ago






  • 1





    This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate

    – Jaromanda X
    1 hour ago











  • Possible duplicate of What does "this" refer to in arrow functions in ES6?

    – adiga
    44 mins ago














6












6








6








I'm learning ES6, I just want to convert my ES5 knowledge to ES6.



here's my ES5 code:



function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};


and here's my ES6 code:



const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}


My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.




Is this method don't work on arrow functions?











share|improve this question







New contributor




code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












I'm learning ES6, I just want to convert my ES5 knowledge to ES6.



here's my ES5 code:



function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};


and here's my ES6 code:



const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}


My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.




Is this method don't work on arrow functions?








javascript function arrow-functions






share|improve this question







New contributor




code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question







New contributor




code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question






New contributor




code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked 1 hour ago









code for moneycode for money

332




332




New contributor




code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






code for money is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.








  • 1





    this is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function yes, it did, you just don't know what you're doing yet

    – Jaromanda X
    1 hour ago








  • 2





    this keyword functions differently in arrow functions. Read this section of the documentation.

    – Yong Quan
    1 hour ago






  • 2





    Aside - Consider using el.classList.add('grab') (and el.classList.remove('grab')) instead of manipulating the string of class names manually. more info

    – James
    1 hour ago






  • 1





    This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate

    – Jaromanda X
    1 hour ago











  • Possible duplicate of What does "this" refer to in arrow functions in ES6?

    – adiga
    44 mins ago














  • 1





    this is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function yes, it did, you just don't know what you're doing yet

    – Jaromanda X
    1 hour ago








  • 2





    this keyword functions differently in arrow functions. Read this section of the documentation.

    – Yong Quan
    1 hour ago






  • 2





    Aside - Consider using el.classList.add('grab') (and el.classList.remove('grab')) instead of manipulating the string of class names manually. more info

    – James
    1 hour ago






  • 1





    This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate

    – Jaromanda X
    1 hour ago











  • Possible duplicate of What does "this" refer to in arrow functions in ES6?

    – adiga
    44 mins ago








1




1





this is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function yes, it did, you just don't know what you're doing yet

– Jaromanda X
1 hour ago







this is not a method, and is different inside an arrow function - read documentation to understand the difference ... didn't run the function yes, it did, you just don't know what you're doing yet

– Jaromanda X
1 hour ago






2




2





this keyword functions differently in arrow functions. Read this section of the documentation.

– Yong Quan
1 hour ago





this keyword functions differently in arrow functions. Read this section of the documentation.

– Yong Quan
1 hour ago




2




2





Aside - Consider using el.classList.add('grab') (and el.classList.remove('grab')) instead of manipulating the string of class names manually. more info

– James
1 hour ago





Aside - Consider using el.classList.add('grab') (and el.classList.remove('grab')) instead of manipulating the string of class names manually. more info

– James
1 hour ago




1




1





This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate

– Jaromanda X
1 hour ago





This shows that not all functions should be converted to arrow functions just because arrow functions are cool :p arrow functions serve a specific purpose and should only be used as appropriate

– Jaromanda X
1 hour ago













Possible duplicate of What does "this" refer to in arrow functions in ES6?

– adiga
44 mins ago





Possible duplicate of What does "this" refer to in arrow functions in ES6?

– adiga
44 mins ago












6 Answers
6






active

oldest

votes


















4














There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this inside function click() and const click may well be different. In the ES6 version, this will refer to whatever was this during the closure creation, which may not be what you want.



Arrow Functions at MDN clears it up:




An arrow function does not have its own this.




…Which means that this will be inherited from the declaring scope.



ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...) syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach) and avoid the need to rebind a function to a different this in some cases. Converting all function declarations to arrow syntax is not an upgrade.






share|improve this answer


























  • @jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.

    – adc
    1 hour ago



















0














The reason is that you just need to slightly restructure things.



setTimeout(() => {this.className = 'remove'}, 0)


You have parenthesis vs curly braces.



your this may or may not work depending on how things are structured in the other code






share|improve this answer


























  • absolutely no difference in this context - in other context, the difference is what the arrow function returns

    – Jaromanda X
    1 hour ago



















0














In Arrow Functions, this isn't the this you would expect. this in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.



Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails






share|improve this answer





















  • 1





    this does exist, otherwise the OP would get errors - this is from the bounding lexical scope

    – Jaromanda X
    1 hour ago











  • @JaromandaX you're right. let me fix that

    – Aniket G
    1 hour ago











  • keep using standard function notation - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails

    – Jaromanda X
    1 hour ago













  • @JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?

    – Aniket G
    1 hour ago











  • Feel free - it's one of my better ones :p

    – Jaromanda X
    1 hour ago



















0














       const click = () => {
console.log(this);
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
click();


'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.






share|improve this answer































    0














    You can bind this for arrow function to access functions and data. Your code should be something like



    const click = () => {
    this.className += ' grab';
    setTimeout(() => (this.className = 'remove'), 0);
    console.log('RENDERING');
    }.bind(this)


    It will bind this for arrow function and you can access those variable and functions.






    share|improve this answer































      0














      An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.






      share|improve this answer























        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });






        code for money is a new contributor. Be nice, and check out our Code of Conduct.










        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55175428%2fconverting-functions-to-arrow-functions%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        6 Answers
        6






        active

        oldest

        votes








        6 Answers
        6






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        4














        There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this inside function click() and const click may well be different. In the ES6 version, this will refer to whatever was this during the closure creation, which may not be what you want.



        Arrow Functions at MDN clears it up:




        An arrow function does not have its own this.




        …Which means that this will be inherited from the declaring scope.



        ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...) syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach) and avoid the need to rebind a function to a different this in some cases. Converting all function declarations to arrow syntax is not an upgrade.






        share|improve this answer


























        • @jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.

          – adc
          1 hour ago
















        4














        There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this inside function click() and const click may well be different. In the ES6 version, this will refer to whatever was this during the closure creation, which may not be what you want.



        Arrow Functions at MDN clears it up:




        An arrow function does not have its own this.




        …Which means that this will be inherited from the declaring scope.



        ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...) syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach) and avoid the need to rebind a function to a different this in some cases. Converting all function declarations to arrow syntax is not an upgrade.






        share|improve this answer


























        • @jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.

          – adc
          1 hour ago














        4












        4








        4







        There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this inside function click() and const click may well be different. In the ES6 version, this will refer to whatever was this during the closure creation, which may not be what you want.



        Arrow Functions at MDN clears it up:




        An arrow function does not have its own this.




        …Which means that this will be inherited from the declaring scope.



        ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...) syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach) and avoid the need to rebind a function to a different this in some cases. Converting all function declarations to arrow syntax is not an upgrade.






        share|improve this answer















        There's not really enough context to give you a good answer, but one thing stands out. Arrow functions maintain scope, so this inside function click() and const click may well be different. In the ES6 version, this will refer to whatever was this during the closure creation, which may not be what you want.



        Arrow Functions at MDN clears it up:




        An arrow function does not have its own this.




        …Which means that this will be inherited from the declaring scope.



        ES6 arrow functions aren't just a new way of declaring functions, and there's nothing inherently wrong with function myFunction(...) syntax, nor is it going away. Arrow functions avoid some verbosity when passing a function as an argument (e.g. to forEach) and avoid the need to rebind a function to a different this in some cases. Converting all function declarations to arrow syntax is not an upgrade.







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 1 hour ago

























        answered 1 hour ago









        adcadc

        18116




        18116













        • @jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.

          – adc
          1 hour ago



















        • @jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.

          – adc
          1 hour ago

















        @jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.

        – adc
        1 hour ago





        @jaromanda-x Yeah, you're probably right, especially if you assume that the function is normally called as an object method, which is why it would even have a className property. Shrug.

        – adc
        1 hour ago













        0














        The reason is that you just need to slightly restructure things.



        setTimeout(() => {this.className = 'remove'}, 0)


        You have parenthesis vs curly braces.



        your this may or may not work depending on how things are structured in the other code






        share|improve this answer


























        • absolutely no difference in this context - in other context, the difference is what the arrow function returns

          – Jaromanda X
          1 hour ago
















        0














        The reason is that you just need to slightly restructure things.



        setTimeout(() => {this.className = 'remove'}, 0)


        You have parenthesis vs curly braces.



        your this may or may not work depending on how things are structured in the other code






        share|improve this answer


























        • absolutely no difference in this context - in other context, the difference is what the arrow function returns

          – Jaromanda X
          1 hour ago














        0












        0








        0







        The reason is that you just need to slightly restructure things.



        setTimeout(() => {this.className = 'remove'}, 0)


        You have parenthesis vs curly braces.



        your this may or may not work depending on how things are structured in the other code






        share|improve this answer















        The reason is that you just need to slightly restructure things.



        setTimeout(() => {this.className = 'remove'}, 0)


        You have parenthesis vs curly braces.



        your this may or may not work depending on how things are structured in the other code







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 1 hour ago

























        answered 1 hour ago









        Jon BlackJon Black

        860718




        860718













        • absolutely no difference in this context - in other context, the difference is what the arrow function returns

          – Jaromanda X
          1 hour ago



















        • absolutely no difference in this context - in other context, the difference is what the arrow function returns

          – Jaromanda X
          1 hour ago

















        absolutely no difference in this context - in other context, the difference is what the arrow function returns

        – Jaromanda X
        1 hour ago





        absolutely no difference in this context - in other context, the difference is what the arrow function returns

        – Jaromanda X
        1 hour ago











        0














        In Arrow Functions, this isn't the this you would expect. this in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.



        Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails






        share|improve this answer





















        • 1





          this does exist, otherwise the OP would get errors - this is from the bounding lexical scope

          – Jaromanda X
          1 hour ago











        • @JaromandaX you're right. let me fix that

          – Aniket G
          1 hour ago











        • keep using standard function notation - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails

          – Jaromanda X
          1 hour ago













        • @JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?

          – Aniket G
          1 hour ago











        • Feel free - it's one of my better ones :p

          – Jaromanda X
          1 hour ago
















        0














        In Arrow Functions, this isn't the this you would expect. this in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.



        Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails






        share|improve this answer





















        • 1





          this does exist, otherwise the OP would get errors - this is from the bounding lexical scope

          – Jaromanda X
          1 hour ago











        • @JaromandaX you're right. let me fix that

          – Aniket G
          1 hour ago











        • keep using standard function notation - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails

          – Jaromanda X
          1 hour ago













        • @JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?

          – Aniket G
          1 hour ago











        • Feel free - it's one of my better ones :p

          – Jaromanda X
          1 hour ago














        0












        0








        0







        In Arrow Functions, this isn't the this you would expect. this in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.



        Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails






        share|improve this answer















        In Arrow Functions, this isn't the this you would expect. this in Arrow Functions is defined when you create the function - not when it is called. See here for more information on that.



        Thanks to @Jaromanda X from the comments - In this case, keep using standard function notation (function() {...}) - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 1 hour ago

























        answered 1 hour ago









        Aniket GAniket G

        2,182226




        2,182226








        • 1





          this does exist, otherwise the OP would get errors - this is from the bounding lexical scope

          – Jaromanda X
          1 hour ago











        • @JaromandaX you're right. let me fix that

          – Aniket G
          1 hour ago











        • keep using standard function notation - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails

          – Jaromanda X
          1 hour ago













        • @JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?

          – Aniket G
          1 hour ago











        • Feel free - it's one of my better ones :p

          – Jaromanda X
          1 hour ago














        • 1





          this does exist, otherwise the OP would get errors - this is from the bounding lexical scope

          – Jaromanda X
          1 hour ago











        • @JaromandaX you're right. let me fix that

          – Aniket G
          1 hour ago











        • keep using standard function notation - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails

          – Jaromanda X
          1 hour ago













        • @JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?

          – Aniket G
          1 hour ago











        • Feel free - it's one of my better ones :p

          – Jaromanda X
          1 hour ago








        1




        1





        this does exist, otherwise the OP would get errors - this is from the bounding lexical scope

        – Jaromanda X
        1 hour ago





        this does exist, otherwise the OP would get errors - this is from the bounding lexical scope

        – Jaromanda X
        1 hour ago













        @JaromandaX you're right. let me fix that

        – Aniket G
        1 hour ago





        @JaromandaX you're right. let me fix that

        – Aniket G
        1 hour ago













        keep using standard function notation - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails

        – Jaromanda X
        1 hour ago







        keep using standard function notation - i.e. just because you bought a new screwdriver, doesn't mean the old hammer isn't still the best tool for banging in nails

        – Jaromanda X
        1 hour ago















        @JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?

        – Aniket G
        1 hour ago





        @JaromandaX that's actually a very good analogy. Do you mind if I put that in my answer?

        – Aniket G
        1 hour ago













        Feel free - it's one of my better ones :p

        – Jaromanda X
        1 hour ago





        Feel free - it's one of my better ones :p

        – Jaromanda X
        1 hour ago











        0














               const click = () => {
        console.log(this);
        this.className += ' grab';
        setTimeout(() => (this.className = 'remove'), 0);
        console.log('RENDERING');
        }
        click();


        'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.






        share|improve this answer




























          0














                 const click = () => {
          console.log(this);
          this.className += ' grab';
          setTimeout(() => (this.className = 'remove'), 0);
          console.log('RENDERING');
          }
          click();


          'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.






          share|improve this answer


























            0












            0








            0







                   const click = () => {
            console.log(this);
            this.className += ' grab';
            setTimeout(() => (this.className = 'remove'), 0);
            console.log('RENDERING');
            }
            click();


            'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.






            share|improve this answer













                   const click = () => {
            console.log(this);
            this.className += ' grab';
            setTimeout(() => (this.className = 'remove'), 0);
            console.log('RENDERING');
            }
            click();


            'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered 1 hour ago









            Kaushal RegmiKaushal Regmi

            538




            538























                0














                You can bind this for arrow function to access functions and data. Your code should be something like



                const click = () => {
                this.className += ' grab';
                setTimeout(() => (this.className = 'remove'), 0);
                console.log('RENDERING');
                }.bind(this)


                It will bind this for arrow function and you can access those variable and functions.






                share|improve this answer




























                  0














                  You can bind this for arrow function to access functions and data. Your code should be something like



                  const click = () => {
                  this.className += ' grab';
                  setTimeout(() => (this.className = 'remove'), 0);
                  console.log('RENDERING');
                  }.bind(this)


                  It will bind this for arrow function and you can access those variable and functions.






                  share|improve this answer


























                    0












                    0








                    0







                    You can bind this for arrow function to access functions and data. Your code should be something like



                    const click = () => {
                    this.className += ' grab';
                    setTimeout(() => (this.className = 'remove'), 0);
                    console.log('RENDERING');
                    }.bind(this)


                    It will bind this for arrow function and you can access those variable and functions.






                    share|improve this answer













                    You can bind this for arrow function to access functions and data. Your code should be something like



                    const click = () => {
                    this.className += ' grab';
                    setTimeout(() => (this.className = 'remove'), 0);
                    console.log('RENDERING');
                    }.bind(this)


                    It will bind this for arrow function and you can access those variable and functions.







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered 1 hour ago









                    ZearaeZZearaeZ

                    710418




                    710418























                        0














                        An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.






                        share|improve this answer




























                          0














                          An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.






                          share|improve this answer


























                            0












                            0








                            0







                            An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.






                            share|improve this answer













                            An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered 48 mins ago









                            Bathri NathanBathri Nathan

                            937




                            937






















                                code for money is a new contributor. Be nice, and check out our Code of Conduct.










                                draft saved

                                draft discarded


















                                code for money is a new contributor. Be nice, and check out our Code of Conduct.













                                code for money is a new contributor. Be nice, and check out our Code of Conduct.












                                code for money is a new contributor. Be nice, and check out our Code of Conduct.
















                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55175428%2fconverting-functions-to-arrow-functions%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                Liste der Baudenkmale in Friedland (Mecklenburg)

                                Single-Malt-Whisky

                                Czorneboh