12 Konsep Dasar JavaScript yang Harus Diketahui Developer

Last Updated on March 5, 2022 by

JavaScript bisa disebut sebagai Bahasa Pemrograman yang sangat kompleks. Ada banyak sekali konsep dasar JavaScript yang perlu dipahami untuk bisa menjadi seorang pengembang JavaScript. Bahasa pemrograman telah digunakan pada jutaan halaman web dibangun di atas JavaScript.

Pada satu sisi HTML dan CSS memberikan gaya pada halaman web tetapi di sisi lain, keajaiban JavaScript yang membuat halaman web Anda hidup. Hari ini bahasa ini tidak hanya terbatas pada browser web Anda. Anda juga dapat menggunakannya untuk aplikasi sisi server.

Satu Bahasa bisa memenuhi kedua tujuan. Hal inilah yang mendasari kami untuk membahas tentang konsep dasar JavaScript. Jika Anda ingin tahu apa saja konsep JavaScript dari dasar, simak terus artikel ini sampai akhir.

11 Konsep Dasar JavaScript yang Harus Dipahami

Javascript adalah bahasa pemrograman nomor 1. Bahasa ini banyak digunakan oleh 95% dari semua situs web yang dapat Anda akses di search engine. Baik itu startup kecil atau perusahaan besar, kebanyakan dari mereka mengerjakan beberapa jenis situs web atau aplikasi yang membutuhkan pengetahuan yang baik tentang bahasa ini.

Banyak framework dan library yang ada untuk JavaScript. Framework dan pustaka ini dapat dipelajari dengan mudah jika dasar-dasar javascript Anda jelas. Banyak konsep yang membingungkan dan membebani pengembang, tetapi pengetahuan yang baik tentang konsep-konsep ini akan membantu Anda dalam jangka panjang.

Framework dan perpustakaan datang dan pergi tetapi dasar-dasarnya selalu tetap sama. Sangat mudah untuk membangun segala jenis aplikasi dan mempelajari framework dan pustaka apa pun jika dasar-dasarnya jelas. Inilah 11 konsep dasar JavaScript yang harus dipahami oleh developer.

1. Penugasan Variabel Nilai vs. Referensi

Memahami bagaimana JavaScript menetapkan variabel adalah dasar untuk menulis JavaScript bebas bug. Jika Anda tidak memahami ini, Anda dapat dengan mudah menulis kode yang secara tidak sengaja mengubah nilai.

JavaScript adalah bahasa yang selalu memberikan variabel berdasarkan nilai. Tetapi bagian ini sangat penting: ketika nilai yang ditetapkan adalah salah satu dari lima tipe primitif JavaScript (yaitu, Boolean, null, undefined, String, dan Number) nilai sebenarnya ditetapkan. Namun, ketika nilai yang ditetapkan adalah Array, Fungsi, atau objek, referensi ke objek dalam memori ditetapkan.

2. Closures

Konsep dasar JavaScript selanjutnya adalah Closures. Ia merupakan pola JavaScript penting untuk memberikan akses pribadi ke variabel. Closures hanyalah fungsi di dalam fungsi lain yang memiliki akses ke variabel fungsi luar. Sekarang, definisi ini terdengar cukup mudah tetapi keajaiban sebenarnya dibuat dengan ruang lingkup.

Fungsi bagian dalam (closures) dapat mengakses variabel yang ditentukan dalam ruang lingkupnya (variabel yang ditentukan di antara tanda kurung kurawalnya), dalam ruang lingkup fungsi induknya dan variabel global. Sekarang di sini Anda perlu ingat bahwa fungsi luar tidak dapat memiliki akses ke variabel fungsi dalam (kita telah membahas ini dalam konsep ruang lingkup)

3. Destructuring

Objek destructuring adalah fitur JavaScript yang berguna untuk mengekstrak properti dari objek dan mengikatnya ke variabel. Jangan terlempar oleh parameter destructuring JavaScript! Ini adalah cara umum untuk mengekstrak properti dari objek dengan bersih.

