Selasa, 11 Agustus 2015

Pengertian Fungsi dan Perintah-perintah dalam JAVASCRIPT




JavaScript adalah pemrograman sisi klien yang akan dijalankan oleh browser dari pengunjung, dan program JavaScript biasa ditanamkan didalam halaman web untuk menghasilkan halaman yang dinamis. Untuk mempelajari JavaScript sebaiknya anda menguasai dasar-dasar HTML Script sehingga akan memudahkan anda untuk menyisipkan program JavaScript secara baik dan benar



Perintah Dasar pada JavaScript
Perintah dasar  merupakan perintah yang digunakan sebagai operasi yang paling dasar dalam pemrograman Javascript, yaitu
  1. perintah assigment
  2. perintah untuk menampilkan output
  3. perintah untuk menerima input
  4. operator melakukan manipulasi data
Assignment adalah proses memasukkan data ke dalam variabel, baik variabel tunggal atau variabel jamak, atau proses pengisian variabel dengan data.

contoh:
nama = 'Rudianto'
angka = 11
umur = 25
namalengkap = 'Teknik Komputer'

Perintah assignment juga dapat dilakukan sambil mendeklarasikan suatu variabel yang bisa diberi nilai awal atau yang disebut juga dengan proses inisialisasi.

contoh:
var nama = 'Rudianto'
var angka = 9
var umur = 25

Dalam Javascript, setiap variabel dapat digunakan untuk mendefinisikan lebih dari satu jenis data. Artinya suatu variabel bisa berganti isi dengan tipe data yang berbeda.
contoh:
var angka = 'sembilan'
var angka = 9

Dalam satu pernyataan assignment juga bisa diisikan data lebih dari baris, dan setiap pindah baris ditutup dengan menuliskan karakter backslash(\).
contoh:
kalimat = " Selamat datang di program studi Teknik Komputer \
Politeknik NSC Surabaya \
semoga bermanfaat"

Perintah Output

document.write(namavariabel)
document.write("Kalimat"+namavariabel)
alert("Kalimat"+namavariabel)

Contoh:

<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menampilkan output dan alert</h1>
 <script type="text/javascript" language="javascript">
  nama = "Rudianto"
  umur = 35
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)
  alert("Nama anda : "+nama+"\n"+"Umur anda : "+umur)
 </script>
</body>
</html>

Hasil Running
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN4n90PVpnHtuPR_CUFNrjo6X9uzArVGmrfLbZtX-N2_LMkUFcdakDafUuK46PDb-MYopTA_73AfmbJVUS4elBlMrDraV4rF7njEBUR7bGY5k4bbzhixF6WRKnrkQEQhobTr_pmfHnRM7P/s320/output.jpg

Perintah Input dengan prompt
namavariabel = prompt("Pesan" , nilaidefault)

dimana nilai default adalah nilai awal yang diberikan apabila pengguna tidak mengubahnya.

contoh:

<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menerima input</h1>
 <script type="text/javascript" language="javascript">
  nama = prompt("Siapa nama anda ? " , "Teknik Komputer")
  umur = prompt("Berapa umur anda ? ", 25)
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)

 </script>
</body>
</html>

Hasil running
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYHBDpqWW7ft3ygV5idkYFav_bT9ElARkhUdTHvusR0dRPyXWaYMOAFKPdrLV6PG4Q0YKrXYhLb2VDOzZEQ9KYQ2xPkWQUtuRDFx9bjQb64hVRhOxh1bbHA75SGMMGp2ZTdNO0q6heWR_i/s320/input.jpg
setelah diisi akan ditampilkan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEFfbNjJ2PyM3aqGWnZKrMc077L2r8RF-138WwQQd3Sp3xVNHppj9jBh3cVlmFXNxsOBlpY1RAna2t6HIIEWblLlyWEjQZnWoFu62Lkmt2wvUPAv0eY8xVfUxpAF6ZzZXLxcEJZslv8st/s320/input1.jpg




Fungsi pada Javascript


