Apa kabar semua, coretan gue kali ini menyoal tentang penggunaan fungsi call() dan apply(). Coretan ini sebenernya erat kaitanya dengan artikel sebelumnya tentang Javascript: Function Scope. Di sana disebutkan ada beberapa cara untuk merubah scope eksekusi fungsi dengan metode ini. Namun, kali ini gue mau nulis manfaat lain dari penggunaan call() dan apply().

Apa itu call() dan apply()

call() dan apply() mempunya tugas yang sama yakni untuk menjalankan fungsi, hanya saja kita dimanjakan dengan fleksibilitas penentuan scope-nya plus… kita diberi kemudahan untuk melempar parameter tambahan ke dalam fungsi yang kita panggil. Jadi, kita bisa mempunya sebuah fungsi yang dapat digunakan untuk beberapa objek beserta tambahan parameter. Contoh:

var a = {x: 1, y: 2};
var b = {x: 3, y: 4};

function coordinate() {
    console.log('(' + this.x + ',' + this.y + ')');
}

coordinate();           // (undefined,undefined)

coordinate.call(a);     // (1,2)

coordinate.call(b);     // (3,4)

coordinate.apply(a);    // (1,2)

coordinate.apply(b);    // (3,4)

Menjalankan fungsi coordinate() secara langsung hanya akan menghasilkan undefined. Ingat artikel lalu tentang penggunaan this. this pada eksekusi pertama merujuk pada objek global (window) karena fungsi menempel langsung pada window. Sedangkan objek window saat ini tidak memiliki atribut x dan y.

Apa bedanya call() dan apply()

Perbedaan call() dan apply() terletak pada penulisan parameter kedua dst. Penulisan parameter kedua pada fungsi call() dituliskan serial dipisahkan dengan koma (nampak seperti penulisan varargs pada java). Sedangkan penulisan parameter pada fungsi apply() dituliskan dalam bentuk array[].

function operation(type, a, b) {
    switch(type) {
        case 'tambah':
            console.log(a + b);
            break;

        case 'kurang':
            console.log(a - b);
            break;

        case 'kali':
            console.log(a * b);
            break;

        case 'bagi':
            console.log(a / b);
            break;
    }
}
operation.call(null, 'tambah', 5, 6);       // 11
operation.apply(null, ['tambah', 5, 6]);    // 11

Sekedar Tips?

Tips pertama: Kadang kita menggabungkan array menggunakan fungsi concat(). Tahukah kamu? fungsi concat itu menghasilkan array baru sehingga terputus referensi-nya dari array sumber?

var a = ['Senin', 'Selasa'];
var b = a.concat(['Rabu', 'Kamis']);

console.log(a);     // ['Senin', 'Selasa']
console.log(b);     // ['Senin', 'Selasa', 'Rabu', 'Kamis']

Array a tetap tidak berubah isinya. Agar kita bisa menambah item ke dalam array a tanpa menciptakan variabel baru, kita bisa menggunakan push.apply()

var a = ['Senin', 'Selasa'];
a.push.apply(a, ['Rabu', 'Kamis']);

console.log(a);     // ['Senin', 'Selasa', 'Rabu', 'Kamis']

Tips kedua: Kadang kita menyisipkan sebuah item ke dalam array menggunakan fungsi splice()

var a = [1, 2, 3];
a.splice(1, 0, 4);

console.log(a);     // [1, 4, 2, 3];

Nah, bagaimana kalau kita ingin menyisipkan beberapa item ke dalam array? Kita bisa menggunakan splice.apply()

var a = [1, 2, 3];
var b = [4, 5, 6];
a.splice.apply(a, [1, 0].concat(b));

console.log(a);     // [1, 4, 5, 6, 2, 3];
Advertisements