Belajar JavaScript - Membuat Validasi Password

Belajar JavaScript - Membuat Validasi Password

Belajar JavaScript - Membuat Validasi Password



Ngulik Kode - Keamanan akun sangatlah penting. Sebagai developer kita bisa membuat akun user lebih aman salah satunya dengan membuat password user dengan kombinasi yang unik. Pada artikel kali ini kita akan membuat contoh validasi password menggunakan JavaScript. 

Sekarang buka kode editor kalian masing-masing, di sini saya akan menggunakan Visual Studio Code.

Buatlah dahulu sebuah folder yang berisi file html, css, dan js yang nanti akan kita gunakan. Kita akan menggunakan file index untuk file html, style untuk css dan script untuk javascriptnya.


Kita buat dahulu form input password dan validasinya di index.html


Jika saya jalankan, maka hasilnya akan seperti ini:

Lalu kita styling di style.css supaya lebih menarik, di sini kita akan gunakan font Poppins dan styling untuk form passwordnya.


Kalian save, maka tampilannya akan seperti di bawah ini


Sekarang kita akan tambah icon mata di dalam form password untuk hide and show password. Pertama kita tambah dulu link CDN dari Font Awesome supaya bisa memakai icon dari Font Awesome. Tambahkan kode ini di index.html di atas element title


Lalu kita tambah styling untuk icon show password, tambah kode css ini di file style.css


Sekarang tampilannya akan seperti ini


Sudah ada icon matanya, tapi itu belum berfungsi apa-apa. Sekarang kita akan tambahkan fungsi javascript di script.js. Kita akan import dulu file script.js di index.html. Tambahkan kode berikut di akhir element sebelum </body>


Lalu kita tambahkan kode JavaScript berikut ke script.js


Maka hasilnya akan seperti ini


Sekarang kita akan buat styling untuk validasinya dan juga menambahkan matanya menjadi silang jika show password.


Setelah itu kita tambahkan function javascript untuk validasi passwordnya. Pertama kita tambahkan functionnya di element input dahulu dengan melempar parameter sebuah value yaitu berupa text yang kita ketik di form password nantinya


Lalu terakhir kita buat function checkPassword di script.js dengan menerima parameter yang tadi kita lempar di index.html. Disini kita juga akan menggunakan regular expression untuk membuat validasi password sesuai yang kita buat di index.html


Dan hasil akhirnya akan seperti ini✨


Saya lampirkan keseluruhan kodenya di bawah ini ya



Kita sudah sampai dipenghujung artikel. Bagaimana? Mudah atau susah? Jika ada error silahkan komentar di bawah ya. Semoga bermanfaat dan kalian menyukainya. Jangan lupa bagikan ilmu ini ke yang lainnya juga ya!


Perbedaan Hashing dan Encryption

Perbedaan Hashing dan Encryption

Perbedaan Hashing dan Encryption

 

Ngulik Kode - Dalam dunia programing sering kali kita mendengar istilah "hashing" & "encryption", lalu apa sebenernya itu? dan apakah memiliki perbedaan?


Hashing

Hashing adalah mekanisme pengamanan satu arah sebuah data, artinya setelah data tersebut di hashing kita tidak bisa membukanya kembali, study case yang sering menggunakan metoda hashing adalah ketika kita menyimpan password kedalam database, kenapa menggunakan hashing? untuk mencegah owner applikasi ataupun pihak yang mampu membobol database kita mengetahui password para pengguna aplikasi kita, walaupun sebenernya result hashing bisa ditemukan bila mana pengguna password kita menggunakan password yang mudah ditebak, 

Misal seperti ini : 



Artinya bilamana database kita di bobol oleh pihak yang tidak berwenang (hacker) dan dia mengambil semua data identitas pengguna, salah satunya (username & password) dan mencoba membuat program pencocokan nilai hashing dengan plain text data random yang di input dan menghasilkan result yang sama seperti di database. artinya dia sudah berhasil mengetahui password pengguna aplikasi kita, di sebabkan plain text data password pengguna sangat mudah ditebak seperti gambar di atas. maka dari itu dibuatlah standard strong, middle, low dalam pembuatan sebuah password ketika registrasi account pengguna. untuk mencegah terjadinya hal tersebut.


