Ngobrolin OOP di JS - Ngobrolin WEB

1:16Oh, wow, jauh sekali.

1:19Jam 4 sore.

1:21Ini ya, mengunjungi kakek ya?

1:23Kakek Zeus.

1:25Sebenarnya mau ketemu sama Tante Athena sih.

1:28Athena.

1:29Iya, silahatulah ketemu sama Tante Athena.

1:32Oh, kalau di sana...

1:37Eh, sebelum ke Athena kan sempat ke Turki ya?

1:40Iya, sebelumnya sempat ke Turki.

1:43Suruh banget tuh di Turki.

1:44Berasa enggak?

1:45Ramadhan sama lebarannya berasa enggak sih?

1:48Berasa banget, berasa enggak.

1:50Karena pas kita di sana tuh di...

1:54Kena Ilulwitri kan.

1:55Kena hari rayatnya gitu ya.

1:57Ya, pas ya.

1:58Kita...

2:00Dan gue...

2:01Maksudnya sengaja mengunjungi...

2:03Blue Mosque.

2:04Hagia Sophia.

2:05Hagia Sophia itu Blue Mosque ya.

2:06Itu...

2:08Lagi jam solatnya tuh kelihatan banget tuh semua.

2:13Penuh tuh, Hagia Sophia nya.

2:15Dipakai buat solat, jadi kita gak bisa masuk.

2:17Jadi habis solat...

2:19Oke.

2:21Ya, lame banget.

2:22Itu...

2:24Sempat gue video...

2:25Video callan sama istri.

2:27Dia...

2:29Komen yang pertama kali di situ...

2:31Style bajunya hetero banget ya.

2:33Maksudnya...

2:34Jomplong banget.

2:35Ada yang...

2:36Style Eropa.

2:37Ada yang style...

2:38Style Asia.

2:39Asia.

2:40Ada yang style...

2:42Mediteran.

2:44Mediteran.

2:45Jadi kayak semuanya...

2:47Misalnya kalau dibilang...

2:48Kalau...

2:52Jogja itu kan kota belajar...

2:54Kayak kita bisa ketemu...

2:56Ketemu orang dari seluruh...

2:58Indonesia itu ada di Jogja.

3:00Biasanya.

3:01Ya.

3:02Ya, kalau kita ke Istanbul...

3:04Itu serasa kita lagi kayak...

3:05Berpunjung, misalnya itu...

3:06Kayak seluruh orang di dunia itu...

3:08Ada di tal.

3:09Berdahan dunia ya.

3:10Lakin emang grafiknya kan...

3:12Emang bener juga kan.

3:13Apa?

3:14Secara geografis emang ya.

3:16Di Turki mereka menyebutnya...

3:17Half of the world.

3:18Karena mereka...

3:19Batas...

3:20Eropa.

3:21Asia.

3:22Afrika.

3:23Mediteran.

3:24Semuanya ada di situ.

3:25Ya.

3:26Mereka itu sebenarnya...

3:27Secara geografis kan lebih...

3:28Ke Asia kan.

3:29Tapi mereka nggak mau kan.

3:30Mereka maunya Eropa kan.

3:31Mereka ikut...

3:33Itu bolanya ikut Eropa ya.

3:35Karena...

3:36Secara ekonomi...

3:38Mungkin mereka lebih terangka...

3:39Ya.

3:40Mereka mengatakan Eropa.

3:41EU.

3:42Masuk EU juga kan.

3:43Makanannya apa?

3:44Berarti iya.

3:45Makanan lebarannya.

3:46Makanannya yang bikin.

3:48Nastar.

3:49Yang jelas...

3:50Tidak ada ketupat.

3:51Tidak ada ketupat.

3:52Gak ada ketupat.

3:53Apa di sana?

3:54Baklava.

3:55Baklava.

3:56Basterinya kan.

3:57Baklava.

3:58Baklava.

3:59Enak banget.

4:00Kalau hal hidupnya...

4:01Sempat nyobain itu enggak?

4:03Ice cream yang dibalik-balik itu.

4:04Oh.

4:06Sempat.

4:09Cuma...

4:10Waktu gue belinya...

4:11Gue bilang...

4:12Gue nggak mau dimain-mainin.

4:13Iya.

4:14Nggak mau dimain-main.

4:15Kan justru itu.

4:17Ice creamnya.

4:18Jadi ciri khasnya.

4:19Iya.

4:20Tapi kan...

4:21Kesel ya.

4:22Masih sudah bayar.

4:23Masih dimain-mainin.

4:24Gitu.

4:25Gini.

4:26Kalau anak-anak boleh lah.

4:27Itu kan kayak nge-bully ya.

4:29Iya.

4:30Udah pengen.

4:33Terus tiba-tiba gitu.

4:34Akhirnya ada yang kesel.

4:35Nggak mau lagi.

4:36Jadi trauma sama ice cream gitu ya.

4:37Kasian banget.

4:39Ngambek sama abang ice creamnya.

4:41Ngambek.

4:42Iya.

4:43Iya, iya, iya.

4:44Anyway.

4:45Sempat belajar unit testing juga.

4:47Kayak ke Istanbul.

4:49Istanbul, iya.

4:50Code coverage ya.

4:52Kalau pakainya si Ed, nggak bisa ya.

4:53Pakainya si Ed.

4:55Di Istanbul ditolak.

4:56Maaf, Mas.

4:57Nggak boleh masuk.

4:58Iya, iya, iya.

5:00Tadinya kan kita mau bawain materi itu kan.

5:02Tentang code coverage kan.

5:03Ternyata Ivan udah nggak disambung lagi.

5:06Tapi Ivan nggak di mana.

5:07Topiknya dikit banget.

5:08Garing lagi.

5:09Kita mau istimewa banget.

5:10Kita garing.

5:11Kita memang garing.

5:14Anyway, kita lagi ngobrol-ngobrol santai aja ya.

5:17Catch up dengan habis liburannya.

5:19Teman-teman udah 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, iya.

5:28Udah baru masuk, iya.

5:29Atau ada yang masih di kampung halaman?

5:32Ada yang masih di kampung halaman?

5:34Mungkin boleh.

5:35Komen-komen.

5:37Awas extendednya jangan lama-lama.

5:40Nanti dipermanentikah.

5:43Atau mungkin udah wefa dari kampung gitu.

5:45Enak ya.

5:46Itu bisa.

5:47Atau ada yang ini ya harus balik karena baru pindah.

5:54Terjabat macet.

5:55Asyik.

5:56Asyik.

5:57Hari pertama.

5:59Hari pertama masa tengah bulan nggak mungkin ya?

6:03Mungkin aja.

6:05Di perorakan.

6:06On-board.

6:08Atau ke Ivan.

6:09Ini lagi, ini sebenarnya bukan jalan-jalan kan.

6:11Kampanye retreat kan ya.

6:12Sebetulnya kerja berkedok jalan-jalan.

6:14Atau sebaliknya jalan-jalan berkedok kerja.

6:17Sebenarnya di depannya kerja 100%.

6:20Perus kerja remote ya.

6:21Perus kerja remote ya.

6:23Karena di sini.

6:24Di sini kerjanya lebih intens.

6:28Karena ketemu langsung.

6:30Lebih intens.

6:31Iya karena ketemu langsung.

6:33Bahkan kita kemarin tuh set up office hour.

6:36Kayak diskusi bersama.

6:39Kayak handling tiket.

6:41Terus kemudian tiketnya di diskusi.

6:43Jadi justru ngambil tiket yang paling complicated.

6:47Solve bareng-bareng saat itu juga.

6:49Bahkan kayak.

6:51Kalau ada orang infrastructure-nya.

6:53Kan orang intranya datang juga kan.

6:55Jadi kita tarik tangan orang intranya.

6:57Kita punya masalah ini.

6:58Terus.

6:59Begini-begini.

7:00Akhirnya kayak nyari solusi sama-sama.

7:02Terus bikin action item-nya ramir-ramir.

7:04Terus kemudian bikin tiketnya.

7:06Terus.

7:08Gak banyak hands-on tapi lebih banyak diskusi.

7:11Langsung.

7:12To the point.

7:15Karena.

7:16Kalau asynchronous work kan biasanya.

7:19Ini ya.

7:20Nunggu ada.

7:22Ada synchronous time-nya kan.

7:24Ada.

7:25Kalau ini kan langsung tarik orang ya.

7:27Yuk kita solve.

7:28Gitu.

7:29Asik.

7:30Jadi cepet.

7:31Itu cepet lebih.

7:32Serasa.

7:33Serasa.

7:34Serasa balik.

7:35Serasa balik ke kantor ceritanya.

7:37WFO.

7:38Dalam waktu singkat.

7:39WFO.

7:40Dan.

7:41Pasti senang sih.

7:42Asal dia lama-lama.

7:43Iya.

7:44Asal dia bermain.

7:45Yang jarang yang bisa dilakukan.

7:48Sehari-hari dilakukan pada saat itu ya.

7:50Jadi.

7:51Seru ya.

7:53Hmm.

7:54Oke.

7:55Oke.

7:56Nah.

7:57Kok mute.

7:58Mic-nya ke mute.

8:00Di telepon.

8:01Di telepon istri.

8:02Di telepon istri.

8:03Oke.

8:04Oke.

8:05Siap.

8:07Laporan dulu ya.

8:08Laporan.

8:09Anyway kita malam hari ini.

8:11Membahas.

8:13Kita lagi dibahas code coverage.

8:15Enggak jadi.

8:16Kita udah sempet membahas.

8:19Tentang.

8:20Funksional.

8:21Funksional.

8:22Di Jogoscript ya.

8:23Beberapa waktu yang lalu.

8:25Dan di episode.

8:26Kita malah bahas funksional dulu ya.

8:27Iya.

8:28Kebalik ya.

8:29Rivalnya funksional.

8:31Yang gak kebalik lah.

8:32Kalau di Jogoscript.

8:33Rival.

8:34Apa ya.

8:35Metode.

8:36Metode program yang cukup populer gitu ya.

8:38Jadi di episode ke 80 ya.

8:40Episode kita yang ke 80 ini.

8:42Kita bahas tentang Object Oriented Programming.

8:44Di Jogoscript.

8:45Karena Jogoscript ini kan multi paradigma ya.

8:48Jadi bisa OOP.

8:49Bisa funksional.

8:50Bisa prosedural.

8:51Bedanya funksional sama prosedural.

8:53Apa ya.

8:54Sama kan.

8:55Kita bahas kan waktu itu.

8:56Yang.

8:57Apa.

8:58Sambil live-coding di.

8:59Dev-code.

9:00Dev-tube console bukan sih.

9:01Kalau.

9:02Waktu.

9:03Jaman.

9:04Imperatif.

9:06Diklaratif.

9:07Gak.

9:08Ada juga funksional.

9:09Kalau di C++ funksional dan prosedural itu bedanya.

9:11Kalau funksional pasti return value.

9:13Kalau prosedural.

9:14Return point.

9:16Nah udah pasti return point.

9:18Oh gitu side effect dan pure function.

9:20Versus side effect.

9:22Iya.

9:23Hmm.

9:24Iya.

9:25Jadi malam hari ini kita akan bahas sisi.

9:27Object Oriented nya.

9:29Si Javascript.

9:30Nah mungkin.

9:31Tapi sebelum itu saya mau bahas dulu.

9:33Sedikit apa ya.

9:34Latar belakang lah.

9:35Latar belakang.

9:36Cerita.

9:37Kenapa Javascript bisa.

9:39Kok bisa.

9:41Kok dia kayak funksional.

9:43Funksional banget gitu ya.

9:44Kalau kita perhatiin kok funksional banget.

9:46Karena.

9:47Beberapa.

9:48Ciri khas bahasa funksional.

9:49Ada di Javascript.

9:50Seperti high level.

