30 Hari Belajar JavaScript : Hari ke — 7

Source : Dokumentasi Pribadi

Halo semuanya! Selamat datang kembali di series 30 hari belajar JavaScript. Pada hari ke -7 ini kita akan mempelajari beberapa konsep keren dan menarik pada JavaScript, hmm apa sajakah itu? 🤔

1. Label pada JavaScript
2. For In pada JavaScript
3. For Of pada JavaScript
4. With Statement pada JavaScript
5. Function pada JavaScript

Langsung saja kita bahas!

Label pada JavaScript

Terkadang ketika membuat sebuah program kita ingin menambahkan sebuah identifier (pengenal) agar program yang dibuat hanya menjalankan atau mengekseksusi code berdasarkan identifier saja. Pada JavaScript telah disedikan fitur bernama label. Label merupakan keyword untuk membuat identifier suatu blok pada JavaScript. Membuat label, kita bisa gunakan nama label dan diikuti dengan tanda titik dua :

namalabel:

let i = 0;
let j = 0;

labelWhile:
while (i < 5) {
   i++;
   j += i;
}
document.writeln(j) 

Membuat Label

Script di atas digunakan untuk menunjukkan bahwa kita dapat memberikan suatu label pada suatu blok perintah dalam JavaScript. Pada saat kita jalankan dengan menggunakan browser, label tidak akan mempengaruhi jalannya program (error), sampai dengan adanya perintah break atau continue yang mengacu kepada label tersebut.

Menggunakan break pada label

Seperti yang telah kita pelajari pada module hari ke — 6. Kita telah mengetahui bahwa break digunakan untuk menghentikan case dari suatu block pengulangan. Akan tetapi jika diikuti dengan label, maka program akan berhenti pada label tersebut.

 let i = 0
 let j = 0

 labelWhile:
 while (i < 5) {
       i++;
       if (i == 3) {
           break
        }
        j += i
 }
 document.writeln(j)

Break pada Label

Script di atas merupakan script yang digunakan untuk menghitung bilangan dari 1 sampai dengan 5, tetapi pada saat variabel i memiliki nilai 3, maka program akan berhenti, keluar dari blok perulangan. Dengan adanya perintah break pada saat variabel i sama dengan 3, maka yang dijumlahkan hanya 1 dan 2. Label yang dituju harus berada setelah break. Jika label yang dinyatakan setelah break, maka nama label tersebut tidak berpengaruh dan dianggap bahwa pada perintah break tersebut tidak diikuti dengan nama label.

Menggunakan continue pada label

Seperti yang telah kita pelajari pada module hari ke-6. Continue digunakan untuk menghentikan perulangan, lalu melanjutkan kembali. Perintah continue pada label dapat digunakan untuk memaksa program untuk mengeksekusi perintah setelah suatu label yang berada di atasnya.

let itemsPassed = 0;
let i, j;

top: 
for (i = 0; i < items.length; i++) {
  for (j = 0; j < tests.length; j++) {
    if (!tests[j].pass(items[i])) {
      continue top;
    }
  }

  itemsPassed++;
}

For In Pada JavaScript

For In merupakan perulangan for yang digunakan untuk mengiterasi seluruh data pada property di object atau index di array. Walaupun for in bisa digunakan untuk Array, namun tidak direkomendasikan untuk Array, karena biasanya kita jarang sekali butuh data index untuk Array, kita bisa menggunakan For Of 🤫.

 const user = {
       id: 1,
       username: "John",
       email: "john@gmail.com"
 }

 for (const userDetail in user) {
      document.writeln(`<p> ${userDetail}</p>`)
  }

Dalam hal ini variabel userDetail akan melakukan iterasi properties dari sebuah object user, sehingga di dapatkan hasil seperti berikut 😲.

for in

Kemudian jika kita ingin mengambil sekaligus dengan valuenya, maka dapat kita gunakan seperti berikut ini.

 const user = {
       id: 1,
       username: "John",
       email: "john@gmail.com"
 }

 for (const userDetail in user) {
      document.writeln(`<p> ${userDetail} : ${user[userDetail]}</p>`)
 }

Iterasi sekaligus dengan valuenya

For Of Pada JavaScript

Jika For In digunakan untuk melakukan iterasi property pada object, maka pada Array kita bisa menggunakan for of, ini digunakan untuk melakukan iterasi terhadap isi value dari iterable object, seperti Array, String dan lain-lain. For of tidak bisa digunakan untuk melakukan iterasi data di object, karena object bukanlah iterable 😏.

 const user = [1, "john", "john@gmail.com"]
 for (const userDetail of user) {
      document.writeln(`<p>${userDetail}</p>`)
 }

