JavaScript Standard

Library
Eko Kurniawan
Khannedy
Eko Kurniawan
Khannedy
- Technical architect at one of the
biggest ecommerce company in
Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/
ProgrammerZamanNow
Eko Kurniawan
Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram :
instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : [email protected]
Sebelum
Belajar
● HTML
● CSS
● JavaScript Dasar
● JavaScript Object Oriented
Programming
Agenda
● Number
● String
● Array
● Object
● JSON
● Dan lain-
lain
Number
Number

● Number merupakan function yang digunakan untuk melakukan konversi ke tipe data
number
● Jika data tidak bisa dikonversi ke number, secara otomatis hasilnya adalah NaN
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
Kode :
Number
Number Static
Properties
● Number memiliki banyak static properties, seperti :
● Number.MIN_VALUE untuk mendapat number minimal
● Number.MAX_VALUE untuk mendapat number maksimal
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#s

tatic_properties
Kode : Number Static
Properties
Number Static
M ethod
● Number memiliki banyak static method, seperti :
● Number.isNaN(value) untuk mengecek apakah value NaN atau bukan
● Number.isInteger(value) untuk mengecek apakah value berupa integer atau bukan
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#s

tatic_methods
Kode : Number Static
M ethod
Number Instance
M ethod
● Number memiliki banyak instance method, seperti :
● Number.toLocalString(locale) untuk mengubah number menjadi string sesuai
locale :
https://www.lansweeper.com/knowledgebase/list-of-currency-culture-codes/
● Number.toString(radix) untuk mengubah number menjadi string sesuai radix
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#i
nstance_methods
Kode : Number Instance
M ethod
String
String

● Tipe data String sudah kita bahas pada materi JavaScript Dasar
● Namun kita belum membahas instance method atau juga instance properties yang
terdapat di String
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
String Instance Method dan
Properties
● String sendiri memiliki banyak sekali instance method dan properties
● Hal ini menjadikan untuk memanipulasi data String sangat mudah di JavaScript, seperti
mengubah menjadi lowercase, UPPERCASE, memotong string menjadi array dan lain-lain
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#inst

ance_methods
Kode : String Instance M ethod dan
Properties
Array
Array

● Tipe data Array sudah kita bahas di materi JavaScript Dasar

● Namun kita hanya membahas beberapa instance method yang ada di Array
● Sebenarnya, terdapat banyak sekali Instance Method yang ada di Array, dan kita akan coba
bahas beberapa di sini
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Array
Loop
● Sebelumnya kita biasa menggunakan for in dan for of untuk melakukan iterasi Array, namun
Array juga memiliki method yang bernama forEach()
● Method forEach bisa digunakan juga untuk melakukan iterasi data array
Kode : Array
Loop
Array
Queue
● Dalam struktur data, terdapat tipe struktur data bernama Queue (Antrian)
● Dimana data masuk akan diposisikan di urutan paling belakang
● Sedangkan data keluar akan diposisikan dari urutan paling depan
● Mirip sekali dengan antrian, atau istilahnya FIFO (first in first out)
● Kita bisa menggunakan Array dengan bantuan function push() untuk menambah data di
belakang, dan shift() untuk mengambil dan menghapus data paling depan
Kode : Array
Queue
Array
Stack
● Struktur data Stack (Tumpukan) kebalikan dari Queue, dimana aturannya mirip dengan
tumpukan kartu
● Saat kita memasukkan data, kita akan memasukkan di urutan paling belakang (atau atas)
● Sedangkan saat kita mengambil data, kita akan mengambil data dari paling belakang (atau
atas) terlebih dahulu
● Stack ini sifatnya LIFO (last in first out)
● Untuk menambah diurutan belakang, kita bisa menggunakan function push()
● Dan untuk mengambil dan menghapus paling belakang, kita bisa menggunakan function
pop()
Kode : Array
Stack
Array
Search
Array memiliki banyak function untuk melakukan
pencarian :
Function Keterangan

find(value => boolean) : value Mencari data sesuai dengan kondisi

findIndex(value => boolean) : number Mencari data index sesuai dengan kondisi

includes(value) : boolean Mengecek apakah terdapat data

indexOf(value) : number Mengecek posisi index data

lastIndexOf(value) : number Mengecek posisi index data terakhir

Kode : Array
Search
Array
Filter
Array memiliki function untuk melakukan filter
data
Function Keterangan

filter(value => boolean) : Array Melakukan filter data yang kondisinya

bernilai true
Kode : Array
Filter
Array
Transform
Array juga memiliki function yang digunakan untuk melakukan
transformasi
Function Keterangan

map(value => result) : Array<result> Melakukan transform tiap value dan

menghasilkan array result

reduce(resultBefore, value => result) : Melakukan transform dengan

