JavaScript Concept

A. Lexical Structure

Bahasa pemrograman JavaScript memiliki serangkaian aturan dasar yang diatur oleh Lexical Structure. Aturan yang diatur oleh Lexical Structure meliputi seperti apa nama variabel terlihat, karakter pembatas untuk komentar, dan bagaimana satu pernyataan program dipisahkan dari yang berikutnya. Berikut adalah aturan umum yang diatur oleh Lexical Structure:

1. Character Set

Pemrograman JavaScript menggunakan character set Unicode. Unicode sendiri adalah pengodean karakter-karakter khusus yang digunakan dalam bahasa yang digunakan dalam seluruh dunia, bahkan beberapa aksara bahasa daerah Indonesia seperti aksara jawa sudah disahkan untuk memiliki register Unicode. Dengan penggunaan Unicode sebagai character set yang digunakan oleh JavaScript hal ini berarti JavaScript dapat menggunakan simbol-simbol yang terdapat pada Unicode seperti yang terlihat pada gambar di bawah ini.

Perlu diketahui terdapat beberapa jenis pengodean Unicode seperti UTF-8 dan UTF-16 yang paling umum, UTF-8 sendiri adalah standar pengodean website dan juga encoding default yang digunakan oleh banyak program perangkat lunak. Sebagai contoh Unicode sendiri berbentuk A untuk karakter “A”. Dalam penerapannya perlu diingat bahwa Lexical Structure juga mengatur Identifiers yang perlu dipatuhi dalam penulisannya.

2. Optional Semicolon

Penggunaan semicolon atau titik koma ditujukan untuk memisahkan statement satu sama lainnya. Namun, pada bahasa pemrograman JavaScript, penggunaan semicolon bersifat opsional dengan syarat statement satu sama lainnya tidak berada dalam satu baris yang sama. Gambar di bawah adalah contoh mengenai penggunaan semicolon yang opsional. Gambar pertama terdapat lebih dari satu statement pada satu baris, kode tetap dapat terbaca karena masing-masing statement dipisahkan oleh semicolon.

Pada gambar kedua di bawah ini terdapat potongan kode dengan beberapa statement yang tidak dipisahkan dengan semicolon namun dipisahkan oleh baris yang berbeda.

3. Whitespaces and Line Breaks

JavaScript mengabaikan jumlah spasi yang muncul dalam baris kodenya. Selain spasi, Line Breaks juga diabaikan oleh JavaScript. Dengan diabaikannya spasi, programmer dapat dengan leluasa memberikan spasi atau baris tambahan agar kode dapat dengan mudah dibaca oleh pengguna.

4. Case Sensitive

JavaScript sensitif terhadap besar atau kecil huruf yang digunakan dalam penulisan kode. Dengan sensitifnya JavaScript terhadap penggunaan huruf besar dan kecil hal ini berarti True, true, dan TRUE memiliki arti yang berbeda.

5. Comments

JavaScript juga mendukung penulisan comment dengan dua jenis penulisan yang berbeda, yakni komentar satu baris dituliskan dengan menambahkan “ // “ pada awal penulisan komentar. Kita juga dapat menuliskan komentar multi baris dengan menambahkan “ /* “ pada awal komentar dan ditutup dengan “ */ “ pada akhir komentar.

6. Reserved words

JavaScript memilki kumpulan kata-kata yang sudah digunakan oleh JavaScript sehingga tidak dapat digunakan kembali untuk variables, labels, atau nama fungsi.

Kata-kata dengan tanda * merupakan kata-kata baru di ECMAScript 5 dan 6. Lalu berikut adalah objects, properties, dan methods bawaan dari JavaScript:

Berikut adalah reserved words dari properties dan object Java yang juga harus dihindari penggunaannya:

Karena JavaScript sering digunakan bersamaan dengan aplikasi lain sehingga terdapat beberapa penggunaan nama objek dan properti HTML dan Windows yang harus dihindari, seperti:

Lalu terdapat beberapa reserved words yang digunakan oleh HTML event handlers:

Variables and Types

Variable digunakan untuk menyimpan nilai data. Misalnya, variable dapat digunakan untuk menyimpan alamat email pengguna, atau nama mereka. Dalam JavaScript, variable dapat berisi semua jenis data, seperti string, boolean true atau false, object, atau number. Walau terdapat beberapa tipe data yang dapat digunakan JavaScript, kita tidak perlu mendeklarasikan variabel sesuai dengan tipe data yang digunakan, sebagai gantinya kita akan mendeklarasikan variabel menggunakan var, const, dan let.

Berikut beberapa variable yang digunakan di dalam javascript:

Seperti yang sebelumnya telah dijelaskan bahwa kita dapat mengisikan data kepada variabel, berikut adalah tipe data inti yang umum digunakan dalam pemrograman JavaScript:

• Number
• Boolean
• String
• Object

B. Operators and Expression

1. Operator