Nah dari sini sebenernya kita belajar bahwa untuk apa pihak tidak berwenang membuat sebuah program pencocokan tersebut dengan menginputkan random plain text. karena sebenernya hashing tersebut tidak bisa di buka secara langsung, artinya jika plain text tersebut sangat strong butuh berapa lama dia bisa mencocokan hasil hashing tersebut? bagaimana jika penggunak membuat sebuah data plain text seperti ini sebelum di hashing system -> 2021#$akuSayangCil0k$, butuh berapa lama untuk mendapatkan hashing yang cocok? mungkin bisa ratusan tahun!


Encryption

Encryption adalah mekanisme pengamanan sebuah data dimana ketika data tersebut telah selesai di encrypt, itu bisa kita buka tanpa harus melakukan pencocokan hinga ratusan tahun teman-teman hehe, lalu bagaimana membukanya?

Mekanisme membuka hasil encrypt dinamakan sebagain decryption namun menggunakan suatu kunci yang kita sebut sebagai private key/secret key/password, tentunya key tersebut bersifat rahasia, artinya yang mengetahui adalah pihak yang melakukan encryption data dan decryption data tersebut.

Lalu tujuannya untuk apa? melindungi data tersebut dari pihak ketiga.

Mari kita lihat metode sederhana encryption :



Saya menggunakan password : hanyakitayangtahu
Result Hashing :
48+sRrFkffdIn8T2dAdhKNTxxhbIeDep4rYf5IfFsmRglWfypXnU/JGad5mcKR86wLwnVnA1ERJqoT2r7DJic9i1bNb6Cr7mwA4dKlhvJCzqxLpSFJD9kJ+nSd4/Eacz

Lalu bagaimana membuka hasil encryption (decrypt) tersebut tanpa harus membuat program pencocokan seperti saat menggunakn metoda hashing?
kita hanya perlu melakukan proses decryption dengan memasukan nilai password yang sama ketika melakukan encryption, maka akan seperti ini :



Cukup mudah bukan melakukan decryption ketika kita mengetahui password key nya?

Mudah sekali, namun password key ini aka sangat sekali bersifat rahasia artinya pihak ketiga tidak akan pernah bisa membuka data encryption tersebut, ini akan membuat pihak ketiga menyerah dan tak ingin membuang waktunya untuk membukan encryption data tersebut, mungkin akan membutuhkan ribuan tahun lamanya bilamana pihak ketiga tidak pernah mengetahui password key kita, namun akan dengan mudah bahkan cukup hitungan detik membukanya jika pihak ketiga mengetahui nya.

Case encrypt decrypt biasanya digunakan untuk pengiriman message data yang sangat rahasia melalui jaringan.

Conclusion

Hashing dan Encryption memiliki perbedaan perilaku pengamanan sebuah data.

Hashing metoda satu arah sedangkan encryption metoda dua arah, 
artinya data hasil hashing tidak bisa di buka kembali, sedangkan data hasil encryption bisa di buka kembali namun perlu mengetahui private key,secret key/password untuk membukanya.

Rumus hashing dan Encryption pun pastinya berbeda. hashing hanya mengandalkan formula fixed tanpa ada kombinasi password seperti layaknya metode encryption.

Begitu banyak metode dan rumus formula dalam melakukan hashing dan encryption data, ilmu yang membahas hal tersebut dinamakan kriptografi ini adalah bagian ilmu tertinggi dalam bidang komputer dan pastinya tidak mudah untuk di pelajari.


Referensi Tools Encryption :

https://www.gillmeister-software.com/online-tools/text/encrypt-decrypt-text.aspx

Referensi Tools Hashing :

https://emn178.github.io/online-tools/sha256.html 




Belajar Node.js Bagian 1: Cara Mudah Install Node.js di Windows 10 untuk Pemula

Belajar Node.js Bagian 1: Cara Mudah Install Node.js di Windows 10 untuk Pemula

Belajar Node.js Bagian 1: Cara Mudah Install Node.js di Windows 10 untuk Pemula

Ngulik Kode - Halo semuanya, balik lagi bersama saya dalam tutorial belajar node js bagian 1 yaitu cara install node.js di windows 10, lalu apa saja yang perlu disiapkan untuk menginstall node.js ini ?

Mari sama-sama kita ikuti langkah-langkahnya seperti dibawah :

