Arrow Syntax VS ES5 function scope

Question

I was trying to experiment with some JavaScript code. I am not sure why the ES6 syntax fails.

String.prototype.spacify = function() {
  console.log(this.split('').join(' '));
}

'hello world'.spacify();

^^ This works GREAT! But, When I do this

String.prototype.spacify = () => {
  console.log(this.split('').join(' '));
}

'hello world'.spacify();

When I convert the function to Arrow function, I get this.split is not defined. I didn't understand. Is arrow syntax doing something special with scoping?

Please enlighten!

A google reveals many takes on `this` https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/ — mplungjan, Sep 26 '17 at 05:12

score 2 · Answer 1 · answered Sep 26 '17 at 05:13

In arrow function the context of this refers to the outer this. Here the this of the function test is equal to the this in the arrow function.

arrow function doesn't create it's own context, it just takes the outer context

function test() {


     String.prototype.spacify = () => {
         console.log(this.split('').join(' '));
     }

}

score 0 · Answer 2 · answered Sep 26 '17 at 05:13

0

In arrow functions, the scope does not change.

Meaning:

const globalThis = this;

String.prototype.spacify = () => {
  // this === globalThis
  ...
}

answered Sep 26 '17 at 05:13

Mike Rapadas

4,347
2
26
20

That's not quite right. Scope and `this` are related but are not the same. Of course arrow functions have their own scope, just like any other function. – Felix Kling Sep 26 '17 at 05:54
@FelixKling interesting, can you elaborate a bit more? – Mike Rapadas Sep 26 '17 at 14:03

Arrow Syntax VS ES5 function scope

2 Answers2