JavaScript memiliki beberapa jenis operator berikut:

• Assignment operators
• Comparison operators
• Arithmetic operators
• Bitwise operators
• Logical operators
• String operators
• Conditional (ternary) operator
• Comma operator
• Unary operators
• Relational operators

2. Expression 

Expression adalah unit kode apapun yang valid yang menghasilkan nilai. Setiap expression yang valid secara sintaks menyelesaikan beberapa nilai tetapi secara konseptual, ada dua jenis ekspresi: dengan efek samping (misalnya: yang memberikan nilai ke variabel) dan yang dalam beberapa hal mengevaluasi dan karena itu memutuskan untuk suatu nilai.

Berikut beberapa jenis expression:

Primary expressions

Left-hand-side expressions

C. Function and Arrow Function

1. Regular Function

Function adalah salah satu blok bangunan mendasar dalam JavaScript. Function dalam JavaScript mirip dengan prosedur, satu set pernyataan yang melakukan tugas atau menghitung nilai, tetapi agar prosedur memenuhi syarat sebagai function, ia harus mengambil beberapa input dan mengembalikan output di mana ada beberapa hubungan yang jelas antara masukan dan keluaran. Untuk menggunakan suatu fungsi, Pengembang harus mendefinisikannya di suatu tempat dalam lingkup dari mana pengembang ingin memanggilnya.

Penulisan syntax:

2. Arrow Function

Ekspresi arrow function adalah alternatif ringkas untuk ekspresi function tradisional, tetapi terbatas dan tidak dapat digunakan di semua situasi. Ada perbedaan antara arrow function dan function tradisional, serta beberapa batasan:

Arrow Function tidak memiliki ikatan sendiri untuk ini, argumen, atau super, dan tidak boleh digunakan sebagai metode.

Arrow Function tidak memiliki akses ke kata kunci new.target.

Arrow Function tidak cocok untuk metode panggilan, penerapan, dan pengikatan, yang umumnya bergantung pada penetapan cakupan.

Arrow Function tidak dapat digunakan sebagai konstruktor.

Arrow Function tidak dapat menggunakan hasil, di dalam tubuhnya.

Penulisan syntax:

JS Async

Asynchronous programming adalah teknik yang memungkinkan program kita untuk memulai tugas yang berpotensi berjalan lama dan masih dapat responsif terhadap peristiwa lain saat tugas itu berjalan, daripada harus menunggu sampai tugas itu selesai. Setelah tugas itu selesai, program kita disajikan dengan hasilnya.

Banyak fungsi yang disediakan oleh browser, terutama yang paling menarik, berpotensi memakan waktu lama, dan karena itu, tidak sinkron. Sebagai contoh:

Membuat permintaan HTTP menggunakan fetch()

Mengakses kamera atau mikrofon pengguna menggunakan getUserMedia()

Meminta pengguna untuk memilih file menggunakan showOpenFilePicker()

Jadi, meskipun kita mungkin tidak sering mengimplementasikan fungsi asynchronous, tetapi kita perlu menggunakannya dengan benar.

Ada banyak sekali implementasi asynchronous dalam javascript seperti event, timer, request ajax, listener, interaksi user dan masih banyak lagi. NodeJS merupakan salah satu contoh sukses platform javascript yang sangat bergantung pada teknik asynchronous.

A. Synchronous vs Asynchronous

Synchronous adalah istilah yang paling umum dan mudah dimengerti. Setiap perintah dieksekusi satu persatu sesuai urutan kode yang kita tuliskan. Contoh:

Output dari kode diatas dijamin akan sesuai urutan, karena setiap perintah harus menunggu perintah sebelumnya selesai. Proses seperti ini disebut blocking.

Sedangkan Asynchronous hasil eksekusi atau output tidak selalu berdasarkan urutan kode, tetapi berdasarkan waktu proses. Eksekusi dengan asynchronous tidak akan membloking atau menunggu suatu perintah sampai selesai. Daripada menunggu, asynchronous akan mengeksekusi perintah selanjutnya.

Berikut perbandingan asynchronous dan synchronous :

Dari contoh simulasi di atas model eksekusi asynchronous lebih efisien.

Tapi ada yang menjadi pertimbangan jika ingin menggunakan asynchronous dimana ada yang disebut race condition. Race Condition terjadi ketika ada satu perintah yang bergantung pada output eksekusi asynchronous sebelumnya. Dengan kata lain kejar-kejaran. Contoh :

Dari contoh kode diatas besar kemungkinan displayUser menampilkan data kosong, karena belum tentu output dari eksekusi requestAjax sudah selesai. Solusi untuk problem ini yaitu menggunakan teknik callback, promise, generator atau async/await.

B. Callback

Seperti yang telah dijelaskan diatas JavaScript menjalankan kode secara berurutan dalam urutan top-down. Namun, ada beberapa kasus kode berjalan (atau harus dijalankan) setelah sesuatu yang lain terjadi dan juga tidak berurutan.