1. Langkah-Langkah Install Node.js

Bagian ini adalah tahapan-tahapan untuk menginstall node.js pada windows 10, ikuti langkah-langkahnya agar teman-teman bisa berhasil menginstallnya : 
  1. Buka halaman resmi dari node.js untuk mendownload installer yang kita inginkan, karena disini saya mencontohkan dengan menggunakan windows jadi pilihnya yang "Windows Installer".

    Atau biasanya juga halaman websitenya sudah membaca sistem operasi yang kita gunakan, seperti gambar berikut, lalu kita pilih LTS


  2. Kemudian akan langsung ke download sesuai dengan bit pada kebutuhan laptop teman-teman.


  3. Kemudian jalankan installer Node.js.msi yang telah kita didownload lalu klik accept lecense agreement lalu klik next.


  4. Tentukan lokasi installasi yang kita inginkan, bisanya langsung next aja karena windows akan mengarahkan secara default folder installasinya.


  5. Pada custom setup kita langsung next aja.


  6. Install dependencies, dengan mencentang "Automatically install the necessary tools. ...", kemudian next.


  7. Klik "install" untuk memulai proses instalasi



    Catatan: Pada bagian ini biasanya instalasi akan membutuhkan privilese sebagai Administrator, maka langsung klik "Yes" apabila muncul opsi untuk meminta izin Admin untuk melakukan instalasi.

  8. Selamat Installasi Selesai.

2. Pastikan Node.js Yang Kita Install Sudah Benar

Kemudian teman-teman coba buka command prompt, lalu ketikkan perintah seperti berikut, untuk melihat versi dari Node.js yang telah terinstall di komputer/laptop teman-teman. Ketikkan seperti berikut : 
node -v

Dan perintah untuk menjalankan melihat versi npm yang terinstall di komputer/laptop teman-teman dengan mengetikkan seperti berikut :

npm -v 

Jika Node.js telah terinstall dengan benar maka akan tampil seperti gambar berikut : 


3. Update Versi npm


npm adalah package manager pada JavaScript atau Node.js, Sebagai tahap akhir instalasi Node.js pada windows 10 ini tidak lupa kita akan mengupdate versi npm. Instalasi npm ini walaupun satu pake dengan instalasi Noje.js, tetapi tidak terupdate secara otomatis ke versi terbarunya, sekalipun kita menginstall Node.js dengan versi terbaru.

Sehingga, kita harus tetap mengupdate versi terlebih dahulu agar versi yang kita gunakan yang terbaru. Berikut ini contoh perintah untuk mengupdate npm dengan menggetikan command pormpt seperti berikut :

npm install npm --global

Kemudian cek kembali versi npm teman-teman dengan menggetikkan perintah berikut, lalu bandingkan dengan versi sebelumnya 

npm -v 

Berikut output hasil update npm di command prompt :



npm berhasil terupdate dari versi 8.11.0 ke 8.17.0

Selamat mencoba, semoga teman-teman dapat berhasil dan semoga bermanfaat, sampai bertemu pada tulisan-tulisan saya berikutnya. 

Cara Mudah Belajar Install dan Menggunakan Bootstrap untuk Pemula

Cara Mudah Belajar Install dan Menggunakan Bootstrap untuk Pemula

Cara Mudah Belajar Install dan Menggunakan Bootstrap untuk Pemula

Ngulik Kode - Bagi kalian yang sudah pernah membuat web pasti pernah mendengar css framework satu ini. Bootstrap adalah salah satu css framework yang populer di kalangan front end developer. Karena mudah digunakan, konsisten, dan juga responsive. Hingga saat artikel ini dibuat, Bootstrap ini sudah sampai versi 5.2.

Oke mari kita mulai cara menggunakan bootstrap pada halaman web kita.


Install Bootstrap

Ada dua cara untuk menginstall bootstrap

Yang pertama, kita bisa menggunakan NPM (Node Package Manager)


Yang kedua, kita bisa menggunakan CDN (Content Delivery Network)



Untuk artikel kali ini kita akan menggunakan cara yang kedua.


Mari kita eksekusi

