JavaScript - Callback (Part 2)

Agenda

• Review Callback
• Built-in Function
• Format Data Umum
• QnA
• Waktunya Tantangan

Review Callback

• TL;DR Callback adalah fungsi yang dijadikan argumen dalam fungsi lainnya
• Mari kita lihat review kodenya dengan Klik di sini

(Kode ditaruh di stackblitz karena sudah terlalu panjang)

Built in Function

• Selain bisa membuat fungsi yang ada callback sendiri
• Javascript juga sudah menyediakan beberapa fungsi yang menerima callback
• Mari kita coba lihat built in function dalam Array
• forEach()
• map()
• filter()
• reduce()
• (tidak dipelajari) sort()

forEach()

• Dokumentasi bisa dilihat di sini
• forEach akan melakukan perulangan untuk element (data) pada tiap index (urutan)
• Logic untuk perulangannya akan ngapain adalah kebebasan developer (karena penggunaan callback)
• Fungsi ini TIDAK punya kembalian (return) apa-apa, undefined

forEach() (ii)

Mari kita lihat contoh penggunaan forEach()

const arrAngka = [1, 2, 3, 4, 5];
// di sini callback forEach menerima sebuah parameter
// yaitu function callback
// yang menerima minimal 1 parameter, maksimal 3 parameter
// parameter ke-1: nama dari element
// parameter ke-2: indeks / urutan ke berapa (OPTIONAL)
// parameter ke-3: array yang sedang di looping (OPTIONAL, JARANG DIPAKAI)
arrAngka.forEach((aliasUntukElement) => {
  console.log('Hasil kali duanya adalah: ' + aliasUntukElement * 2);
});
// di sini kita mencoba menggunakan parameter ke-1 dan ke-2
arrAngka.forEach((alias, urutanKeBerapa) => {
  console.log('Urutan : ' + urutanKeBerapa + ' Kali 3: ' + alias * 3);
});

map()

• Dokumentasi bisa dilihat di sini
• map akan mengembalikan (return) array baru sejumlah data yang sudah ada, dengan modifikasi array barunya sesuai dengan callback yang diberikan
• JANGAN LUPA untuk memberikan kata kata return di dalam callback fungsi map ini !

map() (ii)

Mari kita lihat contoh penggunaan map()

const arrString = ['ini', 'hanyalah', 'string', 'saja'];
// callback map menerima jumlah parameter yang sama dengan forEach
// minimal 1 parameter, maksimal 3 parameter
// misalnya ingin menambahkan kata 'testing' untuk setiap stringnya
const arrModifikasi = arrString.map((aliasUntukElement) => {
  // JANGAN LUPA untuk menggunakan return
  // yang direturn adalah element yang akan
  // dikembalikan setelah dilakukan modifikasi
  return 'testing ' + aliasUntukElement;
});
// ingat bahwa jumlah kembalian dari map
// akan sama persis dengan array originalnya
// (bila awalnya ada 100, maka akan dibuat 100 juga)
console.log(arrModifikasi);

map() (iii)

Apabila memanfaatkan arrow function dengan baik ...

const arrString = ['ini', 'hanyalah', 'string', 'saja'];

// Mari kita menggunakan arrow function yang "malas"
const arrModifikasi = arrString.map((element) => 'testing ' + element);
console.log(arrModifikasi);

Mantap kan ?

filter()

• Dokumentasi bisa dilihat di sini
• filter akan mengembalikan (return) array baru sejumlah data yang sudah ada, dengan modifikasi array baru sesuai dengan filter kondisi pada callback yang diberikan
• Berbeda dengan map, pada filter, jumlah indeks array baru nya bisa jadi berbeda dengan array originalnya

filter() (ii)

Mari kita lihat contoh penggunaan filter()

const arrInteger = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Filter menerima sebuah callback (function)
// yang punya jumlah parameter sama dengan map (min 1, max 3)
const arrGenap = arrInteger.filter((element) => {
  // return kondisi filternya di sini
  // ingat di sini karena kondisi, truthy / falsy yah !
  let kondisiFilter = element % 2 === 0;
  return kondisiFilter;
});
console.log(arrGenap);
// bila arrow function dimanfaatkan maksimal
const arrGanjil = arrInteger.filter((element) => element % 2 === 1);
console.log(arrGanjil);

reduce()

• Dokumentasi bisa dilihat di sini
• Merupakan built-in function yang cukup sulit dimengerti di awal !
• reduce akan mengambil semua elemen dalam array, kemudian mengurangi satu per satu sehingga menjadi sebuah nilai saja
• Cara mengurangi nilai nya tergantung dari fungsi callback yang diberikan

reduce() (ii)

• Fungsi reduce menerima 2 args:
• fnCallback, yaitu fungsi callbacknya
• nilaiAwal (opsional), yaitu nilai awal yang akan digunakan sebelum di-reduce
• fnCallback menerima 4 (empat) args
• Apa saja tuh?

reduce() (iii)

• total (accumulator), merupakan nilai awal, atau nilai yang dikembalikan pada reducer sebelumnya
• nilaiSekarang, nilai dari element sekarang
• indeksSekarang (opsional), indeks (urutan) dari element sekarang
• siArray (opsional), array dari reducer-nya

Banyak yah ?

reduce() (iv)

Mari kita lihat contoh penggunaan reduce()

const arrAngka = [2, 4, 6, 8, 10];
// parameter pertama, callback
// parameter kedua, nilaiAwal
const nilaiTerreduce = arrAngka.reduce(
  // ini fnCallback-nya
  (nilaiSebelumnya, nilaiSekarang) => {
    // jangan lupa return
    return nilaiSebelumnya + nilaiSekarang;
  },
  // ini nilaiAwalnya
  0
);
console.log(nilaiTerreduce); // 30

Bingung? mari kita lihat cara kerjanya yah !

reduce() (v)

Representasi reduce() per langkah

TL;DR untuk map, filter, dan reduce

Format Data Umum

• Format data yang seringkali dijadikan bahan pertukaran data antar tempat
• Contoh: untuk excel namanya adalah xlsx, untuk word docx
• Beberapa yang umum digunakan:
• XML
• CSV
• (Yang akan dipelajari ini yah) JSON

XML

• Extensible Markup Language
• Format yang mirip dengan HTML
• Tidak memiliki tag yang khusus untuk menentukan data
• Image dengan tipe SVG (Scalable Vector Graphics), sebenarnya adalah XML !
• Jarang digunakan untuk pertukaran data modern, karena banyak overhead-nya

XML (ii)

Contoh data dengan format XML

<?xml version="1.0" encoding="UTF-8"?>
<!-- Ini cara penulisan comment -->
<!-- Tidak ada format umum / standarnya -->
<data-pembuka>
  <data-dalam-pertama>5</data-dalam-pertama>
  <data-dalam-kedua>Ini data kedua</data>
  <bisa-nested-juga>
    <ini-data-dalam-nested>10</ini-data-dalam-nested>
  </bisa-nested-juga>
</data-pembuka>

CSV

• Comma-Separated Value
• Salah satu tipe file yang cukup umum digunakan untuk transfer data / backup data
• Eksport data excel supaya bisa dibaca apps yang dibuat, dengan export to csv, kemudian dibaca
• Cukup ringan, namun CSV pada akhirnya hanyalah berupa string, sehingga butuh kemampuan lebih (string manipulation)

CSV (ii)

Contoh data dengan format CSV

id,nama,alamat
1,Alamanda,Jl. Fakfak No. 1
2,Butiran,Jl. Legian No. 2
3,Chacha,Jl. Taliwang Pedas

JSON

• JavaScript Object Notation
• Cara baca data zaman now
• Cukup ringan, dibaca sebagai plain text, namun penulisan mirip javascript object

JSON (ii)

Contoh data dengan format JSON

[
  { "id": 1, "nama": "Alamanda", "alamat": "Jl. Fakfak No. 1" },
  { "id": 2, "nama": "Butiran", "alamat": "Jl. Legian No. 2" },
  { "id": 3, "nama": "Chacha", "alamat": "Jl. Taliwang Pedas"}
]

Cara Baca Data

• Setelah mengetahui format data umum, sekarang kita akan coba untuk membaca data tersebut
• Untuk bisa membaca data tersebut, kita harus mengetahui dua hal:
• Pada browser, kita bisa menggunakan FileReader()
• Pada NodeJS, kita bisa menggunakan fs
• Fokus kita sekarang adalah pada fs
• Untuk baca dokumentasi fs klik di sini

Cara Baca Data (ii)

• fs merupakan sebuah module bawaan NodeJS
• Untuk membaca file, kita bisa menggunakan:
• readFileSync() untuk membaca secara synchronous
• readFile() untuk membaca secara asynchronous
• Untuk menulis file, kita bisa menggunakan:
• writeFileSync() untuk menulis secara synchronous
• writeFile() untuk menulis secara asynchronous
• Pada pembelajaran ini, fokus kita ke yang asynchronous yah !

Cara Baca Data (iii)

Mari kita melihat contoh kode untuk membaca data JSON

(Kode ditaruh di stackblitz karena sudah terlalu panjang)

Cara Baca Data (iv)

Lalu bagaimana untuk fsWriteFile()?

QnA

Waktunya Tantangan

Referensi

• https://code.tutsplus.com/id/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209
• https://www.niagahoster.co.id/blog/xml/
• https://code.tutsplus.com/id/tutorials/parsing-a-csv-file-with-javascript--cms-25626
• https://google.github.io/styleguide/jsoncstyleguide.xml?showone=Property_Name_Format#Property_Name_Format