Тёмный

JavaScript Closures in FIVE Minutes 

James Q Quick
Подписаться 203 тыс.
Просмотров 26 тыс.
50% 1

JavaScript Closures aghhhh! Trust me, they aren't as bad as you think. In this video, we'll look at a practical use case for Closures inside of a Rock, Paper, Scissors app.
This challenge is part of the Advent of JavaScript series, adventofjs.com/.
STAY IN TOUCH 👋
Check out the Podcast - compress.fm
Newsletter 🗞 - www.jamesqquic...
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquic...
Learn Web Development 📖 - www.jamesqquic...

Опубликовано:

 

7 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 52   
@chetanjain4616
@chetanjain4616 2 года назад
To my limited knowledge what you explained is lexical scope which is part of closure but closure is little more complex than that, maybe a reference of Dave Gray's video will help a little
@JamesQQuick
@JamesQQuick 2 года назад
I think the addition to lexical scope here is the fact that the function isn’t called immediately. It’s called at some later time and still has access to the variables. Lexical scope would more specifically refer to the case where you are accessing the data right then (not at a later point) I believe.
@rafalka7084
@rafalka7084 2 года назад
The best usage of closures is to create private variables I think.
@chetanjain4616
@chetanjain4616 2 года назад
@@rafalka7084 encapsulation would be the better term but yeah
@invictuz4803
@invictuz4803 2 года назад
Yes you're right, you also need to understand the concept of the call stack and function execution contexts and how these two are *determined dynamically* by how the function is *called* at runtime, as opposed to how lexical scope is *determined statically* by where the function is *defined* (in the code) at compile time. This is important as you'll often see popular articles mix up the terms, execution context and scope, which will get really confusing as you try to understand how it all works under the hood of the JavaScript engine/interpreter.
@harleyspeedthrust4013
@harleyspeedthrust4013 2 года назад
I use that pattern all the time. I have a web app which uses handlebars for the frontend, and there are many pages where there's a list of items and I need to add event listeners to each one - so this comes in handy
@terjes64
@terjes64 2 года назад
Thought it was more about if you keep a reference to a function, and that function has a reference to something that is out of scope of the first reference, the second reference is available as long as the first reference still exists?
@JamesQQuick
@JamesQQuick 2 года назад
Yeah I mean that's basically the same thing here. Any time something is referenced inside of a function that isn't called until later, the fact that it keeps the reference is it.
@ste-fa-no
@ste-fa-no 2 года назад
Simple 👏Worth noting that if you instanciate a "const n = Math.random()" each button will have its own different "n", but always the same "n" for every click on a singular button
@JamesQQuick
@JamesQQuick 2 года назад
If it’s inside of the for each yes you are correct!
@devxlk
@devxlk 2 года назад
Great Video ❤❤❤
@chukwuemekaorji9331
@chukwuemekaorji9331 2 года назад
The video was amazing thank you so much. Plus, I really love your theme and your font, I do love to know and use it thank you so much.
@Paul-wy6tn
@Paul-wy6tn 2 года назад
Straight to the point, cheers mate
@bmehder
@bmehder 2 года назад
I think this is one of the best explanations of closures I have come across.
@JamesQQuick
@JamesQQuick 2 года назад
WOw, so glad to hear that!
@eder8170
@eder8170 2 года назад
That was solid 5 minutes.. thank u sir
@LuccConstantin
@LuccConstantin 2 года назад
Thank you James.
@kamertonaudiophileplayer847
@kamertonaudiophileplayer847 2 года назад
I use closures but not very frequent. Generally, your guide is good. Keep going.
@MirkoMancini
@MirkoMancini 2 года назад
Thanks, great video!
@thewiscokid81
@thewiscokid81 2 года назад
Great video and explanation.
@user-xz3ws9lz1o
@user-xz3ws9lz1o 2 года назад
good
@sabinadhikari609
@sabinadhikari609 2 года назад
Hey James, what theme, font are you using? Also, did you do any changes in the default theme you used? Thanks James, keep up the good work. Hoping to watch your next video soon
@kemekenneth
@kemekenneth 2 года назад
I was scrolling the comment to see who has asked the theme question. It's beautiful. James, I need it too. Thanks for your videos.
@AlejandroLZuvic
@AlejandroLZuvic 2 года назад
I use the font Cascadia Code. I’m using VS Code with the Cobalt 2 Theme. It's in the Advent Page he mentioned, worth checking.
@jdavis2581
@jdavis2581 2 года назад
I think I found it - Midnight Synth
@jsayubi
@jsayubi 2 года назад
Love your videos, Thanks so much ❤
@anuphaldar3192
@anuphaldar3192 2 года назад
Your videos are awesome as your vs code theme, can you share the theme plz🙈
@snehitlal771
@snehitlal771 2 года назад
That's it !!...loved it !
@JamesQQuick
@JamesQQuick 2 года назад
Glad you liked it!
@chriscancode5202
@chriscancode5202 2 года назад
I've been using closures for years without even knowing that's what they were. lol.
@programming3043
@programming3043 2 года назад
Can any one tell what theme is he using? Does he share his settings.json?
@yashraj6565
@yashraj6565 2 года назад
This is awesome 💚
@JamesQQuick
@JamesQQuick 2 года назад
Glad you enjoyed it!
@deepakishere-e1d
@deepakishere-e1d 2 года назад
thanks
@JimKernix
@JimKernix 2 года назад
I don't understand how the i parameter in the forEach was actually logged out since you didn't define it in the addEventListener.
@zotoavinaandriamanamihaga6661
@zotoavinaandriamanamihaga6661 2 года назад
what is this vs code theme
@jdavis2581
@jdavis2581 2 года назад
Does anyone know what VS Code theme this is? I don’t believe this is the regular Cobalt 2 that he normally uses.
@jdavis2581
@jdavis2581 2 года назад
Found it - Midnight Synth
@Spartacus69
@Spartacus69 2 года назад
But why does "i" increment?
@bikabas
@bikabas 2 года назад
Vs code theme please ...
@AlejandroLZuvic
@AlejandroLZuvic 2 года назад
I use the font Cascadia Code. I’m using VS Code with the Cobalt 2 Theme. It's in the Advent Page
@jowniemand2514
@jowniemand2514 2 года назад
your explanation is a bit cryptic. I use closures a lot and I can somehow figure out what you are trying to say, but your tut lacks enough explanation to be able to grasp it the way it is explained. Perhaps you are using it in a way I have never used it, so pardon my ignorance in that case, but I am still puzzled.
@lexsemenenko
@lexsemenenko 2 года назад
I have a vague understanding of closures, but this example does not explain closures at all in a way it is commonly used.
@JamesQQuick
@JamesQQuick 2 года назад
Hmm anything you’d like to add or clarify?
@lexsemenenko
@lexsemenenko 2 года назад
​@@JamesQQuick In a foreach loop, in each iteration, the index is accessed from the inner function simply by the rules of scope. Function scope - meaning everything inside has access to it. Closure: an inner function always has access to the variables and parameters of its outer function (Yes), and the mind blowing fact is when it's in a situation after the outer function has already returned. But the values are remembered to be accessed after the outer fn return. The magic point of it. ) So the idea of private variables comes from this magic feature. I've seen examples of it where it was difficult to wrap my mind around it. Sorry for the confusion. It's true what the video described. But just there are deeper meanings I believe.
@JamesQQuick
@JamesQQuick 2 года назад
@@lexsemenenko I appreciate the detailed response. Agreed there are deeper implications and use cases than what's covered in the quick video
@danvillewilks9549
@danvillewilks9549 2 года назад
That was sooooo simple wow thanks a lot
@JamesQQuick
@JamesQQuick 2 года назад
Glad that helped!!
@dmytronice1337
@dmytronice1337 2 года назад
sry, but is it fullhd or no?
@ming3957
@ming3957 2 года назад
@dfultimatehack
@dfultimatehack 2 года назад
in 2x speed for 2.5min
@longb1913
@longb1913 2 года назад
3:13 wtf is a callback listener, try use simple language in a tutorial
Далее
JavaScript Closures Tutorial (Explained in depth)
19:03
when you have plan B 😂
00:11
Просмотров 24 млн
JavaScript Substring Method in 5 Minutes
7:04
Просмотров 10 тыс.
Learn Closures In 13 Minutes
13:22
Просмотров 66 тыс.
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн
Tips and Tricks for Debugging JavaScript
13:03
Просмотров 410 тыс.
Learn JavaScript CLOSURES in 10 minutes! 🔒
10:58
Просмотров 18 тыс.
PROOF JavaScript is a Multi-Threaded language
8:21
Просмотров 277 тыс.
JavaScript this Keyword
8:21
Просмотров 456 тыс.
JavaScript Closures Explained Simply
8:43
Просмотров 6 тыс.