9:51Apa.

9:52High.

9:53Higher order function.

9:54First class citizen.

9:56Funksion itu sebagai first class citizen.

9:58Terus bisa.

9:59Apa.

10:00Bisa.

10:01Tadi.

10:03High order function.

10:04Terus apa lagi ya.

10:05Explicit return.

10:07Implicit return kan.

10:08Dia pasti ngeretern kan.

10:09Implicit return.

10:10Iya implicit return.

10:11Itu juga bagian dari funksional programming.

10:13Tapi.

10:14Juga dari awal.

10:15Javascript.

10:16Udah.

10:17Mendeklarasikan bahwa dia adalah.

10:18OOP.

10:19Walaupun.

10:20OOP yang.

10:23Mirip mirip.

10:24OOP pada umumnya kita ketahui.

10:26Itu baru.

10:27Baru mulai dari S6 ya.

10:29Baru mulai muncul.

10:30Itu.

10:31Apa.

10:32Sintax kelas.

10:33Itu berdua dia di.

10:34S6.

10:35Iya.

10:36Nah.

10:37Sejarahnya gimana sih.

10:38Nah.

10:39Sejarahnya adalah.

10:40Kira-kira.

10:41Kayak gini.

10:42Jadi.

10:43Si pembuat.

10:44Javascript.

10:45Namanya.

10:46Pak Brandon.

10:47Muncul lagi.

10:48Paper ini.

10:49Kita sering ya.

10:50Ya ini paper lagi.

10:51Kita refresh paper ini lagi.

10:52Karena menarik.

10:53Gitu.

10:54Karena ini sejarah ya.

10:55Senjarah.

10:56Funksional.

10:57Jadi si pak Brandon ini.

10:58Ternyata dia.

10:59Di imingi.

11:00Di imingi oleh.

11:01Oleh apa ya.

11:02Mungkin HRD nya di Netscape.

11:04Join kita yuk.

11:05Join kita yuk.

11:06Join kita yuk.

11:07Kamu boleh.

11:08Ngapain aja.

11:09Dengan iming-iming.

11:10Kita mau buat.

11:11Coba bikin.

11:12Bisa bikin scheme.

11:13Di browser.

11:14Kita mau buat bahasa.

11:15Untuk browser.

11:16Nah.

11:17Kebetulan si.

11:18Brandon eike ini.

11:19Dia mengidolakan bahasa pemograman namanya scheme.

11:22Scheme ini.

11:23Family nya.

11:24Lispy ya.

11:25Clojure.

11:26Lispy.

11:27Dan temen-temennya.

11:28Macanya Lispy ya.

11:29Bukan L.

11:30Bukan LISP ya.

11:31Kalau Lispy kan penya nggak ke itu kan.

11:33Lispy.

11:34Lispy.

11:35Lispy.

11:36Lispy aja.

11:37Akhirnya.

11:38Karena.

11:39Apa.

11:40Ter.

11:41Terpancing dengan itu.

11:42Jadi dia.

11:43Mungkin ya.

11:44Iming-iming.

11:45Janji manis.

11:46Marketing.

11:47Janji manis ya.

11:48Marketing.

11:49Janji manis HRD.

11:50Akhirnya dia join.

11:51Begitu dia join.

11:52Wah.

11:53Ternyata.

11:54Di dalamnya udah kompleks sekali.

11:55Ya.

11:56Situasinya udah.

11:57Udah sangat kompleks.

11:58Yang membuat.

11:59Akhirnya.

12:00Dicari lah kandidat.

12:03Kira-kira scripting lens use buat web itu.

12:05Yang cocok apa.

12:06Salah satunya ya.

12:08Scheme.

12:09Terus ada Perl.

12:10Ada Python.

12:11Ada TCL.

12:12Sama ada Visual Basic.

12:14Tapi si Brandon Aiknya.

12:16Masih pengen.

12:17Ya sesuai janji apa loh kan.

12:18Masih.

12:19Kan iming-imingnya.

12:20Ayo.

12:21Nanti bisa masukin scheme ke browser loh.

12:22Iya.

12:23Masih.

12:24Dan kayaknya ini jenis bahasa.

12:25Yang idealis banget ya.

12:26Buktinya idealis.

12:27Betul.

12:28Sekarang kita gak pernah.

12:29Sekarang scheme punahan.

12:31Yang demen ya.

12:32Maksudnya orang-orang pemikir yang model-model Brandon Aik itu.

12:36Masih diajarin di beberapa kampus.

12:38Oh masih.

12:39Scheme.

12:40Masih ada.

12:41Masih.

12:42Masih.

12:43Nah.

12:44Nah di sisi lain si Netscape-nya ini.

12:48Punya Bill Dillon sama Sun.

12:50Yang bikin Java.

12:52Jadi walaupun dia tidak bisa implementasi scheme di browser.

12:57Sampai sekarang itu masih ada.

12:59Gaya-gayanya scheme itu di JavaScript sebenarnya.

13:02Kalau ada yang tahu ya.

13:03Karena kita gak tahu dalam tentang scheme.

13:05Jadi kita gak ngeh gitu kan.

13:07Nah.

13:08Masalahnya sekarang si Netscape ini.

13:10Pada tahun 95 itu.

13:12Dia bisa dikategorikan sebagai perusahaan kecil lah ya.

13:15Masih baru berkembang kayak startup gitu kali ya.

13:19Dia mau bikin.

13:20Dia udah bikin browser.

13:21Terus dia mau bikin bahasa di atas browser-nya.

13:24Sedangkan pada saat itu.

13:26Sun kabarnya.

13:28Ini Sun.

13:29Sun Microsystem kabarnya.

13:31Udah gencar-gencar sekali mengkampanjakan.

13:35Java yang belum release.

13:37Akan segera release.

13:39Itu kan.

13:40Ya.

13:41Nah si timnya Netscape ini bilang.

13:44Daripada kita keluar duit marketing sendiri.

13:47Mendingan kita dompleng aja si Sun.

13:49Jadi kita bikin bahasa yang kayak Java.

13:53Dan dulu katanya kan gamutnya mau dibikin Java itu untuk server-site-nya.

13:58Script-nya.

13:59Kalau yang buat client-site-nya yang di browser itu Java Script.

14:03Jadi kayak dijual paket gitu lah.

14:05Wah enak.

14:06Kecil.

14:07Kepencet.

14:08Oke lanjut lanjut.

14:09Kirain sengaja mau cari.

14:11Enggak.

14:12Kepencet.

14:13Nah.

14:14Nah.

14:15Jadi akhirnya.

14:17Netscape plus Java kills Windows.

14:20Ya.

14:21Jadi akhirnya.

14:23Udah lah.

14:24Apa jadi di ambil titik tengah.

14:26Kita bikin sintaksnya.

14:28Family-nya si Java gitu ya.

14:30Yang pakai kurung-kurawal dan lain-lain.

14:32Yang seperti JavaScript sekarang.

14:35Tapi.

14:36Apa ya.

14:37Idealismenya si Brandon Aik tetap ada.

14:39Salah satunya adalah.

14:41Mereka tetap.

14:43Mau bikin klase.

14:45Atau OOP.

14:46OOP tapi tidak klas base.

14:48Nah ini.

14:49Salah satu apa ya.

14:50Salah satu.

14:51Bagaimana sih.

14:52OOP tapi tidak klas base itu gimana ya.

14:54Ya itu.

14:55Jadi.

14:56Sebenarnya.

14:57Mungkin banyak orang yang enggak tahu.

14:58Bahwa.

14:59Object Oriented Programming itu.

15:00Bukan hanya yang klas base.

15:01Jadi kalau misalkan yang kita tahu.

15:02Kayak Java C++ gitu kan.

15:04Ada kan.

15:05Klas.

15:06Car.

15:07Extends.

15:08Vehicle gitu kan.

15:09Nah itu klas base.

15:10Tapi ada juga.

15:12Object Oriented Programming.

15:13Yang tidak menggunakan.

15:15Aks klas.

15:16Salah satunya.

15:17JavaScript.

15:18Salah duanya.

15:19Lua.

15:20Itu juga.

15:21Lua.

15:22Tidak klas base.

15:23Tapi dia OOP.

15:24Jadi OOP-nya lebih ke.

15:27Kayak.

15:28Filosofi.

15:29Prototipe.

15:30Inheritance gitu ya.

15:31Prototipe.

15:32Iya.

15:33Prototipe sama itu.

15:36Struktur data object.

15:37Dia berkutat di arah sana.

15:39Jadi ada di JavaScript.

15:40Ada yang.

15:41Struktur data object.

15:42Yang pakai kurung-kurawal.

15:43Nah itu yang dijadikan object.

15:45Jadi disitu bisa ditaro metod.

15:47Atau fungsi.

15:48Bisa ditaro.

15:49Tipe data apa saja.

15:51Gitu kan.

15:52Itulah.

15:53Apa ya.

15:54Bumbu utamanya sebenarnya.

15:55Jadi bukan.

15:56Klas yang.

15:57Mungkin sekarang kita udah bisa bikin ya.

15:58Udah bisa nulis seperti itu ya.

15:59Setelah IS-6.

16:00Ya setelah IS-6.

16:01Tapi pada dasarnya bukan itu.

16:02Jadi disini ada.

16:03Artikel dari.

16:04Free Code Camp.

16:05Yang menjelaskan itu.

16:13JavaScript isn't class based language.

16:16Apa.

16:17Yang di atas itu definisinya.

16:18OOP itu.

16:19Class based programming.

16:20Adalah suatu style dari.

16:21Object oriented programming.

16:22Nah inheritance nya lewat mana.

16:23Inheritance nya.

16:24Lewat definisi.

16:25Classes of objects.

16:26Makanya kan kalau.

16:37Jaman dulu kalau misalkan kita.

16:38Mendefinisikan sesuatu tuh.

16:39Biasanya.

16:40Di.

16:41Kalau di.

16:42Console.

16:43Itu kelihatan ada proto.

16:44Ada underscore underscore proto.

16:45Double underscore.

16:46Terus.

16:47Di artikel-artikel kan sering disebut tuh.

16:48Namanya.

16:49Donor.

16:50D-U-N-D-E-R.

16:56Dunder proto.

16:57Tadinya kirain apa.

16:58Dunder sampai.

16:59Sampai cari di kampus ya kan.

17:00Kaga ada kata-kata bahasa Inggris.

17:01Dunder.

17:02Ternyata itu cuma singkatan.

17:03Double underscore.

17:04Asli.

17:05Dunder proto.

17:06Kayaknya kalau ada yang nyebut.

17:07Dunder proto.

17:08Yaitu maksudnya double underscore.

17:09Proto.

17:10Itu yang menyimpan.

17:11Apa sih.

17:12Kayak.

17:13Objek.

17:21Nah ini bumbu utamanya kan objek ini kan.

17:25Objek ini bisa ada property.

17:27Bisa diisi string.

17:29Atau tipe data lain.

17:31Bisa juga diisi.

17:32Fungsi.

17:34Bisa diisi.

17:35Method.

17:36Method function ya.

17:37Method apa namanya.

17:38Method properties.

17:39Itu.

17:40Oke.

17:41Nah jadi by default kan semua objek itu meng inherit.

17:45Mereka adalah extension dari.

17:47Maksudnya mereka adalah suatu objek ya.

17:50Iya.

17:51Objek prototype.

17:52Dia menganggap sebagai objek.

17:53Iya.

17:54Kalau type of dia jadinya objek.

17:56Nah ini dia.

17:59Adapt underscore underscore proto.

18:01Nah itu si dunder proto.

18:03Iya.

18:06Kalau kita buka.

18:07Proto ini sebenarnya dulu sebelumnya ini kan.

18:09Proto ini kan sebelumnya itu.

18:11Prototype.

18:13Library.

18:14Framework.

