Dice challenge unable to use ES2015 Arrow function for constructor

Question

Hi, I tried using the constructor function which worked perfectly but when i try to update it for ES2015 it throws error in console.

// works fine
function dice(sides) {
  this.sides = sides;
  this.roll = function(){
    return Math.floor(Math.random() * this.sides) + 1; 
  }
}

// this is not working. i tried using let and var key words too.
const dice = sides => {
  this.sides = sides;
  this.roll = function(){
    return Math.floor(Math.random() * this.sides) + 1; 
  }
}

const dice1 = new dice(6);
const dice2 = new dice(6);


console.log(`${dice1.roll()} ${dice2.roll()}`);

Answer 1 · 2017-12-10T10:25:05Z

December 10, 2017 10:25am

If you using ES2015 syntax for creating class, then you must use "class" and appropriate syntax. Arror functions doen't have direct relationship with class constructor. And the main feature of arror function, that it have not it own "this" context, "this" takes from parent, but in your case the parent is just a constant, that doesn't have context by itself.

// this is not working. i tried using let and var key words too.
class Dice {
  constructor(sides) {
    this.sides = sides;
  }
  roll() {
    return Math.floor(Math.random() * this.sides) + 1;
  }
}


const dice1 = new Dice(6);
const dice2 = new Dice(6);


console.log(`${dice1.roll()} ${dice2.roll()}`);

Answer 2 · 2017-12-10T10:31:16Z

December 10, 2017 10:31am

That's because in es6 you should be using the class keyword to create an object, which is the syntatic sugar for es5 function constructor. You cannot use a es6 arrow function as a function constructor.

Welcome to the Treehouse Community

Looking to learn something new?

Jayaraman Thiyyadi

Jayaraman Thiyyadi

Dice challenge unable to use ES2015 Arrow function for constructor

2 Answers

Andrey Misikhin

Andrey Misikhin

Paolo Scamardella

Paolo Scamardella