Fungsi adalah salah satu bagian yang paling indah dari Javascript. Sebagai bahasa fungsional Javascript mengimplementasikan fungsi kelas pertama (first class function). Fungsi dapat disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya. Implementasi fungsi yang sangat fleksibel seperti ini membuka banyak kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya berjalan dengan baik, tetapi juga sangat elegan dan indah.
Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita memanggil fungsi, maka perintah-perintah yang ada di dalam fungsi tersebut dijalankan. Secara umum fungsi digunakan untuk penggunaan kembali kode (code reuse) dan penyimpanan informasi (information hiding). Implementasi fungsi kelas pertama juga memungkinkan kita menggunakan fungsi sebagai unit-unit yang dapat dikombinasikan, seperti layaknya sebuah lego. Dukungan terhadap pemrograman berorientasi objek juga berarti fungsi dapat kita gunakan untuk memberikan perilaku tertentu dari sebuah objek.
Dalam sudut pandang tertentu, kita bahkan dapat mengatakan bahwa intisari dari pemrograman adalah mengubah atau menguraikan kebutuhan pengguna menjadi fungsi dan struktur data. Oke, cukup untuk berbicara tentang cinta penulis terhadap fungsi. Sekarang mari kita lihat langsung kenapa dan apakah fungsi benar-benar seperti yang diceritakan oleh penulis.
Pembuatan Fungsi pada Javascript
Sebuah fungsi pada Javascript dibuat dengan cara seperti berikut:
1
2
3
4
function tambah(a, b) {
    hasil = a + b;
    return hasil;
}
Cara penulisan fungsi seperti ini dikenal dengan nama function declaration, atau deklarasi fungsi. Terdapat empat komponen yang membangun fungsi yang baru kita definisikan di atas, yaitu:
  1. Kata kunci function, yang memberitahu Javascript bahwa kita akan membuat fungsi.
  2. Nama fungsi, dalam contoh di atas adalah tambah. Dengan memberikan sebuah fungsi nama maka kita dapat merujuk ke fungsi tersebut dengan nama yang diberikan. Harus diingat bawa nama fungsi bersifat opsional, yang berarti fungsi pada Javascript tidak harus diberi nama. Kita akan membahas tentang hal ini lebih dalam nanti.
  3. Daftar parameter fungsi, yaitu a, b pada contoh di atas. Daftar parameter ini selalu dikelilingi oleh tanda kurung (()). Parameter boleh kosong, tetapi tanda kurung wajib tetap dituliskan. Parameter fungsi akan secara otomatis didefinisikan menjadi variabel yang hanya bisa dipakai di dalam fungsi. Variabel pada parameter ini diisi dengan nilai yang dikirimkan kepada fungsi secara otomatis.
  4. Sekumpulan perintah yang ada di dalam kurung kurawal ({}). Perintah-perintah ini dikenal dengan nama badan fungsi. Badan fungsi dieksekusi secara berurut ketika fungsi dijalankan.
Penulisan deklarasi fungsi (function declaration) seperti di atas merupakan cara penulisan fungsi yang umumnya kita gunakan pada bahasa pemrograman imperatif dan berorientasi objek. Tetapi selain deklarasi fungsi Javascript juga mendukung cara penulisan fungsi lain, yaitu dengan memanfaatkan ekspresi fungsi (function expression). Ekspresi fungsi merupakan cara pembuatan fungsi yang memperbolehkan kita melewatkan nama fungsi. Fungsi yang dibuat tanpa nama dikenal dengan sebutan fungsi anonim atau fungsi lambda. Berikut adalah cara membuat fungsi dengan ekspresi fungsi:
1
2
3
4
var tambah = function (a, b) {
    hasil = a + b;
    return hasil;
};
Terdapat hanya sedikit perbedaan antara ekspresi fungsi dan deklarasi fungsi:
  1. Penamaan fungsi. Pada deklarasi fungsi, kita langsung memberikan nama fungsi sesuai dengan sintaks yang disediakan Javascript. Menggunakan ekspresi fungsi kita pada dasarnya menyimpan sebuah fungsi anonim ke dalam variabel, dan nama fungsi adalah nama variabel yang kita buat. Perlu diingat juga bahwa pada dasarnya ekspresi fungsi adalah fungsi anonim. Penyimpanan ke dalam variabel hanya diperlukan karena kita akan memanggil fungsi nantinya.
  2. Ekspresi fungsi dapat dipandang sebagai sebuah ekspresi atau perintah standar bagi Javascript, sama seperti ketika kita menuliskan kode var i = 0;. Deklarasi fungsi merupakan konstruksi khusus untuk membuat fungsi. Hal ini berarti pada akhir dari ekspresi fungsi kita harus menambahkan ;, sementara pada deklarasi fungsi hal tersbut tidak penting.