Lebih baik lagi, perusakan objek dapat mengekstrak beberapa properti dalam satu pernyataan, dapat mengakses properti dari objek bersarang, dan dapat menetapkan nilai default jika properti tidak ada.

4. Syntax Spread

Konsep Dasar JavaScript yang dapat membuat orang kesulitan tetapi relatif sederhana adalah operator syntax spread! Dalam kasus berikut, Math.max tidak dapat diterapkan ke array arr karena tidak menggunakan array sebagai argumen, melainkan elemen individual sebagai argumen. Operator spread … digunakan untuk menarik elemen individu keluar dari array.

5. Array Method

Array Method JavaScript sering kali dapat memberi Anda cara untuk melakukan transformasi data yang Anda butuhkan. Sebagai ada beberapa array method yang bisa Anda gunakan.

a. map, filter, reduce

Ada beberapa kebingungan di sekitar metode array JavaScript memetakan, memfilter, mereduce. Berikut adalah penjelasannya,

• map: mengembalikan array di mana setiap elemen ditransformasikan seperti yang ditentukan oleh fungsi
• filter: mengembalikan array elemen di mana fungsi mengembalikan true
• reduce: akumulasi nilai seperti yang ditentukan dalam fungsi

b. Find, FindIndex, indexOf

Metode array find, findIndex, dan indexOf sering kali dapat digabungkan. Berikut adalah penjelasannya.

• find: mengembalikan instance pertama yang cocok dengan kriteria yang ditentukan. Tidak berkembang untuk menemukan instance lain yang cocok. Sekali lagi, perhatikan bahwa meskipun semuanya setelah 5 memenuhi kriteria, hanya elemen pencocokan pertama yang dikembalikan.
• findIndex: Ini bekerja hampir sama untuk menemukan, tetapi alih-alih mengembalikan elemen pertama yang cocok, ini mengembalikan indeks elemen pertama yang cocok.
• indexOf: cara kerjanya hampir identik dengan findIndex, tetapi alih-alih mengambil fungsi sebagai argumen, dibutuhkan nilai sederhana. Anda dapat menggunakan ini ketika memiliki logika yang lebih sederhana dan tidak perlu menggunakan fungsi untuk memeriksa apakah ada kecocokan.

c. push, pop, shift, unshift

Ada banyak metode array yang bagus untuk membantu menambah atau menghapus elemen dari array dengan cara yang ditargetkan. Berikut adalah penjelasannya.

• push: Ini merupakan metode yang relatif sederhana yang menambahkan item ke akhir array. Ini memodifikasi array di tempat dan fungsi itu sendiri mengembalikan item yang ditambahkan ke array.
• pop: digunakan untuk menghapus item terakhir dari array. Sekali lagi, itu memodifikasi array di tempat. Fungsi itu sendiri mengembalikan item yang dihapus dari array.
• shift: digunakan untuk menghapus item pertama dari array. Sekali lagi, itu memodifikasi array di tempat. Fungsi itu sendiri mengembalikan item yang dihapus dari array.
• unshift: Ini menambahkan satu atau lebih elemen ke awal array. Sekali lagi, itu memodifikasi array di tempat. Tidak seperti banyak metode lain, fungsi itu sendiri mengembalikan panjang array yang baru.

d. splice, slice

Metode ini memodifikasi atau mengembalikan subset array. Berikut ini adalah penjelasannya.

• splice: Mengubah isi array dengan menghapus atau mengganti elemen yang ada dan/atau menambahkan elemen baru. Metode ini memodifikasi array di tempat.
• slice: mengembalikan Salinan array yang dangkal dari posisi awal yang ditentukan dan sebelum posisi akhir yang ditentukan. Jika tidak ada posisi akhir yang ditentukan, sisa array akan dikembalikan. Yang terpenting adalah metode ini tidak mengubah array di tempatnya melainkan mengembalikan subset yang diinginkan

