JAVASCRIPT LANJUTAN | 3.2 this pada Arrow Function

Memahami konsep this di dalam Arrow Function
--
PLAYLIST JAVASCRIPT
1. DASAR PEMROGRAMAN DENGAN JAVASCRIPT
• Dasar Pemrograman deng...
2. JAVASCRIPT & DOM (Document Object Model)
• Javascript dan DOM (Do...
--
KELAS ONLINE "Menjadi Seorang FULL STACK DESIGNER"
fullstackdesign...
---
PLAYLIST LAIN
- HTML Dasar
• HTML Dasar
- CSS Dasar
• CSS Dasar
- Tutorial Sublime Text
• Tutorial Sublime Text 3
- CSS Layouting
• CSS Layouting
- PHP DASAR
• Belajar PHP untuk PEMULA
- OOPHP
• OOP DASAR pada PHP
---
FOLLOW ME
- / sandhikagalih
- / webprogrammingunpas
- codepen.io/webp...
- github.com/san...
- / sandhikagalih
---
UNIVERSITAS PASUNDAN BANDUNG
www.unpas.ac.id/
www.if.unpas.ac...
terimakasih dan selamat #ngoding!
@sandhikagalih

[@abdillahputraal-iman1370]

intinya : - arrow function tdk memakai konsep this dan variabelny akan di telusuri lgi di lokal parent trdkt - declaration function memakai konsep this tpi bila variabelny yg dicri tdk ad dlm localnya maka lngsng di telesuri di window - expression function memakai konsep this tpi bila variabel yg dicri tdk dlm local maka, ditelusuri lgi ke lokal parent trdkt

[@anakagunggdedutaramadana1024]

12:10 * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; border: 1px solid black; margin: 50px auto; transition: .3s width, .3s height .3s, .3s margin-top .3s, 1s background-color; } .size { width: 150px; height: 150px; margin-top: 25px; } .caption { background-color: black; }

[@yogamahendra4967]

thanks bro

[@YUQINOER]

makasih mas...

[@syariftaufikhidayat4158]

video 21 menit..... tapi hampir tiap menit di pause dan jadi berjam jam nontonnya.... i'm okey with this om Brendan

[@ihsanhusaeri9058]

Materi brikutny asynchronous pada javascript pak dika 🙏 (callback, promise, async await).. Btw, trimakasih banyak atas tutorialny, sangat brmanfaat.. saya cman bisa bls dengan like, share dan gk skip iklan 😀

[@FeryDediSupardi]

saya tahunya JS ini dulu cuma dipakai sebagai pemanis di halaman web, tp sekarang sudah jauh berkembang jadi main programming language untuk web. harus banyak belajar lagi, terutama konsep dasar dan fundamental JS. karena selama ini hanya tahu kulitnya saja, ternyata di dalamnya sangat rumit dan menantang, terima kasih Pak Sandhika atas tutorialnya 🙏

[@kutipchannel4103]

Nggak cuman di web doang gan, dipengembangan aplikasi juga

[@philipantony4102]

Setelah nonton video mengenai konsep this pada arrowfunction selama 3 hari berturut-turut, akhirnya paham juga mengenai konsep this pada arrow function. Benar-benar memusingkan konsep this ini pak hahaha. Terima kasih pak dhika atas ilmunya 🙏🙏. Otw lanjut marathon seri javascript lanjutan ini

[@herusukmafama]

Setelah diulang2 akhirnya paham juga, makasih pak.

[@I-FrameProject-uu4ym]

Untuk callback function yang pertama pada setTimeout itu anonymous function, yang mana anonymous function itu tidak terikat pada specific object. Sehingga cara lain untuk mensolve "this" pada anonymous function callback pada setTimeout yang merefer to global/window bisa dengan bind(), apply(), call(). CMIIW. Terimakasih untuk videonya pak, sangat membantu. 😁

[@akbarramadhan2954]

bind , apply call itu ditempatkannya dimana nya ya mas ?

[@khalifahhafidh9613]

buat yang masih bingung tentang konsep this di arrow function pada method function reguler di execution context local pada creation phase, this didefinisikan sebagai object pemilik method. nah kalau arrow function, di execution context pada saat fase creation this ini tidak didefinisikan. berarti sampai di fase execution di arrow function this tidak didefinisikan dan tidak bisa didefinisikan manual. maka dari itu, arrow function akan keluar dari localnya dan mencari definisi this sampai ketemu this ini apa. makanya this di arrow function itu kadang menunjuk ke window kadang menunjuk ke scope diluar dari local arrow function tersebut. saya juga baru dapat pencerahan setelah berkutat dengan this hampir satu malaman