18:15Library atau framework ya.

18:16Oh iya ya.

18:17Ya salah satu ini.

18:18Oh menarik.

18:19Berita mau lah.

18:20Today I learn.

18:21Coba masih ada nggak ya.

18:24Apa namanya.

18:25Java script.

18:26Itu librarynya namanya.

18:27Prototype.

18:28Prototype.

18:29Framework.

18:32Jadi ini masuk kategori apa sih.

18:36Prototype GS.

18:39Iya benar.

18:40Hal-hal menariknya framework.

18:43Terus lama-lama diserap di ECMA scriptnya sendiri.

18:46Iya.

18:47Coba aja buka dokumennya.

18:48Oh terakhir 2015.

18:50Kita lihat ya.

18:53Defining class and inheritance.

18:55Wow.

18:56Tuh defining classnya class.create.

18:59Terus person.prototype.

19:04Iya kan.

19:05Terus ini ada constructor.

19:08Oh iya.

19:10Method property ya.

19:13Ya itu lah.

19:15Constructor lah ya.

19:16Constructor.

19:17Terus ini new person.

19:20Iya.

19:21Ini seperti ini.

19:22Ini awalnya ya.

19:23Baru kemudian diimplementasi, diadaptasi oleh JavaScript ya.

19:27ECMA script ya.

19:29Karena banyak yang pakai, banyak yang suka.

19:32Iya.

19:33Dan di dalam proto ini ada constructor.

19:36Ya.

19:37Object oriented juga kan.

19:40Terus ada hash on property.

19:42Ada to string.

19:43Ada value of.

19:44Dan lain-lain.

19:45Ada banyak.

19:50Akhirnya tetap class tapi terselubung.

19:52Iya.

19:54Jadi dia tidak mau.

19:55Si Brandon Eich ini tidak mau benar-benar yang fully seperti Java gitu.

20:00Karena bahayanya adalah ya ngapain pilih JavaScript.

20:03Mendingan pilih Java aja.

20:04Karena waktu itu kan yang terkenalnya kan Java ya.

20:10Dan prototype ini bisa kita modifikasi.

20:16Oh ini juga sama ya.

20:17Ini modelnya kayak tadi ya.

20:18Bisa.

20:19Bisa.

20:20Tinggal ditimpa aja berarti ya.

20:23Object.create.

20:24Iya tinggal ditimpa.

20:25Ini kan udah model-model class kan ya.

20:29Kayak ada constructor-nya.

20:32Ada method-nya gitu kan.

20:34Iya.

20:35Dan kalau kita lihat ya seperti ini.

20:37Tiba-tiba ada speak-nya di dalam proto.

20:41Karena tadi kita timpa pake constructor.

20:44Ini kan inheritance.

20:47Inheritance.

20:49New keyword.

20:53Nah new keyword ini juga lumayan apa ya.

20:56Nah ini syntactic figure paling menarik sih.

20:59Yang pas ES6 ada class-nya.

21:02Kan ya dengan ada class.

21:04Jadi bisa ini tuh mirip.

21:05Sebenarnya mirip bahasa apa sih?

21:07Bahasa lain ya yang lebih established.

21:09Jadi bisa bilang, bisa mendefinisikan.

21:12Meng-instantiate.

21:14Ya jadi instance ya.

21:18This user sama dengan new user.

21:21Terus bisa di initialize pake argument juga.

21:26Iya.

21:27Ini salah satu menarik juga.

21:29Karena di sini tidak menggunakan class base.

21:34Atau tidak menggunakan sintaks class.

21:38Tapi pake fungsi.

21:41Cuman bisa pake new.

21:43Jadi nyampur ya.

21:44Seolah-olah dicampur gitu ya.

21:46Definisinya pake function aja.

21:48Tapi waktu di initialisasi tetap harus pake new.

21:52Enggak harus ya.

21:54Harus gak sih?

21:56Ya harus kan objeknya function.

21:59Coba-annya.

22:01Coba-annya di konsol lo.

22:03Kita coba ya.

22:05Mana konsolnya?

22:08Oh ini.

22:10OOP tapi bohong.

22:12OOP tapi bohong.

22:13Tota OOP beneran.

22:15Beneran OOP.

22:18OOP tapi yang bukan class base.

22:19Prototype base.

22:20Mana tadi?

22:21Tapi sintaksnya yang bohong.

22:24Maksudnya aslinya gak kayak gitu.

22:26Aslinya enggak.

22:27Ya jadi yang si class base yang sekarang itu adalah pemanis aja.

22:32Nanti di konversi jadi seperti ini.

22:34Oh error.

22:35Enggak boleh copy paste ya?

22:36Enggak.

22:37Warning.

22:38Enggak warning doang kok.

22:40Tapi bisa.

22:41Asal gak boleh?

22:42Hasilnya.

22:43Gak bisa?

22:44Coba.

22:45Oh aloh pasting.

22:48Please type aloh pasting.

22:50Aloh pasting.

22:53Oke.

22:55Nah ini.

22:56Ini kan fungsi ya.

22:58Kalau kita langsung jalanin kan bisa gak?

23:00Doc objek.

23:02Buka.

23:04Namanya John.

23:06Koma 45.

23:09Undefine.

23:11Oh harus di assign ke variable name dong.

23:15Coba.

23:18Gini.

23:19Nah sekarang John apa?

23:21Undefine.

23:22Gak bisa.

23:23Oh Johnnya jadi function juga ya.

23:25Karena gak ada this ya.

23:27Oh iya.

23:28Oh iya betul.

23:30Scope ya.

23:31Ini masuknya masa konsepnya adalah scope.

23:33Nah ya.

23:34Kalau kita kasih new.

23:36Maka dia bisa gak ya?

23:38Nah ini udah bisa nih John.

23:40Muncul.

23:42Oh.

23:43Mana ada?

23:45Dan itu ada program ada speaknya.

23:47Ada.

23:48Berarti bisa juga John.

23:50Maaf kita gak tahu.

23:52Terima kasih.

23:53Sekarang jadi itu ya?

23:54John.

23:55Sekarang John dot speak itu pasti bisa.

23:57John.

23:58John dot speak.

24:00Ya.

24:01Dot speak.

24:02Buka kurung.

24:03Iya.

24:04Tapi perhatikan ya temen-temen ya.

24:07Disini meskipun ini objek literal.

24:10Atau apa ya.

24:11Struktur data objek.

24:12Tapi ini ada tipe nya.

24:14Dalam tanda kutip.

24:15Beda kan?

24:16Dok objek itu meng-extend objek.

24:19Objek prototype biasa.

24:21Kalau misalkan kita kasih gini name sama dengan.

24:24E titik dua.

24:25Jane misalkan kan.

24:27Terus umurnya berapa gitu kan.

24:29Ace nya 40 gitu.

24:31Nah ini kan gak ada.

24:34Dok objek atau apapun.

24:36Kan ini biasa aja gitu.

24:38Nah itu yang membedakan antara yang bisa menggunakan new.

24:42Sama yang tidak.

24:44Kalau misalkan ini.

24:45Misalkan ini Jane.

24:47Kita bikin gitu.

24:49Eh gimana ya?

24:52Iya sama dengan.

24:54Bener kan?

24:56Coba titik Jane.

24:57Atau kalau misalkan gini.

24:59New.

25:00Gak bisa ya.

25:01Gak bisa lah ya.

25:02Gak bisa lah.

25:03Jadi apa?

25:04Error.

25:05Gak bisa gak bisa.

25:06Karena ini.

25:07Terus sekarang Jane.

25:08Karena not a constructor.

25:10Errornya helpful kok.

25:12Coba Jane.

25:14Terus titik Jane.

25:15Masih.

25:17Coba di open itunya.

25:20Di open.

25:22Ada prototype nya juga ya.

25:24Objek juga ya.

25:25Dan banyak constructor nya ada apa.

25:27Jadi Jane dot.

25:29Jane dot.

25:31Has on property.

25:32Itu bisa.

25:33Jane dot.

25:34Dot.

25:35Has on property.

25:37Nama property nya H.

25:39Eh kok ke enter?

25:43String.

25:45Gini ya.

25:47True.

25:52Oke.

25:54Itu yang sedikit membedakan.

25:56Life coding asik ya.

26:04Prototype chaining.

26:06Ini ada juga prototype chaining ya.

26:09Apa tuh?

26:10Hence it also has a proto property.

26:13Which refers to global.

26:15Coba titik Jane lagi deh.

26:17Jadi semua objek yang ada di JavaScript.

26:20Itu pasti ada prototype nya.

26:22Ada protonya.

26:24Chaining itu berarti kan.

26:26Di Jane itu.

26:28Di dock object.

26:30Isi protonya kan.

26:31Prototype nya inherit dari.

26:33Yang bawaan objek.

26:35Semua sama kecuali.

26:36Plus ditambahin satu speak.

26:38Ya kan.

26:39Maksudnya gitu kan ya.

26:41Window objek juga punya prototype.

26:45Window objek nih.

26:46Kalau mau document objek.

26:48Dokumen.

26:49Coba dokumen kalau mau lihat.

26:51Dokumen.

26:53Gini ya.

26:55Oh ini ke print isinya ya.

26:59Window dokumen.

27:01Kalau dokumen mungkin dom.

27:03Gak ada.

27:04Coba kalau window.

27:05Langsung masuk dong.

27:07Window objek.

27:09Ya benar.

27:14Ada protonya paling bawah.

27:16Kok ada on youtube iframe ready.

27:18API ready ya.

27:20Apa itu?

27:23Mana protonya?

27:25Ada protonya somewhere.

27:27Di paling bawah selalu.

27:29Dan di dalam prototype window.

27:31Ada prototype window apa nih?

27:33Coba di geser window apa.

27:37Dibesarin.

27:39Dibesarin ini nya.

27:41Sidebar nya.

27:43Window properties.

27:45Dalam window properties ada.

27:47Prototype event target.

27:49Event target.

27:50Udah gitu aja sampe bosan.

27:52Terakhir objek.

27:54Terakhir objek.

27:56Terakhir objek.

27:59Ini inilah prototype chaining.

28:01Inheritance ya.

28:03Prototype di dalam prototype.

28:05Di dalam prototype.

28:07Wah ini panjang banget.

28:09Diklir aja lah.

28:11Makanya dulu.

28:12Nggak tau nih temen-temen ngalamin ya.

28:14Atau nggak ya.

28:15Saya dulu sempet kebingungan kalau baca.

28:17Baca.

28:19Dokumentasinya javascript.

28:21Karena tulisannya are.prototype.map.

28:23Saya cari misalkan.

28:25Oh iya.

28:27Ini prototype ini apa ya.

28:29Kayaknya gue pernah nyinggung ini.

28:31Di beberapa kali kita bahas javascript framework.

28:33Atau apa kan gue pernah bilang.

28:35Iya terus kita selalu janji-janji gitu.

28:37Oh iya kapan-kapan kita udah bahas nih.

28:39Prototype.

28:41Akhirnya ada Mas Danang.

28:43Oh hai Mas Danang.

28:45Ivan dimana?

28:49Lagi itu mengunjungi kakek.

28:51Di Athena.

28:53Masih siang ya.

28:55Sungkem sama Hercules.

28:57Sungkem sama Hercules.

28:59Minta THR ya.

29:01Jadi dulu.

29:03Setiap kali cari apa ya.

29:05Setiap kali cari metode gitu ya.

29:07array.filter atau array.foreach.

29:09Kok ada prototipenya.

29:11Ini apa.

29:13Kalau ditulis begini kan nggak bisa kan ya.

29:15Iya misalnya.

29:17Dander proto.

29:19Tapi sebenarnya.

29:21Tanpa itu pun.

29:23Sebenernya nggak perlu pake dot prototype.

29:25Tapi langsung dot mapnya bisa.

