Why can I not use an arrow function in an object?

Regular functions declared using the function keyword have their own this. After some digging, I learned that arrow functions do not have their own this. For this reason, they don't make good methods on objects.

If you use a this keyword inside an arrow function, it references the context of where the call was made. In this case, that is the global scope. This means that your this.sides reference isn't pointing where you intend when the roll() function is called.

If you add var sides = 6 to the global scope, then the code with the arrow function resolves as expected.

For this reason (among others), arrow functions aren't recommended to be used as methods on objects, per MDN.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Here's a code example to demonstrate.

var sides = 6; //declared in global scope

window.onload = () => {

var dice = {
  //sides: 6, commented out for demo purposes
  roll: () => {
      let random = Math.floor(Math.random() * this.sides) + 1;
      return random;
  }
}
var show = document.querySelector('#dis');
var button = document.querySelector('#go')
.addEventListener('click', () => {
      var RN = dice.roll(); // removed stray open parenthesis, hat-tip to Steven Parker
      show.innerHTML = RN;
});

}