Ngtjyty

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?

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.

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

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

       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'.

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.

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.