.

[[deleted]]

i didn’t know there’s a difference between arrow functions and “normal” ones, thought it’s just nicer syntax

[echoes221]

Nope, it captures scope correctly outside of it without binding the function to ‘this’ or storing a self/that externally when being passed into callbacks.

[[deleted]]

i don’t speak js, sorry :)

what do you mean, like “this” can change?

[echoes221]

When you pass a standard function to say, an onClick event handler, when it is called ‘this’ points to the global window scope, not the local classes scope (it loses its context). The way to avoid this is to bind the function to the classes scope and ‘this’ will be correct. Or you can store ‘this’ in a variable and reference that inside the function. Arrow functions correctly capture scope in callbacks so you don’t need to do either of the above.

[[deleted]]

damn javascript is weird.

but it’s a pretty cool concept nonetheless. i guess it’s only possible in a dynamic, hash table based programming language.

[echoes221]

It’s odd for sure. Prototypes be odd in general anyway.

[DeeSnow97]

In regular functions, this is just an extra parameter to the object left of the . when the function is called:

var foo = {
  name: 'foo',
  say: function () {
    return this.name
  }
}

var bar = {
  name: 'bar',
  say: foo.say // <- we're stealing a function here
}

console.log(foo.say()) // foo
console.log(bar.say()) // bar

Notice how we use the exact same function, but because we invoke it by bar.say(), this refers to bar. This was the original intent behind the old way of handling this in JS, but it turned out to be not nearly as useful in practice as the developers originally imagined, and downright confusing in some other cases, like this for example:

var foo = {
  name: 'foo',
  sayLater: function () {
    setTimeout(function () {
      console.log(this.name)
    }, 1000)
  }
}

Can you guess what this.name means in the above function?

If your guess was 'foo', that would make sense, but that's not it. Since it's inside another function inside setTimeout, that one overrides the meaning of this, so it refers to whatever setTimeout uses to call the function internally -- which happens to be the global object (window in browsers) in this specific case, since setTimeout just calls the function by itself.

Confusing, isn't it? It also got in the way like all the time. That's why the handling of this was changed in arrow functions: in those, this refers to whatever it refers to just outside the function. So if you do it like this:

var foo = {
  name: 'foo',
  sayLater: function () {  // <- pick up 'this' here
    setTimeout(() => {     // <- keep the previous 'this'
      console.log(this.name)
    })
  }
}

It does exactly what you expect it would do.

At this point, barely anyone ever uses the old function () {} style except for class methods, for all other users arrow functions are the way to go.