Javascript meneruskan ini ke fungsi

Cakupan

Artikel ini secara ekstensif membahas poin-poin berikut

• Fungsi adalah warga negara kelas satu dalam paradigma pemrograman fungsional. Ini dijelaskan secara rinci dalam artikel ini untuk memulai
• Bagaimana seseorang bisa meneruskan fungsi panggilan balik tanpa menjadi korban kesalahan umum pengembang sambil meneruskan fungsi sebagai parameter
• kata kunci ''ini'' dijelaskan dengan contoh-contoh dan kemudian bagaimana ketika meneruskan fungsi sebagai parameter, seseorang dapat membuat kesalahan yang sangat serius
• Celah umum saat menggunakan kata kunci ''ini'' dijelaskan, dan cara mengatasinya dengan contoh dan penjelasan terperinci

Perkenalan

Dalam pemrograman fungsional, kami menganggap fungsi sebagai "warga negara kelas satu". Maksud kami, fungsi diperlakukan sebagai variabel normal. Mereka dapat diberi nilai atau diteruskan ke fungsi lain sebagai parameter, dan fungsi juga dapat mengembalikan fungsi

Bagaimana kita bisa meneruskan variabel ke fungsi sebagai parameternya?

const func = (a) => {
    console.log(a)
}
Sekarang, kita akan memanggil fungsi ini dan mengirim variabel sebagai argumen
const func = (a) => {
    console.log(a)
}
func(20);
_
Kode ini jelas akan mencetak 20 ke konsol. Mengirim fungsi ke fungsi lain sebagai argumen juga sangat mirip. Kita akan melihat ini di bagian selanjutnya

Sintaksis

Sekarang, mari kita lihat bagaimana fungsi dapat diteruskan ke fungsi lain dan bagaimana fungsi tersebut dapat digunakan di dalamnya. Pertama, mari kita buat sebuah fungsi yang mengambil fungsi dan memanggilnya di dalam tubuhnya

const callingFunction = (functionToBeCalled) => {
    functionToBeCalled();
}
Dan sekarang, mari buat fungsi lain yang akan dipanggil di dalam fungsi pemanggil
const functionToBecalled = () => {
    console.log("This is the function to be finally called!");
}

const callingFunction = (functionToBeCalled) => {
    functionToBeCalled();
}
Sekarang, mari kita panggil fungsi 'callingFunction' dan berikan fungsi 'functionToBeCalled' sebagai argumennya
// Passing functions as parameters in JavaScript
const callingFunction = (functionToBeCalled) => {
    functionToBeCalled();
}

const anotherFunction = () => {
    console.log("This is the function to be finally called!");
}

callingFunction(anotherFunction);
_
Keluaran
This is the function to be finally called!
Seperti yang Anda harapkan, hasilnya seperti yang ditunjukkan di atas
Sekarang, mari kita pahami kode ini



''anotherFunction'' adalah fungsi sederhana yang mencetak Ini adalah fungsi yang akhirnya akan dipanggil. ke konsol
Saat kita memanggil 'callingFunction' dan meneruskan 'anotherFunction' sebagai argumen, nama fungsi - 'anotherFunction' akan ditetapkan ke nama variabel 'functionToBeCalled' di dalam badan 'callingFunction'
Saat kita memanggil 'callingFunction' dan meneruskan 'anotherFunction' sebagai argumen, nama fungsi - 'anotherFunction' akan ditetapkan ke nama variabel 'functionToBeCalled' di dalam badan 'callingFunction'
Coba konsol mencatat nilai parameter di dalam fungsi panggilan dan lihat, saya tidak berbohong
Jadi, ketika kita memanggil fungsi - 'fungsi Untuk Dipanggil' di dalam badan fungsi, sebenarnya fungsi - 'Fungsi lain' sedang dipanggil

Contoh Umum Callback

• Fungsi yang diteruskan sebagai argumen ke fungsi lain disebut callback
• Panggilan balik diteruskan hanya dengan meneruskan nama fungsi

Saat kami meneruskan fungsi sebagai argumen ke fungsi lain, kami menyebutnya callback. Callback berarti bahwa fungsi tersebut akan dipanggil nanti

Mengapa kita membutuhkan Callback?

• Kami mungkin ingin melakukan beberapa perhitungan dalam beberapa kasus penggunaan sebelum benar-benar memanggil fungsi itu. Dalam kasus seperti itu, kami mengirimkan fungsi ''untuk dipanggil nanti;
• Alasan lain terletak pada kasus di mana kita mungkin ingin menjalankan suatu fungsi hanya setelah tugas asinkron selesai. Fungsi-fungsi ini membutuhkan waktu untuk merespons. Karenanya, fungsi panggilan balik dipanggil setelah kami mendapatkan respons dari fungsi pertama

Catatan. Tujuan utama menggunakan fungsi panggilan balik adalah untuk menangani sifat tugas yang tidak sinkron