29:27Misalkan ini.

29:29Yang saya lakukan adalah.

29:31Saya tulis prototype disini.

29:33Prototype.map.

29:35Atau dot filter.

29:37Kok nggak bisa.

29:39Dan terus pas udah tau.

29:41Pas udah kopas.

29:43Yang betul yang jalan.

29:45Ya sebelum ngerti tentang.

29:47Prototype.Konsep.

29:49OOP sendiri ya iya sih.

29:51Bener sama bingung kenapa sih.

29:53Di MDN tulisannya selalu array prototype.

29:55Iya.

29:57Itu yang dulu awal-awal bingung.

29:59Jawabannya adalah.

30:01Karena metode map itu sendiri.

30:03Atau metode foreach.

30:05Metode map apapun itu.

30:07Itu bukan punya nya.

30:09Kayak ibaratnya bukan punya nya si array 123 itu.

30:11Tapi punya apa.

30:13Itu adalah milik dari.

30:15Si array.

30:17Apa itu namanya.

30:19Tipu prototype.

30:21Tipu data array.

30:23Yang punya metode map.

30:25Adalah itu.

30:27Apapun kalau kita mendefinisikan.

30:29Array kita sendiri.

30:31Itu akan meng inherit.

30:33Akan mewarisi ya.

30:35Akan mendapat metode itu.

30:37Bukan karena dia punya metode.

30:39Map sendiri tapi karena.

30:41Boleh dapet dari si tipu data array.

30:43Kalau.

30:45Di PHP.

30:47Kalau di PHP kan kita.

30:49Bisa langsung pakai tipu data array.

30:51Ya kan.

30:53Tapi.

30:55Sandainya kalian mau bikin map sendiri.

30:57Atau mau bikin tipu data.

30:59Yang seperti array.

31:01Tetapi pengen.

31:03Merubah cara kerjanya.

31:05Kan berarti harus dibikin tipu data array sendiri.

31:07Array yang spesial.

31:09Custom array gitu ya.

31:11Itu harus pakai implement.

31:13Accountable.

31:15Namanya kalau gak salah.

31:17Implement ininya.

31:19Apa itu namanya.

31:21Kalau implement itu namanya apa sih.

31:23Bukan extend.

31:25Tapi implement.

31:27Implement itu.

31:29Turunan inheritance bukan ya.

31:31Extend.

31:33Kalau extend kan.

31:35Extend class.

31:37Kalau implement itu dari.

31:39Lupa teori nya.

31:41Lupa teori nya tetapi ada.

31:43Ada implement countable.

31:45Interface.

31:47Interface.

31:49Valeri.

31:51Jadi.

31:53Jadi interface dari.

31:55Countable.

31:57Ada traversable.

31:59Ada.

32:01Macam-macam tuh implementnya ada banyak.

32:03Jadi kalau mau.

32:05Menyerupai seperti array.

32:07Ada implementnya ada banyak.

32:09Bila map nya kita itu mau.

32:11Kita cara ngambilnya gimana.

32:13Itu harus kita implement satu-satu.

32:15Jadi kalau.

32:17Karena.

32:19Array di PHP kita bisa langsung count.

32:21Count itu langsung jadi apa.

32:23Bagaimana apa yang di prosesnya.

32:25Tapi harus ditulis beneran gak.

32:27Itu jenis datanya.

32:29Kita kayak apa.

32:31Jadi class.

32:33Jadi class sendiri kan.

32:35Makanya.

32:37Jadi class custom array nya kita sendiri.

32:39Memang.

32:41Contohnya yang paling ini.

32:43Anggap aja.

32:45Class array nya kita itu.

32:47Saat kita mau ngambil data.

32:49Ternyata ngambil data itu.

32:51Bukan di mapping nya kita.

32:53Tetapi mau ke.

32:55Network.

32:57Contohnya.

32:59Atau file system.

33:01Lebih tepatnya file system sih.

33:03Jadi berbeda sedikit.

33:05Kalau di JavaScript.

33:07Ya itu harus yang.

33:09Kalau mau extend array.

33:11Dengan prototype nya kita juga bisa.

33:13Extend dari array itu kan.

33:15Kita menambahkan.

33:17Prototype.

33:19Method nya kita sendiri.

33:21Yang tadi kayak kita bikin.

33:23Mungkin.

33:25Instead of.

33:27Kita kata kata array.

33:29Kita katakan map.

33:31Jadi a new map. Contohnya map itu mungkin.

33:33Kalau array kita dua dimensi.

33:37Kita pengen bikin dia ada dimensi ketiga.

33:39XYZ gitu ya.

33:41Kita mau implement.

33:43XYZ itu bagaimana hasilnya.

33:45Kita bisa bikin.

33:47Kita bisa extend.

33:49Prototype nya sendiri.

33:51Jadi kita bisa bikin method-method nya kita.

33:53Atau contoh lainnya itu.

33:55Pernah denger kata matrix jarang gak?

33:57Matrix jarang.

33:59Matrix?

34:01Atau jarang pernah denger gak?

34:03Jadi matrix.

34:05Untuk memaping.

34:07Let's say memaping hutan.

34:09Jadi semua.

34:11Value nya itu 0.

34:13Tetapi daerah yang.

34:15Daerah yang kita ingin mark.

34:17Karena mungkin daerah itu ada hutan nya.

34:19Kita bikin ini jadi satu.

34:21Jadi matrix itu.

34:23Jadi seperti peta.

34:25Oh kayak ini kayak di game.

34:27Sprite.

34:29Hitmap.

34:31Jadi semuanya 0.

34:33Dan bagian yang.

34:35Yang terkena.

34:37Yang mau kita hitmarking.

34:39Jadi satu atau dua atau tiga.

34:41Kita jadi koordinat kayak index nya gitu ya.

34:43Ya.

34:45Kan matrix itu kan XN.

34:47XNY.

34:49Ini cuma salah satu sample ya.

34:51Misalnya.

34:53Dalam dunia nyata.

34:55Kalau kalian mau meng-extend array.

34:57Dari JavaScript juga bisa.

34:59Pengen bikin custom mapping.

35:01Link list misalkan.

35:03Ya link list.

35:05Bisa custom mapping.

35:07Sehingga saat dipakai.

35:09Di product itu ya.

35:11Kalian punya method nya sendiri.

35:13Karena array nya sudah prototype.

35:15Bisa di-extend.

35:17Contoh kasus.

35:19Yang pernah saya kerjakan.

35:21Bingung.

35:23Jangan bingung.

35:25OOP itu banyak.

35:27Bahkan sekarang saya baru ingat tuh.

35:29Kalau gak salah goleng juga OOP kan.

35:31Tapi dia adalah struct base.

35:33Nah ini beda lagi.

35:35Struct itu interface kan?

35:37Beda.

35:39Interface itu kita nge-implement.

35:41Dan method yang ada di interface.

35:43Harus kita.

35:45Kita implementasikan.

35:47Kalau struct.

35:49Kita cuma kayak.

35:51Struct itu sudah ada prosedurnya.

35:53Struct itu sudah ada prosedurnya.

35:55Kalau class itu kita kasih struct.

35:57Prosedur itu otomatis dimiliki.

35:59Gak perlu didefinisikan lagi.

36:01Ya.

36:03Tapi istilah-istilah yang umum.

36:05Di OOP juga ada kan.

36:07Di goleng kayak method.

36:09Ya kan.

36:11Itu tetap ada ya. Walaupun gak semua.

36:13Gak pure OOP kan.

36:15Maksudnya yang class base.

36:17Ya.

36:19Jadi ya.

36:21Umum maksudnya.

36:23Hal yang umum bahwa.

36:25OOP itu bukan hanya class base.

36:27Seperti Java atau C++.

36:29Objective-C.

36:31Apalagi yang OOP.

36:33Smalltalk.

36:35Dan lain-lain.

36:37Pascal?

36:39Pascal ada class ya?

36:41Pascal bukan prosedural.

36:43Prosedural kan.

36:45Ya.

36:47Phoebe? Phoebe class.

36:49Betul.

36:51Phoebe C# itu class.

36:53Kalau Swift beda lagi.

36:57Swiftnya Apple itu

36:59protocol orientate.

37:01Apalagi itu?

37:03Interface.

37:05Interface.

37:07Nih nih nih.

37:09Sebentar.

37:11Saya ingatnya itu si Swift itu

37:13struct base. Ternyata bukan.

37:15Interface or protocol type.

37:19Is data type abstraction of class.

37:23Oh salah ya.

37:27Bukan ini ya maksudnya.

37:29Bentar bentar.

37:31Ini.

37:33Itu.

37:35Protocol orientate.

37:37Object orientate.

37:39Lagi share screen gak?

37:41Belum muncul.

37:43Ini.

37:47Swift itu multi paradigm juga.

37:49Tapi dia protocol orientate.

37:51Protocol orientate.

37:53Interface.

37:55Oh protocol itu sinonimnya interface.

37:57Ya.

37:59Ada contohnya gak ya?

38:01Kelihatan gak ya kalau di klik.

38:03Gak ada ya.

38:07Gak ada contohnya ya.

38:09Ya itulah.

38:11Jadi hal yang apa ya.

38:13Bukan hanya JavaScript yang menerapkan

38:15OOP tapi bukan class base.

38:17Tapi ada banyak lagi.

38:19Ya.

38:21Dan berarti sebetulnya.

38:23Berbagai jenis language nih.

38:25Bisa menerapkan OOP dengan

38:27cara mereka sendiri ya.

38:29Yang sesuai sama

38:31sintaks mereka maksudnya.

38:33Bukan all or nothing itu.

38:35Bukan yang kayak.

38:37Harus OOP atau functional atau apa.

38:39Cuma ini bisa kayak di

38:41adaptasi.

38:43Kan eksensinya adalah

38:45gimana caranya suatu

38:47obyek atau jenis

38:49data bisa mengeksten kan.

38:51Intinya kan ada prototipe.

38:53Ada property-property

38:55dari prototipe itu.

38:57Dan bisa diinherit, bisa dieksten

38:59dengan mudah. Kan sebenarnya berarti

39:01esensinya gitu ya.

39:03Cara dia implementnya.

39:05Suka-suka masing-masing bahasa kan.

39:07Suka-suka.

39:09Ntar lagi ada asosiasi

39:11object-oriented untuk mendefinisikan

39:13apa sih object-oriented.

39:17Standard.

39:21Bahkan OOP yang

39:23class-based aja itu

39:25implementasinya bisa beda-beda.

39:27Kalau temen-temen pernah ngoding

39:29class atau OOP di

39:31Python sama di Ruby

39:33yang adalah dua-duanya OOP class-based

39:35itu dua-duanya beda.

39:37Sama Java apalagi. Beda juga.

39:39Jadi masing-masing punya cara.

39:41Karakternya atau hasilnya berbeda

39:43atau pola pikirnya?

39:45Misalkan, nggak tahu ya.

39:49Mungkin sintaks ya. Cara inisiasi.

39:51Misalkan, kalau di

39:53Python itu

39:55kalau kita mau definisiin metode, kita harus

39:57pakai self atau disk kalau di JavaScript.

39:59Jadi disk-nya itu harus ditambahin di

40:01sebagai parameter pertama

40:03di setiap metode.

40:07Tapi Ruby nggak kayak gitu.

40:09Kalau di Java juga nggak.

40:11Jadi ya mungkin cara

40:13ininya aja beda.

40:15Dan tidak mesti semua

40:17ciri-ciri OOP yang class-based itu

40:19diimplementasikan di bahasa masing-masing.

40:21Mungkin ada yang lengkap kayak Java

40:23itu ada semua. Ada inheritance,

40:25ada polymorphism, ada macem-macem kan.

40:27Tapi mungkin di bahasa yang lain,

40:29OOP yang lain, mungkin inheritance ada.