[@akbarramadhan2954]

owh berarti kalo dalam function declaration itu , this didefinisikan sebagai window , gitu ?

[@khalifahhafidh9613]

@@akbarramadhan2954 tergantung siapa yang manggil function itu. klo arrow functionnya dipanggil di dalam function deklrasi yang merupakan suatu method dari suatu object, this sama padanya sama dengan object tersebut, klo dia function global, this menjadi object global atau window

[@leung_rasta]

owalah kek gini paham" gw sempet bingung tadi 😭😭

[@alloudy]

Daging semua isinya.. ga sekedar bisa ngoding tp bner2 jadi paham asal muasalnya 👍

[@athallahmuhammadzaidan2233]

Terima Kasih Banyak Pak Dhika, saya banyak belajar dari channel ini, walaupun baru belajar disini tahun 2021 hehe

[@yogajulianprasutiyo6895]

Terimakasih banyak Pak, semoga pahalanya terus mengalir,aamiiin

[@RianY2K]

Mantap, lanjutkan terus untuk materi JavaScript Modern nya

[@ridwanmaulanatanjung1198]

hmmm, bau baunya pak dhika mau bikin seri nodejs nih klo udh gini wkwk

[@rizkikusrana8328]

setelah 3 kali diputer baru paham, okeh. mangats

[@vebe3381]

gua sekali masih puyeng, berarti mesti 3x juga kayanya wkwkw, apa karna gua maraton ya jd ga fokus wkwkw

[@rizkikusrana8328]

@@vebe3381 hahaha yg gw tangkep arrow function ngga ada konsep this, kalo gunain this didalem scope arrow akan mengacu keluar scope arrow function itu. kalo function biasa dia ada konsep this, kalo gunain this didalem scope function biasa itu mengacu ke function itu.

[@vebe3381]

@@rizkikusrana8328 yang gua tangkep beda lagi wkwkw, jika arrow function gunain this di dalem scope constructor, itu bisa, tp kalo di luar scope constructor gabisa, karna constructor ada thisnya,]. ya kalo konsep function biasa kita sama, apa pemahaman gua masih salah bang?

[@abdillahputraal-iman1370]

yg gw tangkep constructor dan object function declaration pnya konsep this, jdi jika ke-2 ddlm trdpt METHOD yg pki function arrow dan ddlm ad this, maka method trsebut akn keluar dan menuju ke scope OBJECT-nya dan mngmbil nilai this@@vebe3381

[@BNHCHILL]

baru ikut belajar pada tahun ini

[@wahyunurarizky3860]

Pak sandhika. Request buatin quicktip tentang tag meta dong pak

[@alfianizzah3394]

bantu up gan

[@rezadwiputra1416]

Maaf pak. menurut saya pernyataan pak sandhika soal "arrow function gk punya konsep this" justru salah, karna arrow function justru yang punya konsep this daripada function biasa/function declaration

[@sandhikagalihWPU]

Terimakasih koreksinya, ada sumber yg bisa saya baca?

[@rezadwiputra1416]

@@sandhikagalihWPU kalau saya lihat dari tutorial lain pak, ini salah satunya kzbin.info/www/bejne/nmSWhKWoaq9spLs

[@rezadwiputra1416]

@@sandhikagalihWPU lebih ke sudut pandang cara penyampaian aja si pak menurut saya, karna yg saya tau pada bahasa pemrograman umumnya this itu merujuk parent scope, jdi beda sudut pandang aja

[@rezadwiputra1416]

Dimana konsep this pada function declaration sendiri umumnya salah, maka ada arrow function

[@rezadwiputra1416]

Jadi bisa dikatakan, arrow function justru yg punya konsep this

[@sultanazai6188]

Pak untuk function yang ada di set interval koq ngg closure ke function mahasiswa padahal masih satu lexical scoop.

[@2manasama]

Pak, menit 20.35 contohnya var temp bukankah seharusnya let temp; temp = satu; // var temp == 'size' satu = dua; // var satu jadi 'caption' dua = temp; // var dua == temp || 'size'

[@muhaimin8804]

Temp ini apa an ya? Apa cuma nyimpen var sementara aja gitu?

[@helmigunawan8266]

Semoga Kedepannya bisa upload cara mengelola wordpress dari awal sampai pro 😁

[@fingerupdate6638]