Karena pada Javascript sebuah fungsi juga adalah sekaligus sebuah objek, maka pada buku ini kita akan hampir selalu menggunakan ekspresi fungsi. Setiap kali kita menciptakan fungsi, pada dasarnya kita membuat sebuah objek Function baru, dengan nama yang kita berikan. Karenanya, secara eksplisit menuliskan bahwa kita membuat objek baru dan memperlakukan objek tersebut sama seperti perintah-perintah lain dalam program akan menyederhanakan kode program kita, yang pada akhirnya akan mempermudah kita mengerti kode kita nantinya.
Aturan pembuatan fungsi, baik ekspresi fungsi maupun deklarasi fungsi, sama dengan aturan penulisan ekspresi. Di mana kita dapat menuliskan ekspresi, kita dapat mendefinisikan fungsi juga. Karena aturan ini, maka kita juga dapat mendefinisikan fungsi di dalam fungsi lainnya. Fungsi yang berada di dalam fungsi lainnya memiliki akses terhadap semua variabel yang ada pada fungsi penampungnya. Keterhubungan fungsi di dalam fungsi ini dikenal dengan nama closure. Kita akan membahas tentang closure dan melihat bagaimana closure memberikan kemampuan ekspresi yang sangat besar kepada pengembang pada bagian berikutnya.
Note
Terdapat satu lagi cara membuat fungsi pada Javascript, yaitu dengan menggunakan objek Function. Tetapi kita tidak akan membahas cara ini, karena cara yang ketiga akan sangat jarang digunakan.
Fungsi sebagai Objek
Sebelum melihat bagaimana fungsi dapat dipanggil, kita akan melihat keterhubungan antara fungsi dengan objek terlebih dahulu. Kita perlu mengerti hubungan antara fungsi dan objek karena terdapat empat cara pemanggilan fungsi pada Javascript, dan dua dari empat cara tersebut melibatkan konsep fungsi sebagai objek.
Fungsi pada javascript adalah sebuah objek. Sebagai sebuah objek, semua fungsi dalam Javascript merupakan turunan dari Function.prototype. Function.prototype juga adalah merupakan turunan dari Object.prototype, sama seperti semua objek-objek lain dalam Javascript. Perbedaan utama fungsi dengan objek lain pada umumnya adalah fungsi dapat dipanggil, dan memiliki dua buah properti khusus, yaitu konteks pemanggilan fungsi dan kode pada isi badan fungsi. Kegunaan dari dua buah properti khusus ini akan kita lihat pada bagian selanjutnya.
Sebagai sebuah objek, fungsi juga dapat kita perlakukan sama dengan objek lainnya. Pada bagian sebelumnya kita telah melihat bahwa fungsi dapat disimpan di dalam variabel. Fungsi juga dapat kita simpan di dalam array atau objek lain, dikirimkan sebagai argumen dari fungsi lain, atau dikembalikan dari sebuah fungsi. Sama seperti objek, kita juga dapat mengaitkan fungsi (method) kepada fungsi.
Pemanggilan Fungsi
Sebuah fungsi dapat dipanggil untuk menjalankan seluruh kode yang ada di dalam fungsi tersebut, sesuai dengan parameter yang kita berikan. Pemanggilan fungsi dilakukan dengan cara menuliskan nama fungsi tersebut, kemudian mengisikan argumen yang ada di dalam tanda kurung.
Misalkan fungsi tambah yang kita buat pada bagian sebelumnya:
1
2
3
4
var tambah = function (a, b) {
    var hasil = a + b;
    return hasil;
};
dapat dipanggil seperti berikut:
1
tambah(3, 5);
Yang terjadi pada kode di atas adalah kita menggantikan a dan b masing-masing dengan 3 dan 5. Seperti yang dapat dilihat, hal ini berarti pengisian argumen pada saat pemanggilan fungsi harus berurut, sesuai dengan deklarasi fungsi.
Sama seperti sebuah variabel, fungsi juga mengembalikan nilai ketika dipanggil. Dalam kasus di atas, tambah(3, 5) akan mengembalikan nilai 8. Nilai ini tentunya dapat disimpan ke dalam variabel baru, atau bahkan dikirimkan sebagai sebuah argumen ke fungsi lain lagi:
1
2
3
4
5
var simpan = tambah(3, 5); // simpan === 8
tambah(simpan, 2);         // mengembalikan 10

