ES2015 – Memahami keyword this dan Arrow Function

Arrow function adalah fitur ES2015 yang dapat diimplementasikan menggunakan TypeScript.

Sebelum membahas arrow function, ada baiknya kita bahas keyword this. Yang dapat menyebabkan behaviour yang tidak diharapkan.

Agar lebih jelas, kita buka app.ts, lalu tambahkan kode dibawah. Lalu compile.

var container = document.getElementById('container');

function counter(el){
    this.count = 0;

    el.innerHTML = this.count;
    
    el.addEventListener('click', 
        function (){
            this.count += 1;
            el.innerHTML = this.count;
        }
    )
}

new counter(container);

Jalankan web server Anda, pada tutorial digunakan liteserver.

$ lite-server

Setelah webserver jalan, akan tampak angka nol, jika Anda click maka akan mengembalikan nilai NaN.

Hal ini terjadi karena, this dari code addEventListener, berbeda this pada function counter. Pada code dibawah, this menuju ke global browser scope.

    el.addEventListener('click', 
        function (){
            this.count += 1;
            el.innerHTML = this.count;
        }
    )

Hal ini cukup menyebabkan masalaha bagi programmer javascript pemula mau mahir.

Ada yang menggunakan pendekatan dengan menyimpan this ke variable kemudian digunakan pada bloc berikutnya.

function counter(el){
    this.count = 0;

    el.innerHTML = this.count;
    
    let _this = this;

    el.addEventListener('click', 
        function (){
            _this.count += 1;
            el.innerHTML = _this.count;
        }
    )
}

Hal diatas tidak salah, namun ES2015 menawarkan pendekatan yang lebih elegan, yaitu arrow function.

Code diatas dapat ditulis ulang seperti berikut:

var container = document.getElementById('container');

function counter(el){
    this.count = 0;

    el.innerHTML = this.count;
    
    el.addEventListener('click', () => {
            this.count += 1;
            el.innerHTML = this.count;
        }
    )
}

new counter(container);

Compile dan jalankan webserver, jika Anda click, maka fungsi counter berjalan sesuai ekspektasi.

Catatan: arrow function, pada pemrograman bahasa lain, sering disebut lambda function.