Ngobrolin OOP di JS - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Ringkasan Episode
Bantu KoreksiEpisode ini membahas Object-Oriented Programming (OOP) di JavaScript secara mendalam, dimulai dari konsep dasar prototype, class, inheritance, hingga perbedaan antara paradigma OOP dan fungsional. Host Ivan yang sedang berada di Yunani dan pembicara lain membahas artikel dari Kensho.dot yang membandingkan penggunaan class dan function, termasuk kelebihan dan kekurangan masing-masing pendekatan. Diskusi juga menyentuh tantangan JavaScript yang sering disalahartikan karena sejarahnya yang dibuat dalam waktu singkat (10 hari) oleh Brendan Eich untuk keperluan sederhana di browser, namun kemudian berkembang menjadi bahasa yang digunakan di berbagai platform. Topik lain yang dibahas meliputi masalah `this` context yang sering membingungkan developer, penggunaan private properties dengan hashtag syntax, module pattern, serta perbandingan performa antara penggunaan class dan object literal. Episode ini juga menyinggung tentang masa depan JavaScript dan bahasa-bahasa yang meng-compile ke JavaScript seperti TypeScript, ReScript, dan PureScript, serta tantangan backward compatibility yang harus dipertahankan oleh JavaScript karena digunakan di berbagai browser.
Poin-poin Utama
- •JavaScript awalnya diciptakan oleh Brendan Eich dengan pengaruh bahasa Scheme (functional programming), namun dipaksa meniru sintaks Java untuk kepentingan marketing Netscape
- •JavaScript itu multi-paradigma - bisa functional, OOP, atau prosedural, bukan murni OOP seperti Java
- •OOP di JavaScript itu prototype-based, bukan class-based seperti Java atau C++
- •Sebelum ES6 (2015), JavaScript belum memiliki keyword `class` - orang membuat kelas menggunakan function dan prototype
- •Keyword `class` di ES6 sebenarnya hanya syntactic sugar - di belakang layar tetap menggunakan prototype-based approach
- •Masalah umum di JavaScript OOP adalah penggunaan `this` yang konteksnya bisa berubah tergantung bagaimana fungsi dipanggil
- •JavaScript banyak memiliki keanehan karena harus menjaga backward compatibility - kode JavaScript zaman dulu harus tetap bisa jalan di browser modern
0:00Hai
0:00kita kembali lagi di jam 8 live lagi jamnya kembali ke jambatan
0:28jam 4.00 ini Ivan lagi di kampung ya Iya gimana kondisi kampung di sana ya sepi kuliah
0:39aduh enak sekali boleh dong boleh dong di di Spiel ini kampungnya dimana nih ini lagi dimana
0:48ini lagi di lagi di lagi di eretria lagi di ini ya lagi di apa namanya Labuan Bajo bukan
1:01ini lokasinya lagi di
1:07ini lagi di Eretria lagi di Yunani Grace Oh Wow jauh sekali sore Oh ya mengunjungi kakek
1:22sebenarnya mau ketemu sama tante Athena sih Athena iya silaturahmi sama tante
1:31Oh kalau kalau di sana eh sebelum ke Atena kan sempat ke Turki ya Iya sebelumnya sempat
1:42ke Turki seru banget tuh disuruh ikan berasa enggak ini apa Ramadan sama lebaran berasa
1:48enggak sih berasa banget berasa karena pas kita disana tuh di kena Idul Fitri kan kena
1:55hari raya nya gitu ya kita dan gua semuanya sengaja mengunjungi belum Moskow Hagia Sofia Hagia Sofia
2:05belum ya itu like lagi jam sholatnya tuh kelihatan banget tuh semua penutup Hagia
2:14Sofia nya jadi habis sholat oke ya lami banget itu sempat gua video-video
2:25jokolan sama istri dia komen yang pertama kali bajunya hetero banget ya maksudnya jomplong banget
2:35ada yang style Eropa ada yang style Asia Asia ada yang style mediteran mediteran jadi kayak
2:46semuanya misalnya kalau dibilang kalau dulu sempat ya Jogja itu kan kota belajar kayak kita bisa
2:55ketemu-ketemu orang dari seluruh Indonesia Jogja biasanya ya kalau kita ke Istanbul itu serasa kita
3:04lagi kayak berkunjung satu-satu kayak seluruh orang di dunia itu ada di itulah hal ini ya
3:09di Turki mereka menyebutnya hub of the world karena mereka batas Eropa Asia Afrika Mediteran
3:23Afrika semuanya ada di situ Iya mereka itu sebenarnya secara geografis kan lebih ke Asia
3:29kan tapi mereka enggak mau kan mereka maunya Eropa kan mereka ikut itu bolanya karena secara
3:36secara ekonomi mungkin mereka lebih terangkat mengatakan Eropa iu-iu juga kan makanan-makanan
3:45yang jelas-jelas enggak ada ketupat enggak ada ketupat kelapa baklavanya enak banget
3:59kalau semprot nyobain itu enggak es krim yang dibalik-balik itu
4:04sempat cuma waktu gua belinya gua bilang gua nggak mau dimainkan ya dia
4:12justru isinya jadi ciri khasnya tapi kan kesel ya sudah bayar masih dimainkan gitu
4:23kalau anak boleh itu kan kayak ngebully ya udah pengen terus tiba gitu akhirnya ada yang kesel nggak mau lagi jadi trauma sama iskrim gitu ya kasian banget
4:38ngambek iya iya iya ini way sebelah belajar unit testing juga pakai istanggul kode coverage
4:51ya ya ya tadinya kan kita mau boin materi itu kan tentang coverage kentang
Lihat transkrip lengkap
5:03Ivan udah nggak di udah nggak di Istanbul lagi kita memang garing ya ini kita lagi
5:14ini ngobrol santai aja ya apa catch up dengan apa habis liburan ini teman-teman
5:19Udah pada aktivitas lagi belum ya?
5:22Hari ini pertama atau kemarin?
5:24Mulai kemarin kali ya?
5:25PNS udah pada masuk belum sih sekarang?
5:27Udah pada masuk ya
5:29Atau ada yang masih di kampung halaman?
5:32Ada yang masih di kampung halaman mungkin boleh
5:34Comment-comment
5:37Awas extenditnya jangan lama-lama
5:40Nanti di permanen
5:41Atau mungkin udah wefa dari kampung gitu enak ya?
5:45Nah itu bisa
5:46atau ada yang ini ya harus balik karena baru pindah ke coba wajib hari pertama hari pertama
5:58hari pertama masa tengah bulan nggak mungkin ya mungkin aja diperolehnya ya onboard ini
6:08lagi ini sebenarnya bukan jalan-jalan kampanye retret kan ya sebetulnya kerja berkedok jalan-jalan
6:14atau sebaliknya, jalan-jalan, berkedut, kerja
6:17inilah pers
6:19remote ya
6:21pers kerja remote ya
6:23disini
6:25kerjanya lebih
6:26lebih intens
6:28karena ketemu langsung
6:30jarang ketemu langsung
6:32bahkan kita kemarin
6:35set up office hour
6:36kayak diskusi bersama
6:39kayak handling tiket
6:41terus kemudian tiketnya didiskusi
6:42Jadi justru ngambil tiket yang paling komplikasi,
6:47selesaikan bareng-bareng saat itu juga.
6:49Bahkan kalau ada orang infrastructure-nya,
6:53kan orang infrastructure-nya datang juga kan.
6:55Jadi kita tarik tangan orang infrastructure-nya,
6:57kita punya masalah ini, terus.
6:58Begini-begini, akhirnya kayak nyari solusi sama-sama,
7:02terus bikin action item-nya rame-rame,
7:04terus kemudian bikin tiketnya,
7:06enggak banyak hands-on tapi lebih banyak diskusi langsung the point karena kalau
7:16kalau asinkronus wakan biasanya ini ya nunggu ada ada ada singkongan timenya
7:24kan kalau ini kan tarik orangnya yuk kita sop gitu jadi cepet rasa-rasa balik
7:35selasa balik ke kantor Oh iya dalam waktu singkat WFO dan pasti senang sih asal lama-lama iya asal
7:44yang jarang di yang bisa dilakukan sehari-hari dilakukan pada saat itu ya jadi seru ya Oke oke
7:54kok mute mic nya ke mute
7:59di telepon istri
8:01oh di telepon oke oke
8:03siap siap siap
8:05laporan dulu ya
8:08laporan anyway kita malam hari ini
8:10membahas
8:12kita udah sempat bahas
8:18tentang
8:19fungsi programming di
8:22javascript ya beberapa waktu yang lalu
8:24dulu kita malah bisa fungsional dulu ya Iya kebalik ya rivalnya fungsional yang gak kebalik
8:31lah kalau di JavaScript rival ya apa ya metode salah satu metode pemograman yang cukup populer
8:37gitu ya jadi di episode ke-80 ya episode kita yang ke-80 ini kita bahas tentang object oriented
8:43programming di JavaScript karena JavaScript ini kan multi paradigma ya jadi bisa AOP bisa fungsional
8:50prosedural, bedanya fungsinya
8:52sama prosedural, apa ya?
8:54Kita bahas kan waktu itu yang sambil live coding di di devconsole bukan sih kalau waktu zaman kuliah diperhatikan sama
9:06nggak ada juga function kalau di C++ function dan procedure itu bedanya
9:10kalau function pasti return value kalau procedure return point
9:15nah udah pasti return point
9:17oh gitu side effect dan pure function versus side effect
9:21ya jadi malam hari ini kita akan bahas sisi objek orientated nya si javascript
9:30nah mungkin tapi sebelum itu saya mau bahas dulu sedikit apa ya latar belakang
9:35latar belakang cerita kenapa javascript bisa kok bisa kok dia kayak fungsional
9:42fungsional banget gitu ya kalau kita perhatiin kok fungsional banget karena
9:46beberapa ciri khas bahasa fungsional ada di javascript seperti high level
9:51Hai apa Hai higher order function first class citizen of function itu sebagai first class
9:57citizen terus bisa apa bisa ngelempar fungsi ya tadi higher order function terus apalagi ya
10:05explicit return implicit return kan dia pasti ngeritain ya ya bisa return itu juga bagian dari
10:12fungsi programming tapi juga dari awal JavaScript udah mendeklarasikan bahwa dia adalah OP walaupun
10:19OOP yang mirip-mirip OOP pada umumnya kita ketahui itu baru mulai dari IS6 ya.
10:29Baru mulai muncul.
10:30Apa? Syntax Class itu baru ada di IS6.
10:34Iya. Nah sejarahnya gimana sih?
10:37Nah sejarahnya adalah kira-kira kayak gini.
10:40Jadi si pembuat JavaScript namanya Pak Brendan A.
10:45Muncul lagi paper ini. Kita sering ya.
10:47Iya, ini paper lagi. Kita rekreasi paper ini lagi.
10:50Karena menarik.
10:51Karena ini sejarah ya, sejarah konvensional.
10:54Jadi si Pak Brandon ini ternyata dia terjebak.
10:58Di iming-imingi.
10:59Di iming-imingi oleh HRD-nya di Netscape.
11:04Bahwa join kita yuk, kamu boleh ngapain aja.
11:09Dengan iming-iming bisa bikin skim di browser.
11:13Kita mau buat bahasa untuk browser.
11:16Nah kebetulan si Brendan Eck ini dia mengidolakan bahasa pemograman namanya Skim
11:21Skim ini family-nya Lispy ya
11:24Klojur, Lispy, dan teman-temannya
11:27Bacanya Lispy ya bukan LISP ya
11:31Kalau Lisp kan T-nya nggak ke itu kan
11:32Lisep
11:34Lisep
11:34Lisep
11:35Lisepi aja
11:36Akhirnya karena terpancing dengan itu jadi dia mungkin ya
11:43emang janji manis
11:45marketing
11:46janji manis HRD akhirnya
11:49dia join, begitu dia join
11:51wah ternyata di dalamnya udah kompleks
11:53sekali
11:54situasinya udah sangat
11:57kompleks yang membuat akhirnya
12:00dicari lah kandidat kira-kira
12:03scripting language buat web itu yang cocok
12:05apa, salah satunya
12:07ya skim, terus ada
12:09Perl, ada Python, ada
12:11ada TCL sama ada visual basic tapi sih branden eggnya masih pengen ya sesuai janji awal kan
12:18emeng-emengnya Ayo nanti bisa masukin skim ke browser loh Iya masih jenis bahasa yang idealis
12:25banget ya buktinya idealis sekarang kita enggak pernah sekarang skim punah kan yang yang lebih
12:32masalah orang-orang pemikir yang model-model branden egg itu masih diajarin di beberapa kampus
12:38Oh masih?
12:39Masih ada.
12:40Masih ada.
12:41Ya, masih.
12:44Nah, di sisi lain si Netscape-nya ini punya Dill Dillon sama Sun yang bikin Java.
12:52Jadi walaupun dia tidak bisa implementasi skim di browser,
12:57sampai sekarang itu masih ada gaya-gayanya skim itu di JavaScript sebenarnya.
13:02Kalau ada yang tahu ya, karena kita nggak tahu dalam tentang skim,
13:04jadi kita nggak ngeh gitu kan.
13:06nah masalahnya sekarang
13:08si Netscape ini pada tahun
13:1095 itu dia bisa
13:12dikategorikan sebagai perusahaan
13:14kecil lah ya masih baru berkembang
13:16kayak startup gitu kali ya
13:17dia mau bikin dia udah bikin browser
13:20terus dia mau bikin bahasa di atas browsernya
13:23sedangkan
13:24pada saat itu Sun kabarnya Sun Microsystem kabarnya udah gencar sekali mengkampanyekan Java yang belum rilis akan segera rilis
13:39Nah si timnya Nescape ini bilang
13:43daripada kita keluar duit marketing sendiri
13:47mendingan kita dompleng aja nih si Sun.
13:49Jadi kita bikin bahasa yang kayak Java.
13:51dan dulu katakan game nya mau dibikin Java itu untuk server sitenya scriptnya kalau yang buat
14:00apa client-sitenya yang di browser tuh javascript jadi kayak dijual sepaket gitu lah biar kepencet
14:07oke lanjut lanjut lanjut kirain sengaja mau cari nggak kepencet nah nah jadi akhirnya
14:17JavaScript plus Java kills Windows.
14:20Iya.
14:21Jadi akhirnya, udahlah.
14:23Jadi diambil titik tengah.
14:26Kita bikin sintaksnya
14:28family-nya si Java
14:30yang pakai kurung-kurawal dan lain-lain
14:32yang seperti JavaScript sekarang.
14:35Tapi
14:35idealismenya si
14:38brand dan lain tetap ada.
14:39Salah satunya adalah
14:40mereka tetap
14:43mau bikin kelas
14:44atau OOP, tapi tidak
14:46class-based. Nah ini salah satu
14:49apa ya? Salah satu. Gimana sih?
14:51OOP tapi tidak class-based itu
14:53gimana ya? Ya itu. Jadi
14:54sebenarnya mungkin banyak orang yang gak tahu
14:57bahwa object-oriented programming
14:59itu bukan hanya yang class-based. Jadi kalau misalkan
15:01yang kita tahu kayak Java, C++
15:03gitu kan, ada kan class
15:05car, extends
15:06vehicle gitu kan. Nah itu class-based.
15:10Tapi ada juga
15:11object-oriented programming
15:12yang tidak menggunakan
15:14sintaks class.
15:16salah satunya javascript
15:18salah duanya lua
15:19itu juga tidak class based
15:22tapi dia OOP
15:22jadi OOP nya lebih ke
15:27kayak filosofi
15:29prototype
15:30prototype
15:31sama itu
15:33struktur data objek
15:36dia berkutat di arah sana
15:39jadi ada di javascript ada yang
15:40struktur data objek yang pakai kurung-kurawal
15:42nah itu yang dijadikan objek
15:45Jadi di situ bisa ditaruh metode atau fungsi, bisa ditaruh tipe data apa saja.
15:52Itulah bumbu utamanya sebenarnya.
15:56Jadi bukan kelas yang mungkin sekarang kita sudah bisa bikin, sudah bisa nulis seperti itu.
16:02Setelah ES6.
16:04Iya, setelah ES6. Tapi pada dasarnya bukan itu.
16:06Jadi di sini ada artikel dari Free Code Camp yang menjelaskan itu.
16:13JavaScript isn't class-based language.
16:16Yang di atas itu definisinya.
16:19OOP itu class-based programming adalah suatu style dari object-oriented programming.
16:26Nah inheritance-nya lewat mana?
16:28Inheritance-nya lewat definisi classes of objects.
16:35Makanya kan kalau zaman dulu kalau misalkan kita mendefinisikan sesuatu itu
16:41Biasanya di konsol itu kelihatan ada underscore-underscore proto
16:48Double underscore
16:49Terus di artikel-artikel kan sering disebut tuh namanya dunder
16:54D-U-N-D-E-R, dunder proto
16:56Tadinya kirain apa dunder sampai cari di kampusnya kan
16:59Kagak ada kata-kata bahasa Inggris dunder
17:02Ternyata itu cuma singkatan
17:03Double underscore
17:04Dunder proto
17:10Pokoknya kalau ada yang nyebut data proto, ya itu maksudnya double underscore proto.
17:15Itu yang menyimpan objek field-nya, properti dan metode-nya.
17:22Nah, ini bumbu utamanya kan objek ini kan.
17:25Objek ini bisa ada properti.
17:27Bisa diisi string atau tipe data lain.
17:30Bisa juga diisi fungsi.
17:34Bisa diisi metode function ya.
17:37Metode properties.
17:40Oke.
17:41Nah, jadi by default kan semua objek itu meng-inherit, mereka adalah extension dari,
17:47maksudnya mereka adalah suatu objek ya?
17:50Iya.
17:51Objek, prototipe.
17:51Dianggap sebagai objek, iya.
17:53Kalau head of ya jadinya objek.
17:55Definisi ini.
17:57Nah, ini dia.
17:59Ada underscore.
18:00Nah itu si Denver Proto
18:02Iya
18:04Kalau kita buka
18:06Sebenarnya dulu sebelumnya ini kan
18:09Proto ini kan sebelumnya itu
18:11Prototype
18:11Library
18:13Oh iya ya
18:17Oh menarik
18:18Berita malah
18:19Coba masih ada gak ya
18:23Apa namanya
18:24JavaScript
18:25Prototype
18:28Prototype
18:29Jadi ini masuk kategori apa sih? Prototype JS.
18:37Oh. Iya benar. Hal-hal menarik yang tadinya framework terus lama-lama diserap di ECMAScriptnya sendiri.
18:46Iya. Coba aja buka dokumennya. Oh, terakhir 2015. Kita lihat ya.
18:51Defining Class and Inheritance. Wow. Tuh defining classnya class.create.
18:58ini terus person.prototype
19:01terus ini ada
19:06constructor
19:07metode
19:10property
19:11atau
19:12constructor
19:15terus ini new person
19:18ini awalnya
19:22baru kemudian diimplementasi
19:24diadaptasi oleh
19:25javascript
19:26ya ekma script ya karena banyak yang pakai banyak yang suka ya dan di dalam
19:34Proto ini ada konstruksi ter-ya objek orientasi juga kan terus ada has on
19:41property ada to string ada value of dan lain-lain ada banyak akhirnya tetap
19:51tapi terselubung Iya jadi dia tidak maksi brand dan ini nggak mau bener-bener yang fully seperti
19:58Java gitu karena bahayanya adalah ya ngapain milih JavaScript dengan milih Java aja karena
20:04waktu itu kan yang terkenalnya kan Java ya dan prototipe ini bisa kita modifikasi
20:12Oh ini juga sama ya bisa kayak tadi ya Iya tinggal ditimpa aja berarti ya objek.com ya
20:24tinggal ditimpa ini kan udah model-model kelas kan ya kayak ada konstruktornya ada metode nya
20:33gitu kan Iya dan kalau kita lihat ya seperti ini gitu jadi tiba-tiba ada speaknya di dalam
20:40karena tadi kita tipe pakai konstruktor objek ini kan inheritance in heritans
20:48new keyword nah new keyword ini juga lumayan apa ya nah ini sintaktik segera paling menarik sih
20:59yang pasti s6 ada kelasnya kan ya dengan ada kelas jadi bisa ini tuh mirip sebenarnya mirip
21:06bahasa apa sih bahasa lainnya yang lebih establish jadi bisa bilang bisa mendefinisikan menginstansi
21:13ya konsul sering instansi ya disuser sama dengan new user terus bisa di apa ini selesai pakai
21:25argumen juga Iya ini salah satu menarik juga karena disini tidak menggunakan kelas base atau
21:35tidak menggunakan
21:35sintaks kelas, tapi pakai fungsi.
21:41Cuma bisa pakai new.
21:43Jadi nyampur ya.
21:44Seolah-olah dicampur.
21:46Definisi ini pakai function aja,
21:48tapi waktu diinisialisasi
21:50tetap harus pakai new.
21:52Tidak harus ya.
21:54Harus tidak sih?
21:56Haruskan objeknya function.
21:59Coba aja.
22:01Coba aja di console.
22:03Kita coba ya.
22:05mana konsolnya
22:07loh
22:08oh ini
22:09OOP tapi bohong
22:11OOP tapi bohong
22:12OOP beneran
22:14beneran OOP
22:16OOP tapi yang bukan
22:18class base
22:19prototype base
22:20mana tadi
22:20tapi
22:21tapi sintasnya yang
22:23bohong
22:24maksudnya aslinya
22:24nggak kayak gitu aslinya nggak ya jadi yang si class base yang sekarang itu adalah pemanis aja nanti dikonversi jadi seperti ini error nggak boleh copy paste ya warning warning doang kok tapi
22:40enggak hasilnya nggak bisa coba Oh please
22:49nah ini ini kan fungsi ya kalau kita langsung jalanin kan bisa enggak dog
23:00objek Oke buka namanya John koma 45 nanti fine Oh harus di-assign ke variable name dong coba
23:16gini jonas ternyata main nggak bisa Oh karena ada disi-disi function juga ya karena enggak
23:25oh iya betul skop ya ini masuknya masuk konsepnya adalah skop
23:33kalau kita kasih new maka dia bisa bisa nggak ya nah ini udah bisa nih John tuh muncul
23:40oh menarik
23:43dan itu ada prototype ada speaknya ada nanti bisa juga John
23:49maaf kita nggak tahu
23:51terima kasih
23:53Coba John.
23:55Sekarang John.speak.
23:57Tuh kasih bisa.
23:57John.
23:58John.speak.
24:01.speak.
24:02Buka kurung.
24:02Ini.
24:05Tapi perhatikan ya teman-teman ya.
24:07Di sini meskipun ini objek literal atau apa sih nanya ya.
24:11Struktur data objek.
24:12Tapi ini ada tipenya dalam tanda kutip.
24:15Beda kan?
24:16Objek itu meng-extend objek.
24:19Objek prototipe biasa.
24:20kalau misalkan kita kasih gini name sama dengan e.2 jen misalkan kan terus umurnya berapa gitu
24:29kan esnya 40 nah ini kan enggak ada dokternya apapun ini biasa aja gitu Nah itu yang membedakan
24:39antara yang mempengaruhi yang bisa menggunakan new sama yang tidak kalau misalkan ini misalkan
24:46ini jennya kita bikin gitu eh gimana ya Iya sama dengan bener kan coba kalau misalkan gini
24:58new nggak bisa ya nggak bisa lah ya nggak bisa lah jadi apa buka error-error bisa karena ini
25:07terus ketik Jane masih di coba di open itunya di open objeknya ada apa jadi Jane dot Jane
25:30dot has on property itu bisa Jane dot has on property nama propertinya age eh kok enter
25:42true Oke itu ya apa namanya
25:55like coding asyik ya
26:01properti prototype chaining ini ada juga prototype chaining ya apa tuh hands it also has a proto
26:12property which refers to global coba ketiknya lagi semua semua objek yang ada di javascript
26:20itu pasti ada popot kepotoknya perutnya potong chaining tuh berarti kan apa sih di John itu
26:28di dok object isi protonya kan prototipe nya inherit dari yang bawaan objek semua
26:35sama kecuali di plus ditambahin satu speak ya kan maksudnya gitu kan ya
26:39window object juga punya prototipe window object kalau mau dokumen objek dokumen coba dokumen
26:49Kita coba lihat. Dokumen.
26:51Gini?
26:53Iya Oh ini ke print isinya ya Coba Windows Sorry Kalau dokumen mungkin dom nggak ada Coba kalau window Langsung masuk belum
27:06Coba di-window, window object.
27:10Hah?
27:12Ya benar, ada protonya paling bawah.
27:15Kok ada on YouTube, iframe ready, API ready ya?
27:20Apa itu?
27:23Mana protonya?
27:24ada protonya yang sama ada paling bawah selalu dan di dalam prototype window ada
27:30prototype window apa nih window coba digeser Widho apa nggak bisa sering jadi
27:37dibesarin ininya Oh ini saatnya sidebar nya window properties video properti
27:44dalam window properties ada prototipe bentar g-event target udah gitu aja
27:50sampai akhirnya objek
27:52berarti dia
27:55ini
27:56ini
27:56ini
27:58seperti inheritance
28:03di dalam prototype
28:06wah ini panjang banget
28:08mau ditutup, di clear aja lah
28:09nah makanya dulu
28:11gak tau nih teman-teman ngalamin ya
28:13atau enggak ya, saya dulu sempat
28:15kebingungan kalau baca
28:17baca
28:19dokumentasinya javascript karena tulisannya are the prototype.net saya cari misalkan Oh ya mapping
28:26ini prototip ini apa ya gue pernah pernah pernah nginggung ini di beberapa kali kita bahas javascript
28:33framework atau apa kan gua pernah bilang ya terus kita selalu janji-janji gitu Iya kapan-kapan kita
28:38bahas nih prototipe
28:39wih ada mas Danang
28:42wah hai
28:44mas Danang
28:45Ivan dimana? lagi itu
28:50mengunjungi kakek di Athena
28:51mudik
28:52masih siang ya masih sore
28:55sungkem sama Hercules
28:56sungkem sama Hercules
28:58minta THR ya
29:00jadi dulu setiap kali cari
29:03apa ya setiap kali cari
29:05metode gitu ya
29:06array.filter atau array.foreach
29:09kok ada prototipe-nya ini apa?
29:12Kalau ditulis begini kan nggak bisa kan ya?
29:14Misalkan.
29:14Iya, misalnya dunder proto.
29:18Tapi sebenarnya,
29:19wait, wait, wait,
29:20tanpa itu pun sebenarnya nggak perlu pakai
29:23dot prototype,
29:24tapi langsung dot map-nya bisa.
29:26Misalkan ini,
29:27satu, dua, tiga.
29:29Iya, yang saya lakukan adalah
29:31saya tulis prototipe di sini.
29:34Prototype.map
29:36atau dot filter gitu kok nggak bisa-bisa ya pas udah tahu pas udah kopas mau saya yang betul yang
29:44jalan ya sebelum ngerti tentang prototipe konsep prototipe dan OOP sendiri ya Iya sih bener sama
29:51bingung kenapa sih DMDN tulisnya selalu raih prototipe blablabla Iya itu yang yang dulu
29:57awal-awal bingung kalau jawabannya adalah karena mepet map itu sendiri atau metode
30:04pH metode map apapun itu itu bukan punyanya kayak ibaratnya bukan punyanya si Rai 123 itu tapi punya
30:11apa itu adalah milik dari eh apa si Rey apa tipe apa tuh namanya tipe prototipe tipe objek tipe
30:20data tipe-tipe data Ray yang punya metode map adalah itu apapun kalau kita mendefinisikan
30:28Ray kita sendiri itu kan apa mengakan mengingat akan mewarisi akan mendapat metode itu bukan
30:37karena dia punya metode map sendiri tapi karena boleh dapat dari si tipe data Ray kalau kalau
30:44di PHP kita juga bisa kalau di PHP kan kita bisa langsung pakai tipe data array ya kan tapi
30:53Seandainya kalian mau bikin map sendiri atau mau bikin tipe data yang seperti array tetapi pengen merubah cara kerjanya kan berarti harus dibikin tipe data array sendiri.
31:07Array yang spesial, custom array. Itu harus pakai implement accountable, namanya kalau nggak salah implement ininya.
31:18apa itu namanya kalau implement itu namanya apa sih bukan extend tapi implement implement implement itu turunan inheritance bukan ya bukan extend kalau extend bukan kalau extend kan extend kelas kalau implement itu dari
31:38ah nggak ngerti istilahnya apa ya lupa teorinya tetapi ada ada implement countable interface
31:46interface, that say thank you mas, atau Valery. Jadi interface dari countable, ada traversable, ada macam-macam tuh implementnya ada banyak.
32:03Jadi kalau mau menyerupai seperti array, ada implementnya ada banyak. Jadi setiap kali mapnya kita itu mau kita cara ngambilnya gimana, itu harus kita implement satu-satu.
32:15Jadi kalau karena array di PHP itu kan kita bisa langsung count, count itu langsung jadi apa gitu.
32:23Bagaimana apa yang di prosesnya.
32:26Tapi harus ditulis beneran gak itu jenis datanya? Kita kayak definisikan.
32:33Jadi kelas sendiri kan.
32:36Makanya jadi kelas custom arraynya kita sendiri gitu.
32:40contohnya yang paling ini
32:43anggap aja
32:45kelas arraynya kita itu
32:48saat kita mau
32:50ngambil data, ternyata ngambil data itu
32:52bukan di mappingnya kita
32:55tapi mau ke
32:56network contohnya
32:58bisa jadi atau file system
32:59lebih tepatnya file system
33:01jadi berbeda sedikit
33:04jadi bisa juga, kalau di javascript
33:06ya itu harus yang
33:08kalau mau extend array
33:11dengan prototipe nya kita juga bisa
33:13extend dari array itu kan kita
33:16menambahkan prototipe
33:18method nya
33:20kita sendiri yang tadi kayak
33:21kita bikin
33:22mungkin
33:25instead of
33:27kita katakan array kita katakan
33:30map jadi a new map
33:31itu mungkin
33:33kalau array kita
33:36dua dimensi kita pengen bikin dia ada
33:37dimensi ketiga.
33:39XYZ gitu ya. Kita
33:41mau implement XYZ itu bagaimana
33:44hasilnya? Kita bisa bikin
33:46kita bisa extend prototypenya sendiri.
33:50Jadi kita bisa bikin metode-metode-nya kita.
33:52Atau contoh lainnya itu
33:54pernah dengar kata matrix jarang
33:56gak? Matrix jarang.
33:58Matrix jarang.
33:59Matrix jarang itu pernah dengar gak?
34:02Enggak. Jadi matrix
34:04untuk nge-mapping
34:05let's say mengameping hutan jadi semua value-nya itu nol semua tetapi daerah yang daerah yang kita
34:16ingin mark mungkin karena mungkin daerah situ ada hutannya kita bikin ini jadi satu jadi
34:22Matrix itu jadi seperti peta Oh kayak ini kayak di game Sprite atau hitmap hitmap ya hitmap jadi
34:31semuanya nol dan bagian yang yang yang yang terkena yang mau kita itu
34:38makin jadi satu atau dua atau tiga kita cari koordinat kayak indexnya gitu ya
34:43Iya kan matriks itu XN Y ini cuma salah satu sampel ya misalnya dalam dunia nyata
34:54kalau kalian mau mengextend array dari javascript juga bisa misalnya pengen bikin custom mapping
35:01link list misalkan atau apa gitu ya
35:03link list bisa custom mapping sehingga saat dipakai di product itu ya kalian punya methodnya sendiri gitu
35:13punya method karena arraynya sudah prototype bisa di extend
35:17contoh kasus yang pernah saya kerjakan
35:21bingung jangan bingung ya op itu banyak bahkan sekarang saya baru inget tuh kalau nggak salah
35:29gole juga op kan tapi dia adalah strak base nah ini beda lagi nih keras ya strak-strak
35:34beda harus bikin beda-beda beda-beda interface itu kita ngeimplement dan metode yang ada di
35:43service harus kita kita implementasikan kalau struck kita cuma kayak nggak perlu
35:52ya nggak perlu sudah ada prosedurnya sudah ada prosedurnya kalau kelas itu
35:56kita kasih struck prosedur itu otomatis dimiliki
36:00nggak perlu didefinisikan lagi ya tapi istilah-istilah yang umum di OP juga ada kan di goleng kayak metode
36:09ya kan itu tetap ada ya walaupun enggak semua enggak pure op-kan mesinnya yang kelas biskuit
36:16jadi ya umum maksudnya hal yang umum bahwa OP itu bukan hanya kelas B seperti Java atau C++
36:28objektif sih apalagi yang yang OP small talk dan lain-lain pascal ada kelasnya pascal bukan
36:41ada-ada prosedural-prosedural-prosedural kan Iya kalau bibi-bibi kelas VB kelas betul VBC
36:51Sharp itu kelas kalau sube beda lagi Swift Swift nya Apple itu protokol orientir apalagi itu
37:02interface interface ini nih sebentar saya ingatnya itu siswa itu strak bis ternyata bukan interface
37:16protokol type is data type XF abstraction of class Oh salah ya ini
37:31tuh protokol oriented object oriented Oh lagi share screen enggak Oh enggak ya belum muncul
37:41Oh ya belum sorry sorry ini nah shift itu multi paradigm juga tapi dia protokol oriented
37:51protokol orientated interface Oh protokol itu sinonimnya interface ya ada contohnya enggak ya
38:00kelihatan nggak ya kalau diklik enggak ada ya contohnya ya itulah jadi hal yang apa ya bukan
38:12hanya JavaScript yang menerapkan op tapi bukan kelas base tapi ada banyak lagi ya dan berarti
38:21sebetulnya macet berbagai jenis language nih bisa nerapin OOP dengan cara mereka sendiri ya yang
38:29sesuai sama sintaks mereka maksudnya bukan apa ya bukan over nothing itu bukan yang kayak betul harus
38:37ini bisa kayak di adaptasi eh kan eksensinya adalah gimana caranya suatu objek atau jenis
38:49data bisa mengeksten kan intinya kan betul ada prototipe ada properti-properti dari prototipe
38:56dan bisa diinherit, bisa di-extend dengan mudah.
38:59Kan sebenarnya berarti esensinya gitu ya.
39:01Berarti kan cara dia implementnya suka-suka masing-masing bahasa.
39:06Suka-suka.
39:07Nanti lagi ada asosiasi objek orientated untuk mendefinisikan.
39:14Mendefinisikan apa sih objek orientated.
39:17Iya.
39:18Bahkan.
39:19Standar.
39:21Bahkan OOP yang class-based aja itu implementasinya bisa beda-beda.
39:26kalau teman-teman pernah ngoding kelas atau OOP di Python sama di Ruby,
39:32yang adalah dua-duanya OOP kelas base, itu dua-duanya beda.
39:36Sama Java apalagi, beda juga.
39:39Jadi masing-masing punya cara.
39:40Karakternya atau hasilnya berbeda atau pola pikirnya?
39:46Misalkan, nggak tahu ya, mungkin sintaks ya, cara inisiasi.
39:51Misalkan kalau di Python itu, kalau kita mau definisiin metode,
39:56kita harus pakai self atau disk
39:58kalau di javascript, jadi disknya itu harus ditambahin
40:00sebagai parameter pertama
40:02di setiap metode
40:03kalau di ruby, enggak kayak gitu
40:07kalau di java juga enggak kan ya
40:10jadi ya mungkin cara
40:12caranya aja beda
40:14dan tidak mesti semua
40:15ciri-ciri OOP yang class-based itu
40:18diimplementasikan di bahasa
40:20masing-masing, mungkin ada yang lengkap
40:22kayak java itu ada semua, ada inheritance
40:24ada polymorphism ada macam kan Tapi mungkin di bahasa yang lain Yang OOP yang lain mungkin inheritance ada mungkin polimorfisa gitu maksudnya ya Iya misalkan kayak JavaScript sendiri private
40:38property kan gak ada baru ada akhir-akhir ini ya dulu kan enggak ada ya property yang private
40:45enggak ada kan kelas yang private juga belum ada belum bisa kan sekarang ya enggak bisa
40:51kelas perangkat terus buat apa nggak bisa di-extend gitu nggak bisa diekspor bisa di-extend
40:58bisa dibaca di kelas yang lain di kelas di kelas yang tidak turunannya dia jadi ya inilah jadi ada
41:12yang kayak tadi kan apa gue sama dengan light op yang versi lightnya cuman ada beberapa beberapa
41:18apa ya beberapa kiri dari bahasa fungsi bahasa objek orientated tapi tidak semua gitu Oke kita
41:30lanjut lagi lanjutin tadi tadi ya Nah di sejak ekmaskrip 2015 atau is6 itu mulai muncul kelas
41:40scroll ke atas dikit deh tadi udah penjelasan yang bagus soalnya atasnya yang tadi kita kelewat
41:46sedikit nah itu ini yang function combination nah your berapa tadi kan kita nyoba ini kan
41:51bingung ya coba manggil dok object tanpa nyuruhkan nah itu ilang karena
42:00seperti cuma sekali jalan Oh iya iya bener-bener saya pernah demo ini dulu
42:07iiih oh masih ada enggak fungsi no ininya dog objek Oh masih ada nih salah Oh masih ada ya
42:17jadi sebenarnya kita bisa eh subclass kosak plus ini dia sebetulnya kita bisa langsung jalanin
42:29sekali ini kan mana dia ini enggak perlu pakai new tapi misalnya kenapa itu apa shortcutnya
42:48salah soalnya ditaruh ke tombol delete jadi setiap pencet tombol delete bunyi
42:53itu keren saja enggak function.com Jack ini nggak usah pakai ya ini nggak usah pakai ya
43:01Nah ini bisa kita langsung eksekusi pakai efek gini coba aja undefined atau enggak pakai ini
43:11nah benar cuman dikasih kurung doang berarti ya bukan IEV dong ini enggak di enggak dieksekusi
43:22emang-emang bukan IEV itu bisa function ya Oh itu function biasa ya cuma ada kurungnya
43:31Oh kok sini Iya ada kurungnya function.com Jack Oh kalau kita mau tahu isinya Oh cuma buat
43:44coba ya John itu diklik ada kok John Nah kalau kita mau tahu John itu kayak gimana ini beli
43:56enggak juga ya kalau kita print John biasa juga begini kan Iya sama aja sama aja putri
44:03enggak ngaruh-ngaruh jadi apa nih itu function object combination itu kayaknya ya cara buat
44:14apa itu kita bisa bikin objek melalui function ya kayak ini kayak itu deh sebelum ada kelas
44:23sebelum ada sintaks kelas ya cara orang bikin kelas ala-ala di JavaScript kayak gitu maksudnya
44:30fungsinya gitu deh. When functions are declared, by default they are given a lot of properties attached to it.
44:37Nah, function itu adalah objek juga.
44:40Iya, dan function di JavaScript itu adalah objek.
44:45Semua di JavaScript adalah objek.
44:48Jadi, Java juga ya?
44:51Iya, semuanya adalah objek. Java juga begitu kan?
44:53ternyata jauh di dalam javascript yang sepertinya lebih dekat ke functional programming tapi ternyata dalamnya objek gitu tapi disembunyikan
45:05gak banyak yang tahu
45:07nah baru
45:08terus baru ada syntax class
45:11keyword class
45:122015 baru muncul
45:14syntax keyword class
45:16yang bisa apa ya
45:18menjadi batu loncatan
45:21buat teman-teman yang tadinya terjebak
45:23di bahasa java
45:24pindah ke javascript
45:26over existing prototyping
45:31technique it continues its prototyping
45:33tetap behavior prototypnya
45:35seperti tadi jadi ya
45:37makes the
45:39outer body looks like
45:41OOP
45:42outer body nya aja seperti OOP
45:45ya walaupun
45:47sebenarnya ya ini hasilnya
45:50adalah ya ada prototype juga
45:52tuh
45:52bisa dance bisa sing
45:56iya dan
45:57yang sedikit membedakan
46:00ini kalau di java pakai disk juga ya
46:02kalau gak salah ya tapi disknya
46:04javascript unik karena
46:06dia multi paradigma
46:08jadi disk ini bukan hanya
46:10untuk kelas tapi juga bisa
46:12untuk yang lain kan untuk konteks
46:14saat ini kan si
46:15konteks ya cuma
46:18kalau gak di dalam kelas yaudah apa
46:20scope
46:20Skopi atasnya posting-hosting istilahnya
46:26posting-hosting ikut atasnya jadi kayak misalnya kalau di browser tuh ya itu
46:31jadi masuk ke window window jadi window karena paling atas
46:37masih fungsi dia di dalam fungsi itu ada apa coba aja tapi coba nyetai di
46:42nah, ini adalah window
46:50sedangkan yang di dalam sini adalah monkey patching
47:00in the background, using the new keyword approach, the above translate into this
47:06jadi sebetulnya dibalik layar itu yang terjadi ya
47:09ini ya
47:10yang dieksekusi adalah ini
47:13itu sebuah function animals
47:15tapi tetap ada
47:17cuma dipakai
47:19huruf besar ya
47:20ini buat convention aja walaupun sebenarnya
47:23gak harus ya bisa tetap ya
47:24jadi sebenarnya ES6 ini
47:27sebenarnya tidak
47:28apa namanya
47:30engine nya tetap sama dia cuma kayak
47:32membuat satu layer di atas
47:34Sama sintaks kayak shorthand gitu ya?
47:36Kayak shortcut.
47:36Iya.
47:37Cuma kayak nerjemahin.
47:40Jadi sebenarnya dia multilayer.
47:41Jadi kalau kita nulis di ES6,
47:43dia diterjemahin lagi ke JavaScript vanilla.
47:47Baru ke mesin.
47:49Baru lagi ke JavaScript engine-nya.
47:53Apapun itu.
47:55Jadi meskipun si JavaScript yang sebenarnya
47:58nggak ada kelas,
48:00kita semuanya function.
48:01tapi inisiasinya tetap ya pakai new ya
48:05jadi kombinasi gitu ya
48:07subclassing
48:08ini inheritance ya
48:10ya
48:11extends ya
48:13di javascript namanya
48:15di javascript namanya
48:18inheritance, eh sorry subclassing
48:21kalau aslinya kan
48:22teorinya namanya inheritance
48:24extends
48:25kalau inheritance kan menerima property dari
48:29parentnya kayak
48:30jenis yang di extend kan
48:32nah kalau ini ditambahin
48:34yang cuma ada di dia kan
48:36kayak animals tuh cuma kucing
48:38yang bisa punya warna
48:40kumis
48:41whisker color
48:43iya betul
48:46ini kan kalau kita manggil super
48:48super kan inheritance tuh
48:50itu kan dari apapun yang
48:52animal object apapun
48:54pasti punya name dan age
48:56tapi abis itu
48:57bukan super itu adalah
48:59memanggil konstruktor dari perang diatasnya perang ini kalau teman-teman yang mengalami
49:08riek versi pasti familiar ya dengan super kemudian this.bind ya di-start by Nia yang
49:21Oh, sini nanti banyak disk dot.
49:23Iya.
49:23Itu by extension Banyak tuh Nah ya dari sini gitu Salah satu yang mengerakkan kenapa si ES6 ada Bye
49:55Jadi begitu kita pakai this disini dia akan menjadi konteksnya yang berhubungan dengan animal ini ya
50:02Jadi ini kayak apa ya, menyimpan global variable dari kelas ya
50:08Kayak memaksa objek tersebut punya properti-properti itu sesuai
50:14Jadi kayak logikanya, kayak bahasa awamnya kan setiap kita bikin animal object itu harus punya name dan age
50:22Sebetulnya kan gak usah pakai kelas-kelasan
50:24Bahkan gak usah pakai function yang ada prototipenya tadi
50:27Kenapa gak define aja
50:29Misalnya animal 1 sama dengan langsung aja objek
50:32Sebenarnya kayak gitu bisa
50:33Tapi kan kita jadi gak bisa streamline kan
50:37Gak bisa maksain bahwa semua harus ada name dan age-nya
50:40Jadi ini kayak men-streamline bahwa setiap animal itu harus punya name dan age
50:45Melalui prototipe
50:48Oke ini juga masih ada contoh
50:51beberapa contoh ini bahkan animal constructor
50:55oh di object create ya
50:57jadi kita bisa definisiin
50:59secara terpisah
51:01gak mesti di dalam
51:02kelas atau dalam function
51:04tapi kita menggunakan object.create
51:07terus bisa set property
51:11bisa banyak cara ya
51:14ada banyak cara
51:14intinya adalah
51:15prototype native
51:19to welcome OOP developer
51:20to its ecosystem, so provide easy ways
51:23to creating prototype and organize
51:25related data
51:26jadi ini lebih masuk ke DX ya
51:29kalau menurut dia
51:30lebih ke DX
51:33nya aja, kan sebenarnya gak pakai
51:35plus, pakai cara yang kayak di atas
51:37itu juga hasilnya tuh sama aja kan
51:39cuma kelihatannya kurang catchy
51:41aja, ketiknya gak enak
51:43oke
51:44nah
51:47saya jadi punya pertanyaan nih
51:50begitu melihat beberapa contoh di sini ini contohnya contoh yang kelas gini ya
51:57kelas ya Apakah enggak pertanyaannya Kenapa contohnya itu animal kalau enggak
52:05Cars Kenapa enggak contohnya yang real kayak misalkan kita bikin aplikasi gitu
52:08jangan tuduh-tuduh itu gimana cara implementasi pakai kelas buat apa kelas
52:13itu enggak perlu di ekstensi ke bayanginnya task-task kan ada propertinya namanya status
52:22misalnya terus terus di dalamnya metode nya ada update misalnya atau set komplit atau set
52:29kompleks atau apalah Oke ya tergantung tergantung bagaimana implementasi sudah pandangnya kan contoh
52:38kalau misalnya mau dijadikan sebuah komponen,
52:41satu tas itu jadi satu komponen,
52:44di mana komponen itu punya property dan punya method,
52:48dia mau edit dirinya sendiri,
52:52atau mau delete dirinya sendiri,
52:54dan juga bagaimana view-nya dia.
53:00Biasanya digabung jadi satu itu.
53:03Oh ada contoh bagus tuh kalau buat yang apa yang barusan dibahas Ivan sama yang
53:09Mas Riza tadi bilang yang di linknya kensi dots coba itu lebih lebih real lebih real
53:17lebih real mengedit datanya sendiri terus ya pakai user lah bukan cuma car atau vehicle
53:27Soalnya pernah ngobrol sama teman yang
53:31Skeptis atau malas
53:34Bukan skeptis ya
53:35Dia bisa dua-duanya
53:36Bisa fungsi general bisa OOP
53:37Tapi menurut dia OOP itu kurang cocok
53:40Buat aplikasi kantoran atau aplikasi inilah
53:45Yang biasa kita kerjakan gitu
53:47OOP itu justru lebih cocok untuk game
53:50Oh iya iya iya
53:52Kalau misalkan kita mau bikin
53:55apa ya, mau bikin musuhnya, karakter, karakter ada...
54:00ada apa musuh extensi dari karakternya pemainnya player nya juga extend dari si itunya juga kan
54:06ada tapi kalau background atau NPC kayak itu ya beda jenis itu sendiri karena mungkin nggak bisa
54:13apa nggak bisa punya dialog atau juga bisa-bisa beda pola pandang aja ya Iya bisa juga bisa juga
54:22aplikasi contohnya pernah bayangkan bagaimana Google Doc mungkin Google Doc
54:30nanti Google Slideshift bekerja atau Google Slideshift ya ya spesifikasi di belakang itu
54:36kena Yap kalau misalnya mau dibikin semua fungsinya mungkin bisa aja tapi kan kalau
54:42disini kan gunanya contohnya tools ya tools itu kan ada anggap aja bold italic segala macam
54:49kalau lebih satu-satu fungsi bisa juga tapi kalau misalnya mau di-extend dan
54:53polymorphism dengan kelas-kelas dan ada mungkin objek utamanya mungkin modifier terus ternyata
55:00dia modifier bold modifier italic modifier bisa juga kan tergantung architectural nya
55:04aja sebenarnya nah berarti itu tergantung desain di awal ya desain sistem di awal dia pengen objek-objek
55:10ya kayak gimana
55:11anggap aja
55:14Microsoft Word, sorry
55:16Google Doc atau Google Spreadsheet itu kayak game
55:18ada spreadsheet, ada
55:20musuhnya pakai yang inheritance juga
55:22tools-tools yang ada di
55:24spreadsheet juga inheritance juga kan bisa juga
55:26bisa, bisa
55:28benar, benar
55:30nah ini apa yang
55:32mau ditunjukin, apa yang mau dihalat
55:34ini contoh yang lebih real lah
55:36terus bisa buat nge-set
55:40bisa buat ngeget Oke oke terus bikin new person kayak gitu terus bisa kita bisa
55:52ngebah kita bisa bikin mereka dia ngubah dirinya sendiri tuh person.com terus bla bla bla ya itu
56:02ini artikel ini sih lebih ke perbandingan aja sih cuma kalau kayak sini dia secara subjektif
56:07subjektif dia lebih encourage fungsional dia jatuhnya ke situ tapi maksudnya dia tetap menjelaskan cara kerjanya gimana dan ya apa dia bikin equivalentnya perbandingannya pakai kelas sama pakai fungsin dengan use case yang ya lebih realistis sedikit daripada cuma tadi kayak cat atau dog
56:28Iya benar ini lebih kalau person itu misalkan kita mau kontak bikin kontak kontak user aplikasi
56:37kontak ya buat nyimpen nama nomor telepon gitu ke user atau customer atau apapun customer Iya benar
56:45benar benar Iya menarik menarik terus call aja ini sebagian besar sih kita udah kita udah belajarin
56:55kayak si protonya
56:56cuma ke bawah, dia punya
56:59opini dia, bis itu
57:01agak ribet dan bisa bikin
57:03bingung, menurut dia
57:05ini bisa jadi
57:08topik
57:08di episode-episode berikutnya nih
57:11bisa, bisa
57:13rumit ya
57:14oke
57:16bedanya nanti
57:18penggunaan bis ini, bisa sih
57:20satu topik sendiri
57:22atas sedikit
57:23ada atas sedikit Nah ada contohnya nih apa yang bikin bingung kan konsperson kita instansi
57:32new person objek ya terus ada get greeting get greeting tuh emang ada di metode di di
57:38objek person tuh emang ada get greetingnya tapi kalau di jalanin kepengan walaupun isi
57:45fungsinya udah dipindahin ya nggak bisa karena butuh disknya tadi butuh konteks yang nggak ada
57:51hilang waktu di-assign ke variable terpisah Oh iya menurut dia jadi ini agak misleading ya sedikit
58:01misleading ya bukan misleading tapi kalau misalnya user enggak meng-amp kalau developernya enggak
58:07menguasain banget objek personnya sendiri bentuknya kayak apa coba aja cari get greeting
58:14gate-greeting gak ada?
58:15gak ada gate-greeting callback kali ya maksudnya
58:18ya intinya butuh data dari disk butuh data harus dipanggil dalam konteks kelas itu kan hilang jadinya disknya ya gitu terus ini contoh real world yang apa counter
58:35ini ada ada insight menarik juga nih dari Mustafa Zaki ya API diskon itu banyak tapi
58:45mirip-mirip bisa jadi ya sengaja dipakai karena kalau itu lebih tepatnya Open API
58:53jadi sudah ada sudah ada spesifikasi pakai apa tuh yang biasanya untuk buat open API
59:04jadi mungkin waktu didefinisikan secara architectural mungkin sudah dibuat se-
59:15skemanya dan skema itu bisa di-extend ya skemanya skema objek A per E
59:22messaging nanti kemudian ada skema tambahan-skema tambahan itu yang ekstern dari skema sebelumnya
59:30itu bisa juga ya tapi itu diskema base kalau API walaupun nanti implementasi di belakangnya ya oke
59:37mungkin pakai OV supaya mempermudah jadi benar-benar nge-translate antara skema langsung
59:43kelas juga itu SDK nya cuma anyway SDK itu kayaknya salah satu penggunaan kelas by Syntax
59:52yang paling sering ya kayak apalah grafql.com gitu selalu kan you apa jadi udah ya mempermudah
1:00:01aja ya jadi apa fungsin fungsin fungsin C kalau si developer yang menggunakan suatu SDK harus
1:00:10support semua metode-metode nya terpisah kalau cuma nginpor satu klaskan Ivan harus kerja ya
1:00:17Iya saya harus cabut dulu ya udah jemput cuma mau ada siap aktivitas Oke semuanya semua ya
1:00:26bye-bye salam buat bos buat bos minta naik gaji Oke kita lanjut sedikit lagi kali ya ini tadi
1:00:38udah bahas kalau teman-teman yang pernah mengalami react awal-awal ya seperti ini
1:00:43bentuknya ya dan banyak yang bikin kesandung gitu kayak apa bikin menutup kesandung Nah itu
1:00:50ya itu penjelasannya sih kecil dot-dot nul yosi angkat type error set state of no at increment
1:00:59nah berarti dia manggil sesuatu yang increment-increment nggak ada disnya enggak
1:01:09enggak enggak di konteks yang sama kelihatannya disalut set-state yang di dalam Coba coba
1:01:21kesalahannya ini ya bukan bukan bukan bukan itu solusinya di link harus buka video tapi
1:01:29Wah ini yang ini pakai bain-bain itu enggak sih bukannya Iya kelihatan salah satu work around
1:01:39nya pakai main jadi biar diset state sama disin kremen itu mengacu pada konteks yang
1:01:45sama nah cuma exactly gimana enggak enggak inget sih inget-inget dulu pernah ketemu masalah mirip
1:01:53gini dan kelihatan pernah cari apa solusinya dan pernah klik si video yang di link ini juga cuma
1:02:01intinya eh ya perbedaan konteks dis aja nah terus argumennya dia adalah kalau kita harus mikir dis
1:02:11itu banyak kasus-kasus yang bisa bikin yaitu unexpected error dan kita harus melusurkan itu
1:02:19konteksnya dari mana betul nah dia me dia menyarankan menghindari bis dengan bikin
1:02:29pure function kecil-kecil pure function Oke ada get name kemudian person ini yang dari Oh dari
1:02:39person ini ya person masukin ke set name greeting dan lain-lain jadi agak lebih panjang ya ini
1:02:47ekivalen yang ini kan sama sih baris 27 27 baris yang ini berapa 27 juga sama persis cuma ideomatik kayak cara mikirnya bukan cara mikir yang kelas yang semua di dalam satu objek gitu yaudah keketengan aja
1:03:06hmm oke
1:03:09udah itu argumennya dia sih
1:03:16jadi usage of class is not bad ya nggak apa-apa
1:03:22cuma apa kalau mau menghindari kekusingan bis bisa pakai sebetulnya ya pakai function aja terus kalau
1:03:32di bawah ada ada bonusnya lagi menarik sih contoh-contohnya ada pattern namanya modul
1:03:38pattern jadi sebetulnya malah mirip yang yang tadi tuh yang pas kita bikin dog object pakai
1:03:46function itu loh yang contoh awal sebelum ada kelas. Balik ke situ lagi jadinya. Iya-iya ini kan
1:03:53kita bikin objek ya. Objek tapi jadinya ada method. Jangan lupa di JavaScript kan function itu apa
1:04:01first class apa itu namanya yang bisa ya bisa di oper-oper maksudnya function method itu ya tetap
1:04:08bisa di bisa kebawalah kalau apa ini si person objek baru tuh pakai get person ya ya nah ini
1:04:17ini artikel yang sangat menarik Kenapa karena Kenshi dot itu latar belakangnya adalah dari
1:04:23programmer Java sebenarnya nah dia berkhianat agak-agak menurut kalau dia lebih prefer fungsional
1:04:30daripada mungkin dia udah biasa kelas yang sudah biasa dibandingkan dengan Java yang istilahnya
1:04:37OOP-nya udah lengkap gitu kan
1:04:39tiba-tiba di javascript kok banyak yang aneh ya
1:04:41kok pake this ya kok pake ini bingung gitu kan
1:04:43mungkin itu yang membuat dia akhirnya
1:04:45lebih memilih paradigma fungsional
1:04:48mungkin gak tau juga gitu tapi ini menarik sih
1:04:50maksudnya kita dapet
1:04:51dua sisi kan OOP itu
1:04:53gimana fungsional itu seperti apa
1:04:56gitu dan
1:04:57terus pertimbangannya apa?
1:04:58bagusnya dia ngejelasin semua sampai bonus-bonusnya tuh
1:05:01bonusnya kebawah masih ada lagi tuh
1:05:03jadi kayak masing-masing ada
1:05:05ada pertimanya kelebihan kekurangannya yang tadi tuh apa yang yang appendix pertama itu sebetulnya
1:05:13aman-aman aja dari segi Mose kalau kita bikin person objek ya tetap tetap ada apa tetap ada
1:05:21propertinya tetap ada metodnya tetap ada propertinya cuma masalahnya apa tadi punya
1:05:27dia ngejelasin masalahnya
1:05:30itu kan bukan dari inheritance kan gak salah ya
1:05:35jadi one of the flows tuh, bawah dikit
1:05:38one of the flows of the model pattern
1:05:41every person has its very own copy of its property and function
1:05:46jadi bukan satu, itu kayak dianggap function yang berbeda
1:05:50yet gripping callback
1:05:52kita gak bisa tahu bahwa ini adalah
1:05:57hal yang sama
1:05:59hal yang sama dengan persen dua
1:06:01yang minimal
1:06:04get greeting callbacknya itu sebetulnya
1:06:06sama mesin dianggap
1:06:08dua function, dua method yang
1:06:10sama sekali berbeda
1:06:11nah kan persenakitan
1:06:14buat kita itu masalah atau enggak
1:06:16maksudnya buat usagenya kita
1:06:17ya cuma minimal dia ngejelasin
1:06:19kayak gitu loh
1:06:20ini ada pengaruhnya sama
1:06:23performance gak sih?
1:06:25kayak mungkin kalau banyak banget ya ada kan jadi kan Occupy memori semua tuh memori ya Iya bener
1:06:32tapi musik harus sebanyak apa datanya kayak sebanyak apa yang sampai itu cukup mengganggu
1:06:37gitu kompleksitinya betul-betul Iya Nah kalau pakai ero function kayaknya udah implicit bain
1:06:44Iya bener-bener yang menuju makanya waktu di react zaman dulu biar enggak pusing ya kita pakai pakai
1:06:49function aja kan jadi disnya itu enggak enggak enggak masuk ke dalam si functionnya kan ada lagi
1:06:59artikel-artikel itu detail banget private property tapi pakai private properties biar enggak itu tadi
1:07:09biar metodenya enggak dipakai diluarkan tadi yang apa konflik berhitung sama dengan person.get
1:07:16setting tuh bisnya ilang nah ini dibikin diumpetin biar enggak biar enggak dipakai dari luar dimana
1:07:22konteks bisnya itu enggak ada atau berubah variasi kelas properties muncul kayaknya saya udah nggak pakai kelas lagi udah kayak gini ya caranya pakai pakai hashtag ini ya baru lihat nih terus ini
1:07:42ada yang menarik nih kayak tadi this dead sama dengan disini kayak gini kan ini di sebenarnya
1:07:47di distruttering dan sebenarnya ya ini kan ya dia ngambil greeting nya doang Oke kemudian ya di
1:07:58return return nya pakai ero function ya ini return-nya return fungsi dong ya iya tingkol
1:08:10Oh iya bener tuh menggila dua kali ada ini habis itu ada ininya subjeknya subjeknya John
1:08:20bisa gini ya ya inilah yang cuma ini baca artikel sekali ini pasti agak cuma pas dilihat lagi pasti
1:08:35Oh gitu yang biasa anak-anak Twitter sebut sebagai akrobat ya banyak akrobatnya jungkir balik ini
1:08:46asli jungkir balik yang pemutar lagi udah ini oke oke oke tapi kan ini kalau pada akhirnya
1:08:57Ini berbagai cara buat
1:08:58Junggir balik itu untuk
1:09:00Mengeksekusi
1:09:02Perkara prototipe dan
1:09:05Inherit waris
1:09:06Ya hukum waris lah ya
1:09:08Waris
1:09:10Oh iya iya
1:09:11Mau wariskan gitu ya
1:09:13JS nyebelin makanya dengki
1:09:18Wah jangan dengki dong
1:09:19Kalau
1:09:20Berbahagialah teman-teman yang mungkin
1:09:23Sebuah privilege ya yang tidak
1:09:25mungkin pekerjaannya tidak ada hubungannya
1:09:28sama javascript
1:09:28selamat menikmati gitu
1:09:31tapi kalau kita yang mau tidak mau
1:09:34rezekinya di javascript gimana ya
1:09:35tapi
1:09:37jokes aside
1:09:40gitu ya
1:09:40memang javascript banyak aneh-anehnya
1:09:43tapi di sisi yang lain
1:09:45kadang-kadang keanehan itu ada sebabnya
1:09:48yang mungkin kita gak tahu
1:09:50semua ada
1:09:52maksudnya semua keanehan itu
1:09:53ada sebabnya sih
1:09:54ya itu penjelasan kita tahu saja penjelasannya maksudnya seperti apa akhirnya kita nge-o begini
1:10:01jadi javascript adalah salah satu bahasa yang banyak disalah artikan jadinya karena banyak
1:10:07konsep-konsep yang berbeda dengan bahasa yang lain mungkin itu jadi lalu timenya juga mau saya
1:10:14ekstrim ya tadinya konsep awal kan cuma buat di browser doang Iya makin lama ya dimana-mana
1:10:20Coba bayangkan ya, jadi Brandon Egg gitu, dia tadinya ditawarin, oh boleh bikin bahasa pemogaman favorit kamu di browser
1:10:30Masukin skin di browser, ayo sini kerja, kerja sama kita
1:10:34Disuruh miripin kayak Java deh, biar laku, yaudah dia bikin gitu kan, dia udah stress gitu, dia bikin
1:10:39Dikasih waktu berapa? 10 hari, 1 sprint
1:10:42terus abis itu
1:10:45ini bahasanya buat browser aja
1:10:47buat validasi form
1:10:51kalau ada yang klik ini
1:10:52nampilin ini gitu kan
1:10:53terus abis itu tiba-tiba javascript dipakai buat aplikasi
1:10:57buat server
1:10:58dungkir baliknya
1:10:59buat server lagi kan
1:11:02bisa buat server
1:11:03itu gak kebayang sih karena memang
1:11:05peruntukannya di awal ya buat
1:11:07penunjang
1:11:09penunjang dokumen html
1:11:11yang kalau di klik dia lari kemana
1:11:14nampilin alert dan
1:11:16yang hal-hal sederhana terus tiba-tiba
1:11:18menjadi full
1:11:21semuanya di load pakai
1:11:22javascript sempat kan
1:11:24sempat masa itu dimana kalau kita load
1:11:26isinya div kosong
1:11:28terus tiba-tiba yang render itu javascript
1:11:30semua gitu kan
1:11:31jadi ya
1:11:34evolusinya
1:11:36lumayan besar gitu
1:11:39jadi kalau banyak yang hal-hal
1:11:40yang aneh-aneh unik ya mungkin ada peninggalan-peninggalan masa lalu yang
1:11:47belum di clean up gitu masih masih ke harus memfasilitasi berbagai rantai harus
1:11:54memfasilitasi berbagai jenis developer diawal yang tidak kalau bikinnya kejar setoran
1:12:00yang harus dibenerin
1:12:02secara incremental.
1:12:04Iya. Dan yang tidak kalah penting
1:12:06adalah backward compatibility.
1:12:08Uh-uh.
1:12:09Nggak boleh breaking.
1:12:11Iya. Ini kalau bahasa lain
1:12:14mungkin yaudah. Breaking change aja.
1:12:15Breaking aja. Nggak apa-apa. Orang ngikutin.
1:12:18Kalau JavaScript nggak bisa.
1:12:19JavaScript versi 3 digalain di browser
1:12:21sekarang ya harus bisa jalan.
1:12:23Jadi itu yang harus diakomodir
1:12:25oleh para pencipta
1:12:28atau yang kontribusi ke JavaScript berbagai runtime-nya
1:12:32yang membuat supaya JavaScript zaman jadul sampai yang paling modern itu bisa,
1:12:38nggak paling modern sih, yang cukup modern itu bisa tetap bisa dieksekusi di browser.
1:12:46Itu hal yang sangat challenging.
1:12:51Apa nih?
1:12:52Fun fact, pakai kelas di High Performance JS,
1:12:55pakai kelas dengan metode clear lebih cepat dibandingkan pakai objek pakai objek maksudnya
1:13:01Pak ya pening memiliki in objek satu persatu kalau bikin objek satu persatu walaupun pakai
1:13:09apa yang tadi pure function terpisah kan semua masing-masing Oke payah memori tuh bikin objek
1:13:15lagi bikin objek lagi bikin objek lagi yang tadi itu kayak get greeting call back misalnya
1:13:19masing-masing objek punya metode get greeting call back Nah kalau misalnya enggak pakai kelas
1:13:23cuma pakai definisi objek biasa
1:13:26itu kan masing-masing kayak dianggap terpisah
1:13:28kalau misalnya kita punya 20
1:13:29objek person
1:13:31ada 20 metode
1:13:34bawaan
1:13:35dan
1:13:38kalau pakai person cuma
1:13:40satu, ya tergantung kita
1:13:42pakainya buat apa
1:13:43betul kembali lagi ke kita jadi kita udah tahu nih oh javascript bisa AOP tapi banyak kejutannya
1:13:56Yaudah kalau nggak suka ya pakai yang fungsional gitu.
1:13:59Kalau nggak suka juga yaudah cari platform lain selain javascript.
1:14:03Mungkin sekarang kan udah banyak ya, ada typescript lah, ada rescript, ada apa lagi?
1:14:08Ada pure script, ada element.
1:14:11Iya semuanya compile to javascript ya.
1:14:13Tapi kan kita istilahnya
1:14:15Meskipun kita belajar bahasa-bahasa yang ditulis di atas JavaScript
1:14:18Ketemu error, errornya JavaScript kan
1:14:20Jadi tetap harus belajar JavaScript juga kan
1:14:24Sebelum belajar bahasa-bahasa itu kan yang di atasnya gitu kan
1:14:27Buat semua sekarang
1:14:29Haskell
1:14:31Haskell yang ada scriptnya pure script ya kalau nggak salah ya
1:14:37Haskell kayak gimana sih bahasanya
1:14:40Bahasanya
1:14:41programnya matematis matematis
1:14:47pure script pada akhirnya terpelajari javascript ya mau nggak mau ya karena kalau develop buat
1:15:00word harus mau errornya javascript masalahnya masih javascript kecuali nanti ada browser yang
1:15:08berani kita pakai TypeScript gitu.
1:15:11JavaScript
1:15:12udah nggak bisa gitu.
1:15:13Nah itu baru.
1:15:17Karena sempat ada
1:15:19beberapa momen
1:15:20beberapa browser
1:15:23ingin mengganti JavaScript
1:15:25tapi belum berhasil sampai sekarang.
1:15:28Microsoft sempat ngeluarin
1:15:28namanya J++
1:15:31kalau nggak salah ya. Itu saingannya
1:15:33JavaScript. Mau ditanam
1:15:35di Microsoft Edge Internet Explorer explorer belum Iya tapi nggak jadi terus Chrome juga pernah mau
1:15:48tanam Dart dulu sempet ada wacana kesana tapi akhirnya nggak jadi akhirnya dati adopsi sama
1:15:58ya kan ini sempat ada cuman ya balik lagi apa browser kan enggak cuman satu pemain kan pemainnya
1:16:07banyak dan pemainnya ini kan enggak mau dimonopoli oleh satu or satu pihak doang kan jadi harus ada
1:16:12kesepakatan yang TC 39 ya kalau salah ya kalau mereka masih tetap mempertahankan si javascript
1:16:18ya ya kita berharap aja semoga typescript ini atau bahasa-bahasa scripting yang diatas javascript
1:16:27bisa sedikit-sedikit diadopsi ke JavaScript.
1:16:31Seperti coffee script, berapa fitur coffee script yang diadopsi
1:16:35kayak R function, sintaks yang lebih singkat, dan lain-lain.
1:16:41Itu tadi prototype juga kan diadopsi dari library external.
1:16:45Framework, betul.
1:16:47Tapi tetap batasannya bahwa behaviornya tetap bakal gitu,
1:16:50cuma syntactic sugar atau apalah yang mempermudahkan,
1:16:54kayak prototype juga mempermudah.
1:16:55JavaScript ya mungkin nanti paling ujungnya gitu.
1:16:58Cuma maksudnya kayak perspektifnya, cara kerjanya ya mungkin nggak berubah secara signifikan ya.
1:17:06Signifikan.
1:17:07Mungkin bisa option.
1:17:09Jadi ada wacana katanya JavaScript nanti bakal ada typenya juga.
1:17:15Mungkin itu opsional.
1:17:16Jadi bisa pakai atau bisa nggak.
1:17:19Untuk ya itu.
1:17:20Kesulitannya si JavaScript berkembang itu terutama di browser ya compatibility.
1:17:24blackboard compatibility harus jaga teruskan wasm enggak matang masih menunggu ras di frontend ya wasmnya mungkin nulis wasm
1:17:40nulis ras untuk wasm sebenarnya mungkin masih ke udah aman gitu ya bisa ya tapi yang untuk
1:17:47manipulasi domnya belum ada ya API kesananya belum belum ada ya Iya sama kayak PHP ya ada
1:17:56tapi optional mungkin kita enggak tahu karena ada wacana katanya ya kita mau tambahin types gitu
1:18:02misalkan kayak flow kan zaman dulu ada flow gitu kan ada apalagi itu ada js-js doc ya itu juga
1:18:08bisa digunakan gitu ya jadi begitulah cerita kita tentang JavaScript dan OOP dan JavaScript
1:18:16cukup ngawur ngindul tapi seru ya Iya banyak banyak hal yang kita pelajari juga kan oke kalau
1:18:25terima kasih ya buat teman-teman semuanya
1:18:28yang sudah ikutan diskusi ini
1:18:30seru banget diskusinya
1:18:31seru
1:18:32kita malah lebih banyak belajar
1:18:34dari komen
1:18:36betul
1:18:38karena kita juga banyak yang gak tau ya
1:18:42kita taunya mungkin sebagian
1:18:44dan banyak juga
1:18:45teman-teman disini yang
1:18:47mungkin yang mengulik lebih dalam
1:18:49dibandingkan kita
1:18:51jadi ya terima kasih
1:18:54insightnya, terima kasih diskusinya
1:18:57kita ketemu lagi minggu depan
1:18:58ketemu lagi minggu depan di hari yang sama
1:19:00di jam yang sama juga, kembali ke jam 8
1:19:03dengan topik yang beda
1:19:05mudah-mudahan nanti kita bisa
1:19:09diskusi lagi minggu depan, oke
1:19:10kalau begitu, untuk malam ini
1:19:12sekian dulu, terima kasih banyak, sampai jumpa
1:19:15minggu depan, bye-bye
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
27 Feb 2024
Ngobrolin Fungsional JS - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
8 Okt 2024
Ngobrolin Deno - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
5 Nov 2024
Ngobrolin MicroFrontend - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...