JavaScript - Fungsi (Part 2)

Agenda

Review Fungsi
Built in Function
Scope & Closures
QnA
Tantangan

Review Fungsi

Mari kita ingat ingat kembali lagi mengenai penulisan fungsi di dalam javascript

Review Fungsi (ii)

// Misalnya ini adalah fungsi untuk pembagian
// Deklarasi fungsi umum
function fungsiPembagian(param1, param2) {
  return param1 / param2;
}

// Deklarasi fungsi dengan ekspresi
const fungsiPembagianExpr = function (param1, param2) {
  return param1 / param2;
}

// Deklarasi fungsi dengan arrow
const fungsiPembagianArrow = (param1, param2) => param1 / param2;

Built in Function

JS ternyata menyediakan BANYAK fungsi bawaan untuk tipe data tertentu
Contoh fungsi bawaan

isNaN() => Untuk mengecek apakah NaN (not a number) atau bukan
parseInt() => Untuk mengkonversi string menjadi number
parseFloat() => Untuk mengkonversi string menjadi angka desimal

Built in Function (ii)

Ada juga fungsi yang tergantung tipe datanya
Number

toFixed()
toString()

String

split()
slice()
substring()
toLowerCase()
toUpperCase()

Built in Function (iii)

Array

push()
join()
reverse()
sort()

Built in Function (iv)

Math

floor()
ceil()
random()

Date

parse()
now()
toString()
toDateString()

Waduh, banyak !

Bahkan sebenarnya fungsi bawaannya JAUH lebih banyak dari ini

Built in Function - Universal

Mari kita lihat contoh kodenya

// NaN adalah sebuah nilai yang menunjukkan bukan angka
const sebuahAngka = NaN;
const sebuahStringBulat = '250';
const sebuahStringDesimal = '100.215';

if (isNaN(sebuahAngka)) console.log('ini bukan angka !');

console.log(sebuahStringBulat); // '250'
console.log(parseInt(sebuahStringBulat)); // 250

console.log(sebuahStringDesimal); // '100.215'
console.log(parseInt(sebuahStringDesimal)); // 100
console.log(parseFloat(sebuahStringDesimal)); // 100.215

Built in Function - Number

Mari kita lihat contoh kodenya

const sebuahAngka = 100.25123;

console.log(sebuahAngka); // 100.25123
console.log(sebuahAngka.toFixed(2)); // '100.25'
console.log(sebuahAngka.toString()); // '100.25123'

Built in Function - Array

Mari kita lihat contoh kodenya

let sebuahArray = ['ini', 'adalah', 'sebuah', 'array'];

// ['ini', 'adalah', 'sebuah', 'array', 'baru']
// langsung modifikasi variabel
// apabila di console log, isinya adalah panjang array baru (5)
sebuahArray.push('baru');

// 'ini-adalah-sebuah-array-baru'
console.log(sebuahArray.join('-'));

// ['baru', 'array', 'sebuah', 'adalah', 'ini]
console.log(sebuahArray.reverse());

Built in Function - Array (ii)

let sebuahArray = ['ini', 'adalah', 'sebuah', 'array'];

// [ 'adalah', 'array', 'baru', 'ini', 'sebuah' ]
console.log(sebuahArray.sort());

// kombinasi
let arrayBaru = sebuahArray
  .sort() // ['adalah', 'array', 'baru', 'ini', 'sebuah']
  .reverse() // ['sebuah', 'ini', 'baru', 'array', 'adalah']
  .join('-') // 'sebuah-ini-baru-array-adalah'
  .toUpperCase(); // 'SEBUAH-INI-BARU-ARRAY-ADALAH'

console.log(arrayBaru); // 'SEBUAH-INI-BARU-ARRAY-ADALAH'

Built in Function - Math

Merupakan Object bawaan javascript
Mempermudah untuk perhitungan matematika

Built in Function - Math (ii)

Mari kita lihat contoh kodenya

const sebuahAngkaDesimal = 12.54;

// pembulatan
console.log(Math.floor(sebuahAngkaDesimal)); // ke bawah, 12
console.log(Math.ceil(sebuahAngkaDesimal)); // ke atas, 13

// Angka acak, rentang dari 0 s.d. 1 (ada angka di belakang koma)
// selalu berbeda tiap dijalankan
const randomNumber = Math.random(); // 0.9353807146167443
console.log(randomNumber);

