title: JavaScript binding - arrow functions and bind
body: <p>I have this bit of code: </p>
  
  <pre><code>const data = {
    x: "Target"
  }
  
  let bar = () =&gt; {
    console.log(this.x)
  }
  
  let final = bar.bind(data); 
  final();
  </code></pre>
  
  <p>This code returns undefined. Here is the same code, but with non-arrow functions: </p>
  
  <pre><code>const data = {
    x: "Target"
  }
  
  let bar = function(){
    console.log(this.x)
  }
  
  let final = bar.bind(data); 
  final();
  </code></pre>
  
  <p>This code works. I want to understand why the arrow function kept the binding from working. I know that they handle <em>this</em> differently. I know that they keep the original context in which they were called, which in this case does not include x. But does it also prevent bind() from working? </p>