tambah(tambah(3, 5), 2)    // juga mengembalikan 10
tambah(tambah(2, 3), 4)    // mengembalikan 9
Fungsi akan mengembalikan nilai ketika kata kunci return ditemukan. Kita dapat mengembalikan fungsi kapanpun, dan fungsi akan segera berhenti ketika kata kunci return ditemukan. Berikut adalah contoh kode yang memberikan gambaran tentang pengembalian nilai fungsi:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var naikkan = function (n) {
    var hasil = n + 10;
    return hasil;

    // kode di bawah tidak dijalankan lagi
    hasil = hasil * 100;
}

naikkan(10);  // mengembalikan 20
naikkan(25);  // mengembalikan 35
Kita juga dapat langsung memberikan ekspresi kepada return, dan ekspresi tersebut akan dijalankan sebelum nilai dikembalikan. Hal ini berarti fungsi tambah maupun naikkan yang sebelumnya bisa disederhanakan dengan tidak lagi menyimpan nilai di variabel hasil terlebih dahulu:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var naikkan = function (n) {
    return n + 10;
}

var tambah = function (a, b) {
    return a + b;
}

tambah(4, 4);          // mengembalikan 8
naikkan(10);           // mengembalikan 20
tambah(naikkan(5), 7); // mengembalikan 22
Fungsi pada Javascript juga akan selalu mengembalikan fungsi. Ketika tidak menemukan perintah return, Javascript akan mengembalikan undefined pada akhir fungsi.
Pola Pemanggilan Fungsi
Ketika sebuah fungsi dipanggil, secara otomatis Javascript akan memberikan dua nilai tambahan kepada fungsi tersebut. Kedua nilai tambahan ini diberikan bersamaan dengan pemberian nilai argumen fungsi. Adapun kedua nilai yang diberikan adalah this dan arguments.
Nilai arguments merupakan sebuah objek yang mirip dengan array, dan berisi seluruh argumen yang diberikan kepada fungsi. Kita akan membahas penggunaan nilai ini pada bagian selanjutnya.
Nilai this isinya bergantung kepada cara kita memanggil fungsi. Cara pemanggilan fungsi dikenal dengan nama pola pemanggilan (invocation pattern) dari fungsi tersebut. Terdapat empat pola pemanggilan fungsi yang ada pada Javascript, yaitu:
  1. Method Invocation Pattern,
  2. Function Invocation Pattern,
  3. Constructor Invocation Pattern, dan
  4. Indirect Invocation Pattern.
