Fundamental JavaScript
Ringkasan Episode
Bantu KoreksiEpisode ini membahas konsep fundamental JavaScript yaitu Closure. Para host menjelaskan secara mendalam apa itu closure, bagaimana cara kerjanya, dan mengapa konsep ini penting untuk dipahami oleh developer JavaScript. Diskusi dimulai dengan penjelasan bahwa JavaScript adalah bahasa dengan first-class function yang memungkinkan function dipassing sebagai parameter. Pembahasan mencakup konsep lexical scope, outer scope vs inner scope, dan bagaimana closure memungkinkan sebuah function mengakses variabel dari scope luarnya. Contoh kode praktis juga ditunjukkan untuk membantu pemahaman, termasuk perbandingan dengan bahasa lain seperti PHP versi lama dan C yang tidak mendukung first-class function.
Poin-poin Utama
- •Closure adalah teknik untuk implementasi lexical scope name binding dalam bahasa dengan first-class function
- •JavaScript adalah bahasa first-class function di mana function bisa dijadikan parameter (higher order function)
- •Closure memungkinkan function mengakses outer scope-nya, yaitu variabel di luar function tersebut
- •Berbeda dengan PHP lama (sebelum versi 7) atau C yang tidak mendukung callback di dalam function
- •Closure sering ditanyakan dalam interview JavaScript sebagai pertanyaan fundamental
- •Konsep enclosed mereferensi surrounding state, memungkinkan akses ke variabel di dalam scope tertentu
- •Pemahaman closure penting untuk memahami konsep lanjutan seperti memoization dan React hooks
[musik]
[musik]
Halo semuanya
mana sih?
ya ada semuanya
ya semua
lebih-lebih lama-lama
[musik]
lagi pada capek kerjaya
iya
biar semangat
iya nih
saya nggak ngantuk
[musik]
oke
buat nanti bikin teh nih
buat nanti bikin teh anget
supaya
teh dari China
baru aja
baru aja kerja ya
iya nih baru
baru selesai di set down
nah nih gue tutup nih
nah
selamat malam mas Ricky
halo
curhat nih ceritanya curhat
curhat ya
tapi salah bikin teh kamu mill
Lihat transkrip lengkap (2505 segmen lagi)
malah ngantuk
teh kamu mill itu bikin ngantuk ya
lebih bikin tenang
oh bikin tenang
bukan ngantuk
bikin relax
bikin relax ya
kalau capek plus relax sama dengan ngantuk lah
ngantuk
beli teh nggak di China kemarin
di Shanghai
beli dong
banyak jual di mana-mana
di Beijing
liat harga tehnya
mahal-mahal
ada yang teh
setan aja deh
balik ke teh
teh itu
takut ketagihan
dia banyak teh ininya mas
banyak teh
di emperannya tuh
jualnya tuh sudah teh yang campur-campur gitu
ada yang teh bunga
ada teh bunga
jadi tehnya banyak
di mix
yang di Shanghai kemarin ya
yang di Beijing tuh
waktu minum teh
waktu malam yang pertama kali
kita minum tuh malam yang pertama
kan dikasih
teh malam pertama
teh hitam ya
black tea ya black tea
itu enak banget
baru nyampe trus minum itu aduh enak banget
bukan black tea
itu kan
kalau yang dina pertama itu
dinner-dinner
oh
entah
karena yang malam yang pertama itu
saya kan sama Pak Dika
dalam
Diza Nebe
oh bagi kedua
yeah acara resmi pertama
oh acara resmi pertama
yang kita ketemu
temen-temen yang lain
udah ngumpul semua
lupa
itu luar biasa enak
trus pas hari terakhir yang
kita mau cari oleh-oleh begitu masuk ke toko teh
waduh ini harganya
maru
itu yang toko
yang kita sengaja nyari
soalayan muslim gitu kan ya
soalayan halal gitu kan
yang apa
yang isinya
gak tau apa aja tuh bingung
kayak barang-barang disusun
berceseran gitu bingung juga
mau beli yang itu
iya
ya gitu lah pokoknya selama disana
minum teh tuh enak banget
saking enaknya gak perlu pakai gula
pun udah enak banget gitu kalau disini harus ditambah
gula baru berasanya
kalau disana kayaknya
malah tabu ya pakai gula karena jadi
kayak mengubah rasanya
mengubah rasa
kalau disini kalau gak ditambah gula ya
karena mungkin itu kan
sama aja kayak kopi kurang
kalau kopi yang enak
gak pakai gula juga udah enak
gak kayak gue mau cari teh
tanpa gula di Thailand itu
gak bisa
minta teh dikasihnya teh susu
teh bukan
teh susu kental manis
teh susu gak pakai gula
tapi pakai kental manis
iya dan mereka bingung
"lo mau apa?"
kalau minta teh biasa
berarti sama gula sama kental manis juga ya
pokoknya teh langsung gula kental manis
udah IT gitu
gak bisa minta teh tanpa gula gitu
gak ada cerita
sekarang bayangin
bayangin orang Thailand
pergi ke Tiongkok, pergi ke China
kusing deh
minta teh "ini apa?"
dikasih teh, dikasih teh
dianggup sepet lagi, udah sepet, pahit
gak manis, gak ada susunya
sebenarnya teh itu kalau sepet itu
berarti udah lama Eka
teh itu sebenarnya kalau sepet
salah
kalau teh itu kalau sudah sepet
iya kalau sudah sepet
berarti kelamaan di rendam
teh itu sebenarnya enak yang paling awal
iya emang ada
tergantung daun-daun
ada yang kayak kayu-kayuannya
buat yang biasa minum kubuman
dan milki kan
dianggup sepet dong
pasti taste
natural taste dari
kayu-kayuan
nah kalian pada
pada nge-teh
kalau sambil kerja, teh apa?
komentar di kolom ini
dan kalian coffee person
atau...
kalian minum apa pas lagi kerja?
iya
yang kerja suka teh atau coffee?
lambangnya java script kan
itu kan, lambangnya java script
ada teh kan?
java, coffee
kan java sama java script
sama
beda lah
java script
di namain java script
sebagai gimmick karena java lagi trend
itu ada di episode berapa ya?
kita sekalian di plan episode lama
ini kita buang-buang waktu
karena bingung sama topik ini
yang harap sabar yang nonton
biasa, iya pokoknya ada deh
di episode dulu
kita tunggu komen temen-temen
baru ada Ricky disini, yang lain
komen juga lah, baru kita mulai
jadi kita belum waktu, sebenarnya
otak saya belum nyambung
karena baru aja nge-switch
antara kerjaan
makan buru-buru, dan langsung mulai
jadi otaknya masih
lagi pada sibuk ya
lagi hektik
lebih tepatnya
biasa, agustus kan
kenapa agustus, ada apa dengan agustus?
kan ada siklus kehidupan
itu sih, siklus kehidupan itu
quarterly
quarter kan, kalau misalnya
di apa
kalau nanti sudah
habis ini quarter 4 nih
quarter 4 itu sudah adalah
kalau di dunia agensi dan enterprise itu
quarter 4 itu adalah
suatunya menyusun
planning tahun depan dan
apa namanya, pembiayaan
apa, prokosal
jadi
budgeting
terus bulan 1
itu biasanya masih
baru layih-layih
baru habis
habis new year
nanti quarter 1 nya itu mulai
kayak
prokosal mana yang
harus sijalankan
dan quarter 2, quarter 3 itu sibuk
nanti quarter 4
laporan lagi dan budgeting lagi
ya ini kan quarter 3
diujung, sebentar lagi
ujung quarter 3 kan
sebentar lagi
jadi
sales sudah lewat
sekarang lagi delivery
itulah siklus kehidupan
developer
apa konsultan-konsultan
konsultan
jadi sebenarnya
malam hari ini kan kita mau bahas tentang
fundamental JavaScript, spesifiknya
tentang closure
mungkin tambah
yang lain juga hosting
ya hosting
mumpung nih
kalau biar
makin seru kali ya
teman-teman yang ada di
yang lagi nonton, baik itu di
LinkedIn atau di YouTube, boleh dong
komen kira-kira ada
topik fundamental JavaScript
apa yang masih
belum paham atau masih bikin bingung
atau
mungkin ada
masih ingat ada beberapa pertanyaan
interview yang berhubungan
dengan topik JavaScript
kita pengen tahu kira-kira yang ditest apa
misalkan kayak, apa itu memoization
di React itu kan sering ya
pakai aja use memo
tapi kan Reaction 16
use memo sudah mulai ditirak
sudah nggak ya, mulai ditirak
contoh
misalkan
kalau React kan paling sering kan
apa itu visual DOM
eh virtual DOM, kok visual
virtual DOM
virtual DOM
aku sampai bingung, apa sih visual DOM
empat gue enggak tau ya
iya
itu
siapa tahu kita bisa diskusi bareng-bareng
aja lah ya, diskusi bareng-bareng
tapi kalau nggak ada nggak apa-apa, kita bahas tentang
closure
apa itu closure
penutupan
penutupan
closure itu kan
penutupan
oh iya
closing ya
closing
bener juga
kumpen Ivan bener
kumpen, jahat banget
biasanya ngaco
iya
jadi kalau di matematika ya
istilahnya istilah matematika ya
atau programming
lanjut ya
closure itu adalah
teknik
untuk implementasi
leksikalscope name binding
apa lagi
oke
in a language with
first class function
iya
jadi bahasa fungsional ya
JavaScript adalah
bahasa yang first class function
maksudnya apa, kelihatannya ini maksudnya
function itu bisa dipasang sebagai
programming kan ya
iya, betul
higher order function
bahasa di mana
function itu bisa
di-oper-oper ke berbagai
scope kan, berarti
kalau dimasukin sebagai argument
function itu bisa dipanggil
dijalani di dalam
function di dalam function
yang mana itu berbeda scope
nah, sebagai
pembanding
gimana Irvan, sebagai pembanding
php jaman dulu
di 54, php
mungkin temen-temen bisa
salahin nanti ya, php yang sebelum
7 itu kita nggak bisa
bikin callback di dalam functionnya
php contohnya, atau di
C gitu kita nggak bisa panggil
function di dalam
function sebagai parameter
di dalam sebuah function
function sebagai parameter
iya, kalau di
JavaScript malah ada
function bisa
menjadi nilai untuk
return, return value kan
bisa jadi function kan
ya, di return, ya kalau bisa dipasukin
sebagai argument, bisa
dikembaliin lagi ke atas
tapi itu bukan
istilahnya, bukan first class
function ya sebutannya ya, itu mungkin
apa ya namanya ya, kayak
querying, bukan ya
atau partial application, ya gitulah
pokoknya, jadi
first class function apa?
tanya, sama
JPD, Jemenai
JPD, Jemenai
dan teman-temannya
intinya kan
first class function itu
kalau secara harfiahnya adalah
fungsi di
levelnya itu setara dengan
variable dan struktur data yang lain
seperti
jenis variable lainnya
ya, jadi sama lah
tingkatannya
stratanya sama, jadi
jangan heran kalau
fungsi itu bisa dimasukkan ke dalam
struktur data kayak struktur data
objek
kalau tidak semua
bahasa bisa seperti itu
first class function
kalau kata JPD begini
function bisa
di assign sebagai
variable
ada numerous function, oke
bukan, di assign sebagai
variable, oh, beda lagi
ini ada contoh
kodanya biar saya tunjukin, biar
enak
ada, ada, ada
oh
stop screen
say hello sama teman
saya sepindahkan dulu, ya betul
nah, entire screen aja
biar gampang
nah
sudah?
sudah, gedein
gedein dong, sembunyiin
nah, sudah
iya, kan ini
anonymous function, grid ini
kan anonymous function
disimpan ke variable
buka anonymous
functionnya kan gak ada nama nih
jadi variable
jadi variable-nya
gara-gara ada variable, jadi ada namanya
coba kalau gak ada grid-nya, function
langsung name kan gak ada nama kan
ini anonymous function
itu maksudnya
kalau yang nomor 2, baru ada
name function, bener gak?
ini name function, ya
name function
ya, jadi kalau
first class function, tapi keliatannya
point, apa, point definisi
first class ya bukan anonymous atau
keliatannya, tapi bisa di assign ke suatu variable kan
iya, level-nya kan sama
bisa dimasukin ke variable
jadi kayak bisa distur
bisa distur di memory maksudnya
iya
bisa masuk ke variable
di memory, jadi bisa dipanggil grid nih
grid event, gitu kan
bisa dipas sebagai
bisa di-over sebagai argument
nah, jadi yang
di-lookup ini-situ bukan
name function say hello-nya sendiri
tapi si argument FN itu
iya
kalau teman-teman familiar dengan callback
lah, inilah dia callback ya
callback function
konsepnya dari sini
maksudnya, apa, apa itu
first class function
itu language
bahasa apapun yang men-support
hal-hal seperti ini kan
berarti ada bahasa di mana
function cuma bisa dijalani doang
tapi gak bisa disimpen, gak bisa di-over-over
ke sana-sini
yang ketiga
yang ketiga ini, kalau misalnya
fundamental-nya belum ngerti
pada asal pakai aja mungkin
kalau di framework ya, nah ini tuh
masih return function from another function
kita lihat nih ya, multiplier ada
faktor, dan dia return function
x, dan x kali factor
jadi si multiplier itu diisi
2, berarti kan faktornya 2 nih
yang dipakai di dalam
function return-nya
iya kan
nah, terus double itu kan
berarti jadi function, karena
return dari multiplier itu kan
function ini kan
iya kan, yang di mana
faktornya 2
pengali nya 2
terus tinggal dipanggil double
5
jadi kalau misalnya mau setup
triple, berarti multiplier
3, triple
x, eh
berapapun lah ya
jadi bisa dibikin
ya function, return function
dan function itu dipanggil
bingung kan
itulah first class
ya sebetulnya, kayak
itu kan fungsinya buat
tujuannya buat bisa
access atau bisa ngejalanin function yang
di dalam itu tuh, yang di dalam
multiplier, tanpa
kayak, tanpa mengexpose lah
tanpa mengexpose
dalamannya multiplier itu kayak gimana
apanya bagi yang
manggil dari luar, yaudah
panggil apa, bikin function-nya
pakai multiplier aja
betul
atau bisa dipanggil langsung, pakai
apa namanya, pakai kurung bulet 2 kali
2 kali, pertama kali
ketemu itu, bingung tuh
multiplier, malah bingung ya
malah bingung ya
dua, multiplier, dua
dalam kurung lagi
ya, karena kan
fungsinya ada dua nih
makin ke dalam, bisa-bisa
begini lagi, kalau makin banyak return
kalau ada lagi, return lagi ya
nah
closure itu
yang konsep yang ketiga nih, ya mana tadi
oh, udah-udah
biarin, biarin
ke definisi closure berarti
nah, closure itu
seperti ini
kan tadi ini kan multiplier ya
ada
variable
dari screen saya tadi
iya
hebat kan
hebat banget
manual
oke, tadi
menunjukkan multiplier 2 sama 3 kan
udah ya, nah
yang
berhubungan dengan closure adalah
ini, jadi ini
ada sebuah parameter
yang bisa dipakai di dalam fungsi
di dalamnya
itulah closure
jadi dia bisa dapat
konteks ya, bisa dapat konteks dari
parameter
apa, parentnya
atau orang tuanya
kalau anak, sekarang mungkin
ngerti nya arrow function kali ya mas Tiza
arrow functionnya, multiplier, terus
dibikin arrow function, terus dibikin
cons, gitu ya
ya, itu tidak masalah
itu simptak, sama aja kan
harus refresh dulu nanti error soalnya
scope-nya sama gak sih
skopnya sama
kalau di arrow function
kayaknya ada perbedaan
iya, kayaknya
ada deh, ada bedanya apa ya
return
function lagi
bisa langsung, bisa
x ya, ya
x kali fator
pake tanda kurung apa ya
yang return functionnya
kayaknya bisa
enggak tuh, bisa
bisa tuh
3
yay
karena arrow function itu dia
explicit return ya, oh iya
anak sekarang taunya ini
bukan yang tadi ya
oh enggak juga, anak sekarang kan
pake itu coding assistant
nah coding assistant-nya
training-nya pake data lama, jadi munculnya
function, pake keyword function semua
anak sekarang banget
itu function lagi, train itu
muter
sebenarnya intinya itu, jadi
lebih gampang
yang tadi sih kalau menjelasinnya ya
jadi si fator ini kan sebenarnya
hanya bisa digunakan di sini
sebenarnya kan
apa ya, umumnya
hanya bisa digunakan di sini kan
tapi ternyata
di dalam sini pun dia bisa dapat
dia bisa
dari atas ke bawah gitu ya
kalau hoisting dari bawah ke atas
dia ngikut
jadi si fator ini
di include ke dalam
context
atau closure ya
ke dalam sini, jadi
di sini ada, di sini juga ada, bisa
tapi tidak sebaliknya
x di sini enggak ada
apa yang terjadi kalau
clash
saya const
lagi, jadi di dalam function
x saya const
saya define
initial class, oh define
pertanyaan bagus
mari kita coba
jadi di sini ada
const factor ya
sama dengan 5
15
itu
apa yang terjadi
multiplier
fator ini bebas kan
2, 3 ya yang tadi ya
jadi ketiban
ketimpa
ketimpa
yang lebih kecil
tidak error
tapi dia bikin
value baru lagi
tapi kalau dipanggil sebelum
return function, fator itu
2
iya, kalau di sini masih
2 kan di atas sini kan
redefine
kalau dikasih console lock
di baris setelah
multiplier fator itu kan
iya
nah itulah kira-kira basic
konsepnya itu
kalau penjelasan yang lebih ramah
ramah sama web dev
buka di MDN aja
MDN
oke
ya jujurlah kita kan
sebenarnya apa, pelajarin ini
selain biar ngerti basicnya
kita biar bisa jelasin
pas interview, udah kayaknya kepakenya
iya, tujuannya itu sebenarnya
sehari-hari kita udah pakai
kalau paham soal basicnya, tadi kan udah
kalau biar tahu basicnya
kalau ketemu prinsipnya
tapi kita harus bisa ngejelasin
ulang in case interview
nah ini lebih
friendly ke web dev
ini ya, jadi kata dasarnya ada
enclosed ya
enclosed
enclosed itu
mereferensi surrounding
state, berarti
kayak luarnya ya
ini outer scope ya
bukan, surround state itu
state di dalam
di dalam satu
di dalamnya malah bukan di luarnya
ya ini ngaruh ke, ini kan
closure gives a function
access to each outer scope
jadi membuat
si suatu fungsi bisa
mengakses outer scope-nya
kayak kalau tadi berarti
dari argument, nipas ke
multiplier ya
ya, coba, tadi kan
begini ya, gimana kalau
apus semua faktornya itu
iya, ini kita apus, misalkan
saya punya
A sama dengan 5
eh, udah di enter, nggak bisa ya
maksudnya, kemudian apa ini?
misalkan disini, saya bikin function
add, kemudian
B, ya
return A
+ B, bisa nggak sih?
bisa, asal, bisa
tapi A-nya nggak boleh const, harus
let lah
coba, add
5, 10, bisa
bisa, dia dapet kan
ini kan outer scope nih
A ini
dikenali di dalam fungsi
yang di return cuma value-nya doang, bukan function
itu mah bukan closure
yang di return value-nya doang, iya
kan ini outer scope, ini inner scope
closure
A itu, A-nya dipakai kan
tapi nggak ada
cuma mau demonstrate
outer sama inner scope ya
tapi kalau ini kan
berarti bukan closure ya
karena nggak ada function yang di dalamnya
add kan
oh, kalau closure itu harus
ada function di dalam
nggak juga sih, nggak
closure itu maksudnya
gives a function access to outer scope
entah itu function
entah itu variable
oh, nggak harus function ya berarti?
nggak harus
atau biar
selaras gini deh
function calc
terus misalkan tadi
ons A sama dengan 5
4 deh
terus function
add
B
return A
plus B, gitu kan
maksud EKA ya
terus ini, terus ini
gitu kan, sama aja kan sebenarnya
iya
oh iya, ini jalan doang ya
dot add
nggak bisa ya
gimana ini cara manggil ya?
nggak bisa ya?
kan calcnya nggak terima argument
nggak bisa
nggak di return kok
calcnya nggak terima argument
dan functionnya jalan doang
iya, salah
bukan gini, bukan gini
harus return function biar bisa
dipakai lagi dari dua
nggak, nggak
maksudnya
si A ini
meskipun tidak di dalam function
di scope yang
terluar itu dia
tetap bisa masuk ke function
yang di bawahnya, gitu lah
yang contoh tadi
jadi nggak mesti fungsi
nggak mesti fungsi
oke, lanjut
ini kan
iya, ini ada contoh
tuh, bener
contohnya nih
jadi
kita punya variable
ini masih pakai var lagi ya
display name
itu pakai
variable diluar
yang menjadikan ini closure
iya, tetap harus ada functionnya kan
berarti, walaupun functionnya nggak
oh iya, functionnya nggak harus
di return, si display name
itu kan nggak di return, tapi
dijalani aja di dalam situ
iya, dipanggil
tapi kurangnya itu tadi berarti ya
kayaknya nggak deh, tapi ya oke lah
kita tampung dulu ya
nggak tau, ini juga apa
pemahaman gue bisa salah
kan soto-soto berdasarkan baca-baca
doang juga sih
ini create local variable called name
and function called display name
the display name function is
an inner function
that is defined inside
init, and is available only
within the key of the init
jadi kan
display name itu nggak bisa
dijalani dari luar init
iya
jadi
note that display name function has
no local variable
iya, tapi bisa
mengakses name yang diluarnya
gimana kalau 3 tingkat
masih bisa nggak? misalkan ada name
ada display name, di dalam displaynya ada
return function lagi
ada function something-something
iya
iya, harusnya nggak apa-apa, bisa-bisa aja
bisa juga, tetap bisa ya
oh, tapi name, ya coba aja
namenya harus
explicitly reoper nggak ya?
oh, kayaknya gue bilang sih
bisa, tapi coba aja
function init
let name
sama dengan mozilla
mozilla
terus function
display name
display name
terus console log
console log name
terus dalamnya function lagi
terus, dalamnya function lagi
return lah
function display display name
oh, nggak usah ya, jangan ya
function return
display full name
display upper
return function
function aja, nggak usah di return
iya
mau return atau nggak? nggak usah?
nggak, pengen nyoba
persis-persis banget sama
pengen nyoba persis
contohnya mdn, tapi tingkat 3
masih bisa
mengakses name atau nggak
bisa ya
bisa, tetap bisa ya
feeling gue juga bisa
ya bisa, cuma di coba aja
namenya
name to upper
case
gitu ya
lah, ilang
lah, ilang
yaa
gimana
kebanyakan pencet
bawah
ya nggak asik
yaa
nggak jadi deh
langsung BT gitu
udah langsung down gitu
langsung down
mendingin
di copass aja lah
balang lagi
ok, masih semangat
let's go
function
display upper
name
dia males gitu
console log
name dot
to upper case
ok
eh, pake ini ya
iya
itu function dunia harus di jalan
functionnya
terus bawahnya
jalan dun
nah, iya
kopass dulu, jangan sampai ilang
ok
eh, coba sekarang
ini
oh iya bisa
bisa, bisa, bisa
bener, bener
sound effect, ok
iya
padahal tadi
udah nebak bisa juga ya, cuma pas udah ngebuktikan
bener, kayak seneng banget aja
ok
berarti kan maksudnya mau disusun
bingket pun, ya behaviornya tetep sama
maksudnya ke bawah tuh
si variable namenya bakal
tersedia terus di
masing-masing inner-inner
functionnya
ada perbedaan di sini
ini menarik nih
karena kan sebelumnya
sebelum IS-6
itu hanya ada dua jenis scope
function scope
sama global scope
variable yang dideklarasikan
dengan var
baik itu di function scope
atau global scope
maka dia akan
jadi global semuanya ya, kalau var ya
kalau var global
jadi global scope, yes
meskipun kita definisinya
di dalam function pun, dia bisa diakses
di luar function itu ya?
enggak
dia nggak hoistik
hoistik ya? ok
hoistik apa lagi?
nanti kita bahas
kalau hoistik, gue belum tahu sama sekali
kalau closure-nya, ingat
pernah belajar, tapi ya
kalau dikasih data kan lupa
ini kan
X ini bisa diakses dari luar
meskipun dia didefinisikan
di dalam dengan menggunakan var
tapi itu kan bukan function
oh iya
ini scope ya
untuk contoh tentang scope
penjelasan tentang
scope dengan red line constant
nah kalau yang
menggunakan bahasa seperti C dan Java
itu akan error katanya
karena
outside scope of X
iya
PHA juga karena turunan C++
di S6
ini
tidak error karena dia berlaku
secara global
karena if ya
kalau ini function
kalau dia function
jadi hoisting ya?
bukan jadi hoisting
tapi dia tersimpan
sebagai global variable
global variable, bisa diakses
di luar ya? pokoknya sekali
didefinisikan, berarti dia di bawah
dia kan jalannya dari atas
kebawah
kalau led dan cons
hanya di dalam
scope tidak global
jadi akan error ya
tidak bisa diakses
karena dia
hanya
berlaku di dalam
scope ini saja
ya di masing-masing block
nah kalau teman-teman mau melakukan ini
biasanya deklarasi dulu di atas
led X sama dengan 0
atau sama dengan 0
led X doang
abis itu baru disini diubah
abis itu baru disini bisa diakses
X sama dengan 1, X sama dengan 2
nah ini cuma ilustrasi saja
jadi C-style
C-style
nah ini baru closure
nah tadi atasnya ada pengaruhnya tuh
atas sedikit, scroll atas sedikit
nah in addition blablabla
closures are able to capture variable
in all these scopes
berarti disemua scope
bisa diakses oleh
bisa diakses ya
ok contoh ada name tadi
ini sama ya
ada name kemudian ada function display name
kemudian kita bisa return display name
return berarti ini return function ya
oh makanya tadi
pemahaman gue tadi kayaknya gara-gara
pelajarnya disini deh
bukan lah
mempasing function
return function ya
kayak tadi contoh kita
yang pertama banget
return function langsung sebenarnya bisa kan ya
bingung kan
make func
ya ini persis kayak contoh chat jpt tadi
gue juga dulu belajarnya dari ini
makanya berasumsi maksudnya closure ya
harus ada function
di dalam function
function di dalam function nya itu bisa dijalani
dari luar function
ini sama aja dengan init tuh
ini sama aja dengan init
cuman caranya berbeda
hasilnya sama
oh yang berbeda adalah
display name inner function
itu return
dari outer function
sebelum di execute
jadi maksudnya contoh yang baru ini
kalau yang di init tadi kan display name nya
langsung dijalani di dalam
function itu sendiri
ya yang ini yang bawah ini
kalau ini belum dikembaliin
di return function nya doang
tapi nggak di execute belum dijalani
jadi kalau di bahas
di behind the scene nya itu
dia cuma di return pointer
aja
jadi kalau misalnya kita
di console lock kan
nanti dia F hasilnya cuman F doang
yang kayak tadi kan apa tadi
multiplier ya
makanya kayak ya multiplier ya
persis kayak contoh awal dari
set GPT itu
init tapi nggak pake kurung
maksudnya ya init nggak pake kurung
nah
ini tandanya adalah sebuah function
ini yang nonton
udah makin bingung apa
makin jelas
kayaknya makin bingung deh
nah ini
berikutnya adalah contoh
make adder
oh iya
yang tadi ya
sama persis kayak contoh
event set GPT tadi
multiplier lah
add 5, make adder 5
kalau orang yang belum
tau konsep closure atau belum
menghasilkan bingung add 5 itu
dikira bakal add 5
kalau di console lock itu value padahal nggak
itu juga function juga kan
ternyata ada yang
ada yang ngikutin ya
makin jelas
jelasnya huru besar semua lho
itu sarkas
atau gimana ya
secur juga gitu
kita meneluhas secara harfiah
ya kita terima
terima kasih
tapi
ini
kayak
gini
oke ini kan
kita punya fungsi
yang menerima satu parameter
kemudian meretun fungsi
yang menerima satu parameter
kemudian itu ditambahkan
sebenernya kan sama aja kayak gini kan
function add
a, b return
a + b
atau x, y sama aja ya
kan sebenernya kurang lebih fungsinya
mirip kan seperti itu kan
cuman ini
dia bisa dieksekusi
per satu parameter
satu parameter nggak langsung dua
bener kan
ini bukannya partial ya
atau querying ya
nggak tau, selalu itu nyerah
belum nyampe situ
belum ya
coba ya
tanya aja di chat gpt lagi aja
gimana tuh ini kasus ini
coba gini
kari
makanan kari
kuri
c-u-r-r-y
istilah matematika
partial function
iya partial function
atau partial application
iya betul
bener kan
itu kari
mau dong
kari
yang di search kari makanan
nggak, saya nanya ini
saya nanya si
chat gpt
saya
cuma mau mengatakan
chat gpt-nya
di approve dari
saya pakai account company, jadinya
enak ya, nggak perlu bayar lagi
enak
ya, terus
karing means, terus kan kalau standard
function-nya kayak Mas Liza bilang tadi kayak gini
ya bener tuh
versi kuri-nya
function, function, dan terakhir
terus panggil kayak gini
dan kalau error function-nya kayak gini
why kuring
partial application, you can preset some argument
and re-use the function
kita bisa satu-an kan
iya, jadi
secara parcial
berarti
prinsip ini
kalau function di dalam function
namanya closure kan, itu yang
dimaksud dengan closure, itu kalau
ada function di dalam function
bukan, closure itu
variable-nya
bukan cuma variable Mas Liza
function yang di dalam bisa mengakses
variable yang dari luar
variable yang di atasnya
ya, apapun yang di atasnya
itu artinya closure ya, betul
warisan-warisan
bukan ya, kalau di OOP itu
kan ada apa istilahnya, inheritance
yes, yang kayak scoping
tadi sih sebenarnya, scoping
scoping ya, scoping ya
apapun entah itu variable
atau function
atau class, dia bisa akses
di dalam
scope itu
jadi kalau bisa di define di atas
sampai ke bawah-bawah
ke recursive bisa di akses
nah, kalau gitu coba
tanya chat GPT-nya
bisa nggak generate contoh
prinsip closure
ya, termasuk yang mengakses variable
itu, tapi jangan yang kita
tanpa
menggunakan inner function
di dalam function
contoh lainnya kayak gimana, soalnya
kalau di MDN kan nggak ada
gimana generate closure example
yang bukan kayak gitu tadi
yang bukan
tanpa function
di dalam function
function, di dalam function
kalau contoh yang tadi udah ngerti
maksudnya gua udah paham, dan udah bisa
ngejelasin
kenapa itu closure, mana
variable yang bisa di akses
kalau di
MDN dan lain-lain, semua contohnya
bentuknya kayak gitu
ada function yang jalan
di dalam function, yang mana kalau dipanggil dari luar kan
otomatis function yang di dalam itu
ikut, dijalankan
dengan
argumen yang disupply dari luar
kalau itu ngerti, nah coba pengen contoh lain
yang bukan kayak gitu, yang bukan
function di dalam function, tapi closure
apapun disco parentnya bisa
akses anak-anaknya
tapi nggak mesti argumen kan
variable pun bisa kan ya
beda sih, maksudnya
kalau misalnya
si Eka, kalau tanpa function ya
tanpa closure, itu
semua bisa, semua
bahasa pemograman bisa, karena
misalnya kita bikin
saya sambil show aja ya
sambil show aja
oke, kita kasih
contoh dulu yang
bukan yang Eka mau
contohnya, delay message
message sama delay
terus ada set timeout
message-nya apa, dan delay-nya
dipanggil, ini di luar function ya, karena ini delay
parameternya
set timeout kan sebenarnya kan
bisa dipanggil begini, delay message
this is closure, 2 detik
nah itu contoh
contohnya, kalau yang
contoh sebelumnya, kayak gini kan
jadi security bisa di akses
nah kalau itu kan contoh yang standar ya
nah, sedangkan kalau
kalau yang
tanpa
tanpa function ya semua pemograman
bisa, contohnya ya kalau kita kayak
function kayak gini
misalnya, langsung
grid aja kan, langsung console log
aja kan
jadi begini kan
misalnya, atau
ya kayak yang tambah-tambah tadi
kayak yang pertama ya, yang pertama tadi
nah, ini, itu termasuk
contoh, demonstrasi, prinsip
closure, atau bukan? bukan, bukan
bukan, nah ya
nah bukan, berarti mahamun
gue udah betul kan, apa, harus
ada functionnya yang membuat scope baru
iya, yang membuat dia di dalam
sebuah scope tersendiri, karena
begini pun, kalau misalnya di bahasa pemograman
lain tanpa closure
if true, misalnya
gitu ya, ini kan dalam sebuah
sebuah block ya
bukan scope ya, ini block
fungisional block
ini, ini kan tetap
bisa
tetap bisa sebenarnya, karena ya
ini, di dalam sebuah
namenya dianggap ada, namenya bisa
di access, dari dalam
sedangkan, kalau php
kamu bikin begini
gak bisa
eh, bisa gak sih, return function
function di dalam function
bisa, function di dalam function
tapi
gak bisa begini, namenya gak ada
echo name gak kan bisa
di php itu
unless variable name
unless di php
dibikin use name
use name
itu kan harus kipas
variable name-nya, explicit
ke dalam scope baru
supaya
ya kayak gini lah
kipasin lagi
kipasin
jadi, jadi kaya itu ya
prop drilling ya, kalau
di react tuh ya
hahaha
gak tau prop drilling
itu react jaman dulu, sebelum ada
react jaman dulu
yang gak pake konteks
iya, masih prop
dipasing, dipasing, dipasing
ah, itu namanya
ya cuma gak tau
pake sih, tapi gak tau
di setiap bagian UI kan
misalnya kita mau nampilin text
sesuatu, kalau user login
tampilin ini, kalau nggak
tampilin itu, nah itu kan
berarti dari luar banget harus kayak terima
terima prop, masing-masing
komponen harus terima prop
sebelum pakai state tuh
masih ada gak ya contohnya
sebelum ada state dan konteks
sebelum ada state dan konteks
nah gak, tapi
berarti kalau balik ke prinsip kursor
kalau gak ada function
di dalam function, kan dia gak bikin scope
baru ya, untuk
mendemonstrasiin contoh itu
berarti kan kayak secara gak langsung
harus ada sesuatu yang bikin scope
baru kan, di dalam function-nya
biar itu bisa digulangkan
iya, iya sih
apa?
itu udah, itu bukan scope
itu udah, itu bukan scope
itu udah, itu bukan scope
itu udah, itu bukan scope
itu kan berarti belum ada
itu udah, itu bukan scope
jadi
kalau misalnya di interview kita ditanyain
ini closure atau bukan
kita bisa dengan yakin bilang gak kan
karena gak bikin scope baru alasannya
jadi mungkin alasannya bukan karena
bukan cuma karena gak ada function
di dalam function, tapi karena gak ada
scope baru yang
gak bikin scope baru yang mana
bisa mengakses si variable A atau B
itu kan
ada gak ya
chat GPT bisa dilatih, jadi pelatih
interview beginian gak sih?
biar PD jawabnya
iya, iya menarik juga ya
biasanya, ini ya temen-temen
ada, mungkin ada
pengalaman pertanyaan-pertanyaan
interview seputar Javascript
apa sih, apa aja sih yang ditanyain
nah, jadi kayak yang
baru-baru ini, di interview
nggak, kayak yang
baru-baru ini nih kita
gak ribut-ribut sih, cuman
kita jangkir balik otak
mikir, apakah
untuk disebut closure, harus function
di dalam function, itu kan sebenarnya kalau di dunia
nyata, ya gak penting-penting amat juga ya
yang penting kita bikin unit testnya aja semua
udah sesuai sama expected atau belum
kita kan bakal lihat sendiri, kalau ada yang
kalau yang, ya maksudnya kita
pasti ngejalanin, dan kita bikin unit testing
kalau ada variable yang kita expect
ada, taunya gak ada, ya berarti harus
ngepro, harus error, ya kan
gak ada yang bakal nanya juga, ini closure
atau bukan, pertanyaannya adalah
ini jalan, jalan dengan
ini jalan sesuai expectation atau
nggak, ya cuman, maksudnya tanggung jawab kita
harus bisa ngejelasin aja
ini ada contohnya nih, mau coba nggak
pertanyaan Javascript
fundamental
iya
iya, yang tentang closure lah, jangan
tentang lain-lainnya, topiknya lagi closure
iya
nggak apa-apa, nggak apa-apa
kan udah jelas kan ya, closure
kalau teman-teman ada pertanyaan seputar
closure boleh ya
boleh ditanyakan
hoisting, oh beneran ada closure ya
iya
hoisting
oh paling sering ya
iya maksudnya
paling umum, salah satu yang umum
ini kalau A apa
isinya
kalau A
ini
kalau konsolok A apa isinya?
nul, nul, nul
kalau konsolok B
konsolok B
nul
masa sih, coba
undefined, karena hoisting
loh kan belum didefined
dimanapun
tapi kan ditarik ke atas
kan istilah hoisting itu kan di
variable yang dideklarasikan dibawa ke atas
semua, jadi ada kayak, ada solo
ada let A, let B, gitu di atasnya
di paling atas, bener gak?
oh kalau global
itu namanya hoisting
B itu undefined
kalau
konsolok B
dia malah jadi ini, reference error
reference error
kalau yang A enggak
apa bedanya yang A sama yang B
oh iya, kayaknya A itu
kalau far itu
langsung masuk global ya
langsung hoisting
dia langsung masuk ke atas
ya, dia langsung masuk ke atas
tetapi belum didefinizikan
tetapi tidak error
itu temporal dead zone namanya
oh iya itu, pernah belanja
kan namanya lucu
namanya kayak nama buin hotel gitu
kalau konsolok B
fatal error
karena reference gak ada
dia gak hoisting
karena kalau konsolok B itu harus sesuai sama
ya beneran, dibaca atas ke bawah
nah nih, closure
baru kita jelasin lagi
double 5
5x2=10
5x2 yang tadi kan
iya betul
ini bukannya secara intuitif
udah ngerti ya
X itu akan masuk ke
ke dalam fungsi yang kedua ya
kalau gak tadi kita bahas
mungkin gue aja bisa salah
nggak sih, kelihatannya
pertanyaannya bukan
perkara bisa jawab
5x2=10 cuma harus jelasin
yang penting
ya itu yang tadi kita bahas itu
selain cuma jawab
harus bisa jelasin mas Riza
iya ngerti
nggak, cuma kalau ngeliat kode ini
mungkin yang belum
terlalu mengerti pun bisa menebak
setidaknya bisa menebak bahwa
X itu adalah dari atas kan
tapi kan
ada mosek kayak yang tadi kita bikin
jelasinnya itu lo multiply
dalam kurung 2, dalam kurung 3
nah itu kalau yang belum tahu
pensip kosur kan toh
dalam kurungnya 2 sih
mau dilanjut nggak nih
karena udah beda topik
oh dis
ada pertanyaan nggak
pertanyaannya bagus nih
mas python, mas python nanyainya
javascript
iya makanya baru belajar, kan udah belajar
tapi kalau udah jaga javascript
ngomongannya ganti jadi javascript
oh iya, python.js ya
tapi bingung kapan makenya
kadang-kadang kita malah kebalik
kadang-kadang kita malah kebalik
kita udah sering pake, tapi nggak tahu maksudnya apa
iya nggak tahu istilahnya apa
ini kebalik ya
gimana tuh
kira-kira, kapan makenya
kalau butuh
kalau butuh
tidak menjawab ya
kalau function
function itu
ya saat butuh di ini
apa, gunanya function kan
reusable
dan
dry, gitu
dan bisa dipake
bisa di reshape juga bisa
dengan higher
order function
ya, tapi kan
ini contoh doang nih function
mungkin ya macem-macem pensip-pensip tadi
hoisting lah, temporal date zone lah
bingung kapan pakenya, maksudnya isunya
kayaknya ya ini apa
tanya-jawab sama LLM
juga membantukan apa
use case in real world
saya sudah
mempelajari prinsip-prinsip
ini, ini, ini, tolong kasih ide
apa, gimana nerapin di
real world application
kayaknya
secara alami akan
kepake
kalau kita sudah
sudah bikin
aplikasi, sudah bikin project, sudah terjun
ko project, lama-lama
sering baca
sering baca kode-kode
dari mungkin
dari repository
atau ya pokoknya kode orang lah ya
baik itu di perusahaan
kita, perusahaan yang kita
kerja di situ, atau
kode open source, gitu
secara tidak langsung, nanti akan
terekspos lah
karena kalau kita
lihat dari awal, oh pokoknya saya
harus pakai klosur gitu, agak susah ya
karena belum tentu cocok juga use case-nya
gitu
tapi biasanya bakal kepake sih
sebenarnya, pasti kepake kan
iya, cuman nggak, nggak dipaksa
harus pake itu, gitu kan
bukan, nggak
mungkin kita aja nggak mengerti itu namanya
klosur, kita nggak
itu yang paling sering dan
cepat atau lambat sih bakal ketemu ya
cuman kan ini kasusnya misalnya
baru belajar
biar nempel lah, mungkin ya, biar keinget
kalau biar nempel ya
sebagai salah satu contoh ya
saya pakai
code igniter
zaman dulu ya, pakai-pake aja itu
misalnya itu contohnya, itu saya pakai
MVC dan
selalu pakai
CI apa, CI apa, gitu
baru tahu, setelah belajar lebih lanjut
baru tahu nama metodnya itu
adalah singletone
singletone, padahal saya pakai
gitu, tapi nggak tahu itu namanya
singletone
contohnya
nah, ini mau dilanjut ke
teka-teki ini atau kita
stay to the topic
tanya jawab aja, tanya jawab
ada beberapa contoh yang
menarik, itu dong
pertanyaan chat GPT, coba kasih contoh
practical
real-world project yang menggunakan
carrying, eh carrying
closure
yang di MDN ada nih
contoh-contoh yang
apa,
related sama dom
maksudnya, nggak rusa
apa, relevan buat
front-end
yang mana
di practical
OOP
encapsulation
JavaScript
didn't have private field
terus?
So, biar
hal-hal yang private bisa tetap
didalam create bank account
tanpa di expose keluar, tapi
bisa
bisa ngedit-ngedit
segala macam dengan memanggil
si apa tadi, withdraw
something itu, eh create
bank account
create bank account itu bisa
written-nya itu bisa
written itu object ya
bukan written function ya
yang ada 3
function
deposit, withdraw,
get balance
betul, jadi yang
balance-nya tadi, kalau account deposit
nanti bisa
100 tambah 50
jadi, get balance
terus nggak bisa langsung diakses
karena
led itu private variable
private, jadi hanya bisa diakses
dari dalam fungsi, kalau dari luar
bisa
karena far dibawah
di atasnya
ya, dipindah
ke atas kan
iya
even listener that remember state
setup button
button add
save button
id color
nah itu contoh
oh iya, oke
jadi isi color ini
ke bawah ya
ya, kita sering bikin
debounce-debounce kan, kecuali
ana underscore
atau ana apa itu yang pakai
underscore ya
underscore kan
loadash, loadash
loadash, nah, loadash debounce
sama loadash throttle, kecuali anak
yang pakai itu kan, tapi
behind the scene ya begini isinya
ini kayaknya mau pakai
rex, mau pakai vanilla javascript
kalau bikin search input
yang auto-populate
itu pasti harus dibounce, kalau nggak
jebol api you
iya, karena dia nge-hit
terus menerus ya
modul petard ini
ini sebelum ada
is modul ya
kalau kita mau
reacook, nah, siapa yang sering pakai reacook
nah, ini contohnya
contoh real
dunia nyata
closure, count itu
bisa dipakai di dalam fungsi
handle click
iya
walaupun tidak
dipassing
sebagai variable
iya kan
dipassing sebagai parameter
atau argument
dia tetap bisa dipakai
di dalam function
every render, oh
yang dia maksud, jadi kayak tetap
function di dalam function, karena every render
setiap si
function component itu di render
jadi membuat closure baru
dari value count itu sendiri
nah, yang dibalikin adalah
set count-nya untuk
memodifikasi value-nya count
oh, benar
oh, ini pertanyaannya makin banyak
bagus-bagus, lanjut-lanjut
iya, bagus
kalau ada yang mau nanya, silahkan
ini malah ditawarin bikin mini project
demo dong
bagian material javascript apa
yang paling kursial untuk bisa membuat
website yang fungsional
maksudnya website-nya berfungsi gitu
kita tanya jawab itu, siapa yang tau itu logo apa
ha? logo?
itu itu
sama mas Hanzone L
Biohazard
ada gamenya
oh, ada game ya
apa? Fallout, Fallout
bukan? bukan
game di Andoin yang buat virus-virus
bakteria, itu apalah namanya
oh, itu
saya tau
iya, iya namanya apa? ngasih tebakan
lupa, lupa, lupa
tar, tar, tar
bentar, bentar, tunggu, tunggu
jawab dulu ini pertanyaannya
tuh, ada black ink
black ink, nah itu dia black ink
yang punya
yang punya yang jawab
gak main, gak main
bagian material javascript apa yang paling kursial?
fungsi, variable
gak ada satu bagian yang paling kursial sih
ya asal basic-nya
fundamental-nya udah
nguasain semua, kayaknya bisa ya
iya fundamental-nya apa aja yang dibutuhkan mungkin
fundamental apa aja
fungsi, variable
looping
ya kan? kondisional
semua dalam algoritm modern
pemanggramannya itu
iya, iya
isinya cuma
urutan
dari atas sampai bawah
iya
kondisional, looping
udah, fungsi itu adalah
kondisional, looping
variable
kondisional tadi
udah ya, iya
struktur data, struktur data
struktur data, struktur data
javascript juga
asing, bener, bener
asingkranus, harus dipelajari
callback asingkranus itu penting kalau untuk javascript ya
ini deh coba
web.dev/learn/javascript
kayaknya udah cukup representatif deh
nah sambil dibuka
wait, wait, wait
nah coba, ini ya
nah kan introduction, scroll ke bawah aja
data types
number, string boolean dan lain-lain
boolean, null undefined
back-end, symbol, variable
comparison, control flow itu kan
control flow kayak if dan else
comparison itu
comparison itu if dan else
logic ya
control flow
sama if dan else juga, fungsi
function
terus ini buat OOP
return buat function juga
dis ini yang ya
lumayan menyebalkan
walaupun sekarang udah jarang dipakai juga ya
objects
objects, disini maksudnya objek literal
struktur data ya
yang pakai kurung-kurawan
semua ya
bukan OOP kan
disini maksudnya kan ya
bukan, bukan, objeknya sih
data types ya
struktur data
struktur data
jadi bukan OOP
property, accessor
inheritance, distribution
itu baru OOP
cuma kelihatan ini
gak mendalam banget sih, cuma maksudnya kan
harus tau prinsipnya itu apa
kayaknya untuk bisa bikin
aplikasi web
atau website ya
sampai disini
ya udah, abisin itu
aja sih ke bawah, maksudnya apa
yang penting kalau pernah liat
sekilas, soalnya ke bawah
collection kayak array gitu
array set ya
ini ya, collection
index collection ya
terus apa ya, kayak
class atau OOP walaupun gak ngerti
banget mendalam kan, kalau kita
pakai SDK external misalnya
mau
pakai, kalau kan suka ada new apa
kita harus instantiate objek
gitu kan
new something something
far itu
sekarang kurang praktikal, lebih
light aja buat define variable, iya
sekarang udah jarang dipakai, diusahakan
kalau bisa jangan, kecuali
tergantung
kalau mengerti ya bisa aja
boleh-boleh aja
definition variable itu
bisa naik ke atas
kayak tadi ya
cuma jangan dicampur sih, sebenernya
kalau udah pakai ES6, ada light dan cons
itu kan, maksudnya ada itu karena
ada behavior yang spesifik yang pengen
diraih ya, ya itu tadi
maksudnya gak ada hoisting, jadi
gak bingung, pokoknya dari atas ke bawah
kayak sacot
kayak gitu, kalau dalam project itu
udah pakai konvensi
seperti itu, ya udah jangan dicampur far lagi
sih, mendingan, kecuali pakai
codebase lama yang emang semua
yang lain juga pakai far, ya udah pakai far
gak apa-apa sih, asal tahu aja
behavior-nya, bakal
kayak gitu
ya
lumayan jarang
lihat simbol yield generator
function di codebase production, mungkin
saya mainnya kurang jauh
ada unpopular fitur JS
lain
apa ya?
simbol, ini simbol ya?
simbol itu apa?
simbol ini
menarik, karena
kita bisa bikin
seperti array, tapi isinya
yang unik, ya, bisa menggunakan
simbol, alat bantunya
ada contohnya gak?
itu simbol
dash
mana, ini
bukan, contoh yang
gak ada ya, shared symbol
gak ada yang kayak
namanya yang dari array gitu, atau dari
oh dari objek ya
objek ya
proc simbol
apa ya, kalau yang
kalau yang jarang
dipakai, maksudnya jarang dipakai
di developer land yang
kita bikin, kita bikin dom atau
nulis JavaScript biasa, tapi
dipakai di framework itu
label kali ya, baru tahu ada
konsep label
gara-gara spell
gara-gara spell
tiba-tiba ada dollar
titik 2, oh ternyata
fitur JavaScript
yang namanya label
ini unpopular sih, tidak popular
baru dipopulerkan oleh
spelled ya, gara-gara
dia pakai dollar ya
mana dia label statement
ini ya, ini bukan?
loop 1, loop 2
titik 2, nah itu bisa apa aja
cuma kalau di spelled maksudnya
convention-nya dollar kan
itu buat indikator reaktif
kalau break
kita break-nya mau kemana nih?
procsi
procsi ya, procsi
weak map, weak set
procsi juga lumayan ada beberapa kali
muncul sih, procsi
reflect api
reflection, reflection
kalau di PHP namanya reflection
reflect
ya reflect api
buat apa nih?
apa itu, nggak tahu
buat merefleksikan
selama ini kita hidup
berguna buat siapa aja gitu
forwarding behavior
in proxy, oh ada hubungan nih sama proxy ya
oh, proxy
saya jarang pakai
jadi ya
kan pertanyaan apa aja lagi tadi yang
yang populer
oh ini asil pertanyaan
chat gpt ya?
bukan, pertanyaan penonton
pertanyaan itu
dioper ke chat gpt
dioper ke chat gpt
enak sekarang ya
apa-apa pertanyaan chat gpt ya
ini
balik lagi ya ke label ya
kayak go to ya
balik ke mana gitu ya
kayak basic
ada yang ngalamin ya ke basic
cara mengakses
pointer berarti ya
saya pakai ini dulu pointer
di C++
oh iya bisa ya
nggak tahu
bisa
bisa ke mana gitu
bisa dipaksa
menuju ke mana gitu
exek persilnya
kalau yield
sama generator ini
dimana ya
dipakai, terakhir
saya ingetnya
menggunakan yield generator itu
pada saat menggunakan framework namanya Koa
oh Koa itu
js kan
sayangannya express
abis itu selain express tuh
sayangannya Koa kan
bukan sayangan, Koa itu adalah
js nya express
jadi mereka eksperimen dulu di Koa
kalau berhasil udah stabil
di push ke express
jadi versi
kanarinya
disini kalau nggak salah dia pakai
generator
kalau nggak salah nggak kelihatannya
yield dan generator itu
bisa juga untuk ini sih
mempercepat web performance
yes
ada execution
sebuah function yang
cukup lama
dia bisa kita bisa pause dulu
execution nya jadi
si apa namanya
si ENP lah ya
jadi kayak user click itu tetap
bisa jalan
salah satu contohnya itu
yang di, ntar saya kasih linknya ya
yang game yang saya
yang saya ini tuh, kemarin
inget nggak? yang saya game
saya
saya tunjukkan
waktu
oh si demo nya dari Chrome
itu ya
ini dia
contoh nyata
ini Mas Liza bisa
ini aja lah saya tunjukin
contoh nyata ya, yang pakai
dimana penggunaan yield itu bisa
scheduler yield
bahasanya
Indra, ini nggak perlu dijawab ya
pertanyaan paling gede
discussion of the day tapi
pakai itu dong, pakai sound effects
buat dibikin sound effects
oh iya apa ya
oh iya boleh, jadi bukan
java spasi script
ini penulisannya juga udah salah ya
java script itu
ini contohnya
contohnya apa namanya
contoh nyata pakai yield
tapi di scheduler ya
jadi ini kan ada
supaya animasi kan pakai
animation frame lancar ya
tapi begitu saya
ini nih, saya
taro rintangannya disini nih
tuh, langsung stop dia
nah sebenernya ada rintangannya nih
jalan, lihat nggak tadi
si, si
ada VLC ya, ada VLC
oh iya VLC ya tuh
nah kalau saya enable
dan reload
nah kalau saya enable dan reload itu
dia akan menggunakan scheduler yield
jadi kalau saya klik disini
tuh, masih patah-patah tapi kalian bisa
lihat kan ininya
karena ada posnya
jadi dia tetap bisa
ngerender
saat proses yang
jadi bisa
ada proses yang
besar, terus di yield
sampe proses yang lain
selesai, jadi dia bisa nunggu dan
kembali lagi
yieldnya itu berarti nunggu
apa, proses yang ditreadnya
harus selesai dulu, tapi kan
si yieldnya nggak bisa
iya, tapi saat request animation
frame doang ya, ini contohnya disitu sih
scheduler yield
bisa, temen-temen bisa belajar
lebih lanjut apa maksudnya scheduler
yield itu
macam view berarti ya
terakhir lihat yield dan function generator
ada di Redux Saga
saya belum main-main Redux Saga
kurang jauh saya main
kurang jauh
ya mungkin juga sih
bisa jadi, bisa jadi
sebentar
nah kan bener
kalau
kalau dicari
ini
QJS itu pakai generator
contohnya ada di
mana dia
ini, dia pakai fungsi generator
oh jadi bintangnya
itu ya generator
iya
setiap generator harus ada yieldnya
iya
dia seolah-olah return itu
return dari generator itu
adalah yield seolah-olah ya
kayak asing
dan await
await, asing-await
asing-await, asing-await
nah generator ini justru
populernya itu sebelum asing-await
begitu asing-await orang dah ini
cuman bedanya adalah
kalau asing-await
kan
gimana ya, kalau
generator dia bisa kita
request
saya mau next value
dong, gitu
baru dikasih
iya maksudnya by request kan
by request ya
by request
jadi kalau nggak dipanggil ya dia diam aja
iya, dia nggak
return apa-apa sebelum dipanggil
bingung kan
tambah bingung kan
bingung
makin lama makin bingung
contoh
misalkan
ada four di dalam
function, ada sebanyak
3 kali ya, 0-2 ya
0-2 berarti 3 kan ya
nah, pada saat kita panggil sum
ini, kalau kita konsolok sum
dia nggak akan return hasilnya
tapi kalau kita sum.next
dia akan panggil pertama kali adalah
3 ditambah
5, 8
selesainya belum
ya, next lagi
berarti untuk nilai yang kedua
yaitu 5 ditambah
1
eh, bener nggak
eh, bukan i ya
a ya, a ditambah
r, r itu apa, r itu 3
5 ditambah 3, ditambah
3 lagi ya
yang kedua itu gimana
8 tambah 3 kan
8 tambah 3, bener
ya itu
nama tambah 3 doang
terus abis itu
next lagi
14
udah selesai belum
masih jalan nih
4 nya, begitu yang keempat
looping nya 3 kali
nah
ketika yang keempat baru
value nya nggak ada
tapi selesai
ini kayak stream ya
stream juga gitu kan
ada kapan selesainya kan
kita dikasih tau ya
cuma ini
based on loop
yang kita define sendiri
di dalam generator nya
kalau stream kan
isi data
bisa begitu
iya
ayo, apa lagi
wah, nur holit, halo nur holit
terima kasih
jadi member
eh, udah nih, habis nih
kita ujian dulu
mau nggak? apa?
ujian apa? nggak, nggak mau
pertanyaannya sih
sensitivity
ujian yang tadi
iya
nggak mau
nggak mau, nggak, daripada itu
mendingan kita pilih
topik buat minggu depan
eh kita belum bahas hoisting, atau
closer aja, udah kan tadi
udah kan, cuma
hoisting belum
dikit doang, hoisting
ya dikit doang, ya sudah lah, next time aja
udah sejam sih, udah sejam sih ya
japet ya
oke, sebelum mudahan
kita diskusi topik
dulu ya, temen-temen pengen
minggu depan topik apa
boleh di chat juga boleh
sebelum kita voting
atau kita veto
munculin dulu lah link
github discussion nya
kalau ada yang tidak ada
di github juga boleh
dokumentasi, kalah mulu
dokumentasi, nggak ada yang mau bikin dokumentasi ya
temen-temen sekarang ya
pake AI lah
sekarang semua
pake AI ya
ini Nurkholid nih
nanyain Http1, VS Http2
VS Http3
kayaknya pernah disinggung deh
Http1
udah sih, iya udah
iya
ingat nggak yang Http3
gue sebutnya kayak yang
yang kalau kita naik kereta
kereta api cepat
ada 2 menara
yang kita lagi pake HP
jadi
kalau kita pakenya TCP
itu akan
ilang dulu, ngedrop dulu
iya, ngedrop
dissolve dengan pake Http3
UDP
UDP ya
wah nggak ada yang mau
topik, topik, ada yang mau
sombong topik nggak?
nah itu mau hak veto
katanya ya, hak veto
mau hak veto, hak veto apa?
signal, mau bahas signal, saya penasaran sama signal sih
boleh
signal-signal boi, signal boi
cuma kita semua pasti nggak ada yang tau
tentang signal kan? iya ya
nggak ini ya
beda situs-beda situs
signal Javascript maksudnya
iya kan ini yang
awalnya kan
SolidJS
solid ada signal, angular ada signal
diimplementasi
sama yang lain
terus sekarang Javascript udah
mulai memasukkan signal
sebagai API-nya
proposal atau statusnya
jadi penasaran
pengen tau cara kerjanya aja
ya boleh deh biar kepaksa belajar
ini juga
klosur kepaksa apa
nggak kepaksa belajar sih, dulu pernah belajar
terus lupa lagi
cuma gara-gara bahas ini jadi
inget lagi, yaudah signal biar kita
belajar loh
kalau nggak salah
kalah lagi dokumentasi
kalau nggak salah
spelt yang baru
yang run itu juga
menggunakan signal ya
gas signal
yang run
rendering reactivity paradigm
signal observable
ya observable yang jaman dulu ya
yang RxJS
RxJS
masih ada reactivity
masih lah
ada ada, dianggular ada
silin yang
promotin
ini masih perlu
masih perlu
voting
voting apa gas, gas aja ya
gas ya
signal
akan dibahas
minggu depan
nggak ada
minggunya disini
tanggal berapa tuh
26+7
33
tanggal 33 Agustus
2 September
2 September
2025
oke
cukup cukup
sepertinya kita sudah lelah
siapa signal belajarnya pake
GVT atau sejenisnya
atau Jemenai deh
Jemenai, iya tanya kalau lagi perlu
on demand aja
tapi belum pernah belajar yang sampai
kayak terstruktur banget
pengen belajar apa ya
bikin AI agent dari awal
yang bikin curriculum gitu
belum pernah nyoba
padahal sekarang harusnya udah bisa kan
ya belum sempet
nggak sampai sejauh, cuma saya sering pake ini
kayak untuk nanya-nanya hal dasar
tapi banyak membantu loh kalau nanya-nanya
sangat membantu ya
sama kasih contoh
contoh B
contoh C ya kayak tadi
yang bisa disebut klosur mana
sih kalau nggak ada inner functionnya
disebut klosur, kalau bisa mana
contohnya dan apa ya
demonstrate mana variable yang
bisa diakses misalnya ya lebih ke
kalau cuma definisi kan sebenarnya
Google biasa bisa ya, cuma kalau buat
probing, buat explore
prinsip-prinsipnya itu berguna banget
sih
nah iya persis itu tuh
kayak komennya Mas Willa persis
teman diskusi
teman diskusi betul
iya
tetap harus
di cek juga kebenarannya ya
jangan langsung percaya ya
bahaya, kadang-kadang
suka halu, apalagi konsep-konsep
yang baru ya mungkin dia nggak tahu
karena dia nggak mungkin jawab saya tidak tahu
oh bisa
bisa dipaksa
di sistem instruksi
oh jadi kalau nggak tahu
bilang nggak tahu gitu ya
terus selalu
misalnya ada sumber banyak
dan berbeda-beda include link-nya
ya biar maksudnya biar kita
bisa investigate sendiri
tapi kadang-kadang link-nya juga nggak
bisa karena dia halu aja dia bikin-bikin
sendiri kadang-kadang ya
sekarang udah ada mendingan sih
udah mendingan ya
udah nggak ngarang link ya
kalau halu udah nggak mungkin
diilangin, cuma
kalau dulu tuh parah banget ngarang link-nya
ya minimal
sekarang udah mendingan ya
ada yang pernah
nanya AI
kok pas plus komen-komennya
ada, ada, ada
ada
iya, ada
kan pernah ada yang
nggak tahu ya ini benar atau nggak ya
karena kan itu bisa dimanipulasi juga ya
ada yang
screenshot
skripsi
yang ada tulisannya ini apa
text ini digenerate oleh ini
of course here is the
yang ada awalannya gitu loh
tentu
ini lah jawaban untuk blablabla
atau kadang
yang sering gue lihat itu bukan coding sih
bukan decoding, cuma apa review
Google Map kan suka ada kan yang kayak joki
buat apa
ningkatin review bisnis di Google Maps
itu kayak auto generated
jadi suka place name, tau kan
ada square bracket misalnya generate
positive review about coffee shop
nah terus ada square bracket
coffee shop name, itunya nggak diganti
sama nama tempatnya
iya, iya, iya, iya, oke, oke
oke kalau gitu cukup ya temen-temen
terima kasih banyak buat
semua interaksi dan komentarnya
kita ketemu lagi minggu
depan, mudah-mudahan
yang kita bahas malam ini tidak
tambah bingung, tapi tambah jelas
semoga berguna, kita besok-besok
inteku, kerjaan
inget episode ini ya kan
inget kita, ya inget kita
terus ceritain
inget kontennya tadi
inget kontennya, terus
ceritakan
saya ditanya tentang closure
terus saya jawab, terus jawabannya salah
tapi kalau jawabannya salah kita yang salah berarti ya
apa tuh
sebelum tutup, kita kan
pernah mau bikin ini tuh
bikin, apa tuh
episode halloween
sudah mau halloween dulu, oh iya, satu suro
kan ini
episode satu, ya kan
cerita horror kan
cerita horror, cerita horror ya
jadi kita kan harus mulai
kumpulin, bikin
guitar discussion, kita sebar-sebar dan kita mulai
promoin tiap episode, ada, ada
kayaknya di, ini ada deh
cuma kayaknya kita harus nyediain
kita nyediain mailbox
atau semacamnya lah, kalau misalnya
google form, apa google form aja
google form yang sederhana, jadi gak perlu login
ya boleh, ya boleh lah
ok, udah mulai kita
promote aja, jadi kalau temen-temen ada
cerita horror, nanti kita bacain
ya cerita horror saat
dikerjaan, jadi ini bukan
cerita horror
cerita horror beneran
cerita horror, saya delet
production database
itu paling sering tuh
apalagi dunia file coding
iya, yang berhubung dengan AI
tiba-tiba kodenya dihapus gitu kan
ada full request otomatis
dimana gitu kan, ya yang horror-horor
atau diberikan IPI key-nya
ke link
atau jadi .env
kita mengerikan
cerita seram
.env-nya kepus ke production
eh kepus ke repo
node modulesnya kepus ke repo itu udah biasa ya
zaman dulu yahoo pernah private key-nya
di expose
itu kan horror ya
horror-horor, yang horror-horor lah ya
apa, API key, open AI
kepus ke repo, terus
dipake, di abuse ya
ngeri banget tuh
tagihan
iya, tagihan juga termasuk ya
misalkan, pakai salah satu cloud
tiba-tiba
itu juga horror sih
iya, jadi inget, saya punya horror di situ
nanti saya ceritain
iya, horror tagihan
wah, saya juga ada tuh
pengalaman
horror tagihan
hahaha
belum kita belajarnya
on the spot ya
halloween itu tanggal berapa sih
kita satu suruh ya
satu suruh berapa
tanggal berapa, gak tau
kalau halloween itu kan 31 oktober
satu suruh, tanggal berapa ya
tanggal satu suruh
15 juni, 16 juni
udah lewat
yaudah, ikut aja ya
31 oktober
yang paling dekat
selasa klion, gak ada
selasa klion
hah?
kan biasanya jumat klion
karena acara kita selasa, jadi selasa klion
selalu selasa malam
ya pasti ada sih, cuma
gak serem, gak ada konutasi
31 oktober itu pas hari jumat
paling tanggal 28 oktobernya aja
kita main
pokoknya kalau udah ada cerita
yang di submit, kita inilah
kita mau itu halloween
atau gak, pokoknya
pokoknya cerita horror
kita pakai kostum gak
gak usah ya
kostum serem
kostum serem misalnya
apalah
surat
I delete database
and production
itu salah satu
apa namanya
salah satu cara untuk menjadi
senior developer
kalau belum database production
belum jadi senior
saya delete gak sih, ngedrop juga gak
cuma update lupa aware aja
itu pernah
ok?
cukup?
ditunggu ya cerita horrornya ya
cerita horror, dan mungkin
sekarang sudah lucu ya, kalau dulu
beneran horror
dulu nangis
nangis sampai setengah malam
panik
oke, kita ketemu lagi
minggu depan dengan topik
horror beda, selamat malam, sampai jumpa
bye bye
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini kita akan membahas tentang berbagai topik fundamental JavaScript. Tentu saja bersama Ivan dan Eka. 🔔 Akan mulai mengudara pukul 20:00WIB ya. Yuk mari diramaikan! Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
8 Mei 2024
Ngobrol dan Diskusi Bebas
Episode ini membahas topik-topik seputar dunia pengembangan teknologi dan karier. Diskusi dimulai dengan pembahasan meng...
10 Jul 2024
Ngobrolin State of JavaScript
Episode ini membahas hasil State of JavaScript 2023 survey yang baru dirilis, memberikan gambaran komprehensif tentang l...
5 Feb 2025
Ngobrolin Video Player
Episode ini membahas perjalanan Imbre Nagi, seorang Cloud Engineer yang berbagi pengalamannya dalam mempelajari front-en...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .