JavaScript Standard Library.pdf

JavaScript Standard Library
Eko Kurniawan Khannedy

- Technical architect at one of the biggest
ecommerce company in Indonesia
- 10+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow

● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Email : echo.khannedy@gmail.com

Sebelum Belajar
● HTML
● CSS
● JavaScript Dasar
● JavaScript Object Oriented Programming

Agenda
● Number
● String
● Array
● Object
● JSON
● Dan lain-lain

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

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 Method
● 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

Number Instance Method
● 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

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 Method dan Properties

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

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 (ﬁrst in ﬁrst out)
● Kita bisa menggunakan Array dengan bantuan function push() untuk menambah data di belakang,
dan shift() untuk mengambil dan menghapus data paling depan

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 ﬁrst out)
● Untuk menambah diurutan belakang, kita bisa menggunakan function push()
● Dan untuk mengambil dan menghapus paling belakang, kita bisa menggunakan function pop()

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

Array Filter
Array memiliki function untuk melakukan ﬁlter data
Function Keterangan
filter(value => boolean) : Array Melakukan filter data yang kondisinya
bernilai true

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) :
result
Melakukan transform dengan
menggunakan value array dan value
selanjutnya, lalu hasilnya dilanjutkan ke
iterasi selanjutnya
reduceRight(resultBefore, value => result) Sama seperti reduce(), namun dilakukan
dari belakang

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

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

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)

Object Property Name & 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 Name & Value

Dan Function Lain-Lain
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

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

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

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?,
minute?, second?, milis?)
Membuat date dengan parameter sampai
milis
new Date(timestamp) Membuat date dari epoch atau unix
timestamp

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()

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

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

Math
● 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

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

Map
● 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
dengan attribute size
Tidak bisa diketahui, harus manual
menggunakan iterasi
Secara default tidak bisa dikonversi ke
JSON
Bisa dikonversi ke JSON secara otomatis

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

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

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/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

RegExp
● RegExp merupakan implementasi dari regular expression di JavaScript
● Regular expression merupakan ﬁtur 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

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

RegExp Modiﬁer
RegExp memiliki modiﬁer 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)

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
● Quantiﬁers : menentukan jumlah huruf atau angka
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantiﬁe
rs

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 merupakan ﬁtur 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)

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

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

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 Masalah Jika Tidak Menggunakan 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 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

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

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

JavaScript Standard Library.pdf

More Related Content

Similar to JavaScript Standard Library.pdf (9)

Recently uploaded (8)

JavaScript Standard Library.pdf