Mari kita lihat maksud dari masing-masing pola pemanggilan, dan perbedaan nilai this pada setiap pola.
Method Invocation Pattern
Sebuah fungsi yang dijadikan sebagai properti dari objek dikenal dengan istilah method. Method merupakan salah satu konsep dasar dalam pemrograman berorientasi objek, yang digunakan untuk memberikan sebuah perintah standar bagi sebuah objek. Berikut adalah contoh dari sebuah method:
1
2
3
4
5
6
7
8
9
var papanSkor = {
    skor: 0,
    tambahSkor: function (nilai) {
        this.skor += (typeof nilai === "number")? nilai : 1;
    },
    ambilSkor: function () {
        return this.skor;
    }
};
Objek papanSkor yang barusan kita buat memiliki satu buah properti, yaitu skor dan dua buah method, yaitu tambahSkor dan ambilSkor.
Method ambilSkor mengembalikan nilai dari properti skor yang sekarang, sementara tambahSkor akan menambahkan nilai skor sesuai dengan parameter yang diberikan oleh pengguna method. Method tambahSkor juga memberikan tambahan sesuai dengan tipe data yang dikirimkan: jika parameter yang diberikan merupakan sebuah angka, maka penambahan dilakukan sesuai dengan jumlah angka yang dikirimkan, jika tidak maka skor akan bertambah satu saja.
Sama seperti properti, pemanggilan method dapat dilakukan dengan dua cara, yaitu dengan menggunakan tanda titik (.) dan kurung siku ([]):
1
2
3
4
5
papanSkor.ambilSkor()      // mengembalikan 0
papanSkor.tambahSkor(1)    // mengembalikan undefined
papanSkor["ambilSkor"]()   // mengembalikan 1
papanSkor["tambahSkor"](2) // mengembalikan undefined
papanSkor.ambilSkor()      // mengembalikan 3
Dari ekspreimen yang kita lakukan pada kode di atas, kita dapat melihat bahwa properti this berisi objek yang menampung dirinya. Dalam hal ini nilai this pada Javascript tidak berbeda dengan nilai this pada bahasa pemrograman berorientasi objek lain pada umumnya. Artinya kita dapat mengakses seluruh properti maupun method dari objek itu sendiri ketika menggunakan this.
Function Invocation Pattern
Ketika sebuah fungsi bukan merupakan properti dari sebuah objek (method), nilai tambahan this akan dihubungkan ke objek global Javascript, yaitu window. Mari kita lihat bagaimana this dikaitkan ke objek global:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Variabel nilai disimpan dalam objek global.
// Objek global Javascript secara standar adalah window
// sehingga nilai akan disimpan dalam window.nilai
var nilai = 100;

nilai;        // mengembalikan 100
window.nilai; // mengembalikan 100

var kurang = function (n) {
    // this.nilai merupakan window.nilai (!)
    this.nilai = this.nilai - n;
};

kurang(10);

nilai;        // mengembalikan 90 (!)
window.nilai; // mengembalikan 90 (!)

// Hal yang sama berlaku untuk fungsi di dalam fungsi juga
var tambah_sepuluh = function () {
    var tambah = function (n) {
            // this.nilai merupakan window.nilai (!!!)
        this.nilai = this.nilai + n;
    };

    tambah(10);
};

nilai; // mengembalikan 90

tambah_sepuluh();

nilai; // mengembalikan 100 (!!!)
Pada kode di atas, kita dapat melihat bagaimana nilai this di dalam fungsi kurang maupun tambah terikat dengan variabel global. Tidak peduli berapa tingkat fungsi di dalam fungsi yang kita buat, variabel this tetap akan mengakses objek global. Hal ini tidak hanya berbeda dengan pada bahasa pemrograman lain, tetapi merupakan salah satu kesalahan besar dalam rancangan Javascript. Pada bahasa yang memiliki fitur fungsional dan objek lainnya, this akan mengikat pada fungsi induk dari fungsi tersebut. Dalam contoh di atas, this pada fungsi tambah akan mencari variabel nilai milih fungsi tambah_sepuluh.
Kesalahan perancangan Javascript ini sangat fatal, karena teknik memanfaatkan fungsi di dalam fungsi (inner function) merupakan salah satu teknik mendasar dan sangat berguna dalam pemrograman fungsional. Tetapi setidaknya untuk inner function dari sebuah method kita memiliki solusi untuk memperbaiki hal ini, yaitu dengan menyimpan nilai this pada fungsi luar ke dalam sebuah variabel. Fungsi yang berada di dalam fungsi luar kemudian dapat mengakses instan objek dengan menggunakan variabel tersebut, seperti berikut:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// kita menggunakan objek papanSkor yang di atas kembali
papanSkor.hattrick = function () {
    // variabel that dibuat agar fungsi tambah_tiga
    // dapat mengakses objek papanSkor.
    var that = this;

    var tambah_tiga = function() {
        // jika kita menggunakan this di sini,
        // maka kita akan mengakses variabel global skor,
        // yang tidak ada.
        that.skor = that.skor + 3;
    };

    tambah_tiga();
};
Sebagai eksperimen, coba ganti variable that di atas dengan variabel this, dan lihat efeknya!
Note
Nama variabel that merupakan perjanjian tak tertulis (konvensi) untuk solusi ini. Meskipun tidak ada aturan untuk wajib menggunakan that, menggunakan nama ini akan mempermudah pengembang lain yang harus merawat kode anda (termasuk anda sendiri di masa depan!).
Constructor Invocation Pattern
Sebuah fungsi yang dipanggil dengan diawali dengan perintah new pada Javascript dikenal dengan istilah constructor invocation. Setiap kali sebuah fungsi dipanggil dengan prefiks new, maka fungsi tersebut akan otomatis mengembalikan objek baru pada akhir fungsi, meskipun kita tidak memanggil perintah return. Objek yang dikembalikan ini akan dihubungkan kepada prototype dari fungsi yang dipanggil, dan this diikatkan kepada objek baru ini.
Bingung? Mari kita lihat contoh kode:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Ketika dipanggil dengan new, fungsi Manusia akan
// mengembalikan sebuah objek baru yang memiliki
// satu properti, yaitu "nama".
var Manusia = function (nama) {
        this.nama = nama;
};