e. sort: mengurutkan array berdasarkan fungsi yang disediakan yang mengambil elemen pertama dan argumen elemen kedua. Memodifikasi array di tempat. Jika fungsi mengembalikan negatif atau 0, urutannya tetap tidak berubah. Jika positif, urutan elemen dialihkan.

6. Object Comparison (Membandingkan objek)

Kesalahan yang sering dilakukan oleh pemula dalam belajar JavaScript adalah membandingkan objek secara langsung. Ini adalah konsep dasar JavaScript yang sangat penting.  Variabel menunjuk ke referensi ke objek dalam memori, bukan objek itu sendiri.

Salah satu metode untuk benar-benar membandingkannya adalah mengonversi objek menjadi string JSON. Ini memiliki kelemahan yaitu pesanan properti objek tidak dijamin! Cara yang lebih aman untuk membandingkan objek adalah dengan menarik perpustakaan yang berspesialisasi dalam perbandingan objek yang dalam.

7. Callback

Dalam javascript, callback hanyalah fungsi yang diteruskan ke fungsi lain sebagai parameter dan dipanggil atau dieksekusi di dalam fungsi lain. Di sini suatu fungsi perlu menunggu fungsi lain untuk mengeksekusi atau mengembalikan nilai dan ini membuat rantai fungsi (ketika X selesai, maka Y dieksekusi, dan seterusnya.). Inilah alasan mengapa callback umumnya digunakan dalam operasi asinkron JavaScript adalah menyediakan kemampuan sinkron.

8. Promise

Promise berguna dalam operasi javascript adalah asinkron ketika kita perlu menjalankan dua atau lebih operasi back to back, di mana setiap fungsi berikutnya dimulai ketika yang sebelumnya selesai.

Promise adalah suatu objek yang dapat menghasilkan nilai tunggal suatu waktu di masa depan, baik nilai yang diselesaikan atau alasan yang tidak diselesaikan (ditolak). Sebuah promise mungkin ada dalam tiga kemungkinan keadaan yaitu sebagai berikut:

• Fulfilled: Ketika operasi selesai dengan sukses.
• Rejected: Ketika operasi gagal.
• Pending: status awal, tidak terpenuhi atau ditolak.

9. Async dan Await

Async & Await hanya sintaksis di atas Promise dan seperti promise itu juga menyediakan cara untuk mempertahankan operasi asinkron lebih sinkron. Jadi dalam operasi asinkron JavaScript adalah dapat ditangani dalam berbagai versi seperti:

• ES5 -> Callback
• ES6 -> Promise
• ES7 -> async & await

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

10. IIFE (Immediately Invoked Function Expression)

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 scope global agar tidak tercemar. Jadi alasan utama untuk menggunakan IIFE adalah untuk segera mengeksekusi kode dan mendapatkan privasi data.

11. Scope

Konsep dasar JavaScript selanjutnya adalah Scope. Ia berarti akses variabel. Variabel apa yang diakses saat kode berjalan? Dalam javascript secara default, Anda selalu dalam lingkup root yaitu lingkup jendela. Ruang lingkup hanyalah sebuah kotak dengan batas untuk variabel, fungsi, dan objek.

Batas-batas 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 membantu Anda untuk memisahkan logika dalam kode Anda dan juga meningkatkan keterbacaan. Sebuah ruang lingkup dapat didefinisikan dalam dua cara yaitu:

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

Itulah penjelasan tentang 11 konsep dasar JavaScript yang harus Anda pahami sebagai seorang pemula dalam JavaScript. Mengembangkan website maupun web app dengan JavaScript bisa dibilang cukup rumit, sehingga Anda harus memahami dengan baik ketika belajar JavaScript.

Ingin tahu lebih banyak informasi seputar pengembangan website? Kunjungi Web App di https://appkey.id/ untuk dapatkan informasi terbaru seputar pengembangan website, aplikasi, maupun Web App serta belajar JavaScript.