30 Hari Belajar JavaScript: Hari Ke -3

Source : Dokumentasi Pribadi

Hai hai hai! Selamat datang kembali di series 30 hari belajar JavaScript. Di hari ke 3 ini kita akan mempelajari beberapa hal berikut ini:

1. Template Literal
2. String to Number
3. Tipe Data Array pada JavaScript
4. Tipe Data Object pada JavaScript
5. If Expression

Wah! Sepertinya sangat ber adrenaline. Langsung saja meluncur ke pembahasan 🥶.

Template Literal

Pada beberapa module atau pelajaran sebelumnya, kita sudah mengetahui bahwa tipe data string pada JavaScript dapat dilakukan operasi concatenation atau penggabungan menggunakan operator plus. Akan tetapi cara seperti ini, akan terasa menyulitkan dan memacu adrenaline apabila yang kita lakukan melibatkan banyak sekali variabel 😆.

 let firstName = "John";
 let middleName = "Wick";
 let lastName = "Pulan";
 let fullName = firstName + middleName + lastName;
 document.writeln("Username : " + fullName); // Username : JohnWickPulan

Sungguh sangat beradnaline bukan? untung variabel yang ditambah-tambah cuman 3 yaitu firstName + middleName + lastName, kalau banyak? Auto ketar-ketir 😂.

Sejak hadirnya JavaScript modern, yang dimana ditandai dengan awalnya penjelajahan bangsa eropa #eh 🙄. Maksudnya, untuk membuat string pada JavaScript kita tidak selalu harus menggunakan cara-cara konvensional yaitu dengan kutip satu maupun kutip dua melainkan menggunakan template literal. Untuk membuat template literal pada JavaScript dilakukan dengan menggunakan tanda backtick (``).

  let firstName = `John`;
  let middleName = `Wick`;
  let lastName = `Pulan`;

String template juga bisa dilakukan operasi concatenation dengan menggunakan ${nameVariableNya} dan tentu saja code yang kita buat akan enak dibaca, karena terhindar dari banyaknya penggunaan operator plus.

let firstName = `John`;
let middleName = `Wick`;
let lastName = `Pulan`;
let fullName = `${firstName} ${middleName} ${lastName}`

Mantap! Selanjutnya, untuk mengambil, atau menggunakan string template kita cukup panggil nama variabelnya saja!

 let firstName = `John`;
 let middleName = `Wick`;
 let lastName = `Pulan`;
 let fullName = `${firstName} ${middleName} ${lastName}`
 document.writeln(`Hello Akang ${fullName}`); // Hello Akang John Wick Pulan

Selain itu pada string template, kita juga bisa tambahkan expression.

 let userName = `Bahrul Rozak`;
 let nilaiUjian = 80;
 let hasilUjian = `Name : ${userName} Apakah Lulus Ujian? : ${nilaiUjian > 70}`;
 document.writeln(hasilUjian);
 // Name : Bahrul Rozak Apakah Lulus Ujian? : true

Di string template kita juga bisa membuat multiline string, caranya cukup tambahkan enter saja untuk membuat baris baru.

 let multilineString = `
 Ini namanya Multi line string
 dan kita bisa buat baris baru
 sebanyak-banyaknya
 contohnya ya seperti ini wkwk`;

 document.writeln(multilineString);
// Ini namanya Multi line string dan kita bisa buat baris baru sebanyak-banyaknya contohnya ya seperti ini wkwk

String to Number

Ketika kita membuat aplikasi, kadang input dari pengguna selalu dalam bentuk string. Padahal kita ingin mengelola data input dari pengguna dalam bentuk number. Contoh anggaplah firstValue merupakan input dari pengguna yaitu nilai string.

const firstValue = "10";
const secondValue = 10;
const resultValue = firstValue + secondValue;

document.writeln(`Result is : ${resultValue}`);
// Result is : 10 10

Lantas bagaimana solusinya? Lakukanlah konversi terlebih dahulu dari string ke Number . Caranya input dari user yang berupa string kita ubah dulu ke dalam bentuk number menggunakan function parseInt( ) kemudian baru deh kita lakukan penjumlahan, .

const firstValue = "10";
let conversionNumber = parseInt(firstValue);
const secondValue = 10;
const resultValue = conversionNumber + secondValue

document.writeln(`Result is : ${resultValue}`);
// Result is : 20

Ada beberapa function yang dapat kita gunakan diantaranya sebagai berikut.

parseFloat(string) -> Mengkonversi dari string ke number (bilangan pecahan)

Number(string) -> Mengkonversi dari string ke number (bilangan bulat atau pecahan)

number.toString() -> Mengkonversi dari number ke String

Lalu bagaimana jika input dari pengguna benar-benar adalah string misalkan teks? Fenomena ini disebut sebagai NaN. NaN merupakan sebuah keadaan yang menyebutkan bahwa ini bukanlah number (Not a Number). Contoh

 const inputFirst = "John ";
 const inputSecond = 100;
 const resultInput = inputFirst + inputSecond;
 document.writeln(`Result Input is ${resultInput}`);
 // Result Input is John 100

Nah lho wkwk. Misalkan kita lakukan konversi dari string ke number, apakah bisa?

 const inputFirst = "John ";
 let conversionInputFirst = parseInt(inputFirst)
 const inputSecond = 100;
 const resultInput = conversionInputFirst + inputSecond;
 document.writeln(`Result Input is ${resultInput}`);
 // Result Input is NaN

Hasilnya adalah NaN, tentu karena John itu teks bukan number. Adakah solusinya? Ya tentu saja ada! Yaitu kita cek dan pastikan bahwa input dari pengguna bukanlah merupakan nilai yang menghasilkan NaN. Caranya gunakan function isNan( ).