Pertimbangkan contoh ini. Jika kita ingin memanggil function1 jika kita mendapat respons terhadap fungsi asinkron dan memanggil function2 jika menemui kesalahan saat melakukan tugas async tersebut, kita memerlukan callback di sini

const getthisdone = async(onSuccess, onError) => {
    try{
        const response = await someAsynchronousTask();
        if(response.status === 200){
            onSuccess();
        }
    }
    catch{
        onError();
    } 
}
_
Oleh karena itu, setiap kali kami ingin memutuskan apakah beberapa pemanggilan fungsi akan dilakukan berdasarkan beberapa peristiwa yang mungkin terjadi di masa mendatang, dan tidak segera, kami menggunakan panggilan balik
Ini adalah contoh sederhana lainnya untuk menjelaskan di mana panggilan balik dapat digunakan
const greater = () => {
    console.log("A is greater than B")
}
const smaller = () => {
    console.log("A is smaller than B")
}
Ini adalah dua fungsi sederhana yang mencetak pesan ke konsol. Sekarang, mari kita buat sebuah fungsi yang akan memutuskan fungsi mana yang akan dipanggil berdasarkan keputusan mana dari A atau B yang sebenarnya lebih besar
const greater = () => {
    console.log("A is greater than B")
}
const smaller = () => {
    console.log("A is smaller than B")
}
const isAGreater = (a, b, greater, smaller) =>{
    if(a>b){
        greater();
    }else{
        smaller();
    }
}
isAGreater(23, 45, greater, smaller);
_
Keluaran
Kita dapat melihat bagaimana fungsi dapat dengan mudah diteruskan sebagai argumen ke fungsi lain seperti variabel biasa dan dapat digunakan di dalam badan fungsi. Dengan cara ini, kami mengatakan bahwa fungsi yang dikirim sebagai argumen adalah panggilan balik
Beberapa fungsi yang umum digunakan yang menerima callback adalah parameter. Mari kita lihat beberapa di antaranya
forEach dan map menggunakan callback sebagai parameter, yang dipanggil pada setiap elemen iterator (atau array)
setInterval dan setTimeout menerima fungsi panggilan balik untuk dipanggil setelah interval waktu yang ditetapkan
kemudian dan tangkap panggil fungsi panggilan balik setelah janji diselesaikan, berdasarkan jika janji ditolak atau dipenuhi

Meneruskan Fungsi tanpa Memanggilnya

Kebanyakan orang membuat kesalahan umum saat meneruskan fungsi sebagai panggilan balik dengan menjalankannya. Ingat, kami selalu meneruskan nama fungsi ke fungsi lain dan tidak memanggilnya saat mengirim. Fungsi panggilan balik sebenarnya dipanggil di dalam fungsi lain

Pertimbangkan cuplikan kode berikut

const smile = () => {
    console.log("Remember to smile every day!")
}
const callFunction = (smile) => {
    if(23>45){
        smile()
    }
}
callFunction(smile());
_
Saat meneruskan fungsi 'fungsi 'senyum'', kami memanggil fungsi itu sendiri secara tidak sengaja
Sintaks yang benar. fungsi panggilan (senyum)
Sintaks salah. callFunction(senyum())
Lihat Jendela keluaran
Kami memiliki output yang SALAH. Menurut kode kita, function - smile seharusnya tidak dipanggil karena 23 > 45 salah
Juga,
Keluaran ini berasal dari baris no. 9, sedangkan kami berharap fungsi senyum dipanggil pada baris no. 6
Tapi kami memiliki pernyataan senyum di konsol. Juga, dapatkah Anda melihat kesalahan - TypeError. senyum bukan fungsi?
Mari kita pahami ini. Saat kami meneruskan nama fungsi, kami meneruskan referensi ke fungsi itu. Fungsi baru kemudian memiliki referensi ke fungsi aslinya. Itu kemudian dapat memanggil fungsi kapan pun dirasa demikian, berdasarkan keputusannya
Tetapi ketika kita melewati fungsi yang dipanggil, i. e. , seperti ini - func(). Kami sudah memanggil fungsinya. Apa yang kita berikan ke fungsi selanjutnya bukanlah referensi fungsi tetapi output dari fungsi yang kita panggil. Ini pasti tidak bisa dipanggil di dalam tubuh fungsi berikutnya. Inilah yang dikatakan pesan kesalahan
Kode yang benar untuk logika ini adalah



const func = (a) => {
    console.log(a)
}
func(20);
_0
Saya harap Anda tidak akan pernah membuat kesalahan ini saat bekerja dengan callback

Bagaimana Cara Melewati Argumen dengan Benar dengan Callback?

Sekarang, bagaimana jika kita perlu meneruskan beberapa argumen ke fungsi panggilan balik saat sedang dipanggil di dalam fungsi berikutnya?

