ES6 Arrow Function: Lexical This

by andyjmeyers

HTML

<div id='test1'></div>

Babel + JSX

var solarSystem = {
    planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto'],
    star: 'Sun'
};

solarSystem.performOperation = function(){
    this.message = '';
    this.planets.forEach((p, i) => {
        this.message += p + ' is planet number ' + (i + 1) + ' from the ' + this.star + '.  ';
    });
};
solarSystem.performOperation();

document.getElementById('test1').innerHTML = solarSystem.message;