const inputFirst = "John ";
console.log(isNaN(inputFirst)); // true

Tipe Data Array pada JavaScript

Kita tahu bahwa variabel digunakan untuk menampung nilai, akan tetapi variabel ini hanya bisa menampung satu nilai saja. Lantas bagaimana jika kita ingin menampung lebih banyak nilai? Apakah seperti ini? 🤔

 const userFIrst = "Bahrul";
 const userSecond = "Rozak";
 const userThird = "John";
 const userFourth = "Wick";

 document.writeln(userFIrst, userSecond, userThird, userFourth)
 // Bahrul Rozak John Wick

Tentu saja! Akan tetapi kalau user nya ada banyak gimana 😮. Akan sangat ber adrenaline dan membuat kita ingin berkata “kasar”. Kasar! Maka dari itu gunakanlah Array 😎. Dengan array kita bisa menampung banyak sekali nilai dan untuk membuat Array kita cukup letakkan nilainya dalam tanda kurung siku [ ].

const user = ["Bahrul", "Rozak", "John", "Wick"];
document.writeln(user);

// Bahrul,Rozak,John,Wick

Lebih efisien dan praktis. Kemudian katankalah kita ingin mengambil value dari user yaitu John. Bagaimana caranya? Kita bisa gunakan index. Perlu kita ketahui bahwa array ini menyimpan data dalam urutan yaitu index. Index dari Array ini dimulai dari 0. Jadi cukup panggil indexnya saja 😪.

Source : Dokumentasi Pribadi

John berada pada urutan ke tiga berarti john memiliki index nomor 2. Maka untuk mengambil nilai John yaitu

const user = ["Bahrul", "Rozak", "John", "Wick"];
document.writeln(user[2]);

// John

Jika Anda bingung tentang urutannya. Bisa gunakan console.table( )

const user = ["Bahrul", "Rozak", "John", "Wick"];
console.table(user)

console.table

Pada tipe data Array kita bisa melakukan berbagai operasi diantaranya

array.push(value) Menambah data ke Array

array.length Untuk mendapatkan panjang Array

array[index] Mendapat data di posisi index

array[index] = value Mengubah data di posisi index

delete array[index] Menghapus data di posisi index, namun index tidak bergeser

Perlu diketahui bahwa ketika kita menambahkan value pada Array, maka value baru akan berada di urutan terakhir 😑.

const user = ["Bahrul", "Rozak", "John", "Wick"];
user.push("Mamang", "Budi");
document.writeln(user);
// Bahrul Rozak John Wick Mamang Budi

Array juga tidak tergantung pada jenis tipe data, kita bisa sesuka hati menambahkan beragam banyak tipe data

const profileData = ["Michael", 08123456789];
document.writeln(profileData);
// Michael,8123456789

Tipe Data Object pada JavaScript

Selain Array di JavaScript ada juga tipe data Object. Yang membedakan adalah index pada tipe data object menggunakan string dan index, pada object ini berisi attribute atau properties yang terdiri dari key dan value. Membuat tipe data object kita menggunakan kurung kurawal { }.

  const userProfile = {
        userName: "Bahrul Rozak",
        emailAddress: "bahrulrozak@uhamka.ac.id",
        phoneNumber: 12345678
  }

Untuk mengaksesnya, cukup panggil nama objectnya

 const userProfile = {
       userName: "Bahrul Rozak",
       emailAddress: "bahrulrozak@uhamka.ac.id",
       phoneNumber: 12345678
}

console.table(userProfile);

Tipe Data Object

Lalu jika kita ingin mengambil emailAddress, kita panggil nama propertiesnya.

  console.table(userProfile.emailAddress);

Memanggil berdasarkan properties

Pada object kita pun bisa melakukan operasi layaknya array, misalkan menambah data ke dalam object yang masih kosong. Akan tetapi jangan lupa karena object berdasarkan attribute atau properties untuk men setting key dan valuenya juga.

const daftarHidangan = {}
daftarHidangan["minuman"] = "Es Buah"
daftarHidangan["makanan"] = "Nasi Uduk"

console.table(daftarHidangan);

Operasi Pada Object

If Expression

Hidup adalah pilihan, begitulah kata-kata yang terucap dari berbagai motivator dunia. Di pemrograman pun sama, ada saatnya kita lakukan sesuatu jika kondisi tersebut terpenuhi dan jika tidak maka jangan dilakukan. Dalam kasus ini kita bisa gunakan kata kunci if. Block pada if akan berjalan ketika kondisi terpenuhi.

const nilaiUjian = 80;

if (nilaiUjian > 75) {
    document.writeln("Anda lulus Ujian")
}

// Anda lulus Ujian

Akan tetapi karena hidup adalah pilihan, jika ada kondisi lain, jalankan kondisi lain tersebut menggunakan kata kunci else if.

const cuaca = "hujan";

if (!cuaca) {
   document.writeln("Tidak membawa payung")
} else if (cuaca) {
    document.writeln("Bawa Payung")
}
// Bawa Payung

Jika tidak ada kondisi lain yang terpenuhi ya tentu saja pasrah, pasrah artinya mengerahkan segala kemampuan sampai titik batas, jadi definisi pasrah bukan berleha-leha 😎. Dalam pemrograman kita bisa gunakan kata kunci else.

 const hasil = 70;
       if (hasil > 80) {
          document.writeln("A");
        } else if (hasil > 70) {
          document.writeln("B");
        } else {
          document.writeln("Coba lagi")
        }

// Coba lagi

Akhirnya module 30 hari belajar JavaScript untuk hari ketiga sudah selesai kita pelajari. Sampai jumpa di module selanjutnya. Terima kasih!

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 bahrulrozak1453@protonmail.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