Apa topik tersulit dalam javascript?

Menurut Survei Pengembang Stack Overflow 2019, JavaScript adalah bahasa pemrograman #1. Bahasa ini digunakan secara luas oleh 95% dari semua situs web Baik itu perusahaan rintisan kecil atau perusahaan besar, kebanyakan dari mereka mengerjakan beberapa jenis situs web atau aplikasi yang membutuhkan pengetahuan yang baik tentang bahasa ini. Ada banyak kerangka kerja dan pustaka untuk javascript. Kerangka kerja dan pustaka ini dapat dipelajari dengan mudah jika dasar-dasar javascript Anda jelas. Banyak konsep yang membingungkan dan membuat kewalahan bagi pengembang, tetapi pengetahuan yang baik tentang konsep ini akan membantu Anda dalam jangka panjang. Kerangka kerja dan perpustakaan datang dan pergi tetapi dasarnya selalu tetap sama. Sangat mudah untuk membangun aplikasi apa pun dan mempelajari kerangka kerja dan pustaka apa pun jika dasar-dasarnya jelas. Juga, ini akan membantu Anda dalam wawancara juga. Mari kita bahas beberapa konsep dasar javascript yang penting untuk dipelajari oleh setiap pengembang JavaScript. Menjadi pengembang front-end yang baik dengan Geeksforgeeks JavaScript Foundation – Self Paced dan pelajari semua aspek pengembangan web dengan mudah.  

1. Cakupan

Cakupan berarti akses variabel. Variabel apa yang dapat saya akses ketika kode sedang berjalan? . e. ruang lingkup jendela. Ruang lingkup hanyalah sebuah kotak dengan batas untuk variabel, fungsi, dan objek. Batasan ini membatasi variabel dan menentukan apakah Anda memiliki akses ke variabel atau tidak. Ini membatasi visibilitas atau ketersediaan variabel ke bagian lain dari kode. Anda harus memiliki pemahaman yang jelas tentang konsep ini karena ini membantu Anda memisahkan logika dalam kode Anda dan juga meningkatkan keterbacaan. Ruang lingkup dapat didefinisikan dalam dua cara -
 

• Cakupan Lokal memungkinkan akses ke segala sesuatu di dalam batas (di dalam kotak)
• Cakupan Global adalah segala sesuatu di luar batas (outside the box). Cakupan global tidak dapat mengakses variabel yang ditentukan dalam lingkup lokal karena tertutup dari dunia luar, kecuali jika Anda mengembalikannya

Contoh. Kode yang diberikan di bawah ini akan memberi Anda kesalahan karena "nama" didefinisikan dalam batas (cakupan lokal) dari fungsi showName(). Anda tidak dapat memiliki akses ke variabel ini di luar fungsi.  

CATATAN. KODE DI BAWAH ADALAH KESALAHAN KARENA TYPO DALAM PANGGILAN FUNGSI, menyebabkan kesalahan sebelum kesalahan pelingkupan yang dimaksud dimunculkan oleh konsol. panggilan log

Sekarang, lihat kode yang diberikan di bawah ini dan lihat bagaimana Anda dapat mengakses variabel "nama" yang didefinisikan dalam lingkup lokal.  

2. IIFE (Ekspresi Fungsi yang Segera Dipanggil)

Seperti namanya IIFE adalah fungsi dalam Javascript yang segera dipanggil dan dieksekusi segera setelah didefinisikan. Variabel yang dideklarasikan dalam IIFE tidak dapat diakses oleh dunia luar dan dengan cara ini Anda dapat menghindari lingkup global dari polusi. Jadi alasan utama menggunakan IIFE adalah untuk segera mengeksekusi kode dan mendapatkan privasi data.  
 

3. Mengangkat

Banyak pengembang mendapatkan hasil yang tidak terduga ketika mereka tidak jelas dengan konsep pengangkat di Javascript. Di Javascript, Anda dapat memanggil fungsi sebelum ditentukan dan Anda tidak akan mendapatkan kesalahan 'Referensi Tidak Tertangkap'. Alasan di balik ini adalah mengangkat di mana juru bahasa Javascript selalu memindahkan variabel dan deklarasi fungsi ke atas lingkup saat ini (lingkup fungsi atau lingkup global) sebelum eksekusi kode. Mari kita pahami ini dengan sebuah contoh.  