Buatlah folder dahulu untuk file html kalian


 Lalu buka code editor kalian di dalam folder yang sudah kalian buat tadi. Karena di sini saya menggunakan Visual Studio Code, maka saya akan masuk ke dalam folder yang sudah saya buat, lalu saya klik kanan dan klik Open With Code


Maka tampilannya akan seperti ini


Lalu kita buat file html kita di dalam folder tersebut dan ketikkan template html seperti di bawah ini :




Lalu tambahkan kode bootstrap yang akan kita gunakan via CDN


Nah dari sini kita sudah bisa menggunakan component dari bootstrap. Mari kita coba membuat navbar dari bootstrap.

Kode dibawah ini adalah component navbar dari bootstrap, coba kalian copy ke code editor kalian di file yang tadi kalian buat ya.



Jadi keseluruhan kode kita akan seperti di bawah ini



Untuk cek hasil di browser, kalian save dulu filenya dengan menekan CTRL + S. Lalu buka file explorer di direktori file html kalian berada. Klik kanan > Pilih Open With > Pilih browser yang kalian gunakan.



Maka akan terbuka hasil dari file html kita tadi


 Ada cara lain untuk membuka hasil file html kita tadi dengan cara yang lebih mudah dan tampilannya langsung berubah setelah kita save filenya. Yaitu, menggunakan extension Live Server di Visual Studio Code.


Kalian bisa langsung install extension ini dan nanti akan muncul simbol Go Live di Status Bar bawah VS Code sebelah kanan


Kalian Klik Go Live dan nanti tampil browser kalian dengan hasil yang kita kerjakan tadi, tetapi dengan link yang berbeda. Link sekarang sudah menggunakan IP dan Port.


Sekarang perubahan yang terjadi di kode kalian akan langsung berubah juga dibrowser.

Untuk pembahasan Bootstrap kali ini saya rasa cukup sampai di sini. Semoga artikel kali ini bermanfaat dan kalian menyukainya. Bagikan artikel ini dan beri komentar di bawah apa yang ingin dibahas selanjutnya ya!






Belajar JavaScript - Console Yang Akan Meningkatkan Skill Debuggingmu

Belajar JavaScript - Console Yang Akan Meningkatkan Skill Debuggingmu

Belajar JavaScript - Console Yang Akan Meningkatkan Skill Debuggingmu

javascript console

Ngulik Kode - Console adalah objek JavaScript yang memberi developer akses ke console debugging browser.

Shortcut untuk membuka console di browser

  • Ctrl + Shift + I (Windows)
  • Command + Option + K (Mac)
Dalam artikel ini, saya akan membahas 5 metode console yang dapat kalian gunakan untuk meningkatkan keterampilan debugging kalian.

console.error()

Metode ini bekerja seperti metode console.log(). Ini berguna untuk pengujian kode. Secara default pesan kesalahan akan disorot dengan warna merah.

console error

console.dir()

Ini adalah metode lain yang juga hampir seperti console.log() kecuali ini menunjukkan konten dalam format JSON.

console dir

console.table()

Metode ini digunakan untuk menghasilkan tabel di dalam console. Input harus berupa array atau objek yang akan ditampilkan sebagai tabel.
Metode ini sangat berguna jika kalian mengambil data dari API. Kalian dapat melihat secara visual bagaimana data diterima.

console table


console.group() & console.groupEnd()

group() and groupEnd() adalah metode objek console yang memungkinkan kita untuk mengelompokkan konten dalam blok terpisah.
👉.group() digunakan untuk memulai grup baru. Secara default, grup dibuka di console. Gunakan .groupCollaps untuk menutup grup menjadi default.
👉.groupEnd() menutup grup saat ini, dibutuhkan label yang sama dengan .group()

console group


console.time() & console.timeEnd()

Metode ini digunakan untuk menentukan jumlah waktu yang digunakan untuk menjalankan sebuah kode. Sama seperti metode .group(), ini juga membutuhkan label yang harus sama.

console time

console.clear()

Metode ini sama seperti namanya, digunakan untuk membersihkan console.

console clear

Baiklah, itu saja pembahasan pada kali ini, semoga bermanfaat dan kalian menyukainya. Jangan lupa share ke yang lain juga ya!
Belajar JavaScript - Penjelasan Async/Await, Callbacks dan Promises pada JavaScript

Belajar JavaScript - Penjelasan Async/Await, Callbacks dan Promises pada JavaScript

