JavaScript - Method apply()

Hai there, para para JavaScript nanti! Hari ini, kita bakal masuk dalam salah satu method paling kuat dan fleksibel di JavaScript: method apply(). Pada akhir panduan ini, kau bakal bisa menggunakan apply() seperti seorang pro! Mari kita mulai perjalanan menarik ini bersama-sama.

Apa Itu Method apply()?

Method apply() adalah method bawaan JavaScript yang memungkinkan kita untuk memanggil function dengan nilai this yang diberikan dan argumen yang diberikan dalam bentuk array (atau objek seperti array). Itu seperti memiliki tongkat ajaib yang memungkinkan kamu mengendalikan bagaimana function dieksekusi!

Mengapa apply() penting?

1. Memberikan fleksibilitas dalam pemanggilan function.
2. Memungkinkan kita untuk meminjam method dari objek lain.
3. Sangat berguna saat bekerja dengan jumlah argumen yang berubah.

Sekarang, mari kita lihat sintaks dan kemudian masuk ke beberapa contoh!

Sintaks apply()

Ini adalah sintaks dasar method apply():

functionName.apply(thisArg, [argsArray])

mari kitauraikan ini:

• functionName: Function yang ingin kamu panggil.
• thisArg: Nilai this yang diberikan untuk pemanggilan function.
• argsArray: Array atau objek seperti array yang menentukan argumen dengan mana functionName harus dipanggil.

Mungkin terlihat sedikit membingungkan saat ini, tapi jangan khawatir! Kita akan melalui banyak contoh untuk membuatnya jelas.

Contoh apply() dalam Aksi

Contoh 1: Penggunaan Dasar

Mari kita mulai dengan contoh sederhana:

function greet(name) {
console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

Output:

Hello, Bob! My name is Alice.

Dalam contoh ini:

1. Kita tentukan function greet yang menggunakan this.name.
2. Kita membuat objek person dengan properti name.
3. Kita menggunakan apply() untuk memanggil greet, mengatur this ke person dan mengirim 'Bob' sebagai argumen.

Magicnya di sini adalah apply() memungkinkan kita mengatur apa yang this merujuk dalam function. Keren, kan?

Contoh 2: Menggunakan apply() dengan Math.max()

Ini adalah contoh praktis menggunakan Math.max():

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

Output:

7

Dalam kasus ini:

1. Kita memiliki array bilangan.
2. Kita menggunakan apply() untuk mengirim array ini langsung ke Math.max().
3. null digunakan sebagai argumen pertama karena Math.max() tidak menggunakan this.

Ini sangat berguna saat kamu memiliki array bilangan dan ingin menemukan nilai maksimum!

Contoh 3: Meminjam Method Array

Sekarang, mari kita lihat bagaimana kita bisa menggunakan apply() untuk meminjam method:

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

Output:

['a', 'b', 'c']

Apa yang terjadi di sini?

1. Kita memiliki objek yang mirip array tapi bukan array sebenarnya.
2. Kita meminjam method slice() dari Array.prototype.
3. apply() memungkinkan kita untuk menggunakan slice() pada objek seperti array kita, mengubahnya menjadi array sebenarnya.

Ini sangat berguna saat bekerja dengan elemen DOM atau objek seperti array lainnya!

Contoh 4: Mengapply Function dengan Banyak Argumen

Mari kita coba sesuatu yang lebih kompleks:

function introduce(greeting, hobby) {
console.log(`${greeting}, I'm ${this.name}. I love ${hobby}!`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Hi there', 'coding']);
introduce.apply(person2, ['Hello', 'painting']);

Output:

Hi there, I'm Charlie. I love coding!
Hello, I'm Diana. I love painting!

Dalam contoh ini:

1. Kita tentukan function introduce yang mengambil dua argumen.
2. Kita membuat dua objek person.
3. Kita menggunakan apply() untuk memanggil introduce untuk setiap orang, mengirimkan argumen yang berbeda.

Ini menunjukkan bagaimana apply() bisa digunakan dengan banyak argumen dan nilai this yang berbeda.

Perbandingan Method Function

Mari kita bandingkan apply() dengan saudaranya call() dan bind():

Method	Sintaks	Deskripsi
apply()	func.apply(thisArg, [argsArray])	Memanggil function dengan nilai this yang diberikan dan argumen dalam bentuk array
call()	func.call(thisArg, arg1, arg2, ...)	Mirip dengan apply(), tetapi argumen diberikan secara individual
bind()	func.bind(thisArg, arg1, arg2, ...)	Membuat function baru dengan nilai this yang tetap dan argumen awal

Setiap method memiliki kasus penggunaannya, tetapi apply() menonjol saat kamu memiliki argumen dalam array atau memerlukan kerja dengan objek seperti array.

Kesimpulan

Selamat! Kamu telah melakukan penelitian mendalam ke dunia apply(). Dari penggunaan dasar hingga meminjam method dan bekerja dengan banyak argumen, kamu telah melihat betapa fleksibel dan kuat method ini bisa menjadi.

Ingat, apply() adalah seperti pisau瑞士 Army knife di dalam alat JavaScript kamu. Mungkin memerlukan sedikit latihan untuk memastikan, tetapi sekali kamu menguasai, kamu akan menemukan dirimu mencari nya dalam berbagai situasi.

Terus mencoba apply(), dan jangan takut untuk kreatif. Siapa tahu? Kamu mungkin saja apply() dirimu sendiri menjadi master JavaScript! Semangat coding, para pengembang nanti!

Credits: Image by storyset