Contoh. Lihatlah kode yang diberikan di bawah ini.  

Sekarang apa yang terjadi jika kita memanggil fungsi kita sebelum kita mendeklarasikannya (dengan mengangkat)

Kode di atas tidak memberikan kesalahan dan Anda mendapatkan output 'moo' di konsol Anda. Ini mengangkat dalam javascript.  

Contoh 2.  

var a = 5;
console.log(5);
output: // 5

Kode di atas dengan mengangkat akan memberi Anda hasil yang sama.  

a = 5;
console.log(5);
var a;
output // 5

4. Penutupan

Penutupan hanyalah sebuah fungsi di dalam fungsi lain yang memiliki akses ke variabel fungsi luar. Sekarang, definisi ini terdengar sangat mudah tetapi keajaiban sebenarnya dibuat dengan ruang lingkup. Fungsi dalam (penutupan) dapat mengakses variabel yang didefinisikan dalam cakupannya (variabel yang ditentukan di antara tanda kurung kurawalnya), dalam cakupan fungsi induknya, dan variabel global. Sekarang di sini Anda perlu mengingat bahwa fungsi luar tidak dapat memiliki akses ke variabel fungsi dalam (kita telah membahas ini dalam konsep ruang lingkup). Mari kita ambil contoh dan pahami dengan cara yang lebih baik.  

Contoh.  

Dalam contoh di atas, fungsi bagian dalam 'kedua ()' adalah Penutupan. Fungsi dalam ini akan memiliki akses ke variabel 'menyapa' yang merupakan bagian dari lingkup fungsi luar 'pertama()'. Di sini lingkup induk tidak akan memiliki akses ke variabel 'nama' lingkup anak.  

Sekarang pertanyaannya adalah mengapa kita perlu mempelajari closure? . Dalam contoh di atas, second() memperluas perilaku fungsi first() dan juga memiliki akses ke variabel 'greet'.  
Javascript bukan bahasa berorientasi objek murni tetapi Anda dapat mencapai perilaku berorientasi objek melalui penutupan. Dalam contoh di atas, Anda dapat menganggap const 'newFunc' sebagai Objek yang memiliki properti 'sapa' dan 'kedua ()' metode seperti dalam bahasa OOP.  

Di sini Anda perlu memperhatikan bahwa setelah pernyataan first() dijalankan, variabel di dalam fungsi first() tidak akan dihancurkan (meskipun memiliki pernyataan 'return') karena penutupan karena ruang lingkup tetap hidup di sini dan turunannya . Jadi penutupan dapat didefinisikan dalam istilah sederhana sebagai “fungsi dijalankan, fungsi dijalankan. Itu tidak akan pernah dieksekusi lagi tetapi akan diingat bahwa ada referensi ke variabel-variabel tersebut sehingga lingkup anak selalu memiliki akses ke lingkup induk. ”

5. Panggilan balik

Dalam javascript, panggilan balik hanyalah sebuah fungsi yang diteruskan ke fungsi lain sebagai parameter dan dipanggil atau dijalankan di dalam fungsi lain. Di sini suatu fungsi perlu menunggu fungsi lain untuk mengeksekusi atau mengembalikan nilai dan ini membuat rantai fungsionalitas (ketika X selesai, maka Y dieksekusi, dan terus berjalan. ). Inilah alasan callback umumnya digunakan dalam operasi asynchronous javascript untuk menyediakan kemampuan sinkron.  

Contoh.  

Dalam contoh di atas, perhatikan bahwa salam diteruskan sebagai argumen (panggilan balik) ke fungsi 'processUserName'. Sebelum fungsi 'salam' dijalankan, ia menunggu acara 'processUserName' dieksekusi terlebih dahulu.  

6. Janji