Belajar JavaScript - Penjelasan Async/Await, Callbacks dan Promises pada JavaScript

Ngulik Kode - Jika kalian sebelumnya pernah belajar JavaScript, pasti kalian pernah mendengar istilah "asynchronous" sebelumnya.

Ini karena JavaScript merupakan bahasa yang bersifat asynchronous; Tapi apa maksudnya? Ok, dalam artikel kali ini saya akan menunjukkan bahwa konsepnya tidak sesulit kedengerannya.


Synchronous vs Asynchronous

Secara default, JavaScript adalah asynchronous, bahasa pemrograman single threaded. Ini berarti bahwa instruksinya hanya dapat berjalan satu per satu, dan tidak secara paralel. Contohnya begini:
Kode di atas cukup sederhana ⎼ menjumlahkan dua angka dan kemudian mencatat jumlah tersebut ke konsol. Interpreter (penerjemah) mengeksekusi instruksi ini satu demi satu dalam urutan itu sampai selesai.

Tapi ada beberapa kekurangan pada metode ini. Katakanlah kita ingin mengambil sejumlah besar data dari database dan kemudian kita tampilkan di browser. Ketika interpreter sedang menjalankan instruksi, contoh mengambil data database dan misal membutuhkan beberapa waktu, maka kode berikutnya harus menunggu sampai interpreter ini selesai menjalan instruksi yang tadi.

Sekarang mungkin kalian bilang bahwa data yang diambil tidak terlalu besar dan tidak akan memakan waktu lama. Bayangkan kalian harus fetching/mengambil data dibeberapa API yang berbeda. Dan harus menunggu antrean satu per satu hingga selesai. Seperti hal yang melelahkan ya?

Nah untungnya JavaScript telah mempunyai solusi dari masalah synchronous ini dengan memperkenalkan asynchronous JavaScript.

Dengan asynchronous ini, kode dapat dijalankan sekarang, selesainya nanti. JavaScript kan berjalan secara synchronous/berurutan nih, sekarang instruksinya tidak harus berurutan atau dieksekusi satu per satu seperti yang kita bahas sebelumnya.

Untuk lebih memahami sifat asynchronous JavaScript, kita akan bahas dengan callback functions, promises, dan async/await.

Apa itu Callback pada JavaScript?

Callback adalah function yang dilewatkan dalam function lain, dan kemudian dipanggil dalam function itu untuk melakukan tugas.

Bingung? Oke, mari kita uraikan.
Kode di atas adalah program kecil yang mencatat log ke konsol. Tapi, ada yang baru di sini. Interpreter akan mengeksekusi instruksi pertama, kemudian yang kedua, tetapi akan melewati yang ketiga dan mengeksekusi yang terakhir.

setTimeout adalah function javascript yang mengambil dua parameter. Parameter pertama adalah function yang akan dijalankan, dan yang kedua adalah waktu untuk menjalankan function tersebut dalam milidetik. Sekarang kalian melihat bagaimana callback berjalan.

Function di dalam setTimeout di atas diperlukan untuk berjalan setelah dua detik (2000 milidetik). Bayangkan itu digunakan untuk dieksekusi dibeberapa bagian yang terpisah, sementara instruksi lainnya terus dieksekusi. Setelah dua detik, hasil function tersebut kemudian dikembalikan.

Itulah sebabnya jika kita menjalankan kode di atas, kita akan mendapatkan output seperti ini:
Kalian lihat instruksi terakhir dipanggil sebelum function setTimeout mengembalikan hasilnya. Katakanlah kita menggunakan metode ini untuk mengambil data dari database. Sementara user menunggu panggilan database untuk mengembalikan hasilnya, alur dalam eksekusi ini tidak akan terganggu.

Metode ini sangat efisien, tetapi hanya sampai titik tertentu. Terkadang, developer harus melakukan multiple calls ke sumber yang berbeda dalam kode mereka. Untuk melakukan panggilan ini, callback akan menjadi berantai hingga menjadi sulit dibaca atau dimantain. Ini disebut juga sebagai Callback Hell.

Untuk mengatasi masalah ini, dikenalkanlah promises pada JavaScript.

Apa itu Promises pada JavaScript?

