JScheatsheet
sumber lebih lanjut: https://developer.mozilla.org/id/docs/Web/JavaScript/A_re-introduction_to_JavaScript
TIPE DATA
-
NUMBER: (15 digit)
- Angka tanpa desimal: 10, 123456, 3000
- Angka desimal: 3.14, 0.5, 100.00
- Eksponen: 123e5 // 12300000, 123e-5 // 0.00123
- Bilangan negatif: -0.134, -2, -100.00
- Bilangan oktal (Basis 8)
- Bilangan Hexadesimal (Basis 16)
- Bilangan Spesial: -Infinity, NaN
-
OPERATOR
- Unary (membutuhkan 1 operand)
a. typeof
number, string, boolean
- Binary (membutuhkan 2 operand)
a. aritmatika: +, -, _, /, % (modulus)
Operator Precedence: Kurung, Kali, Bagi, Tambah, Kurang.
b. penugasan (assignment): =, +=, -=, _=, /=, %=
c. perbandingan (comparison): ==, !=, ===, !==, >, >=, <, <=
d. logika: &&, ||, !
e. string: concatination +
- Ternary (membutuhkan 3 operand)
a. kondisional
(kondisi) ? benar : salah
(x % 2 == 0) ? "genap" : "ganjil"
-
String Escape Character
- = null
- ' = '
- " = "
- =
- n = new line
- t = tab
- b backspace
- uXXXX = Unicode
VARIABLE
-
Deklarasi: mendaftarkan variabel ke dalam lingkup yg sesuai.
-
Inisialisasi: menyediakan memori untuk variabel.
-
Penugasan: menetapkan nilai yg spesifik ke dalam variabel.
Syarat variabel:
- tanpa spasi.
- camelCase.
- tidak diawali dgn angka.
- tidak menggunakan keyword & reserved word.
- variable scope: local & global.
-
VAR, LET & CONST
REFACTORING: Sebuah proses mengubah kode agar menjadi lebih baik tanpa mengubah fungsionalitasnya.
Alasan:
- Readability
- DRY, dont repeat yourself
- Testability
- Performance
- Maintainability
CONTROL FLOW
FUNCTION
SCOPE
- Global / Window Scope
let a = 1;
console.log(a);
- Function Scope
function tes() {
let b = 2;
}
tes();
console.log(b);
- Block Scope
function tes() {
let c = 3;
console.log(c);
}
tes();
RECURSION: Sebuah fungsi yang memanggil dirinya sendiri.
Implementasi:
- Menggantikan looping
- Deret Fibonacci
- Pencarian & penelusuran struktur data list & tree
contoh:
function faktorial(n) {
if (n === 0) return 1;
return n * faktorial(n -1);
}
STRUKTUR DATA
CONTEXT
- Creation Phase pada global scope
nama var = undefined
nama function = fn() yaitu fungsinya itu sendiri.
- Hoisting
window = global object
this = window
- Execution Phase
function membuat local execution context
CLOSURES
- merupakan kombinasi antara function dan lexical scope di dalam function tsb.
- sebuah function ketika memiliki akses ke parent scope, meskipun parent scope nya sudah selesai dieksekusi.
contoh:
function namaFunction(param1) {
return namaLocalFunction(param2) {
function body}
}
declaration namaVariable = namaFunction(argument1);
namaVariable(argument2);
ARROW FUNCTION
- Bentuk lain yang lebih ringkas dari function expression.
contoh:
declaration identifier = (ParameterList opt) => {function body}
contoh:
let jumlahDuaBilangan = (param1, param2) => {function body}; // Implicit Return
- This dalam arrow function
arrow function tidak bisa diterapkan pada this.
contoh:
declaration NamaObject = function (param1) {
this.property1 = string;
this.property2 = () => {function body};
}
declaration namaVariable = new NamaObject();
HIGHER ORDER FUNCTION
Function yg beroperasi pada function lain (di dalam argument / return value). Javascript memperlakukan function sbg object.
Why: Abstraksi, yaitu untuk menyederhanakan suatu program karena semakin besar sebuah program, semakin tinggi kompleksitasnya, maka semakin membingungkan programmer.
- Array.prototype.map()
- Array.prototype.filter()
- Array.prototype.reduce()
TEMPLATE LITERAL
adalah string literal yg memungkinkan adanya expression di dalamnya.
bisa menggunakan: ' '; " "; dan ;
Dengan backtick( ) bisa membuat:
- Singleline String:
string text
- Multiline string:
string text 1 string text 2 string text 3
- Embedded Expression:
string text ${expression} string text
- HTML Fragments
- Expression Interpolation
- Tagged Template:
- Escaping / Sanitize HTML Tags
- Translation & Internationalization (i18n)
- Styled Components
Destructuring Assignments
Expression pada JS yg membuat kita dapat membongkar nilai dr array / properti dr object kedalam variabel terpisah.
- Array
const coba = ['satu', 'dua', 'tiga'];
const [a, b, c] = coba;
- Object
const mhs = {
nama: 'Ramadyan',
umur: 25,
email: '[email protected]',
};
const {nama, umur, email} = mhs;
- Function
- Pada Return Value
- Pada Arguments
Spread Operator
Operator yang memecah iterables menjadi single element.
Rest Parameter
Merepresentasikan argument pd function dgn jumalh tak terbatas menjadi sebuah array.
SYNCHRONOUS vs ASYNCHRONOUS
- SINGLE-THREAD vs Multi-thread
Lingkungan eksekusi task
- Blocking vs NON-BLOCKING
Teknik ngoding (Input-Output related)
- Synchronous vs ASYNCHRONOUS
Teknik ngoding (HTTP Request related)
- CONCURRENT vs Parallel
Lingkungan eksekusi task (infra, hardware & virtualization related)
Callback
Function yg dikirimkan sbg parameter pada function yg lain.
Contoh:
function namaFunction(namaCallback) {
deklarasi namaVar = value;
callback(namaVar);
}
namaFunction((namaVar) => {
console.log(execution);
});
Promise
Object yg merepresentasikan keberhasilan / kegagalan sebuah event yg async di masa yg akan datang.
Promise (fulfilled / rejected / pending).
Menggunakan callback => Action (resolve => then / reject => catch / pending => finally).
Contoh:
deklarasi namaVar1 = value;
const namaVar2 = new Promise((resolve, reject) => {
if (namaVar1) {
resolve(value);
} else {
reject(value);
}
});
namaVar2
.then((response) => console.log(execution))
.catch((response) => console.log(execution));
AJAX & Fetch
Fetch adalah sebuah method pada API JS utk mengambil resources dr jaringan & mengembalikan promise yg selesai(fullfilled) ketika ada response yg tersedia.
notasi: fetch(resources, init);
- Resources: url / request object (representasi permintaan sumber).
- Init: konfigurasi tambahan pd sebuah request berbentuk object (contoh: get, post, method, header, cache, dll)
- Response: Hasil dr fetch berupa promise (property & method).
Async & Await
- Sebuah function yg bekerja secara asynchronous ( melalui event loop),
- yang menghasilkan (implisit) promise sbg return value,
- tapi cara penulisan kode menggunakan penulisan yg synchronous (standard).
Sebuah async function dapat punya keyword await di dalamnya untuk memberhentikan sementara eksekusi fungsinya sambil menunggu promise nya selesai (resolve).
DOM (Document Object Model): Representasi elemen HTML pada dokumen menjadi sebuah object. Tersimpan ke dalam DOM Tree.
Manfaat DOM:
-
Sebagai antarmuka pemrograman berbasis objek yg merepresentasikan dokumen web.
-
DOM membuat seluruh komponen dari halaman web dapat diakses & dimanipulasi.
-
Komponen : Elemen html, atribut, text, dll.
-
DOM Tree
- NodeList: Kumpulan yg berisi node apapun.
- HTMLCollection: Kumpulan yg berisi node elemen html dan bersifat live.
-
Hierarki:
- Root Node (Document): Node yg menjadi sumber dr semua node lain di dlm DOM.
- Parent Node: Node yg berada satu tingkat diatas node lain.
cth: body adalah parent dr h1, p, div & a.
- Child Node: Node yg berada satu tingkat dibawah node lain.
cth: h1 adalah child dr body.
-
Tipe tipe node/ simpul:
- element
- attribute
- text
- cdata section
- entity reference
- entity
- processing instruction
- comment
- document
- document type
- document fragment
- notation
-
DOM Selection
- Seperti memakai element pada HTML:
- getElementById() = menghasilkan element.
- getElementsByTagName() = menghasilkan HTMLCollection.
- getElementsByClassName() = menghasilkan HTMLCollection.
- Seperti memakai selector pada CSS:
- querySelector() = menghasilkan element.
- querySelectorAll() = menghasilkan NodeList.
-
DOM Manipulation
- Element Manipulation
- element.innerHTML = mengubah isi dr element yg diseleksi.
- element.style. = mengubah style dr elemen yg diseleksi.
- element.getAttribute() = mengetahui isi attribute.
- element.setAttribute() = menambahkan attribute.
- element.removeAttribute() = menghapus attribute.
- element.classList:
- add() = menambahkan kelas.
- remove() = menghapus kelas.
- toggle() = menambahkan kelas jika belum ada, menghapus jika sudah ada.
- item() = mengecek kelas dgn index.
- contains() = mengecek kelas yg dimaksud.
- replace() = mengganti kelas.
- Node Manipulation
- document.createElement()
- document.createTextNode()
- node.appendChild()
- node.insertBefore()
- parentNode.removeChild()
- parentNode.replaceChild()
-
DOM Event
- Event Handler = Hanya bisa dijalankan perintah terakhir.
- Inline HTML attribute
- Element Method
on
- addEventListener() = Dapat dijalankan berkali-kali.
-
DOM Traversal
- parentNode = hasilnya node.
- parentElement = hasilnya element.
- nextSibling = hasilnya node.
- nextElementSibling = hasilnya element.
- previousSibling = hasilnya node.
- previousElementSibling = hasilnya element.
-
Prevent Default
- Untuk mencegah aksi default, menggunakan method: event.preventDefault();
-
Event Bubbling
- Ketika event dijalankan akan menjalankan event pada parent sebelum ke child. Menggunakan event.stopPropagate();
