30 Hari Belajar JavaScript: Hari Ke -5

5 min readMar 28, 2023

Selamat datang kembali di series 30 hari belajar JavaScript, di hari ke 5 ini kita akan mempelajari beberapa hal menarik berikut 😀.

In Operator pada JavaScript
Ternary Operator pada JavaScript
Nullish Coalescing Operator pada JavaScript
Optional Chaining pada JavaScript
Falsy dan Truthy pada JavaScript

Langsung saja kita oprek satu per satu

In Operator pada JavaScript

In operator merupakan sebuah operator yang digunakan untuk mengecek apakah sebuah object memiliki attribute atau properties dan akan mengembalikannya dalam bentuk nilai boolean (true dan false). Dalam hal ini true merepresentasikan bahwa object memiliki properties dan false merepresentasikan bahwa object tidak memiliki properties 😱.

const student = {
      id: 1,
      username: "Bahrul Rozak",
      address: "Indonesia"
}

const checkStudent = "id" in student;
console.log(checkStudent);

Pada contoh di atas kita memiliki sebuah object bernama student, kemudian kita ingin mengecek apakah object student memiliki properties id? Maka kita membuat sebuah variable check student yang berisi in operator sebagai berikut “id” in student, artinya kita ingin mengecek apakah id ada di dalam student? Jika iya maka dia akan mereturn nilai true 🤗.

Tidak hanya pada object, in operator dapat kita gunakan untuk mengecek apakah sebuah index tersedia pada array atau tidak.

const programmingLanguage = ["Js", "PHP", "Python", "C#"];
const checkProgrammingLanguage = 5 in programmingLanguage;
console.log(checkProgrammingLanguage);

In Operator Array pada JavaScript

Hasilnya false, karena tidak ada index ke 5. Hanya sampai index ke 4 saja.

Ternary Operator pada JavaScript

Ternary operator merupakan bentuk lain dari if statement yang dibuat dengan lebih sederhana. Ternary operator terdiri dari kondisi yang dievaluasi, jika menghasilkan true maka nilai pertama diambil, jika false, maka nilai kedua diambil. Contoh kode if statement

const cuaca = "hujan"
let persiapan

 if (cuaca) {
     persiapan = "Bawa Payung "
 } else {
     persiapan = "Tidak Perlu"
 }

  console.log(persiapan) // Bawa Payung

Menggunakan ternary operator

 const cuaca = "hujan"
 let persiapan = cuaca ? "Bawa Payung" : "Tidak Perlu"
 console.log(persiapan) // Bawa Payung

Nullish Coalescing (??) Operator pada JavaScript

Merupakan sebuah operator logika yang mirip dengan ternary operator, yang membedakan adalah pada kondisi, jika bernilai null atau undefined, baru value default nya yang diambil.

 let parameter;
 let data = parameter ?? "Nilai Default";
 alert(data)

Maka yang akan diambil adalah “Nilai Default” Karena variabel parameter berkondisi undefined, bagaimana jika null? ya Sama aja

  let parameter = null;
  let data = parameter ?? "Nilai Default";
  alert(data); // Nilai Default

Optional Chaining (?) pada JavaScript

Optional chaining operator (?) merupakan operator yang digunakan untuk mengamankan ketika kita ingin mengakses property sebuah object dari data nullish (null, undefined). Jika kita mencoba mengakses property dari sebuah object dari data nullish (null, undefined) tanpa menggunakan optional chaining operator, maka akan terjadi error.

 const student = {
       id: 1,
       username: "Bahrul Rozak",
       address: "Indonesia"
 }

 console.log(student.information.username)

karena kita mencoba mengakses properties yang undefined. Lalu bagaimana solusinya? Tentu saja kita harus melakukan pengecekan terlebih dahulu, apakah properties yang akan kita akses bernilai nullish yaitu null dan undefined?

Check menggunakan if statement

 const student = {
       id: 1,
       username: "Bahrul Rozak",
       address: "Indonesia"
  }

  let say;
  if (student.information !== undefined || student.information !== null) {
      say = student.information;
   }
   alert(say)

Disini kita mencoba mengakses properties information, namun sebelum itu kita pastikan apakah information bukanlah berisi nilai nullish. Ternyata information berisi nilai undefined, karena tidak ada propertiesnya dalam object student.

Check menggunakan optional chaining

const student = {
      id: 1,
      username: "Bahrul Rozak",
      address: "Indonesia"
}

let say;
alert(student?.information);

Sangat simple sekali 😄.

Falsy dan Truthy pada JavaScript

Falsy dan Truthy merupakan fitur unique yang ada pada JavaScript. Jadi di JavaScript, kondisi itu tidak hanya harus berupa nilai boolean, tapi diluar boolean pun bisa, namun kita harus tahu beberapa data falsy, atau dianggap false dan beberapa data truthy atau dianggap true.

Falsy

Merupakan value yang ketika dalam konteks boolean, dia dianggap false

console.log(!!''); //false
console.log(!!0); //false
console.log(!!0n); //false
console.log(!!false); //false
console.log(!!null); //false
console.log(!!undefined); //false
console.log(!!NaN); //false

Truthy

Merupakan value yang ketika dalam konteks boolean, dia dianggap true.

console.log(!!'hello'); //true
console.log(!!1); //true
console.log(!!1n); //true
console.log(!!true); //true
console.log(!!{}); //true
console.log(!![]); //true
console.log(!!Infinity); //true
console.log(!!-Infinity); //true

Selesai sudah materi hari ke 5 dalam series 30 hari belajar JavaScript. Sampai jumpa di materi berikutnya

Note:

Jika module ini bermanfaat, jangan lupa share ke teman-teman yang lain. Thanks Salam Open Source!

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