Kita pasti pernah mendengar orang membuat janji. Kakakmu yang berjanji akan menjaga adikmu ketika ibumu pergi ke pasar, seorang teman yang berjanji akan melunasi hutangnya tapi pas ditagih malah marahan dia.. eaaa..😂

Tapi janji di JavaScript ini sedikit berbeda.

Sebuah janji dalam konteks kita adalah sesuatu yang membutuhkan waktu untuk dilakukan. Ada dua kemungkinan hasil dari sebuah janji:
  1. Menjalankan dan menyelesaikan janji, atau
  2. Beberapa kesalahan terjadi dan janji ditolak
Promises datang untuk memecahkan masalah dari callback function. Promises mengambil dua function sebagai parameter. Yaitu, resolve dan reject. Ingatlah ketika resolve berarti sukses, dan reject adalah ketika terjadi kesalahan.

Mari kita buat contoh promises:
Kode di atas adalah sebuah promises, diapit oleh request ke beberapa endpoint. Promises itu akan melakukan resolve dan reject seperti yang kita bahas di atas.

Setelah melakukan pemanggilan ke endpoint misalnya, jika request berhasil, kita akan resolve (menyelesaikan) promise tersbut dan melanjutkan untuk melakukan apa pun yang kita ingikan dengan responsnya. Tetapi jika ada kesalahan, promise itu akan reject (ditolak).

Promise adalah cara yang rapi untuk mengatasi masalah yang disebabkan oleh callback hell, dalam metode yang dikenal sebagai promise chaining. Kalian bisa menggunakan metode ini untuk mendapatkan data secara berurutan dari beberapa endpoint, tetapi dengan kode yang lebih sedikit dan metode yang lebih mudah.

Tapi ada cara yang lebih baik lagi! Kalian mungkin akrab dengan metode berikut ini, karena ini adalah cara yang lebih disukai untuk mengatasi handling data dan API dalam JavaScript.

Apa itu Async dan Await pada JavaScript?

Masalahnya, merangkai promise bersama seperti callback bisa menjadi sangat besar dan membingungkan. Itu sebabnya Async dan Await ada.

Untuk membuat async function, kalian lakukan ini:
Perhatikan bahwa memanggil async function akan selalu mengembalikan promise.
Kita melihat bahwa asyncFunc mengembalikan promise. Mari kita memecah beberapa kode sekarang:
Kata kunci async adalah apa yang akan kita gunakan untuk membuat async function seperti yang kita bahas di atas. Tapi bagaimana dengan await? Yah, itu menghentikan JavaScript dari proses fetch (pengambilan) ke variabel respons hingga promise selesai. Jika promise sudah selesai, hasil dari fetch method (metode pengambilan) sekarang dapat diassign ke respons variabel.

Hal yang sama terjadi pada baris ke 3. Metode .json mengembalikan promise, dan kita dapat menggunakan await untuk menunda proses sampai promise selesai.

Kode yang ada di dalam async function bersifat memblokir, tetapi itu tidak mempengaruhi eksekusi program dengan cara apa pun. Eksekusi kode kita sama seperti asynchronous biasanya. Untuk menunjukkan ini,
Di konsol browser kita, output di atas akan terlihat seperti ini:
Kalian lihat saat kita memanggil asyncFunc, kode kita terus berjalan hingga tiba waktunya bagi function untuk mengembalikan hasil.

Kesimpulan

Artikel ini tidak membahas konsep-konsep ini secara mendalam, tetapi saya harap ini menunjukkan kepada kalian bagaimana JavaScript Asynchronous bekerja dan beberapa hal yang harus diwaspadai.

Ini adalah salah satu bagian yang penting dari JavaScript, dan artikel ini hanya membahas sedikit saja dari dasarnya. Semoga bermanfaat dan kalian semua menikmatinya!





Belajar JavaScript - Best Practices

Belajar JavaScript - Best Practices

Belajar JavaScript - Best Practices

Ngulik Kode - Kita akan membahas beberapa cara koding atau praktik terbaik dalam menulis koding dengan JavaScript. Ini adalah hal-hal dasar yang akan sering kita gunakan dalam pemrograman kita sehari-hari.

Mari kita mulai!


Selalu Definisikan Variabel Menggunakan let atau const