40:31Mungkin polymorphism ada.

40:35Iya. Misalkan kayak JavaScript

40:37sendiri, private

40:39property kan nggak ada.

40:41Baru ada akhir-akhir ini ya.

40:43Dulu kan nggak ada ya.

40:45Property yang private. Nggak ada kan.

40:47Class yang private juga belum ada.

40:49Belum bisa kan sekarang ya.

40:51Nggak bisa. Kenapa class private terus buat apa?

40:53Nggak bisa di-extend gitu.

40:55Nggak bisa di-export.

40:57Nggak bisa di-extend.

40:59Nggak bisa dibaca di

41:01class yang lain.

41:03Nggak bisa di-class yang tidak turunannya dia.

41:05Jadi ya,

41:11inilah. Jadi ada yang

41:13kayak tadi kan. Gue sama dengan OOP

41:15yang versi lite-nya. Cuma ada beberapa

41:17apa ya. Beberapa ciri

41:21dari bahasa

41:23bahasa

41:25object-oriented. Tapi tidak semua.

41:27Gitu.

41:29Oke. Kita lanjut lagi.

41:31Tadi ya?

41:33Nah,

41:35sejak ECMAScript 2015 atau

41:37ES6, itu mulai

41:39muncul class...

41:41Scroll ke atas sedikit deh. Tadi

41:43penjelasan yang bagus soalnya atasnya

41:45yang tadi kita kelewat sedikit. Nah,

41:47itu object and function combination.

41:49Nah, tadi kan kita

41:51nyoba ini kan.

41:53Kita nyoba manggil dog object

41:55tanpa new kan.

41:57Nah, itu

41:59ternyata ini di eksekusi aja.

42:01Oh, iya, iya, iya.

42:03Benar, benar, benar.

42:05Saya pernah demo ini dulu.

42:07Oh, masih ada nggak function ininya?

42:11Dog object.

42:13Oh, masih ada. Eh, salah.

42:15Object.

42:17Oh, masih ada ya.

42:19Jadi sebenarnya, kita

42:21bisa... Eh, subclass.

42:23Kok subclass? Ini dia.

42:25Sebenarnya kita bisa

42:27langsung jalanin

42:29sekali.

42:31Ini kan.

42:33Mana dia?

42:35Ini.

42:37Nggak perlu pakai new.

42:39Tapi...

42:41Ini salah.

42:43Kenapa, deh?

42:45Itu...

42:47Apa? Shortcut-nya salah.

42:49Shortcut-nya ditaro tombol delete.

42:51Jadi setiap pencet tombol delete,

42:53bunyilah itu. Keren sengaja.

42:55Nggak.

42:57Function dog object.

42:59Ini nggak usah pakai ya.

43:01Ini nggak usah pakai ya.

43:03Nah, ini bisa kita langsung eksekusi

43:05pakai if.

43:07Gini.

43:09Undefined.

43:11Atau nggak pakai ini?

43:13Nggak pakai yang ini.

43:15Nah, benar.

43:17Cuma dikasih kurung doang berarti ya?

43:19Bukan if dong.

43:21Ini nggak dieksekusi.

43:23Bukan if.

43:25Memang bukan ya.

43:27Oh, itu function biasa ya. Cuma...

43:29Ada kurungnya.

43:31Oh, kok kesini?

43:33Iya, ada kurungnya.

43:35Function dog object.

43:37Oh, kalau kita mau tahu

43:39isinya.

43:41Oh...

43:43Tapi buat apa ya?

43:45Coba ya.

43:49Itu declare, kok.

43:51John.

43:53Nah, kalau kita mau tahu

43:55John, itu kayak gimana?

43:57Eh, nggak juga ya.

43:59Kalau kita print John biasa juga begini kan?

44:01Iya, sama aja.

44:03Gak ngaruh.

44:05Jadi apa ini?

44:07Itu

44:09function object combination.

44:11Itu kayaknya

44:13cara buat...

44:15Apa?

44:17Kita bisa bikin object

44:19melalui function.

44:21Ini kayak itu deh.

44:23Sebelum ada klas, sebelum ada sinteks klas.

44:25Ya, cara orang bikin

44:27klas ala-ala di JavaScript.

44:29Maksudnya kayaknya gitu deh.

44:31Tuh, when functions

44:33are declared, by default

44:35they are given a lot of properties

44:37attached to it. Nah, function itu adalah

44:39object juga.

44:41Iya, dan function di JavaScript

44:43itu adalah object.

44:45Semua di JavaScript adalah object.

44:49Jadi Java juga ya.

44:51Iya, semuanya adalah object kan.

44:53Java juga begitu kan. Ternyata

44:55jauh di dalam

44:57JavaScript yang sepertinya

44:59lebih deket ke functional programming,

45:01tapi ternyata dalamnya object gitu.

45:03Tapi disembunyikan.

45:05Nggak banyak

45:07yang tahu. Nah, baru...

45:09Nah, terus baru ada

45:11sinteks klas, keyword class.

45:132015 baru muncul

45:15sinteks keyword class

45:17yang bisa

45:19menjadi batu loncatan

45:21buat teman-teman yang tadinya

45:23terjebak di bahasa Java

45:25pindah ke JavaScript.

45:27Over existing

45:31prototyping technique, it continues

45:33its prototyping, tetap

45:35behavior prototypenya seperti tadi.

45:37Tetap sama.

45:39Makes the outer body looks

45:41like OOP.

45:43Outer bodinya aja

45:45seperti OOP.

45:47Walaupun sebenarnya

45:49hasilnya adalah

45:51ada prototap juga.

45:53Bisa dance, bisa sing.

45:57Iya, dan yang

45:59sedikit membedakan.

46:01Ini kalau di Java pakai disk juga ya, kalau nggak salah.

46:03Tapi disknya JavaScript

46:05unik karena dia

46:07multi-paradigma.

46:09Jadi disk ini bukan hanya

46:11untuk class, tapi juga bisa untuk

46:13yang lain kan. Untuk konteks saat ini.

46:15Conteks, ya cuma kalau nggak

46:19di dalam class, ya udah. Apa?

46:21Scope.

46:23Hosting.

46:25Pokoknya ngikut atasnya. Jadi kayak misalnya

46:29kalau di browser tuh, ya

46:31itu jadi masuk ke

46:33window.

46:35Ya, jadi window, karena paling atas.

46:37Kalau dia masuk ke fungsi, dia

46:39di dalam fungsi itu ada apa.

46:41Cuman aja type di console.

46:43This.

46:45Nah, window.

46:47Enter.

46:49Oke, ini window.

46:51Window.

46:53This sama dengan that.

46:55Monkey patching.

46:59Akal-akalan montir.

47:01Nah, sebetulnya dibalik layar itu

47:09jadi class animals.

47:11Itu sebenarnya function animals.

47:15Tapi tetep ada disknya ya.

47:19Cuman dipakein huru besar ya.

47:21Ini buat convention aja, walaupun

47:23sebenarnya nggak harus.

47:25Jadi sebenarnya ES6 ini

47:27sebenarnya tidak

47:29apa namanya

47:31engine-nya tetap sama. Dia cuma kayak

47:33membuat satu layer di atas.

47:35Sama syntax kayak shortcut gitu ya.

47:37Iya, cuma kayak

47:39terjemahin. Jadi sebenarnya

47:41multi-layer. Jadi kalau kita nulis ES6

47:43dia terjemahin lagi ke JavaScript

47:45vanilla

47:47baru ke machine.

47:49Baru lagi ke

47:51JavaScript engine-nya.

47:53Apapun itu.

47:55Ya, jadi

47:57meskipun si JavaScript yang sebenarnya

47:59nggak ada class,

48:01kita semuanya function.

48:03Tapi inisiasinya tetap ya, pakai new ya.

48:05Jadi kombinasi gitu ya.

48:07Subclassing.

48:09Ini inheritance ya?

48:11Iya.

48:13Extend sih.

48:15Di JavaScript namanya

48:17inheritance.

48:19Eh, sorry, subclassing.

48:21Kalau aslinya kan

48:23teorinya namanya inheritance.

48:25Extend.

48:27Kalau inheritance kan menerima property dari

48:29parent-nya kayak

48:31jenis yang di-extend kan.

48:33Nah, kalau ini ditambahin yang

48:35cuma ada di dia kan.

48:37Kayak animals tuh cuma kucing yang

48:39bisa punya warna apa?

48:41Kumis.

48:43Whisker color.

48:45Iya, betul. Ini kan

48:47kalau kita manggil super.

48:49Super kan inheritance tuh.

48:51Maka akan menjadi ini.

48:53Animal object apapun,

48:55pasti punya name dan age.

48:57Tapi abis itu. Bukan.

48:59Super itu adalah memanggil konstruktor

49:01dari parent.

49:03Yang di atasnya, parent-nya.

49:05Ini kalau temen-temen

49:07yang mengalami

49:09React versi class.

49:11Pasti

49:13familiar ya dengan

49:15super, kemudian

49:17this.bind ya.

49:19Yang di bawah sini

49:21nanti banyak.

49:23Bind.

49:25Bind.

49:27Banyak tuh.

49:29Ya, dari sini gitu.

49:31Salah satu yang mengerahkan

49:33kenapa si ES6 ada

49:35class, salah satunya React.

49:37Tapi begitu udah ada class, React-nya

49:39berpaling dari class.

49:41Ya, lancar tuh fungsional, sembarangan banget itu.

49:43Udah capek-capek digerakin

49:47si JavaScript-nya udah

49:49ada opsi, eh, React-nya

49:51gak pakai lagi. Sorry ya, kita udah gak pakai lagi.

49:53Ya, jadi begitu

49:57kita pakai this di sini, dia akan

49:59menjadi konteksnya si

50:01yang berhubungan dengan animal ini ya.

50:03Jadi ini kayak, apa ya,

50:05menyimpan global variable

50:07dari class ya.

50:09Kayak memaksa

50:11obyek tersebut punya property-property

50:13itu, sesuai

50:15jadi, apa, kayak logikanya, kayak

50:17bahasa awamnya kan, setiap

50:19kita bikin animal object,

50:21itu harus punya name dan age.

50:23Sebetulnya kan gak usah pakai klas-kelasan, bahkan

50:25gak usah pakai function yang ada

50:27prototype-nya tadi, kenapa gak define

50:29aja, misalnya animal1

50:31sama dengan langsung aja obyek.

50:33Sebenarnya kayak gitu bisa, tapi kan

50:35kita jadi gak bisa streamline,

50:37gak bisa maksain bahwa semua

50:39harus ada name dan age-nya.

50:41Jadi ini kayak menstreamline bahwa setiap

50:43animal itu harus punya name dan age.

50:45Melalui prototype.

50:49Oke, ini juga masih ada

50:51contoh, beberapa contoh, ini

50:53bahkan animal constructor

50:55oh, di obyek create ya.

50:57Jadi kita bisa definition

50:59secara terpisah,

51:01gak mesti di dalam

51:03klas atau di dalam function,

51:05tapi kita menggunakan

51:07obyek.create.

51:09Terus bisa set

51:11property,

51:13bisa banyak cara ya, ada banyak cara.

51:15Intinya adalah

51:17prototype-native

51:19to welcome OOP developer

51:21to its ecosystem, so provide easy

51:23ways to creating prototype and

51:25organize related data.

51:27Jadi ini lebih masuk ke DX ya,

51:29kalau menurut dia.

51:31Apa? Lebih ke

51:33DX-nya aja. Kan sebenarnya gak

51:35pakai klas, kayak pakai cara yang kayak

51:37di atas itu hasilnya sama aja kan.

51:39Cuma kelihatannya kurang

51:41catchy aja.

51:43Ketiknya gak enak.

51:49Saya jadi punya pertanyaan nih,

51:51begitu melihat beberapa contoh