Dalam hal ini variabel userDetail akan melakukan iterasi isi value dari sebuah Array user, sehingga di dapatkan hasil seperti berikut 😁.

for of

With Statement pada JavaScript

Pada JavaScript ada sebuah fitur unique bernama with statement. Dengan with statement kita bisa mengakses properties dalam sebuah data object tanpa menyebutkan nama objectnya. Tapi sebelum itu mari kita lihat perbedaan antara menggunakan with statement dan tanpa menggunakan with statement 🤨👍.

 const user = {
       id: 2,
       username: "John Wick"
 }

 document.writeln(`<p>${user.id}</p>`)
 document.writeln(`<p>${user.username}</p>`)

Tanpa with statement

Tanpa menggunakan with statement, untuk mendaptkan atau mengakses properties, kita harus melakukannya satu per satu dan ini akan sangat membuat kita ketar-ketir 🤣. Berbeda jika kita menggunakan with statement maka akan seperti ini 😎

const user = {
      id: 2,
      username: "John Wick"
}

with (user) {
     document.writeln(`<p>${id}</p>`)
     document.writeln(`<p>${username}</p>`)
 }

Menggunakan with statement

Dengan menggunakan with statement kita bisa melakukan groupping atau pengelompokkan kepada sebuah object yang masih sama, dan kita tidak perlu bersusah-susah untuk mengakses propertiesnya, cukup sebutkan propertiesnya saja 😆👍.

Akan tetapi menggunakan with statement saat ini, tidak direkomendasikan kembali, karena code yang kita buat akan menimbulkan ambiguisitas. Contohnya seperti berikut ini 😲👍.

const user = {
      id: 2,
      username: "John Wick"
}

const username = "Ethan Lawdonsky"

with (user) {
      document.writeln(`<p>${id}</p>`)
      document.writeln(`<p>${username}</p>`)
}

Misalkan kita ingin membuat sebuah variabel const username dengan value Ethan lawdonsky, akan tetapi ketika kita lihat kembali dalam keseluruhan code username ini ada 2 akibatnya kita menjadi bingung, hmm sebenarnya username punya siapa? 🤪.

Function Pada JavaScript

Function secara etimologi adalah sebuah program kecil yang dapat kita gunakan secara berulang-ulang. Dengan function code yang kita buat akan menjadi lebih bersih dan tentu saja akan meningkatkan produktivas pengembang. Berikut ini merupakan struktur untuk membuat function pada JavaScript.

function

untuk membuat function, kita menggunakan keyword function kemudian diikuti dengan namaFunctionya setelah itu kita berikan parameter, namun disini kita tidak akan membahas parameter dahulu. Kita akan bahas konsep dasar dari function mulai dari membuat dan memanggil saja.

function saySalam() {
         document.writeln("Assalamulaikum");
}

Di sini kita membuat sebuah function bernama saySalam yang berisi perintah untuk menampilkan “Assalamualaikum” pada browser. Langkah selanjutnya untuk menggunakan function, kita cukup panggil namaFunctionnya saja 🤠.

 function saySalam() {
          document.writeln("Assalamulaikum");
 }

  saySalam()

Memanggil function

Karena function bisa di re-use alias digunakan berulang-ulang, maka kita bisa panggil sebanyak yang kita mau 😬.

 function saySalam() {
          document.writeln("Assalamulaikum")
 }

 saySalam()
 saySalam()
 saySalam()
 saySalam()

re-use function

Halo! perkenalkan nama saya Bahrul Rozak, saya adalah seorang mahasiswa dari Universitas Muhammadiyah Prof. DR. HAMKA. Selain sebagai mahasiswa saya juga memiliki pengalaman dalam bidang web developer disebuah institusi dan di berikan amanat untuk membuat sebuah aplikasi internal menggunakan bahasa pemrograman JavasScript, PHP dan menggunakan framework PHP seperti Laravel, codeigniter dan Juga Vue Js, tidak hanya membuat aplikasi saya juga diberikan amanat untuk mengembangkan aplikasi yang sudah ada dan selain itu saya jugamemiliki sedikit pengalaman dalam memimpin sebuah team project yang terdiri dari divisi Front End dan Back End sewaktu saya di institusi tersebut. Di sana saya banyak mendapatkan pelajaran yang berharga terutama tentang kolaborasi antar anggota team. Saya memiliki hobi terkait web design dan juga cyber security. Jika ingin mengetahui informasi saya lebih lanjut. Silahkan hubungi saya di alamat email bahrulrozak02@gmail.com atau follow social media saya di

Instagram : https://instagram.com/rozak.dexamethasone

Linkedin : https://linkedin.com/in/bahrul-rozak

Stackoverflow : https://stackoverflow.com/users/20835639/bahrul-rozak

Github : https://github.com/Bahrul-Rozak