Dengan mendefinisikan variabel menggunakan let atau const kita akan menghindari masalah seperti

  1. Variabel global dan namespaces: Katakanlah aplikasi kalian menggunakan variabel global title. Lalu dibeberapa bagian lain dari kode kalian, ternyata ada juga variabel title lagi tanpa menggunakan let atau const, tapi variabel ini khusus untuk suatu fungsi dan tidak ada hubungannya dengan variabel global title. Maka besar kemungkinan variabel title ini akan berubah nilai globalnglobal variable

  2. Jika kita membuat variabel menggunakan let atau const di dalam sebuah fungsi, maka variabel akan membatasi cakupannya pada blok kode tersebut. Dan global variabelnya tidak akan tergangg

  3. Mengekspos data sensitif:  Katakanlah kalian menyimpan API Key di sebuah global variable (tanpa menggunakan let atau const), lalu API Key ini akan tersimpan di global object (window) dan dapat dengan mudahnya diakses oleh siapapun yang mengunjungi website kalian.

  4. Sekali lagi, jika kita membuat variabel menggunakan let atau const, barulah variabel tersebut akan dibatasi cakupannya pada blok kode tertentu dan tidak akan terekspos ke global object (window)


Buatlah Kondisi Dengan Baik

  1. Jika kalian ingin mengecek variabel untuk value yang salah (undefined, null, string kosong), gunakanlah NOT operator (!) dari pada mengecek setiap value yang salah.

  2. Jika kalian ingin mengecek sebuah key/value ada di dalam objek. Kalian dapat mengeceknya satu persatu apakah key/value tersebut ada menggunakan AND operator (&&).

  3. Kalian juga bisa menggunakan optional chaining untuk mengecek apakah key/value ada dalam suatu objek atau tidak.

Semicolon

Sebelum kita lanjut lebih dalam, ada sebuah pertanyaan untuk kalian. Bisakah kalian tebak apa output dari function di bawah ini?
Jawaban: Outputnya akan menghasilkan undefined. Kenapa? Ini karena automatic semicolon insertion dari JavaScript Engine ketika mem-parsing kode. Ketika kode tidak terformat dengan benar seperti contoh di atas, JavaScript Engine akan menambahkan sebuah semicolon(;) ke akhir return statement (return;) dan berpikir bahwa tidak value yang dikembalikan. Jadi mengembalikan value sebagai undefined.
Automatic Semicolon Insertion (ASI): Pada saat mengurai kode, JavaScript Engine secara otomatis menyisipkan titik koma di akhir setiap token. Ini terkadang dapat menyebabkan perilaku kode yang tidak terduga. Anda dapat membaca lebih lanjut tentang itu di sini

Dan juga direkomendasikan untuk menambahkan semicolon disetiap akhir statement kode untuk menhindari masalah ASI.

Brackets

  1. Jangan memulai curly brackets ({}) di line selanjutnya. Karena ASI, code kalian mungkin akan berperilaku tidak terduga. 

  2. Selalu memulai curly brackets setelah akhir dari statement (di line yang sama)
Kita bisa menghindari masalah ini, dengan code formatter seperti Prettier atau tools formatting lainnya 

Template Literals

Template literal digunakan untuk membuat sebuah value string. Template literals diapit oleh backtick dan nilai/placeholder dinamis lalu diterukan menggunakan simbol dolar ${dynamicValue}.
Dibawah ini adalah contoh kasus penggunaan template literals.
  1. Template literals bisa digunakan untuk membuat konten HTML yang dinamis

  2. Template literals bisa juga digunakan untuk membuat query database

  3. Template literals bisa juga digunakan untuk membuat URL dinamis (satu baris).

  4. Jangan menggunakan template literals untuk membuat URL yang panjang dengan multi-baris. Karena API tidak mendukung multi-baris. Ada banyak solusi yang tersedia untuk mengatasi beberapa parameter dalam satu baris, tetapi kita tidak akan membahas semuanya di sini.
Kita bisa menghindari sebagian besar masalah yang dibahas dalam artikel ini dengan menggunakan linter dan code formatter. Berikut adalah beberapa linter dan code formatter yang populer.
Linters: ESLint, JSLint
Code Formatters: Prettier

Itu saja pembahasan untuk JavaScript Best Practices kali ini, semoga bermanfaat dan kalian semua menikmatinya!