result menggunakan value array dan value
selanjutnya, lalu hasilnya dilanjutkan ke
iterasi selanjutnya

reduceRight(resultBefore, value => result) Sama seperti reduce(), namun dilakukan

dari belakang
Kode : Array
Transform
Dan Function lain-
lain
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#inst

ance_methods
Object
Object

● Tipe data object sudah sering sekali kita bahas di JavaScript Dasar dan JavaScript OOP
● Pada materi ini, kita akan bahas banyak static method yang terdapat pada Object
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
Object Freeze &
Seal
● Secara default, object bisa diubah atau dihapus properties nya
● Jika kita ingin mengubah sebuah object menjadi object yang tidak bisa diubah atau dihapus,
kita bisa menggunakan beberapa static method
● Object.freeze() digunakan untuk mengubah object menjadi object yang tidak bisa diubah
atau dihapus attribute nya
● Object.seal() digunakan untuk mengubah object menjadi object yang tidak bisa dihapus
attribute nya
Kode : Object
Freeze
Object Assign

● Kadang kita ada kasus menggabungkan semua attribute dari sebuah object ke object
lain
● Hal ini bisa kita lakukan dengan menggunakan Object.assign(target, source)
Kode : Object
Assign
Object Property N ame &
Value
● Object juga memiliki static method untuk digunakan mengambil semua properties names
dan values
● Object.values() digunakan untuk mengambil semua property value
● Object.getPropertyNames() digunakan untuk mengambil semua properti name
Kode : Object Property N ame &
Value
Dan Function Lain-
Lain
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
JSON
Pengenalan JSON

● JSON singkatan dari JavaScript Object Notation

● JSON merupakan data String yang bentuknya mirip dengan JavaScript Object
● Saat ini JSON banyak sekali digunakan untuk komunikasi antara Server dan
Client
● https://www.json.org/json-en.html
JSON

● JavaScript mendukung konversi data dari String json ke Object ataupun sebaliknya
● JSON.stringify() digunakan untuk melakukan konversi dari Object ke String
● JSON.parse() digunakan untuk melakukan konversi dari String ke Object
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON
Kode :
JSON
BigInt
BigInt

● BigInt merupakan tipe data Number yang bisa mencakup data angka lebih
dari Number.MAX_SAFE_INTEGER
● Untuk kasus number yang lebih dari itu, sangat disarankan menggunakan
tipe data BigInt
● Cara penggunaan BigInt sama saja dengan penggunaan Number dan juga
operator nya
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_
Objects/BigInt
Kode :
BigInt
Date
Date

● JavaScript memiliki tipe data untuk representasi waktu dan tanggal, yaitu Date
● Date merupakan representasi milisecond sejak tanggal 1 Januari 1970, atau dikenal dengan
Epoch & Unix Timestamp
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Membuat Object
Date
Untuk membuat object Date, kita bisa menggunakan new Date(), dimana terdapat constructor
parameter
new Date() Membuat date saat ini

new Date(year, month, date) Membuat date dengan tanggal

new Date(year, month, date?, hour?, Membuat date dengan parameter sampai
minute?, second?, milis?) milis

new Date(timestamp) Membuat date dari epoch atau unix

timestamp
Kode : M embuat Object
Date
Epoch & Unix
Timestamp
● Dalam menggunakan tipe data waktu, biasanya disemua bahasa pemrograman akan
mendukung yang namanya epoch & unix timestamp
● Epoch & Unix timestamp merupakan hitungan miliseconds setelah tanggal 1 Januari 1970
● JavaScript pun mendukung pembuatan waktu dalam bentuk epoch dan unix timestamp
● Untuk mendapatkan waktu saat ini dalam epoch & unix timestamp, kita bisa
menggunakan Date.now()
● Untuk mengubah dari object date ke epoch & unix timestamp, kita bisa menggunakan
function getTime()
Kode : Unix
Timestamp
Parsing Date

● Kita juga bisa melakukan parsing membuat date dari string menggunakan
method Date.parse(value)
● Format string harus YYYY-MM-DDTHH:mm:ss.sssZ
● Dimana jika kita hanya membuat date berisi tanggal saya, kita cukup gunakan
YYYY-MM-DD
● Jika date dengan tanggal dan waktu, gunakan YYYY-MM-DDTHH:mm:ss.sss
● Jika date dengan tanggal, waktu dan timezone, gunakan YYYY-MM-
DDTHH:mm:ss.sssZ
● Hasil parsing adalah unix timestamp, bukan object date
Format
Date
YYYY Tahun

MM Bulan

DD Tanggal

T Pemisah tanggal dan waktu

HH Jam

mm Menit

ss Detik

sss Milidetik

