JS arrow function demonstration

arrow_function_comparison1.js

let clock = {
    timerIntervalId: null,
    timer: 60,  // 60 sec
    startTimer: function(){
        // 
        function decrement(){
            if(this.timer < 0)
                this.stopTimer()
            else
                this.timer -= 1
        }

        // this wouldn't work. By default, the closure "decrement" is not bound to the current clock object, 
        // so the "this" keyword in the closure is referred to the "window" object, 
        // ie, it won't be able to access the "timer" property and "stopTimer" method
        this.timerIntervalId = setInterval(decrement, 1000);

        // To make the "this" keyword refer to the "clock" object, we will need to bind the closure 
        // to the current context as followed.
        // Now the "this" keyword in the closure is bound to the current context, ie the clock object
        this.timerIntervalId = setInterval(decrement.bind(this), 1000);

    },
    stopTimer: function () {
        clearInterval(this.timerIntervalId)
    }

}

arrow_function_comparison2.js

let clock2 = {
    timerIntervalId: null,
    timer: 60,  // 60 sec
    startTimer: function () {
        // 
        let decrement = () => {
            if (this.timer < 0)
                this.stopTimer()
            else
                this.timer -= 1
        }

        // Works without binding anything!
        // The arrow function automatically bind the immediate context to itself. 
        this.timerIntervalId = setInterval(decrement, 1000);

    },
    stopTimer: function () {
        clearInterval(this.timerIntervalId)
    }

}