var andi = new Manusia("Andi");

andi.nama; // mengembalikan "Andi"
andi;      // mengembalikan { nama: 'Andi' }

// Seperti layaknya sebuah objek, kita dapat menambahkan
// method baru kepada seluruh objek Manusia yang telah
// dibuat.
Manusia.prototype.usia = function (usia) {
    this.usia = (typeof usia === "number")? usia: 0;
};

andi.usia = 27;

andi.usia; // mengembalikan 27
andi;      // mengembalikan { nama: 'Andi', usia: 27 }
Perhatikan bagaimana pada fungsi Manusia di atas kita sama sekali tidak memanggil perintah return, dan secara otomatis andi diisikan dengan sebuah objek baru ketika kita memanggil Manusia dengan perintah new. Juga seperti objek pada Javascript, ketika kita menambahkan sebuah method baru ke Manusia, andi yang hanyalah salah satu turunan Manusia juga menerima method baru tersebut.
Fungsi yang dirancang untuk dipanggil bersamaan dengan new seperti Manusia dikenal dengan nama constructor. Constructor juga secara konvensi ditulis dengan awalan huruf kapital, agar tidak membingungkan pengembang. Hal ini sangat penting karena sebuah fungsi constructor yang tidak dipanggil dengan perintah new akan memberikan efek samping yang membahayakan, yaitu memenuhi atau mengubah nilai variabel global. Baca kembali bagian Function Invocation Pattern untuk melihat kenapa hal ini bisa terjadi.
1
2
3
4
5
6
var mari = Manusia("Mari");

mari;      // mengembalikan undefined
nama;      // mengembalikan Mari (!)
mari.nama; // mengembalikan TypeError:
           // Cannot read property 'nama' of undefined
Karena memiliki potensi berbahaya seperti ini, sangat tidak disarankan untuk menggunakan fungsi constructor. Javascript bukanlah bahasa berorientasi objek class-based. Pergunakan Javascript sebagaimana ia dirancang untuk digunakan, yaitu bahasa pemrograman prototype-based. Pada bagian selanjutnya nanti kita akan melihat bagaimana kita dapat membuat objek pada Javascript dengan lebih baik, yaitu menggunakan closure.
Indirect Invocation Pattern
Karena fungsi pada Javascript juga adalah merupakan sebuah objek, maka fungsi juga dapat memiliki method. Terdapat beberapa method standar yang selalu ada pada fungsi Javascript, tetapi di bagian ini kita akan melihat dua method khusus yang berhubungan dengan nilai this. Kedua method khusus ini yaitu call dan apply.
Method apply digunakan jika kita ingin mengirimkan argumen ke sebuah fungsi dengan menggunakan array. Terdapat dua parameter yang harus kita kirimkan ke apply, yaitu objek yang ingin kita ikatkan kepada this, dan parameter keduanya adalah sebuah array yang akan digunakan sebagai parameter yang dikirimkan ke fungsi. Dengan begitu, apply memberikan kita fasiliats untuk menentukan nilai this.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var manusia = {
    nama: "Adam",
    panggil: function (sapaan) {
        return sapaan + " " + this.nama + "!";
    }
};