Guru Rujukan Untu Belajar...Semoga Ada Pembelajaran Pembuatan BOT API telegram dengan PHP Pasti Kereen..

[@wandaazhar]

Terimakasih Pak Dika. Langsung auto like and share pak

[@muhammadvadhri5730]

Manttapp pak, mudah"an untuk framework nya nnti reactJs 😁🙏

[@abelardhana4443]

Kang tutorial vue js dong, please:(

[@junevenlee1979]

Teman" koreksi ya kalau salah ini menurut pendapat saya, penyebab setInterval itu merujuk ke object window karena itu perilaku this dari function declaration jika kalian masih ingat pada video dasar pemrograman javascript nah dia akan mengacu pada objek window tidak ke objek Mahasiswa nah disinilah kegunaan arrow function karena dia tidak memiliki konsep this maka dia hanya mencari apakah this.umur ada ke lexical scope sampe global. Itu saja teman" jika ada salahnya silakan dikoreksi terima yg benar nya saja karena ini berdasarkan pendapat saya😊

[@wibowomuhmmad]

dari dlu sampe skrng this itu memang bkin pusying wkwkwk

[@blasterchampions1801]

Bang saya mau nanya mengapa sublime text 3 saya yang title di html berubah seperti di blok warna putih?

[@annascahwetan45]

itu tinggal thisnya ganti box dah kelar tu gx pake arrow function

[@noviamarsheila6416]

Terimakasih banyak pak dika 🙌✨

[@noviamarsheila6416]

Hehe, saya pusing 😭

[@farizifathanpane4413]

Buat playlist pyhton dong pak

[@anandaazhari9953]

Pak dika tolong buat kan video tentang react.js

[@yolutobadi6820]

Izin tanya bang Kalau set interval dibikin function expression aman kah?

[@dimskuy132]

Thankss

[@bahyusanciko]

apa cuma gue yang pake node js buat jalanin script.js nya , kalo cuma gw doang pada komen dong biar di ajarin apa pa dhika buat cara node jsnya

[@bitw1z]

kalau pakai nodejs nilai this dari method setInterval tetap window gak mas?

[@bahyusanciko]

@@bitw1z cuma runtime aja

[@kresnaagisna3995]

Pak, kenapa setTimeOut dihoisting sampe ke window. Bukannya dia ada didalem fungsi yah?

[@leung_rasta]

ehh kasih tau dong aku puyeng dah. katanya arrow function ngga ada konsep this tapi di contoh ini menit 19.02 this ngambil dari parent nya ?

[@KawanLama_]

Butuh berulang ulang saya putar ini video supaya paham

[@bitw1z]

kenapa this pada method setInterval memiliki nilai window object? karena method setInterval merupakan method dari window object ya pak? www.w3schools.com/jsref/obj_window.asp

[@achmaliki8389]

nah sempet kepikiran gini juga

[@muhamadridwan8242]

Nah iyaa masih bingung disini

[@gabrielpadma5446]

@@muhamadridwan8242 sama masih agak bingung ,udah nyoba pk buat method dari objek mahasiswa,kl pk arrow function di method sayHello this nya jadi ke window(karena gk ada konsep this),kl set interval karena itu method punya window jadi this nya mengacu ke window ,cm bingungnya kan arrow function gk ada konsep this, kok this nya jadi mengacu ke objek mahasiswa?

[@fajarmukhlis7584]

Mau nanya kak, untuk animasi yg kotak membesar kemudian berubah warna jadi hitam, dan sebaliknya.. Apakah untuk merubah urutan animasi, best practicenya adalah dengan menggunakan javascript seperti yg divideo ? atau bisa menggunakan css saja ya?

[@reichenbach3200]

8:48 kenapa setInterval itu termasuk functin declaration

[@kasihagape2899]

Pak galih. Mau beli kaos bapak dmna? Yg logo ny penutup css. ;

[@muhammadsupriyadi1622]

sering sering pak dipraktekin dengan html dan css

[@bboydarknesz]

Makasih info ny pak, saya nyaris menggunakan Arrow Function selamanya :'D (maklum sebelumnya gak belajar, langsung main loncat) Ditunggu materi asyc JS (callback, promise, async await) nya ya pak....

[@s.sul24]

terima kasih pak Dhika

[@adhitialukmana2796]

pertama

[@guramezuku2294]

Makasih pak Dhikaa

[@hanmuid9387]

Mantap pak, terima kasih banyak

[@oumavinshu]

Mau nanya guys, apa ya beda nya function expression dengan Method, soal nya rada mirip-mirip.. sama-sama bisa dipakai di dalam sebuah object, lalu kedua nya di simpan ke variable juga.. untuk yang mau bantu jawab terima kasih...

[@pipitgusmayanti8342]

// Function statement/declaration, harus diberi nama function f1() {} // Function expression, tidak harus diberi nama // Bisa digunakan sebagai nilai dari variable atau property, argument, dll // Tanda kurung supaya menjadi expression *(function () {});* // Tanda kurung supaya menjadi object literal (bukan code block) ({ // Method // Function expression sebagai nilai dari property 'f2' *f2: function() {}* });

[@oumavinshu]

@@pipitgusmayanti8342 hoo begitu ya, seperti nya kalau method biasa nya pakai ':' ya karna brda dalam object.. sedangkan expression kalau jdi nilai sebuah variable menggunakan '='

[@s1mple-youtube24]

Nyimak terussssss...

[@mgaming6286]

pak saya kok yang di bagian akhir classnya sudah nambah tapi ngga ada transition nya ya

[@yohohogaming6]

Terima kasih banyak pak

[@farhan_2467]

thanks pak Dika...

[@bapelkesjambi6950]

No skip2 club 😁

[@muhamadrizki4394]

React Native dong pak dika

[@irfinfalah2942]

pake prototype juga bisa dibedakan pak

[@blyatMail]

makasih pak dhika

[@nabillaaaaa]

Terima kasih pak

[@Liamm403]

Om ask dong kalo mau buat shell di sublime text bisa ga sih? Smaa buat tutorial bypass admin dong:v

[@TY-sz9px]

Ini channel programming bro bukan hacking 😄

[@saradaayu506]

request vue js pak

[@dede102]

Kedua bang mantap

[@baniaraja]

udah 5 kali ulang pak...

[@RizaHariati]

Ih. Gimana sih, kadang bisa kadang enggak. (padahal baru belajar javascript 2 minggu tapi banyak protes wkwkwk)

[@nolep5555]

tolong bantu jelaskan kenapa function declaration this-nya malah ke window sumpah dah nonton 3x tentang hoisting ga paham 9:35

[@hubla8381]

kzbin.info/www/bejne/bp69pKBvj7Z5mrs sudah dijelaskan di part itu, kalo javascript mendefinisikan this sebagai window

[@okejek1234]

@@hubla8381 yg saya tangkap this pada arrow function merujuk kepada window,sedangkan this pada constructor function merujuk kepada objek nya,bukankah begitu?

[@nolep5555]

ok setelah setahun balik lagi baru paham ternyata di set interval make arrow function itu kena hoisting jadi dengan make this dia baru bisa kenak ke object Mahasiswnya GG

[@riosurya4065]

@@nolep5555 knp nggk ke closure ya?

[@sepingani6428]

Pak shandika request tensorflow.js 🙏 masih jarang yg membahasnya

[@NanoValorant]

Day 3: masih mencoba memahami

[@NanoValorant]

Akhirnya saya paham 😭

[@ivandraargyaputra9569]

Pak kenapa punya saya this.nama-nya tidak terbaca? Terima kasih.

[@aryaadinulfadlan8998]

judul lagu closing nya apa pak? bagi yg tau mohon info

[@darksystem2024]

Pak, apa nama tema dan colorscheme yang bapak gunakan disublime text3

[@jgn_nyepongin_pemerintah_trus]

Monokai

[@chairulanamj16]

setelah ini masuk ke framwork js kah pak?😊🙏

[@reichenbach3200]

duh stuck disiniii

[@hafizhadinigiandra5830]

8:26 setiap setengah detik, umur saya nambah 1 #pakdhikaoutofcontext

[@alufeed2410]

itu yang no1 dimenit 12:04 apa ya? disamping kurung kurawal?

[@fahrihhermawan5994]

* untuk semua elemennya, CMIIW

[@alimassidik3541]

Siapa yang bingung ketika dibagian video nuker variabel satu jadi dua , asli ane bingung ada yg bisa jelasin logikanya

[@visensoendo6532]

bingung pak. 😭😭

[@ipansubastian4759]

Saya masih belum mengerti tentang this di arrow function ini. /*************************** const Mahasiswa = function () { this.nama = 'Yukito'; this.umur = 18; this.sayHello = function () { console.log(`Halo, nama saya ${this.nama}, dan saya ${this.umur} tahun`); } setInterval(function () { console.log(++this.umur); }, 500); } const yukito = new Mahasiswa(); ***********************************/ /*************************** const Mahasiswa = function () { this.nama = 'Yukito'; this.umur = 18; this.sayHello = function () { console.log(`Halo, nama saya ${this.nama}, dan saya ${this.umur} tahun`); } setInterval( () => { console.log(++this.umur); }, 500); } const yukito = new Mahasiswa(); ***********************************/ Kenapa arrow function bisa menemukan variable this, sedangkan fungsi biasa tidak. Bukankan yang make arrow juga di hoisting ke atas sama kaya fungsi biasa? tapi kenapa yang arrow bisa menganggap this sebagai objek saat init ya? Yang saya pikirkan seperti ini : Function Declaration -> 1.Fungsi di hoisting 2. Dia mencari this didalam dirinya, karena ini function biasa (punya konsep this), maka dia mencarinya di objek saat ini.Dan di objek saat ini, dia belum menemukannya karena fungsi di hoisting lebih dulu daripada variable. 3. Karena tidak ditemukan, maka dia mencari keluar blok kurung kurawal, hingga sampai ke objek window. Arrow Function -> 1.Fungsi di hoisting 2. Dia mencari this didalam dirinya, karena ini arrow function (tidak punya konsep this), maka ia akan mencarinya di luar scope nya, yaitu diluar kurung blok kurawal fungsi tersebut begitu terus sampai ditemukan variable this (dalam kasus yang Function Declaration ia mencari sampai pada objek Window, hingga ditemukan variable this). Yang saya bingungkan kenapa arrow function sudah bisa menemukan this? Padahal arrow function tersebut juga sama sama di hoisting sebelum variable this tersebut. ( Bukankan kasusnya sama kaya Function Declaration). Bagi yang mau jawab saya ucapkan terimakasih, karena saya penasaran sama kasus ini.

[@cintaramayanti1811]

gatau a, ak juga masih bingung

[@mahyoungbi6816]

Sama, bantu up aja lahh 😂

[@renonaxa9629]

Up msh bingung😭

[@yokoso2386]

this pada arrow function = menemukan lexical scope ( di luar function arrownya ) this pada function biasa = global scope ( window ) karena function declaration = di hoisting karena function expression = tidak di hoisting karena disimpan di dalam variable disaat this dipanggil pada function delcaration = menemukan window karena di hoisting kesimpulan : this = window ( karena arrow function tidak ada this maka tidak ada window dan secara default mencari lebih kecil dari windownya ) jadi kalau memggunakan arrow function di function declaration = tidak di hoisting, itu fungsinya arrow function kenapa arrow function bisa menemukan variable this? karena arrow function tidak ada konsep this maka dia akan mencari this ( object parentnya = mahasiswa, dan isi di dalamnya jika ditulisnya { umur } secara spesifik ) jadi this pada arrow function tidak menemukan window melainkan menemukan object parentnya yang di dalamnya ada arrow function this

[@anassyarifuddin4536]

@@yokoso2386 tengkyu banget bg, akhirnya dapet pencerahan wkwkwk, setelah berhari hari muter episode yg ini, tpi buntu trs

[@muhamadmujib8213]

yang dislike gaada akhlak........

[@anggasmart8736]

Bang ngoding game dong,,,

[@muhammadfauzan602]

Mantap kwkwkw . javascript edan

[@reichenbach3200]

20:35 duh sulit dipahami haha

[@danaharley3565]

jangan lupa klik iklannya teman-teman;

[@dedeaisyah3712]

Bang bisa gak hack facebook ?

[@diosatriadarma9882]

20:29 temp itu apa pak?apakah variable?

[@ardirama6460]

temp itu variable satu yang diisi sementara

[@diosatriadarma9882]

@@ardirama6460 sama aja diisi dgn null kan??

[@sultan111ful1]

* pada css maksudnya apa ya ?

[@muhaimin8804]

* menandakan semua

[@vin6516]

semua elemen. contoh : body > * { background-color: red; } maka semua warna background elemen dalam akan berubah jadi warna merah

[@mucamadsupriyanto854]

akhhh pusing pak . bagian ini

[@ihsannurulhabib9729]

yang nuker array apa namanya tuh pak :D ?

[@sandhikagalihWPU]

namanya "destructuring assignment syntax" San.. 😀 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

[@ihsannurulhabib9729]

@@sandhikagalihWPU thanks Pak Dhika 😄

[@feizalfikri7697]

bang buat belajar flutter