Callback memastikan bahwa suatu fungsi tidak akan berjalan sebelum tugas selesai tetapi akan berjalan tepat setelah tugas selesai. Ini membantu dalam mengembangkan kode JavaScript asynchronous dan membuat aman dari masalah dan kesalahan dalam pengembangan sistem yang menggunakan JavaScript.

Dalam JavaScript, cara membuat function callback adalah dengan meneruskannya sebagai parameter ke fungsi lain, dan kemudian memanggilnya kembali segera setelah sesuatu terjadi atau beberapa tugas selesai.

Bagaimana membuat callback?

Dalam JavaScript, function adalah objek. Bisakah kita meneruskan objek ke fungsi sebagai parameter? Jawabannya adalah ya. Jadi, javascript juga dapat meneruskan function sebagai parameter ke function lain dan memanggilnya di dalam function luar. 

Contoh callback :

Ada metode bawaan dalam JavaScript yang disebut "setTimeout", yang memanggil function atau mengevaluasi expression setelah periode waktu tertentu (dalam milidetik). Jadi disini, function "message" akan dipanggil setelah 3 detik berlalu. (1 detik = 1000 milidetik)

Dengan kata lain, function message akan  dipanggil setelah 3 detik berlalu(3000 milidetik), sebelum proses 3 detik ini selesai dijalankan proses lainnya tidak akan dijalankan.

Selain itu, kita juga dapat mendefinisikan fungsi secara langsung. contoh:

Selain itu penulisan function juga bisa menggunakan Arrow Function. contoh :

C. Promises

Promise adalah proxy untuk nilai yang belum tentu diketahui saat promise dibuat. Ini memungkinkan kita untuk mengaitkan penangan dengan nilai keberhasilan atau alasan kegagalan tindakan asynchronous. Ini memungkinkan metode asynchronous mengembalikan nilai seperti metode synchronous: alih-alih segera mengembalikan nilai akhir, metode asynchronous mengembalikan janji untuk memasok nilai di beberapa titik di masa mendatang.

Ketika melakukan request asynchronous seperti Ajax, maka ada 3 kemungkinan state :

• Pending ( sedang dalam proses )
• Fulfilled ( berhasil )
• Rejected ( gagal )

Promise bukan untuk menggantikan callback, karena promise akan selalu berjalan asynchronous sedangkan callback bisa digunakan untuk synchronous maupun asynchronous. keuntungan utama dari promise adalah membuat kode lebih readable dan manajemen error yang lebih baik.

Perbedaan callback dan promise?

• Callback adalah function sedangkan promise adalah object.
• Callback di kirim melalui parameter, sedangkan promise mengembalikan object
• Callback digunakan untuk menghandle succes dan failure,sedangkan promise tidak
• Callback dapat digunakan untuk beberapa event sekaligus, sedangkan promise hanya untuk satu event

Contoh menggunakan promise :

Selain menggunakan resolve dan reject bisa juga menggunakan then catch yang hampir sama. Berikut contohnya :

Output dari code diatas ada 2 kemungkinan,

Jika comment pada resolve di hapus maka hasilnya “berhasil”

Jika comment pada reject di hapus maka hasilnya “Janji di batalkan”

D. Async Await

Async await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam menangani proses asynchronous.

Contoh Async Await :

async: mengubah function menjadi asynchronous

await: menunda eksekusi hingga proses asynchronous selesai

Dari kode di atas berarti console.log(result) tidak akan dieksekusi sebelum proses doAsync selesai. await juga bisa digunakan berkali-kali di dalam function

Perbandingan promise dan async await: 

Outputnya memang sama tetapi async/await lebih mudah dibaca daripada promise.

Tidak seperti promise yang bisa di pasangkan dengan catch untuk handle errornya. untuk async/await harus menggunakan try catch untuk handle errornya. berikut contoh code :

Referensi

1. Lexical Structure in JavaScript
2. JavaScript Variables: The Complete Guide | Career Karma
3. Node.js Tutorial - Node.js Data Type
4. Expressions and operators - JavaScript | MDN
5. Functions - JavaScript | MDN
6. Arrow function expressions - JavaScript | MDN
7. Lexical structure of Java Script
8. The Lexical Structure of JavaScript
9. JavaScript Reserved Words
10. JavaScript: Literals
11. Mengenal Template Literal Pada Javascript - Kursus Web Design Private Online 1 on 1‎ | DUMET School
12. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#synchronous_programming
13. https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/
14. https://medium.com/coderupa/panduan-komplit-asynchronous-programming-pada-javascript-part-1-fca22279c056
15. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
16. https://medium.com/coderupa/panduan-komplit-asynchronous-programming-pada-javascript-part-3-promise-819ce5d8b3c
17. https://medium.com/coderupa/panduan-komplit-asynchronous-programming-pada-javascript-part-4-async-await-fc504c344238