Cara menggunakan LITERAL dalam JavaScript

Question

JavaScript adalah bahasa pemrograman yang sedang tren dalam beberapa tahun terakhir. Berbagai teknologi muncul dengan menggunakan bahasa pemrograman JavaScript, mulai dari Website, Mobile, Desktop, IOT

Table of Contents Show

Cara mengakses objek literal
Ubah nilainya
Cara memanggil fungsi
Fungsi Kosong
Fungsi Pengembalian
Fungsi dengan parameter
Parameter dengan nilai default
Panggilan Balik

Salah satu yang menarik perhatian adalah di sisi Website, dimana muncul teknologi baru menggunakan bahasa pemrograman JavaScript. Pada sisi Frontend muncul Framework JavaScript seperti ReactJs, VueJs, dan Angular. Di sisi Backend, muncul teknologi NodeJs dan Framework-nya yaitu ExpressJs

Teknologi website sekarang ini hampir semuanya menggunakan bahasa pemrograman JavaScript, wah

Pada artikel ini, kami hanya fokus membahas beberapa konsep JavaScript modern (ES6). Artikel ini akan dilanjutkan dan diperbaiki sesuai dengan perkembangan JavaScript

Artikel ini dapat dibaca dengan versi yang lebih baik di halaman gihub. Konsep Penting dalam JavaScript Modern (ES6) untuk Diketahui

Terakhir, singkatnya semakin baik kita memahami JavaScript (Native/Pure/Vanilla) maka semakin baik kita memahami JavaScript Framework

JavaScript adalah bahasa pemrograman berbasis objek sederhana. Objek adalah grup tidak terurut yang menghubungkan beberapa properti dan properti memiliki nama/kunci dan nilai (key-value pair).

Objek dalam JavaScript, seperti banyak bahasa pemrograman lainnya, dapat dibandingkan dengan objek dalam kehidupan nyata

Untuk membuat objek literal, Anda dapat menulis kurung kurawal dan kemudian menulis nama properti yang harus memiliki kunci dan nilai.

let obj = {
  key: "value",
};

Nilai dalam objek literal selain string juga dapat dimasukkan dengan memasukkan array nilai atau bahkan nilai objek literal lainnya

Kita bisa mencoba dengan kode berikut

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

_

Cara mengakses objek literal

Gunakan titik-titik sesuai tempat node data berada, perhatikan contoh sesuai objek di atas

console.log(asrulObj.alamat.kota);
// hasil: Jakarta Selatan

console.log(asrulObj.favorit[2].makanan[1]);
// hasil: yosinoya

Ubah nilainya

Hampir sama dengan cara akses, namun gunakan tanda sama dengan untuk memberi nilai baru, perhatikan contoh sesuai objek di atas

console.log(asrulObj.alamat.provinsi);
// hasil: Sumatera Utara

asrulObj.alamat.provinsi = "DKI Jakarta";
console.log(asrulObj.alamat.provinsi);
// hasil: DKI Jakarta

Untuk informasi lebih lanjut tentang literal objek, baca referensinya di sini

Fungsi

Fungsi adalah blok kode yang diatur sedemikian rupa untuk melakukan suatu tindakan. Blok kode ini dibuat agar dapat digunakan kembali. Cara atau bentuk penulisan fungsi adalah sebagai berikut

function nama_function(parameter1, parameter2, ...) {
  [Isi dari function berupa tindakan]
  return [kembalian];
}

_

Cara memanggil fungsi

Untuk menjalankan suatu fungsi perlu dipanggil, caranya adalah dengan menulis nama fungsi diikuti tanda kurung buka dan tutup atau disebut invoke

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

4

function hi() {
  console.log("Hai, asrul dev!");
}

hi(); // panggil fuction hi
// hasil: Hai, asrul dev!

_

Fungsi Kosong

Fungsi void adalah fungsi yang tidak mengembalikan atau tidak memberikan kembalian kepada pemanggil

function hai() {
  console.log("halo!");
}

tampilkan();

Fungsi Pengembalian

function munculkanAngkaDua() {
  return 2;
}

let tampung = munculkanAngkaDua();
console.log(tampung);
// hasil: 2

_

Fungsi dengan parameter

function kalikanDua(angka) {
  return angka * 2;
}

let tampung = kalikanDua(5);
console.log(tampung);
// hasil: 10

_

Parameter dengan nilai default

function tampilkanAngka(angka = 1) {
  return angka;
}

console.log(tampilkanAngka(5));
// hasil: 5

console.log(tampilkanAngka());
// hasil: 1

Anda juga bisa mengakomodir fungsi tersebut sebagai variabel dengan bentuk fungsi yang disebut Anonymous Function

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

_0

Panggilan Balik

Fungsi yang diteruskan sebagai parameter disebut callback. Perhatikan kode berikut

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

_1

Terlihat jelas bahwa fungsi proses Greeting() mengirimkan fungsi callback() sebagai parameter, dan inilah yang disebut callback. Callback sering digunakan untuk data asinkron sehingga data dapat menunggu penyelesaian sebelum melanjutkan program

Modul

Modul adalah cara untuk membagi kode menjadi beberapa file sehingga dapat digunakan kembali. Jika kita bandingkan dengan seorang penulis, penulis yang baik adalah penulis yang membagi bukunya menjadi beberapa bab. Hal yang sama berlaku untuk programmer yang membagi kodenya menjadi beberapa modul

Perhatikan penggunaan modul berikut dalam file

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

5 dan file

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

6

Berkas

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

_6

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

_2

Berkas

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

_5

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};

_3

Lihatlah gambar berikut

Kita telah mempelajari dasar-dasar javascript, sekarang saatnya menggunakan pelajaran dasar tersebut untuk mengembangkan aplikasi. Saat ini kita akan mempelajari backend yaitu menggunakan

let asrulObj = {
  id: "1221092408940001",
  nama: "Asrul Harahap",
  lahir: {
    tempat: "Medan",
    tgl: "1994-08-24",
  },
  favorit: [
    "coding",
    "membaca",
    {
      olahraga: ["renang", "mendaki"],
      makanan: ["bakmi gm", "yosinoya"],
    },
  ],
  alamat: {
    jalan: "Jl. Tanah Kusir II",
    kelurahan: "Kebayoran Lama Selatan",
    kecamatan: "Kebayoran Lama",
    kota: "Jakarta Selatan",
    provinsi: "Sumatera Utara",
    kodePos: 12240,
  },
};