Z Timezone
Kode : Parsing
Date
Date Getter dan
Setter
● Date juga memiliki banyak sekali method untuk mendapatkan informasi date dan juga
mengubah informasi date, atau istilahnya adalah getter dan setter
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#insta
nce_methods
Kode : Date Getter dan
Setter
M ath
M ath

● Math merupakan class di JavaScript yang berisikan static property dan method untuk
operasi matematika
● Ada banyak sekali static property dan method di Math
● Math hanya bisa digunakan untuk tipe data Number, tidak bisa digunakan untuk tipe data
BigInt
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
Kode :
M ath
Boolean
Boolean

● Boolean merupakan wrapper class untuk tipe primitif boolean

● Boolean memiliki method toString() untuk mengkonversi ke String
● Dan memiliki method valueOf() untuk mengkonversi ke tipe boolean primitif
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
Kode Boolean
M ap
M ap

● Map merupakan representasi dari struktur data key-value

● Map mirip dengan tipe data object, hanya saja pada Map, semua method untuk manipulasi
data sudah disediakan
● Map mengikuti kontrak iterable, sehingga bisa di iterasi secara default
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
Perbedaan Map dan
Object
Map Object

Pertama dibuat, tidak memiliki key Karena memiliki prototype, jadi bisa jadi
memiliki default key ketika pertama dibuat

Key bisa tipe data apapun Key hanya bisa string atau symbol

Jumlah key bisa diketahui dengan mudah Tidak bisa diketahui, harus manual
dengan attribute size menggunakan iterasi

Secara default tidak bisa dikonversi ke Bisa dikonversi ke JSON secara otomatis
JSON
Map Instance Method &
Property
Method & Property Keterangan

size Panjang Map

clear() Menghapus semua isi Map

delete(key) Menghapus data Map berdasarkan key

get(key) : value Mendapatkan data Map berdasarkan key

has(key) : boolean Mengecek apakah Map berisi data key

set(key, value) Mengubah data Map dengan key = value

forEach((key, value) => ) Melakukan iterasi Map

Kode :
M ap
Set
Set

● Set merupakan implementasi dari struktur data yang berisikan data-data unique
● Set mirip seperti Array, hanya saja isi datanya selalu unique
● Jika kita menambahkan data yang sama, maka data hanya akan diterima satu saja
● Set mengimplementasikan kontrak iterable, sehingga bisa diiterasi secara default
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
Set Instance Method &
Property
Method & Property Keterangan

size Panjang Set

add(value) Menambah data ke Set

has(value) Mengecek apakah Set memiliki value

delete(value) Menghapus value dari Set

forEach(value => ) Melakukan iterasi Set

Kode :
Set
Symbol
Symbol

● Symbol merupakan tipe data yang digaransi akan selalu unique setiap kali kita membuat
data symbol
● Symbol kadang banyak digunakan untuk membuat key pada object
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symb
ol
Kode :
Symbol
Symbol
For
● Kadang agak sulit membuat symbol harus selalu menggunakan variable
● Pembuatan symbol juga bisa menggunakan static method Symbol.for(key)
● Jika kita menggunakan key yang sama, Symbol yang sama akan sekalu
dikembalikan
Kode : Symbol
For
RegExp
RegExp

● RegExp merupakan implementasi dari regular expression di JavaScript

● Regular expression merupakan fitur untuk mencari text dengan pola
● Membuat regular expression di JavaScript bisa dilakukan dengan dua cara, yaitu
menggunakan literal notation atau membuat object RegExp
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
M embuat RegExp
RegExp Instance Method
Instance Method Keterangan

exec(value) : result Eksekusi regex, jika menemukan data sesuai

pola, maka kembalikan result nya, jika tidak
maka null

test(value) : boolean Eksekusi regex, jika menemukan data

sesuai pola, maka return true, jika tidak
maka false
Kode : RegExp Instance
M ethod
RegExp M odifier

RegExp memiliki modifier untuk mengubah sifat cara

pencarian
Modifier Keterangan

i Regex menjadi incase sensitive

g Pencarian dilakukan secara global, secara

default setelah menemukan data, pencarian
akan berhenti

m Multiline, pencarian dilakukan di tiap baris

(enter)
Kode : RegExp
M odifier
Fitur RegExp
Lainnya
● Assersions : indikasi awal dan akhir teks
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions
● Character Classes : membedakan antara huruf dan angka
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character
_Classes
● Group dan Range : melakukan grouping atau range huruf atau angka
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_a
nd_Ranges
● Quantifiers : menentukan jumlah huruf atau angka
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifie
rs
Kode : Contoh Fitur
RegExp
Regular Expression di
String
Di JavaScript, tipe data String memiliki instance method yang dapat memanfaatkan RegExp
untuk melakukan pencarian

String Method Keterangan