const func = (a) => {
    console.log(a)
}
func(20);
_1
Jelas, fungsi panggilan balik dipanggil saat diteruskan sebagai argumen. Kami baru tahu bahwa ini adalah cara yang salah untuk meneruskan fungsi callback. Lalu, bagaimana cara mengirim argumen yang benar?
Sekarang, lihat ini
const func = (a) => {
    console.log(a)
}
func(20);
_2
Dapatkah saya melakukan ini? . Saya mengirim referensi ke suatu fungsi, yang tidak menjadi masalah karena saya tidak memintanya. Dan fungsi itu memanggil smile bersama dengan argumennya
Notasi singkat tulisan yang sama adalah
const func = (a) => {
    console.log(a)
}
func(20);
_3
Ini juga berfungsi karena kami membuat fungsi anonim dan meneruskannya ke fungsi lain
Catatan. Fungsi yang dibuat tanpa nama yang terkait dengannya adalah fungsi anonim

Mendapatkan '' ini '' Tepat saat Melewati Fungsi

Pertimbangkan potongan kode ini

const func = (a) => {
    console.log(a)
}
func(20);
_4
''siswa'' adalah objek sederhana dengan satu variabel data, yang disebut ''nama'' dan fungsi data, bernama ''sayHi''. Di dalam fungsi ''sayHi'', kata kunci ''ini'' mengacu pada objek yang disebut fungsi data ini. Di sini, '' ini. name'' mengacu pada nilai atribut name dari objek yang memanggil ''sayHi'', yaitu ''Rohit''
Keluaran
const func = (a) => {
    console.log(a)
}
func(20);
_5
Sekarang, bagaimana jika saya ingin meneruskan fungsi ''sayHi'' ke fungsi lain sebagai callback. Apakah masih akan memilih nilai ''ini'' yang benar? 
Itu tidak memilih '' Rohit '' sebagai nilai dari '' ini. nama''. Sekarang, mengapa demikian? . Untuk alasan ini, kami tidak mendapatkan nilai dari ''ini. nama'' karena dalam konteks global, ''ini'' tidak ada dalam kode ini
Kita dapat memecahkan masalah ini dengan dua cara
Menggunakan fungsi ''bind''
Membuat fungsi anonim
Mari kita bahas keduanya secara detail
Menggunakan fungsi 'mengikat'
Fungsi bind() membuat fungsi terikat, yang menahan nilai ''ini'' di dalam dirinya sendiri. Untuk alasan ini, jika kita meneruskan fungsi menggunakan ''ini'' sebagai panggilan balik, fungsi tersebut tidak akan mencari cakupan global tetapi akan memiliki nilai ''ini'' yang terikat padanya
Lihat kode dan output di bawah ini. Di sini, nilai 'ini. nama' dipilih dengan benar sebagai 'Rohit'. Ini karena fungsinya sekarang tidak melihat cakupan global untuk nilai 'ini'
const func = (a) => {
    console.log(a)
}
func(20);
6
Membuat fungsi anonim
Ini adalah cara lain untuk mengatasi masalah ini. Kami dapat mengubah fungsi kami menjadi fungsi anonim. Ini memberi kita hasil yang benar. Lihatlah tangkapan layar konsol di bawah ini
 

			
Bagaimana cara meneruskan ini ke fungsi dalam JavaScript?
			
Demikian pula, kita dapat  menggunakan apply() dan call() untuk mengubah nilai 'ini' di dalam getThis() . Seperti halnya bind(), kami meneruskan nilai 'ini' yang kami inginkan sebagai argumen. Perbedaannya adalah apply() dan call() keduanya akan mengubah nilai 'ini' di dalam suatu fungsi dan kemudian segera menjalankannya. 
		
			
Bisakah Anda menggunakan ini dalam fungsi JavaScript?
			
Dalam JavaScript, kata kunci ini memungkinkan kita untuk. Gunakan kembali fungsi dalam konteks eksekusi yang berbeda. Artinya,  sebuah fungsi yang telah ditentukan dapat dipanggil untuk objek yang berbeda menggunakan kata kunci this . Mengidentifikasi objek dalam konteks eksekusi saat ini saat kita memanggil sebuah metode. 
		
			
Bagaimana cara menyampaikan nilai dengan referensi dalam JavaScript?
			
Array dan Objek diteruskan dengan referensi atau dengan nilai berdasarkan kondisi ini.  . 
 
jika Anda menyetel nilai suatu objek atau larik, itu adalah Lewati Nilai. objek1 = { penyangga. "mobil" }; 
 
jika Anda mengubah nilai properti dari suatu objek atau array maka itu adalah Pass by Reference. objek1
 
		
			
Bagaimana cara meneruskan variabel dari satu fungsi ke fungsi lainnya dalam JavaScript?
			
Meneruskan data (variabel) antar fungsi dalam Javascript . 
 
Menggunakan variabel global
 
dengan nilai pengembalian
 
menggunakan penyimpanan lokal/penyimpanan sesi
 
Menggunakan callback