JavaScript - Metode apply()

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan melihat salah satu metode paling kuat dan fleksibel di JavaScript: metode apply(). Pada akhir panduan ini, Anda akan dapat menggunakan apply() seperti seorang pro! Mari kita mulai perjalanan menarik ini bersama-sama.

Apa Itu Metode Function apply()?

Metode apply() adalah fungsi bawaan JavaScript yang memungkinkan kita untuk memanggil fungsi dengan nilai this yang diberikan dan argumen yang diberikan dalam bentuk array (atau objek mirip array). Itu seperti memiliki tongkat sihir yang memungkinkan Anda mengendalikan bagaimana fungsi dieksekusi!

Mengapa apply() penting?

1. Itu memberikan kita fleksibilitas dalam pemanggilan fungsi.
2. Itu memungkinkan kita meminjam metode dari objek lain.
3. Itu sangat berguna saat bekerja dengan jumlah argumen yang bervariasi.

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

Sintaks apply()

Ini adalah sintaks dasar metode apply():

functionName.apply(thisArg, [argsArray])

mari kitauraikan ini:

• functionName: Fungsi yang Anda ingin panggil.
• thisArg: Nilai this yang diberikan untuk pemanggilan fungsi.
• argsArray: Array atau objek mirip array yang menentukan argumen dengan yang functionName harus dipanggil.

Mungkin terlihat sedikit membingungkan sekarang, 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']);

Keluaran:

Hello, Bob! My name is Alice.

Dalam contoh ini:

1. Kita mendefinisikan fungsi 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.

Magiknya adalah apply() memungkinkan kita menentukan apa yang this merujuk kepada dalam fungsi. 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);

Keluaran:

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 Anda memiliki array bilangan dan ingin menemukan nilai maksimum!

Contoh 3: Meminjam Metode Array

Sekarang, mari kita lihat bagaimana kita dapat menggunakan apply() untuk meminjam metode:

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

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

console.log(actualArray);

Keluaran:

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

Apa yang terjadi di sini?

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

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

Contoh 4: Menggunakan Fungsi dengan Argumen Banyak

Mari kita mencoba sesuatu yang sedikit 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']);

Keluaran:

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

Dalam contoh ini:

1. Kita mendefinisikan fungsi introduce yang menerima 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() dapat digunakan dengan argumen banyak dan nilai this yang berbeda.

Perbandingan Metode Fungsi

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

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

Setiap metode memiliki kasus penggunaannya, tetapi apply() menonjol saat Anda memiliki argumen dalam array atau memerlukan kerja dengan objek mirip array.

Kesimpulan

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

Ingat, apply() adalah seperti pisau瑞士 Army knife di alat JavaScript Anda. Mungkin memerlukan sedikit latihan untuk menguasainya, tapi setelah Anda melakukan itu, Anda akan menemukan diri Anda mencari nya di berbagai situasi.

Terus mencoba apply(), dan jangan takut untuk kreatif. Siapa tahu? Anda mungkin saja apply() diri Anda sendiri menjadi master JavaScript! Semangat coding, para pengembang masa depan!

Credits: Image by storyset