match(regex) : Array Mencari semua data yang sesuai dengan regex

search(regex) : index Mencari index data yang sesuai dengan regex

replace(regex, value) Mengubah data dengan value yang sesuai regex

replaceAll(regex, value) Mengubah semua data dengan value yang sesuai regex

split(regex) : Array Memotong string dengan regex

Kode : Regular Expression di
String
Proxy
Proxy

● Proxy merupakan fitur yang bisa digunakan sebagai wakil sebuah data
● Dengan menggunakan proxy, semua interaksi ke data akan selalu melalui Proxy terlebih
dahulu
● Dengan ini, kita bisa melakukan apapun sebelum interaksi dilakukan ke data yang dituju
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Proxy
Handler
● Pembuatan Proxy perlu menggunakan handler, dimana dalam handler, kita bisa membuat
function yang dinamakan interceptor yang digunakan ketika mengambil data atau mengubah
data ke target
● Untuk membuat Proxy, kita bisa menggunakan new Proxy(target, handler)
Kode : M embuat
Handler
Kode : M embuat
Proxy
Proxy dan
Handler
● Saat kita mengubah data proxy, secara otomatis data akan dikirim ke target melalui handler
dengan memanggil function set(target, property, value)
● Saat kita mengambil data proxy, secara otomatis data akan diambil dari target melalui
handler dengan memanggil function get(target, property)
● Artinya, jika kita ingin melakukan sesuatu sebelum dan setelah nya, bisa kita lakukan di
handler
Kode : Log
Handler
Reflect
Reflect

● Reflect merupakan class yang digunakan untuk mengeksekusi JavaScript function

● Reflect tidak memiliki constructor, dan cara penggunaan Reflect tidak dengan membuat
object dengan new Reflect
● Penggunaan Reflect adalah menggunakan banyak sekali static methodnya
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect
Kode :
Reflect
Encode
Encode

● Saat kita menulis URL, kadang kita ingin menambahkan informasi tambahan seperti
query parameter misalnya
● URL sendiri sudah memiliki standard encoding penulisan URL
● Standard encoding ini dilakukan agar penulisan URL aman ketika diterima oleh server
● Aman disini dalam artian informasi URL tidak berubah
● Contoh paling sederhana, misal, walaupun kita bisa mengirim spasi dalam url, tapi
disarankan untuk di encode agar nilai spasi tidak benar-benar terlihat seperti spasi pada
URL nya
Contoh M asalah Jika Tidak M enggunakan
Encode
● Misal ada query parameter dengan nama data, lalu kita ingin mengirimkan nilai kesana
● Misal nilainya adalah &eko=eko&, alhasil URL nya akan seperti berikut
● http://contoh.com?data=&eko=eko&
● URL diatas terlihat tidak ada masalah, tapi sebenarnya ketika diterima oleh server, parameter
data bernilai kosong, kenapa? karena & dianggap sebagai pemisah antar parameter
● Artinya tanda seperti & dan lain-lain perlu di encode, agar tidak terjadi kesalahan data yang
kita kirim
Encode Function
Function Keterangan

encodeURI(value) Melakukan encode value, namun karakter yang

dipesan di URI tidak akan diubah ;,/?:@&=+$#

encodeURIComponent(value) Melakukan encode value semua karakter

decodeURI(encoded) Melakukan decode value hasil encodeURI()

decodeURIComponent(encoded) Melakukan decode value hasil

encodeURIComponent()
Kode : encodeURI dan
decodeURI
Kode : encodeURIComponent dan
decodeURICompoentn
Base64
Base64

● Base64 merupakan binary to text encoding, representasi binary data dalam format string
● Base64 merupakan format text data yang aman untuk dikirimkan di web
● Base64 merupakan encoding yang biasanya digunakan ketika perlu mengirim data dari client
ke server
● Karena encoding Base64 merupakan text, oleh karena itu sangat aman digunakan pada
query param URL atau text body dalam form
● https://developer.mozilla.org/en-US/docs/Glossary/Base64
Base64
Function
JavaScript memiliki function bawaan untuk melakukan encode Base64 atau decode
base64
Function Keterangan

btoa(value) Encode ke base64 dari value

atob(encoded) Decode dari base64 ke value

Kode :
Base64
Eval
Eval

● Eval merupakan function yang digunakan untuk mengeksekusi kode JavaScript dari String
● Fitur ini sangat menarik, namun perlu hati-hati ketika menggunakannya
● Jika sampai salah penggunaan, maka bisa jadi kita malah mengeksekusi kode program yang
bisa menyebabkan masalah keamanan di website kita
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Kode :
Eval
M ateri
Selanjutnya
M ateri Selanjutnya

● JavaScript Modules
● JavaScript Document Object
Model
● JavaScript Async
● JavaScript Web API