const angkaAcakRiil = Math.ceil(randomNumber * 6);
console.log(angkaAcakRiil); // angka acak dari 1 s.d. 6

Built in Function - Date

Merupakan Object bawaan Javascript
Object yang memiliki banyak fungsi untuk menunjang Date (tanggal hari bulan tahun jam menit detik)
Merupakan sesuatu yang cukup sulit bagi developer pada umumnya

Built in Function - Date (ii)

Mari kita lihat contoh kodenya

// Object Date yyyy-mm-ddTHH:MM:SS.miliZ
const tanggalSekarang = new Date();
console.log(tanggalSekarang);

// angka milliseconds sejak 1 Januari 1970 00:00:00 UTC
// disebut juga sebagai milliseconds sejak waktu Epoch 
// (Epoch Time)
const tanggalSekarangNow = Date.now();
console.log(tanggalSekarangNow);

Built in Function - Date (iii)

// Akan mengembalikan selisih (dalam milliseconds)
// dari epoch time sampai dengan date yang di-parse
const waktuAwal = Date.parse('01 Jan 1970 00:00:00 UTC');
console.log(waktuAwal); // 0

const waktuAsal = Date.parse('01 Jan 2022 00:00:00 UTC');
// 52 tahun (1970 - 2022), ada 13 tahun kabisat, jadi milidetik
console.log(waktuAsal); // 1640995200000

// Cetak waktu dalam string, dengan zona waktu
console.log(new Date(waktuAsal).toString());
// Cetak waktu dalam string, tanpa zona waktu dan jam
console.log(new Date(waktuAsal).toDateString());

Scope & Closures

Dua hal yang saling berhubungan namun tak sama
Terlihat simpel namun cukup advanced
Scope = batasan akses variabel
Closure = fungsi di dalam sebuah fungsi, yang bisa akses variabel di luar scopenya dari dalam scopenya
Warning: scopeception

Scope

Ada 2 istilah

Global Scope = variabel ditaruh di global, bisa diakses dari mana saja
Local Scope = variabel ditaruh di local, hanya bisa diakses dalam suatu block lokal itu saja

Scope (ii)

Mari kita lihat contoh kode berikut

// ini adalah global variable
const global = "Ini adalah variabel global";

// ini adalah sebuah function
const sebuahFn = () => {
  // ini adalah local variable
  const local = "ini adalah variabel lokal";
  // karena global, bisa diakses dari local
  console.log(global);
  // karena local, bisa diakses dari local itu sendiri
  console.log(local);
}

console.log(local); // error, local undefined

Closures

Ilmu fundamental dalam javascript
Namun untuk mengerti butuh pendalaman lebih
Sedikit bocoran Bahan yang sering ditanyakan saat interview yang berhubungan dengan javascript
TL;DR Nested Function yang bisa mengakses variabel di luar scopenya

Closures (ii)

Mari kita lihat contoh kode

const globalVariable = 'global';

// Outer Function / Higher Order Function
function fungsiLuar() {
  const localVariable = 'local';
  // Closures
  function fungsiDalam() {
    return [globalVariable, localVariable];
  }
  return fungsiDalam;
}

const fnDenganClosures = fungsiLuar();
console.log(fnDenganClosures());

Closures (iii)

Mari lihat contoh kode lainnya

function nambahinAngka() {
  let counter = 0;
  return ++counter;
}
function nambahinAngka2() {
  let counter = 0;
  return function penambah() {
    return ++counter;
  };
}
const inkremenAngka = nambahinAngka2();
for (let i = 0; i < 5; i++) console.log(nambahinAngka());
for (let j = 0; j < 10; j++) console.log(inkremenAngka());

Loh kok bisa begitu?

Fungsi adalah "kasta atas" di dalam javascript:

Bisa dianggap sebagai suatu nilai
Bisa mem-passing args dan dianggap sebagai args
Mengembalikan fungsi dari fungsi lainnya

Akan dipelajari lebih lanjut pada pertemuan berikutnya

QnA

Waktunya Tantangan

Klik di sini

Referensi

https://hepunx.rl.ac.uk/~adye/jsspec11/builtin.htm
https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript
https://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm
https://medium.com/@rivayudha/closures-apaan-tuh-alasan-kamu-benci-javascript-8484a3437a40