51:53di sini. Ini contohnya,

51:55contoh yang klas gini ya,

51:57klas ya,

51:59apakah, enggak,

52:01pertanyaannya adalah kenapa

52:03contohnya itu animal, kalau gak

52:05cars, kenapa enggak contohnya yang real,

52:07kayak misalkan kita bikin aplikasi gitu,

52:09misalkan to do. To do itu

52:11gimana cara implementasi pakai klas,

52:13buat apa klas itu?

52:15Gak perlu di extensi,

52:17gue bayanginnya, task,

52:19task kan ada

52:21property-nya namanya status, misalnya.

52:23Terus

52:25di dalamnya, method-nya ada

52:27update misalnya, atau set complete,

52:29atau ayah, atau apalah.

52:31Ya, tergantung

52:35bagaimana implementasinya ya.

52:37Contohnya, kalau misalnya

52:39mau dijadikan sebuah

52:41komponen, satu task itu jadi satu komponen,

52:43dimana komponen

52:45itu punya property,

52:47dan punya method,

52:49dia mau

52:51edit dirinya sendiri, atau

52:53delete dirinya sendiri,

52:55dan juga bagaimana feel-nya dia,

52:59ya kan? Biasanya

53:01digabung jadi satu,

53:03satu itu.

53:05Oh, ada contoh bagus tuh, kalau buat

53:07yang barusan dibahas Ivan,

53:09sama yang Mas Rizat tadi bilang,

53:11yang di link-nya can see dots, coba.

53:13Itu lebih

53:15real.

53:17Lebih real use case-nya misalnya, ya itu

53:19ada yang meng-edit

53:21datanya sendiri, terus

53:23ya, pakai user lah.

53:25Bukan cuma car, atau vehicle.

53:27Soalnya pernah ngobrol

53:29sama temen yang

53:31apa, itu kan,

53:33jadi, menurut dia, bukan

53:35skeptis ya, dia bisa dua-duanya, bisa

53:37functional, bisa OOP, tapi menurut

53:39dia, OOP itu kurang cocok

53:41buat aplikasi,

53:43aplikasi kantoran, atau aplikasi

53:45inilah yang biasa kita kerjakan,

53:47gitu. OOP itu justru

53:49lebih cocok untuk game.

53:51Oh, iya, iya, iya, misalnya.

53:53Kalau misalnya kita mau bikin,

53:55apa ya, mau bikin

53:57musuhnya, karakter, karakter

53:59ada, ada apa,

54:01musuh extends dari karakternya.

54:03Pemainnya, player-nya juga extend

54:05dari, si itunya juga kan, karena ada.

54:07Tapi kalau background, atau NPC,

54:09kayak itu, itu beda jenis,

54:11itu sendiri, karena mungkin gak bisa

54:13apa, gak bisa punya dialog, atau

54:15gak bisa, gak bisa,

54:17ya beda pola pandang aja ya.

54:19Ya, beda pola pikir ya.

54:21Bisa juga, bisa juga aplikasi,

54:23contohnya, pernah

54:25bayangkan bagaimana

54:27Google Doc, mungkin,

54:29Google Doc, atau

54:31Google Slideset bekerja,

54:33atau Google Slideset, ya.

54:35Mungkin, di belakang itu kan, ya,

54:37kalau misalnya mau dibikin

54:39semua fungsinya, mungkin bisa aja.

54:41Tapi kan, kalau,

54:43di sini kan, gunanya contohnya,

54:45tools ya, tools itu kan ada,

54:47anggap aja, bold, italic, segala macam.

54:49Kalau dibikin satu-satu

54:51fungsinya, bisa juga. Tapi, kalau misalnya

54:53mau di-extend dan polymortism dengan

54:55kelas-kelas, dan ada mungkin objek

54:57utamanya, mungkin modifier,

54:59terus ternyata dia modifier bold, modifier

55:01italic, modifier apa, bisa juga kan,

55:03tergantung arkitekturalnya aja sebenarnya.

55:05Nah, berarti itu tergantung desain

55:07di awal ya, desain sistem

55:09di awal, dia pengen objek-objeknya

55:11kayak gimana.

55:13Anggap aja, Microsoft Word,

55:15sorry, Google Doc,

55:17atau Google Slideset itu kayak game.

55:19Ada spreadsheet, ada musuhnya

55:21pakai yang inheritance juga,

55:23tools-tools yang ada di spreadsheet,

55:25ya, inheritance juga kan bisa juga, ya.

55:27Bisa, bisa, bisa.

55:29Benar, benar, benar.

55:31Nah, ini apa yang mau ditunjukin?

55:33Apa yang mau dihalat? Ini ya?

55:35Contoh yang lebih real lah.

55:37Terus bisa buat nge-set,

55:41bisa buat nge-get.

55:43Oke, oke.

55:45Nah, terus bikin new person

55:49kayak gitu.

55:51Terus kita bisa ngebah,

55:53kita bisa bikin mereka

55:55dia ngebah dininya sendiri tuh,

55:57person.setname.

55:59Terus bla-bla-bla.

56:01Ya itu, ini artikel ini sih

56:03lebih ke perbandingan aja sih.

56:05Cuma kalau case ini dia secara

56:07subjektif, dia lebih

56:09encourage fungsional.

56:11Dia jatuhnya ke situ.

56:13Tapi maksudnya dia tetap menjelaskan

56:15cara kerjanya gimana.

56:17Dan dia, apa,

56:19dia bikin equivalentnya, perbandingannya

56:21pakai kelas sama pakai fungsion.

56:23Dengan use case yang ya lebih

56:25realistis sedikit daripada cuma tadi kayak

56:27cat atau dog.

56:29Iya, benar.

56:31Ini lebih, kalau person itu

56:33misalkan kita mau kontak, bikin kontak

56:35kontak-kontak aplikasi

56:37kontak ya.

56:39Buat nyimpan nama,

56:41nomor telepon gitu. User atau customer

56:43atau apapun. User, customer, ya.

56:45Benar-benar.

56:47Menarik, menarik.

56:51Terus scroll aja. Ini sebagian besar

56:53sih kita udah, kita udah

56:55pelajarin kan kayak si proto-nya.

56:57Nah, cuma kebawah dia punya

56:59ya opini dia.

57:01Habis itu agak ribet dan

57:03bisa bikin bingung.

57:05Menurut dia.

57:07Ini bisa jadi topik

57:09di episode-episode berikutnya

57:11nih di sini.

57:13Bisa, bisa.

57:15Bedanya nanti

57:19penggunaan di sini. Bisa sih?

57:21Satu topik sendiri.

57:23Eh, eh, atas sedikit.

57:25Nah, ada contohnya nih

57:27apa, yang bikin bingung

57:29kan const person, kita

57:31instantiate new person

57:33object ya. Terus

57:35ada get greeting. Get greeting tuh emang ada

57:37di method, di object person

57:39tuh emang ada get greeting-nya.

57:41Tapi, kalau

57:43dijalani ketengan, walaupun

57:45isi function-nya udah dipindahin,

57:47ya nggak bisa. Karena butuh disk-nya tadi,

57:49butuh fonteks yang nggak ada,

57:51yang hilang waktu di-assign ke

57:53variable terpisah.

57:55Iya.

57:57Menurut dia.

57:59Jadi, ini agak misleading ya?

58:01Sedikit misleading ya?

58:03Bukan misleading, tapi kalau misalnya user

58:05nggak, kalau developer-nya

58:07nggak menguasain banget

58:09object person-nya sendiri bentuknya

58:11kayak apa, coba aja

58:13cari get greeting. Get greeting nggak ada?

58:15Nggak ada. Get greeting callback

58:17kali ya maksudnya. Ya intinya

58:19butuh data

58:21dari disk. Butuh data

58:23harus dipanggil dalam context

58:25class itu.

58:27Hmm.

58:29Kan ilang jadinya disk-nya.

58:31Ya, gitu. Terus, ini contoh

58:33real world yang apa? Counter.

58:35Ini ada insight menarik juga nih dari

58:39Mustafa

58:41Zaki.

58:43Ya, API Discord itu banyak

58:45tapi mirip-mirip. Bisa jadi ya

58:47sengaja dipake HP karena

58:49kalau API

58:51itu lebih tepatnya

58:53open API specification kali ya.

58:55Hmm. Bisa jadi.

58:57Jadi sudah ada

58:59spesifikasi pakai apa itu?

59:01Yang biasanya

59:03untuk buat open API

59:05spesifikasi.

59:07Swagger. Itu sudah swagger.

59:09Ya, pakai swagger. Jadi

59:11mungkin waktu didefiniisikan

59:13secara arkitektural mungkin sudah dibuat

59:15sekema-nya. Dan sekema itu kan

59:17bisa di-extend ya.

59:19Sekema object A

59:21let's say

59:23messaging. Nanti kemudian

59:25ada sekema tambahan-sekema-tambahan

59:27itu yang extend

59:29dari sekema sebelumnya. Itu bisa juga ya.

59:31Tapi itu sudah sekema

59:33base kalau API.

59:35Walaupun nanti implementasi di belakangnya ya oke

59:37mungkin pakai OOP

59:39supaya mempermudah. Jadi

59:41benar-benar nge-translate antara sekema

59:43langsung jadi class. Bisa juga.

59:45Gak, itu SDK-nya.

59:47Cuma, anyway

59:49SDK itu kayaknya salah satu

59:51penggunaan class by syntax yang paling

59:53sering ya. Kayak apalah

59:55GraphQL apolo gitu.

59:57Selalu kan new apa. Jadi

59:59udah ya mempermudah.

1:00:01Ya sekalian aja. Ya jadi apa

1:00:03familiarity. Masa-masanya nge-import function A,

1:00:05function B, function C. Masa-masanya ribet kan

1:00:07kalau si developer yang menggunakan suatu

1:00:09SDK harus nge-import semua metode-metode

1:00:11nya terpisah. Nah

1:00:13kalau cuma import satu class kan

1:00:15ya, Ivan harus kerja ya.

1:00:17Iya.

1:00:19Saya harus cabut dulu ya.

1:00:21Udah jam 5 mau ada

1:00:23aktivitas.

1:00:25Oke, thank you so much.

1:00:27Bye bye. Salam buat Bos.

1:00:29Buat Bos.

1:00:31Minta naik gaji.

1:00:33Oke, kita lanjut sedikit lagi kali ya.

1:00:37Ini, tadi kita

1:00:39udah bahas kalau temen-temen yang

1:00:41ngalami react awal-awal ya. Seperti ini ya

1:00:43bentuknya ya.

1:00:45Dan banyak yang bikin kesandung gitu.

1:00:47Kayak apa? Bikin

1:00:49kesandung. Nah itu, ya

1:00:51itu penjelasannya sih.

1:00:53When you click the button,

1:00:55you'll see type error set state

1:00:57of null at increment.

1:00:59Nah, berarti dia manggil sesuatu yang

1:01:05disknya

1:01:07gak ada.

1:01:09Yang gak

1:01:11di konteks yang sama.

1:01:13Itu gak apa-apa.

1:01:15Keliatannya

1:01:17disk.state

1:01:19yang di dalam.

1:01:21Coba kesalahannya.

1:01:23Ini ya, solusinya ini ya? Bukan?

1:01:25Bukan, bukan, bukan. Itu solusinya

1:01:27di link. Harus buka video

1:01:29tapi.

1:01:31Ini?

1:01:33Yang ini pakai

1:01:35bind-bind itu gak sih? Bukan ya?

1:01:37Ya, kelihatan salah satu

1:01:39workaround-nya pakai bind.

1:01:41Jadi biar disk set-state sama

1:01:43disk increment itu mengacu pada

1:01:45konteks yang sama. Nah, cuma exactly

1:01:47gimana? Gak inget sih.

1:01:49Ingat dulu

