Why can only the ES6 form of setTimeout see my React props?

Question

When I try to call a redux action creator like this, it fails because this.props is undefined.

setTimeout(function(){
    birthday = window.document.getElementById('birthday')
    this.props.actions.setBirthday(birthday.value)
  }, 100);

But when I use the ES6 version like this, the props are accessible and it works.

setTimeout(() => {
    birthday = window.document.getElementById('birthday')
    this.props.actions.setBirthday(birthday.value)
  }, 100)

Why? I'm an advanced-beginner and would like to understand this.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this — Kevin B, May 24 '16 at 20:26
Great thanks. I can see how this question could be a dupe in a pure javascript context. I'm inexperienced enough that I was focused on why the behavior was different in a React/Redux context, but I realize that's irrelevant. — jerimiah797, May 24 '16 at 20:35

score 0 · Answer 1 · answered May 24 '16 at 20:27

0

That's because arrow functions have fixed context, the same as the parent function. In regular functions however, the context can change.

See MDN docs for more information.

answered May 24 '16 at 20:27

1 Answers1