Kami memahami konsep callback tetapi apa yang akan terjadi jika kode Anda memiliki callback di dalam callback di dalam callback dan terus berlanjut. Nah, struktur panggilan balik rekursif ini disebut 'neraka panggilan balik' dan berjanji untuk membantu memecahkan masalah semacam ini. Janji berguna dalam operasi javascript asinkron ketika kita perlu menjalankan dua atau lebih operasi back-to-back (atau callback berantai), di mana setiap fungsi berikutnya dimulai ketika yang sebelumnya selesai. Janji adalah objek yang dapat menghasilkan satu nilai di masa mendatang, baik nilai yang terselesaikan atau alasan mengapa nilai tersebut tidak terselesaikan (ditolak). Menurut pengembang. mozilla “Janji adalah objek yang mewakili penyelesaian akhir atau kegagalan operasi asinkron. Pada dasarnya, janji adalah objek yang dikembalikan ke mana Anda melampirkan panggilan balik, alih-alih meneruskan panggilan balik ke suatu fungsi. ”. Janji menyelesaikan masalah 'callback hell' yang tidak lain adalah struktur rekursif callback (callback di dalam callback di dalam callback dan sebagainya).  
Sebuah janji mungkin berada dalam tiga kemungkinan keadaan…

• Terpenuhi. Ketika operasi selesai dengan sukses
• Ditolak. Ketika operasi gagal
• Tertunda. keadaan awal, tidak terpenuhi atau ditolak

Mari kita bahas cara membuat janji di javascript dengan sebuah contoh.  

Contoh.  
 

Pertimbangkan kode di atas untuk contoh janji yang diasumsikan seperti melakukan operasi 'isNameExist' secara asinkron, Dalam argumen Objek janji itu sebagai dua fungsi menyelesaikan dan menolak. Jika operasi berhasil yang berarti 'isNameExist' adalah 'benar' maka itu akan diselesaikan dan menampilkan output "Nama pengguna ada" jika tidak operasi akan gagal atau ditolak dan akan menampilkan hasil 'kesalahan. ’. Anda dapat dengan mudah melakukan operasi berantai dalam janji di mana operasi pertama akan dieksekusi dan hasil dari operasi pertama akan diteruskan ke operasi kedua dan ini akan dilanjutkan lebih jauh.  

7. Asinkron & Menunggu

Berhenti dan tunggu sampai sesuatu diselesaikan. Async & tunggu hanya gula sintaksis di atas Janji dan seperti janji, itu juga menyediakan cara untuk mempertahankan operasi asinkron secara lebih sinkron. Jadi dalam operasi asinkron javascript dapat ditangani dalam berbagai versi…
 

• ES5 -> Panggilan Balik
• ES6 -> Janji
• ES7 -> asinkron & menunggu

Anda dapat menggunakan Async/Menunggu untuk melakukan permintaan Rest API di mana Anda ingin data dimuat sepenuhnya sebelum mendorongnya ke tampilan. Untuk Nodejs dan pemrogram browser async/menunggu adalah peningkatan sintaksis yang bagus. Ini membantu pengembang untuk mengimplementasikan pemrograman fungsional dalam javascript dan juga meningkatkan keterbacaan kode.  

Contoh.  

 const showPosts = async () => {
 const response = await fetch('https://jsonplaceholder.typicode.com/posts');
 const posts = await response.json();
 console.log(posts);
}

showPosts();

Di bawah ini adalah gambar kapan Anda akan menjalankan kode ini di konsol Anda.  

Untuk memberi tahu JS bahwa kami sedang mengerjakan janji, kami perlu membungkus 'menunggu' di dalam fungsi 'async'. Dalam contoh di atas, kita (a) menunggu dua hal. tanggapan dan postingan. Sebelum kita dapat mengonversi respons ke format JSON, kita perlu memastikan respons telah diambil, jika tidak, kita dapat mengonversi respons yang belum ada, yang kemungkinan besar akan memicu kesalahan

Apa bagian tersulit dalam mempelajari JavaScript?

Apa topik terpenting dalam JavaScript?

Apa kesulitan JavaScript?

Apa topik lanjutan dalam JavaScript?