1:01:51pernah ketemu masalah

1:01:53mirip-mirip gini, dan keliatannya pernah cari

1:01:55apa, solusinya.

1:01:57Dan pernah klik si video yang

1:01:59di link ini juga.

1:02:01Cuma intinya, ya

1:02:03perbedaan konteks disk aja.

1:02:05Nah, terus

1:02:07argumenya dia adalah

1:02:09kalau kita harus mikir

1:02:11disk, itu banyak

1:02:13kasus-kasus yang bisa bikin

1:02:15unexpected

1:02:17error, dan kita harus lusurin

1:02:19itu konteksnya dari mana.

1:02:21Betul.

1:02:23Nah, dia

1:02:25menyarankan menghindari

1:02:27disk dengan

1:02:29bikin pure function kecil-kecil.

1:02:31Pure function, oke.

1:02:33Ada get name,

1:02:35kemudian person ini yang

1:02:37dari, oh dari

1:02:39person ini ya. Person masukin ke set

1:02:41name,

1:02:43greeting, dan lain-lain.

1:02:45Jadi agak lebih panjang

1:02:47ya. Ini equivalentnya

1:02:49yang ini kan? Sama sih.

1:02:51Baris 27, 27 baris

1:02:53yang ini berapa? 27 juga.

1:02:55Sama, persis.

1:02:57Cuma ini gak pakai disk sama sekali ya.

1:02:59Gak se-idiomatic, kayak

1:03:01cara mikirnya bukan cara mikir yang

1:03:03kelas yang semua di dalam satu objek

1:03:05gitu, yaudah kayak ketenggan aja.

1:03:07Hmm, oke.

1:03:09Udah itu, itu

1:03:15argumennya dia sih.

1:03:17Jadi

1:03:19usage of class is not

1:03:21bad, ya gak apa-apa. Cuma

1:03:23apa? Kalau mau menghindari

1:03:25kekusingan disk,

1:03:27bisa pakai, sebetulnya

1:03:29ya pakai function aja.

1:03:31Terus, di bawah ada

1:03:33bonusnya lagi. Menarik sih.

1:03:35Contoh-contohnya. Ada pattern namanya

1:03:37module pattern.

1:03:39Jadi sebetulnya malah mirip

1:03:41yang, yang tadi

1:03:43tuh, yang pas kita bikin

1:03:45dock object pakai function itu loh.

1:03:47Contoh awal sebelum ada class.

1:03:49Balik ke situ lagi jadinya.

1:03:51Iya, iya, iya.

1:03:53Ini kan kita bikin object ya.

1:03:55Di dalam objek kita punya

1:03:57metode. Jangan lupa

1:03:59di JavaScript kan function itu

1:04:01apa? First class apa itu namanya?

1:04:03Yang bisa, ya bisa di

1:04:05oper-oper, misalnya

1:04:07function method itu ya tetap bisa

1:04:09di, bisa ke bawah lah.

1:04:11Kalau apa? Initiate

1:04:13person objek baru tuh, pakai get person.

1:04:15Iya, iya. Nah, ini,

1:04:17ini artikel yang sangat menarik.

1:04:19Kenapa? Karena can see dots

1:04:21itu platar belakangnya adalah dari

1:04:23programmer Java sebenarnya.

1:04:25Nah, dia berkhianat ya.

1:04:27Agak, agak main blowing kalau

1:04:29dia lebih prefer functional daripada

1:04:31class. Karena

1:04:33mungkin dia udah biasa class yang

1:04:35sudah biasa dibanjakan dengan Java yang

1:04:37istilahnya OOP-nya udah

1:04:39lengkap gitu kan. Tiba-tiba di JavaScript

1:04:41kok banyak yang aneh ya, kok pakai disk ya,

1:04:43kok pakai ini bingung gitu kan. Mungkin itu yang membuat

1:04:45dia akhirnya lebih memilih

1:04:47paradigma functional mungkin, nggak tahu juga

1:04:49gitu. Tapi ini menarik sih. Maksudnya

1:04:51kita dapat dua sisi kan

1:04:53OOP itu gimana,

1:04:55functional itu seperti apa, gitu.

1:04:57Terus pertimanya apa? Bagusnya

1:04:59dia ngejelasin semua. Sampai bonus-bonusnya

1:05:01tuh, bonusnya ke bawah masih ada lagi tuh.

1:05:03Jadi kayak masing-masing ada

1:05:05pertimanya, kelebihan,

1:05:07kekurangannya. Yang tadi

1:05:09tuh, apa, yang

1:05:11appendix pertama itu

1:05:13sebetulnya aman-aman

1:05:15aja dari segi, maksudnya kalau kita bikin

1:05:17person objek, ya tetap

1:05:19ada, apa, tetap ada

1:05:21property-nya, tetap ada method-nya,

1:05:23tetap ada property-nya.

1:05:25Cuma masalahnya,

1:05:27apa tadi, dia ngejelasin

1:05:29masalahnya

1:05:31apa, itu

1:05:33kan bukan dari inheritance

1:05:35kan nggak salah ya. Jadi one of the flows

1:05:37tuh, bawah dikit.

1:05:39One of the flows

1:05:41of the module pattern, every person has

1:05:43its very own copy of

1:05:45each property and function. Jadi bukan

1:05:47satu. Itu kayak dianggap

1:05:49function yang berbeda.

1:05:51GetGreetingCallback-nya.

1:05:53Ya, iya, iya.

1:05:55Kita nggak bisa tahu bahwa ini adalah

1:05:57person ini.

1:05:59Hal yang sama.

1:06:01Hal yang sama dengan person 2 gitu ya.

1:06:03Ya, iya. Ya, mendinggal GetGreetingCallback-nya

1:06:05itu sebetulnya

1:06:07sama mesin, dianggap dua function,

1:06:09dua method yang sama sekali

1:06:11berbeda.

1:06:13Nah, kan perserak kita kan,

1:06:15buat kita itu masalah atau nggak, maksudnya

1:06:17usage-nya kita. Ya, cuma minimal dia

1:06:19ngejelasin kayak gitulah.

1:06:21Iya. Ini ada pengaruhnya

1:06:23sama performance nggak sih?

1:06:25Kalau banyak banget ya

1:06:27ada. Kan jadi, kan

1:06:29occupy memory semua tuh. Memory ya?

1:06:31Iya, iya. Benar-benar. Tapi maksudnya harus

1:06:33sebanyak apa, datanya kayak sebanyak

1:06:35apa yang sampai itu cukup mengganggu

1:06:37gitu kompleksitinya.

1:06:39Betul-betul.

1:06:41Nah, kalau pakai arrow function kayaknya

1:06:43udah implicit bind. Iya, benar. Benar ya.

1:06:45Ya, setuju-setuju. Makanya

1:06:47waktu di react jaman dulu, biar nggak pusing, ya kita

1:06:49pakai arrow function aja, kan. Jadi

1:06:51disk-nya itu nggak masuk ke dalam

1:06:53si function-nya, kan.

1:06:55Ada lagi.

1:07:01Artikelnya tuh

1:07:03detail banget. Private

1:07:05properties. Pakai class, tapi pakai

1:07:07private properties. Biar nggak

1:07:09itu tadi, biar

1:07:11method-nya nggak dipakai diluar. Kan tadi

1:07:13yang, apa, const get greeting sama dengan

1:07:15person.get greeting tuh. Disk-nya ilang.

1:07:17Nah, ini dibikin diumpetin

1:07:19biar nggak, biar nggak dipakai dari

1:07:21luar, di mana konteks

1:07:23disk-nya itu nggak ada atau berubah.

1:07:25Pada saat private properties

1:07:29muncul, kayaknya

1:07:31saya udah nggak pakai class lagi.

1:07:33Kayak gini ya caranya ya, pakai

1:07:35hashtag ini ya.

1:07:37Baru lihat nih.

1:07:41Terus ini ada yang menarik nih.

1:07:43Kayak tadi, dead sama dengan

1:07:45dis. Ini kayak gini, kan. Ini

1:07:47sebenarnya di-structuring, kan.

1:07:49Sebenarnya ya.

1:07:51Dis ini adalah yang ini, kan.

1:07:53Ya, dia ngambil

1:07:55greeting-nya doang.

1:07:57Kemudian, ya, di return.

1:07:59Return-nya pakai arrow function, ya.

1:08:03Eh, ini return-nya

1:08:05return function dong, ya.

1:08:09Meeting callback.

1:08:11Oh, iya benar. Tuh, manggilnya dua kali.

1:08:13Ada ini.

1:08:15Habis itu ada

1:08:17subjeknya.

1:08:19Subjeknya John.

1:08:21Bisa gini ya.

1:08:27Ya, inilah yang

1:08:29Cuma ini baca artikel sekali,

1:08:31ini pasti agak

1:08:33cuma pas dilihat lagi, pasti

1:08:35oh gitu.

1:08:37Inilah yang

1:08:39biasa anak-anak Twitter

1:08:41sebut sebagai akrobat, ya.

1:08:43Banyak akrobatnya.

1:08:45Junkir balik ini.

1:08:47Asli, junkir balik

1:08:49yang pemutar lagi udah ini.

1:08:51Oke, oke, oke.

1:08:55Tapi kan ini, kalau pada akhirnya,

1:08:57kan, ini berbagai cara buat

1:08:59junkir balik itu untuk

1:09:01mengeksekusi

1:09:03perkara prototype dan

1:09:05inherit waris.

1:09:07Ya, hukum waris lah ya.

1:09:09Waris?

1:09:11Oh iya, iya, iya, waris, mau wariskan gitu ya.

1:09:13JS nyebelin, makanya dengki.

1:09:19Wah jangan dengki dong.

1:09:21Kalau, apa, berbahagialah

1:09:23temen-temen yang mungkin, sebuah

1:09:25privilege ya, yang tidak, mungkin

1:09:27pekerjaannya tidak ada hubungannya sama

1:09:29JavaScript, ya, selamat

1:09:31menikmati gitu. Tapi kalau kita yang

1:09:33mau tidak mau rejekinya

1:09:35di JavaScript, gimana ya?

1:09:37Tapi, apa,

1:09:39jokes aside gitu ya,

1:09:41memang JavaScript

1:09:43banyak aneh-anehnya, tapi di sisi yang

1:09:45lain, kadang-kadang

1:09:47keanehan itu ada sebabnya

1:09:49yang mungkin kita nggak tahu.

1:09:51Semua ada, maksudnya semua

1:09:53keanehan itu ada sebabnya sih.

1:09:55Ya itu penjelasan kita sengaja

1:09:57atau sengaja. Begitu kita tahu penjelasannya

1:09:59maksudnya seperti apa, akhirnya kita

1:10:01gini, jadi JavaScript itu adalah

1:10:03salah satu bahasa yang banyak

1:10:05disalahartikan jadinya.

1:10:07Karena banyak konsep-konsep yang berbeda

1:10:09dengan bahasa yang lain mungkin.

1:10:11Laperan time-nya juga

1:10:13maksudnya ekstrim ya, tadinya

1:10:15konsep awal kan cuma buat

1:10:17di browser doang.

1:10:19Makin lama, ya, di mana-mana.

1:10:21Coba bayangkan ya,

1:10:23jadi Brandon Egg gitu,

1:10:25dia tadinya ditawarin, "Oh, boleh

1:10:27bikin bahasa pemohonan favorite

1:10:29kamu di browser."

1:10:31Terus tiba-tiba disuruh bikin.

1:10:33Disuruh miripin ke Java deh, biar laku.

1:10:37Ya udah, dia bikin.

1:10:39Dia udah stress gitu, dia bikin.

1:10:41Dikasih waktu berapa? 10 hari, 1 sprint.

1:10:43Terus abis itu, ini bahasanya

1:10:47buat browser aja, buat

1:10:49buat validasi form,

