ES6 Arrow Function Strange Behavior

Question

Hi guys I am a bit confused about the arrow function i read the arrow function documentation on mozila developers and I found out that the arrow functions cannot be used as constructors and will throw an error when used with new. but in this example I didn't get any errors it returns an empty object however I passed the parameters that I want to construct the object with.

Here is the documentation.

let ConstructObjectArrow = (name, age, city)=>{
  this.name = name;
  this.age = age;
  this.city = city;
}

let armin = new ConstructObjectArrow("Armin", 32, 'London');
console.log(armin);

the output is: ConstructObjectArrow {} and it has a proto not undefined as the documentation said.

I get `TypeError: ConstructObjectArrow is not a constructor`. In what environment are you testing? — Sirko, Jun 24 '18 at 14:54
@Sirko I am using an online editor here's the link https://stackblitz.com — Ahmed AbdElNasser, Jun 24 '18 at 14:56
Possible duplicate of [What does "this" refer to in arrow functions in ES6?](https://stackoverflow.com/questions/28371982/what-does-this-refer-to-in-arrow-functions-in-es6) — baao, Jun 24 '18 at 15:29
From the page you linked to the explanation to your question , https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this — baao, Jun 24 '18 at 15:31
*the output is: ConstructObjectArrow {} and it has a proto not undefined as the documentation said.* - no, it's not. If you're running this code with Babel, it obviously won't work as intended because an arrow is transpiled to regular function. — Estus Flask, Jun 24 '18 at 18:02

jfriend00 · Answer 1 · 2018-06-24T17:19:42.470

You cannot use an arrow function for a constructor and it does not make sense to do so.

By definition, an arrow function takes its this value from the lexical context. Therefore, it will not have a this value from the new object, therefore it does not work as a constructor.

Because of this, the interpreter doesn't even let you try and generates a TypeError because you aren't passing an appropriate type of constructor function to new.

Remember that arrow functions are not just a syntactical shortcut, they cause a difference in behavior with the value of this and that difference is only appropriate in some circumstances.

You may want to read this article which explains further: When not to use arrow functions.

Internal to the Javascript implementation, a constructor must be a certain type of Function object which has various internal methods such as [[Construct]] and an arrow function does not have these internal properties. Thus, when you attempt to call new on it, the interpreter discovers you are not passing the right type of function to new and thus it creates a run-time error.

@AhmedAbdElNasser - Did this answer your question? If so, you can indicate that to the community by clicking the checkmark to the left of the answer and also earn yourself some reputation points for following the proper procedure here. — jfriend00, Jun 24 '18 at 23:13

ES6 Arrow Function Strange Behavior

1 Answers1