JAVASCRIPT STANDARD LIBRARY

00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:

  • HTML
  • CSS
  • Javascript Dasar
  • Javascript Object Oriented Programming (OOP)

01. 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#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#static_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#instance_methods 


02. 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#instance_methods 


03. 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 (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

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

Array Search
Array Filter

Array Transform

Dan Function Lain-Lain:
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#instance_methods 


04. 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 dan 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 dan 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

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


05. 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 
  • 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 


lihat console:


06. 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   

07. 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


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

Date Getter & 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#instance_methods 

08. 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 

09. 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 

10. 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 Instance Method & Property
  

lihat console:


11. 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


 

lihat console:


12. 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


lihat console:

13. 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 

RegExp Instance Method
RegExp Modifier

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_and_Ranges 
  • Quantifiers : menentukan jumlah huruf atau angka https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers 
Regular Expression di String

Membuat RegExp dan RegExp Instance Method



lihat console:


14. RegExp Modifier i

Lihat console:



15. RegExp Modifier g

lihat console:



16. RegExp Modifier m

lihat console:


17. RegExp advanced

lihat console:


18. RegExp di string

19. 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)

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

20. 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 

21. 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

22. 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


23. 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

Source: Youtube Programmer Zaman Now