1:10:51kalau ada yang klik ini, nampilin ini,

1:10:53gitu kan. Terus abis itu tiba-tiba

1:10:55JavaScript dipakai buat aplikasi.

1:10:57- Buat server. - Gimana itu?

1:10:59Dungkir baliknya. Gimana?

1:11:01Buat server lagi kan? Bisa buat server.

1:11:03Wah, itu nggak kebayang sih.

1:11:05Karena memang peruntukannya di awal ya

1:11:07buat, buat hal, apa ya,

1:11:09penunjang kan, penunjang dokumen

1:11:11HTML

1:11:13yang kalau diklik, dia lari ke mana,

1:11:15nampilin alert, dan

1:11:17yang hal-hal sederhana. Terus tiba-tiba

1:11:19menjadi full

1:11:21semuanya di load pakai

1:11:23JavaScript. Sempet kan?

1:11:25Sepet masa itu dimana kalau kita load,

1:11:27isinya div kosong,

1:11:29terus tiba-tiba yang render itu

1:11:31JavaScript semua kan?

1:11:33Jadi, ya,

1:11:35evolusinya

1:11:37lumayan besar,

1:11:39jadi kalau banyak yang hal-hal

1:11:41yang aneh dan unik,

1:11:43ya, mungkin ada

1:11:45peninggalan-peninggalan masa lalu

1:11:47yang belum di clean up gitu, masih,

1:11:49masih ke... - Dan harus

1:11:51memfasilitasi berbagai runtime,

1:11:53harus memfasilitasi berbagai

1:11:55jenis developer,

1:11:57di awalnya bikinnya

1:11:59kejar setoran, kejar tayang,

1:12:01harus dibenerin secara

1:12:03incremental.

1:12:05- Dan yang tidak kalah penting adalah

1:12:07backward compatibility.

1:12:09- Nggak boleh breaking.

1:12:11- Iya, ini

1:12:13kalau bahasa lain, mungkin ya udah,

1:12:15breaking change aja, breaking aja, nggak apa-apa.

1:12:17Orang ngikutin. Kalau JavaScript, nggak bisa.

1:12:19JavaScript versi 3

1:12:21yang digelanin di browser sekarang ya harus

1:12:23bisa jalan, gitu. Jadi, itu yang

1:12:25harus diakomodir oleh

1:12:27para pencipta atau

1:12:29yang kontribusi ke JavaScript

1:12:31berbagai runtime-nya.

1:12:33Yang membuat supaya

1:12:35JavaScript jaman jadul sampai yang

1:12:37paling modern itu bisa, nggak paling modern sih,

1:12:39yang cukup modern itu bisa

1:12:41tetap

1:12:43bisa di eksekusi di JavaScript,

1:12:45sorry, di browser.

1:12:47Itu hal yang sangat challenging.

1:12:51- Apa nih?

1:12:53Fun fact, pakai kelas di High Performance JS

1:12:55pakai kelas dengan metode

1:12:57Clear lebih cepat dibandingkan pakai

1:12:59Object. Pakai Object

1:13:01maksudnya...

1:13:03- Banding mendefinisiin obyek satu

1:13:05bersatu. Kalau bikin obyek

1:13:07satu bersatu, walaupun pakai

1:13:09apa, yang tadi Pure Function

1:13:11terpisah, kan semua

1:13:13masing-masing occupy memory tuh. Bikin obyek

1:13:15lagi, bikin obyek lagi, bikin obyek lagi,

1:13:17yang tadi itu kayak getGreeting call.

1:13:19Misalnya masing-masing obyek punya metode

1:13:21getGreeting callback. Nah, kalau misalnya

1:13:23nggak pakai kelas, kayak cuma pakai

1:13:25definisiin obyek biasa, itu kan

1:13:27masing-masing kayak dianggap terpisah, tuh.

1:13:29Kalau misalnya kita punya 20

1:13:31obyek person, ada

1:13:3320 metode bawaan.

1:13:35Kalau pakai kelas kan cuma satu.

1:13:41Tergantung kita pakainya buat apa.

1:13:43- Betul. Kembali lagi ke kita.

1:13:45Jadi kita udah tahu nih, oh, JavaScript

1:13:47bisa OOP, tapi banyak

1:13:49apa ya, banyak

1:13:51banyak ininya, apa,

1:13:53kejutannya, banyak kejutannya.

1:13:55Ya udah,

1:13:57kalau nggak suka, ya pakai yang fungsional.

1:13:59Kalau nggak suka juga, ya udah, cari platform

1:14:01lain selain JavaScript.

1:14:03Sekarang kan udah banyak ya,

1:14:05ada TypeScript lah, ada Rescript,

1:14:07ada apa lagi, ada Pure.

1:14:09- TypeScript lah, JavaScript juga, compile

1:14:11to JavaScript. - Iya, semuanya compile to

1:14:13JavaScript, ya. Tapi kan kita istilahnya

1:14:15meskipun kita belajar bahasa-bahasa

1:14:17yang ditulis di atas JavaScript,

1:14:19ketemu error, error-nya JavaScript, kan.

1:14:21Jadi tetap harus belajar

1:14:23JavaScript juga, kan, sebelum belajar

1:14:25bahasa-bahasa itu, kan, yang di atasnya,

1:14:27gitu kan. - Puas semua

1:14:29sekarang.

1:14:31- Haskell.

1:14:33Haskell, yang

1:14:35ada scriptnya PureScript, ya, kalau nggak

1:14:37salah, ya.

1:14:39- Haskell kayak gimana sih, bahasanya?

1:14:41- Bahasanya...

1:14:43Matematis sekali,

1:14:45matematis.

1:14:47PureScript,

1:14:53pada akhirnya tetap belajar

1:14:55JavaScript, ya mau nggak mau, ya?

1:14:57- Iya, kalau

1:14:59develop what what, ya,

1:15:01harus mau.

1:15:03- Error-nya JavaScript, masalahnya

1:15:05masih JavaScript, kecuali nanti

1:15:07ada browser yang berani

1:15:09kita pakai TypeScript, gitu.

1:15:11JavaScript udah nggak bisa,

1:15:13gitu, nah.

1:15:15Nah, itu baru.

1:15:17Karena sempat

1:15:19ada beberapa moment

1:15:21browser

1:15:23ingin mengganti JavaScript,

1:15:25tapi belum berhasil sampai

1:15:27sekarang. Microsoft sempat ngeluarin

1:15:29namanya, apa,

1:15:31J++, kalau nggak salah, ya, itu

1:15:33saingannya JavaScript. Mau ditanam

1:15:35di Microsoft

1:15:37Internet Explorer,

1:15:39Internet Explorer,

1:15:41belum, eh, nggak kan.

1:15:43Iya, tapi nggak jadi.

1:15:45Terus, Chrome

1:15:47juga pernah mau tanam

1:15:49Dart.

1:15:51Dulu sempat, ada

1:15:53wacana kesana, tapi akhirnya

1:15:55nggak jadi, akhirnya Dart

1:15:57diadopsi sama Flutter, ya kan?

1:15:59Ini sempat ada, cuman

1:16:01ya, balik lagi,

1:16:03apa, browser kan

1:16:05nggak cuman satu pemain, kan, pemainnya

1:16:07banyak, dan pemainnya ini

1:16:09kan nggak mau dimonopoly oleh satu

1:16:11pihak doang, kan. Jadi, harus ada kesepakatan

1:16:13yang TCA39, ya, kalau nggak salah, ya.

1:16:15Kalau mereka masih tetap

1:16:17mempertahankan si JavaScript, ya,

1:16:19ya, kita berharap aja

1:16:23semoga TypeScript ini, atau

1:16:25bahasa-bahasa scripting yang diatas

1:16:27JavaScript, bisa

1:16:29sedikit-sedikit diadopsi ke

1:16:31JavaScript, seperti

1:16:33CoffeeScript, apa, berapa fitur

1:16:35CoffeeScript yang diadopsi, kayak AeroFunction,

1:16:37sort, sintaks yang

1:16:39lebih singkat, dan lain-lain, gitu.

1:16:41Nah, itu tadi Prototype juga, kan,

1:16:43diadopsi dari

1:16:45library external. Dari framework, ya, betul.

1:16:47Tapi tetap betasannya, bahwa nggak

1:16:49behavior-nya tetap bakal gitu, kan,

1:16:51cuman syntactic sugar, atau apalah

1:16:53yang mempermudahkan, kayak Prototype

1:16:55juga, kayak mempermudah TypeScript, ya,

1:16:57mungkin nanti paling ujung-ujungnya gitu, cuman

1:16:59maksudnya kayak perspektifnya,

1:17:01cara kerjanya, ya,

1:17:03nggak, mungkin nggak

1:17:05berubah secara signifikan, ya.

1:17:07Signifikan, ya, bisa, mungkin bisa

1:17:09option, jadi ada, kan, ada

1:17:11apa, ada, ada wacana, katanya

1:17:13JavaScript nanti bakal ada type-nya juga,

1:17:15gitu, kan, mungkin itu optional,

1:17:17jadi bisa pakai atau bisa nggak.

1:17:19Untuk, ya itu, kesulitannya

1:17:21si JavaScript berkembang itu,

1:17:23terutama di browser, ya, compatibility,

1:17:25backward compatibility-nya harus dijaga terus, kan.

1:17:31Iya, Wasm nggak matang-matang,

1:17:35masih menunggu Rust di front-end,

1:17:37ya, Wasm-nya mungkin

1:17:39nulis, nulis, Wasm,

1:17:41nulis Rust untuk Wasm sebenarnya

1:17:43mungkin masih udah aman,

1:17:45gitu, ya, bisa, ya, tapi

1:17:47yang untuk manipulasi

1:17:49DOM-nya belum ada, ya, API kesananya

1:17:51belum, belum ada, ya.

1:17:53Iya, sama kayak PHP, ya,

1:17:55ada type tapi optional,

1:17:57mungkin, kita nggak tahu,

1:17:59karena ada wacana, katanya,

1:18:01ya, kita mau tambahin types, gitu, misalkan

1:18:03kayak flow, kan, jaman dulu ada flow, gitu, kan,

1:18:05ada, apalagi itu, ada JS, JS doc,

1:18:07ya, itu juga bisa

1:18:09digunakan, gitu, ya,

1:18:11jadi, begitulah cerita kita

1:18:13tentang JavaScript dan OOP.

1:18:15OOP dan JavaScript,

1:18:17cukup nggak warngindul tapi seru, ya.

1:18:19Iya, banyak, banyak hal yang kita

1:18:21pelajari juga, kan.

1:18:23Oke, kalau gitu,

1:18:27terima kasih ya buat teman-teman semua yang

1:18:29sudah ikutan diskusi ini,

1:18:31seru banget diskusinya.

1:18:33Kita malah lebih banyak belajar

1:18:35dari komen.

1:18:37Betul.

1:18:39Karena, ya,

1:18:41kita juga banyak yang nggak tahu, ya.

1:18:43Kita taunya mungkin sebagian

1:18:45dan banyak juga

1:18:47teman-teman di sini yang mungkin

1:18:49yang mengulik lebih dalam dibandingkan

1:18:51Jita.

1:18:53Jadi, ya, terima kasih

1:18:55Insight-nya, terima kasih diskusinya.

1:18:57Kita ketemu lagi minggu depan.

1:18:59Ketemu lagi minggu depan di hari yang sama,

1:19:01di jam yang sama juga, kembali

1:19:03ke jam 8, ya, dengan topik yang

1:19:05beda.

1:19:07Mudah-mudahan nanti kita bisa

1:19:09diskusi lagi minggu depan.

1:19:11Oke, kalau begitu, untuk malam ini

1:19:13sekian dulu. Terima kasih banyak.

1:19:15Sampai juga minggu depan. Bye-bye.