manusia.panggil("Halo"); // mengembalikan "Halo Adam!"

var hawa = {
    nama: "Hawa"
};

manusia.panggil.apply(hawa, ["Bonjour"]); // mengembalikan "Bonjour Hawa!"
Kita juga dapat mengirimkan null sebagai parameter pertama dari apply untuk menggunakan objek global sebagai this.
1
2
3
4
5
6
7
8
9
// mengembalikan "Guten Tag undefined!" karena tidak ada variabel "nama"
// pada konteks global
manusia.panggil.apply(null, ["Guten Tag"]);

// simpan variabel "nama" dengan isi "Nuh" pada konteks global
nama = "Nuh";

// mengembalikan "Guten Tag Nuh!"
manusia.panggil.apply(null, ["Guten Tag"]);
Hal ini memungkinkan kita untuk menggunakan fungsi global secara efektif. Misalnya jika kita ingin mencari nilai maksimal dari sebuah array, kita dapat langsung menggunakan Math.max daripada dengan perulangan:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var bil = [5, 6, 2, 3, 7];

// Sama dengan Math.apply(bil[0], bil[1], ...)
// berapapun ukuran bil fungsi ini akan tetap berjalan
var max = Math.max.apply(null, bil);

max; // mengembalikan 7

// Tanpa menggunakan apply
// Kita tidak dapat menggunakan Math.max di sini
// karena panjang array tidak akan selalu sama.
max = -Infinity;

for (var i = 0; i < bil.length; i++) {
    if (bil[i] > max)
    max = bil[i];
}

max; // mengembalikan 7
Satu hal yang perlu diingat ketika menggunakan apply adalah bahwa Javascript memiliki batas jumlah argumen untuk fungsi, yang berbeda-beda pada setiap browser. Jika array yang dikirimkan melebihi batas jumlah argumen maka apa yang terjadi tidak dapat diketahui (tergantung kepada pembuat browser).
Method call sendiri berfungsi sama seperti apply, dengan hanya satu perbedaan: call menerima *daftar argumen* seperti fungsi biasa, sementara apply menerima *array argumen*. Mengambil contoh manusia sebelumnya, kita dapat memanggil call seperti berikut:
1
2
3
4
5
6
7
// kedua fungsi di bawah mengembalikan "Bonjour Hawa!"
manusia.panggil.apply(hawa, ["Bonjour"]);
manusia.panggil.call(hawa, "Bonjour");

// kedua fungsi di bawah hasilnya sama
Math.max.apply(null, bil);
Math.max.call(null, bil[0], bil[1], ...);
Argumen Fungsi
Selain this, fungsi pada Javascript juga memiliki satu buah nilai tambahan lagi, yaitu arguments. arguments merupakan nilai yang menampung seluruh argumen yang dikirimkan kepada fungsi, termasuk argumen-argumen yang berlebihan. Jika fungsi hanya meminta dua buah argumen dan pemanggil fungsi mengirimkan empat buah argumen, kita dapat mengakses argumen ketiga dan keempat menggunakan arguments. Hal ini berarti kita dapat membuat fungsi yang bisa menerima jumlah argumen tak tentu, seperti fungsi Math.max yang kita gunakan sebelumnya.
Contoh lain, kita dapat membuat fungsi yang menghitung total dari seluruh argumen yang dikirimkan kepada fungsi tersebut:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var total = function () {
    var i, hasil = 0;
    for (i = 0; i < arguments.length; i++) {
        hasil = hasil + arguments[i];
    }

    return hasil;
};

total(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // mengembalikan 55
Meskipun pada kode di atas kita menggunakan arguments seperti layaknya array (akses dengan [], properti length), sayangnya arguments bukan array. arguments merupakan sebuah objek yang mirip array. Selalu ingat hal ini agar tidak menggunakan arguments sebagai array, karena menggunakan arguments sebagai array dapat menyebabkan hal-hal yang tak terbayangkan seperti gangguan pernafasan, serangan jantung, kanker, dan error program tiba-tiba.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)