Been teaching myself JS for little over half a year ago and almost jumped straight into react.. Realized that I lacked the fundamentals and just got back into understanding the core of JS and man I can't tell you how helpful these videos are! So clean, so simple so perfekt! Thanks you!
Best explanation of the pros and cons of arrow functions I’ve ever seen. Top quality production in every single sense. Thank you for your excellent work.
Arrow Functions JavaScript Tutorial - When to use them and when NOT to use them. Episode 7 of "10 Things JS Developers Should Know But Probably Don't". Enjoy! 💻🎉
The song is: The nurse who loved me - A Perfect Circle Finally I've found the best video that explains really well arrow functions! I also really like you use proper terminology to describe things in JS (higher order functions, surrounding scope AKA lexical scope?) + backticks use in the right situation instead of writing code "the old way" as many do!
Love to watch this series as JS developer. No idea , how other average/dummy teaching channels are getting more views and subscribers than this channel. please continue the series sir. your subscribers know the value of your teaching.
بهترین و کامل ترین چیزی که دیدم کیفیت و وضوح ویدیو بگیر تا کیفیت صدا و قدرت کلام و تسلط استاد واقعا تحسین برانگیزه. به نظرم در آینده نه چندان دوری شاهد صد هزار تایی شدن این چنل خواهیم بود.
Great episode. When you mentioned about the gotcha I was like I hope he goes into why that is the case, and why it’s done that way. I think you covered it but missed one important example. It was done to fix a very common problem with callbacks. Way back before arrow functions people had to write their methods by reassigning the value of this to something like “var self = this” outside of the higher order function so they can keep the binding they wanted. Arrow functions removed the need to do that. So your example at 21:40 would have been: talk() { var self = this // const was not a thing yet setTimeout(function () { console.log(self.name) } }
That's so funny you mention that because that's one the main reasons I used setTimeout and I totally forgot to make the point at the end. Thanks Ronald. Maybe you should be teaching these lol
Thank you so much to point out this missing point, i am new to javascript and i saw the same thing in debouncing program but unable to understand the real reason behind it. And yeah Thank you so much @ColorCode for creating these amazing content, this series is really helping me to learn javascript better.
This is my third time watch. I can say that I have understood "THIS" in arrow functions 90%. For the rest 10%, I need to code it myself to fully understand it. Thank you very much Mr. Sina for making such an important content.
I am absolute beginner, so little bit hard to understand but still the perfect talant of you teaching style, works for me. The melody is created by you on the go, I guess.
Lol. I stumbled upon "this" errors while trying to create some factories and was sooo confused why. Crazy how no one talks about arrow function scopes vs how functions a scoped. Im a year into programming and someone finally explained it to me XD.
Hat off! crystal clear. I like particularly the last part on arrow function in the EventListener, fantastic explanation.. Thank you for sharing your knowledge.
20:51 So for my future reference: // Functions bind things to the global scope. // Objects do not bind things. Functions do. // "arrowtalk: this" in the example is an object property. therefore, bound to the global object. 'this' will point to the window. // When we invoked talk(), a Method(which is a function that's a property of an object), it looks for the calling object to the left of it, in this case, 'me' , and binds the value of the talk() code block to that calling object 'me' when using 'this'. Again this works because we are using a Method to bind things.
Man, you just blow my mind! I have clear all of my doubts in JS. I will be very greatful, please continue making this types of tutorials. Best Wishes for you man ❤
Love this series, I have a hard time following though around 4:00, you're deleting stuff, clearing screen, copy pasting, then deleting it all again very quickly. Just wanted to bring it to your attention, as this is a pretty important lesson and it's hard to follow along with that. Thank you! Blessings!
edit: I just realized I had you at 1.25x speed, but nonetheless I suggested it in case you wanted to give it a second look and edit anything ( I don't know how youtube works with changing any parts of videos). I have to say I love your style of teaching, and your candor etc. I think you would do well to make a course or something. Just an idea!
@ColorCode Do you agree? setTimeout is not a higher-order function as it doesn't return a function itself. It's a regular function that schedules the execution of another function (the callback) after a specified delay. Higher-order functions, on the other hand, either accept functions as arguments or return functions as their result, or both. For example, map, filter, and reduce are higher-order functions because they accept functions as arguments and return transformed data or aggregated results.
@@ColorCode-io Waiting for the next video of 20 series, can you explain the basic one like call stack with hoisting and yeah expectng generator functions as well
background music at 25:20 hits you like you don't feel you learning how to write and become a coder anymore you're learning how to create and become a creator.
Thank you for creating this episode! Great content. As an Aspiring Web Developer at the age of 39, your explanations are clear and concise and easy for me to follow ! Subscribed. And followed on Twitter.💯👌
I would like to thank you alot for your delivering your amazing understanding of the core topics in JavaScript, we are waiting for intermediate projects in JavaScript for Software developers.
Your JavaScript course is awesome, personally I develop myself more through your course. And the song is A-perfect-circle band editz. Though I don't know the song but the tone is similar, the song is so relaxing for mind.
Bravo good sir!👏I understand 90% of it but 10%... I will rewatch this over and over in months after to re-hash, fully remember and fully understand the freakin' the dense concepts of gotchas in #ArrowFunctions. I fully understand what an "Arrow Function" is... it's that freakin' annoying THIS keyword! If I could bash THIS keyword with real-life Mallet... I would. The head-y concepts that I've learned from my first language Golang... kinda really helps me understand the dense wonky concepts of #Javascript Javascript is neat but... it's kinda weird with it's concepts, features and implementation. Sheesh!😅
@ColorCode What you did at 7:50 _is_ a named arrow function. By that I mean you can access the name of the function via the `name` property. In your example, if you typed `sayHello.name`, you'd get `"sayHello"`.
oh. I see. But, even without using New, and without using the anonymous function as a constructor, you can still functionally inherit from it with just not using the word new. 9:00
Just remember that this in arrow function take its context from the closest normal function , if it doesn't finds any normal function it will take window Object reference.
hi sina thank you so much for the tutorial! it would help all of us a lot if you could leave some projects to do after we finish the whole course beacuse i am finding it difficult to find the use of some the things you teach, with that i tend to forget a lot of the things we learn.
in the video @1:24 you say "here is a constructor "function Personon(n) {this.name=n} " ....I thought the method constructor should always be called "constructor".....
Thanks for the video. I don't understand the hype with these 'new' arrow. It's almost the same amount of syntax. It makes it more complicated because depending on what you're doing the syntax changes.
Great video as always! I've been watching your videos and finally decided to subscribe! BTW, what do you code on? How can you output js like that? I've never see this before
I think you explain things clear but i wish you showed more examples . The funnest thing i have learned on my own was to simply use a call back function to keep jumping in and out of functions that perform tasks or calculations. I havent seen any really solid tutorials that break real working code down. So far from watching multiple videos of yours i understand me.talk . Build something more interesting with those same concepts add and explain some more techniques on top of them so we can say ahhh that's dope i could do all this cool shit now and get creative . Your dope otherwise though bro. Much respect
Ahhhhh! I see what you mean. The biggest challenge is breaking down theory and show real examples while keeping videos short in time. With that said this one is 30 minutes so that's not a good excuse haha. Thanks for your comment. I'll keep that in mind for future.
@@ColorCode-io I appreciate this video, because you explain things really clearly, and you dive in... I personally think this is what was needed to understand just that... Other videos that shows how to build specific things, doesn't explain theory... I think the 2 are very different, unless there is a theory in building complex things... I would love to hear that :)
Hey colorcode. I got a question for yah. const animal = { name:"Lion", talk() { setTimeout(function(){ console.log(this); }, 5000); }, } animal.talk(); // outputs setTimeout function/object I tested this code out, and the value of this was the setTimeout function/object. Does this occur because a binding is created between the callback function passed to setTimeout and setTimeout itself right? Am I wording that the right way?
If you plz make a playlist on react js . It would be great for developers like us who are working in react js but actually do not know how it actually works underhood
what editor are you using? i tried both vscode and devtools console but all i get is "hello ${name}" can't print the input value .. thank you for this excellent tutorial.
Got a bit confused with your wording. So should we not use arrow functions inside a method. For example, const me = {name: "cat", talk(): setTimeout(()=> {console.log(this.name)})
@@ColorCode-io no bro I mean can u code on VS code then output them to dev toll it,s much better for me and people so I don't know what I say bro I believe one day JS will kill me bro I got so much confuse bro it is about a years now I have a lot of course on Udemy and I did watch a million video on YT so even I don't have my won portfolio even I cant solve one simple problem on CodWAR website I must always follow the video so now I read a book I download about 5 best book I like only one of them I'm on half way now it is about 490 page it is name ( JavaScriptNotesForProfessionals) and I don't know what to do bro I understand when I read or when I watch but after that I cant do anything even I cant make 2 line of simple project so what is wrong with me bro the problem is I don't care about looking for job I'm at home 24/7 so but I just really love to make website and app so any advise bro I think I have nearly 10 best JS course on Udemy they are TOP course and maybe 5 full stack course but I only focus on HTML and CSS and JS so now i js work with js i ignore HTML and CSS I'm not bad with them yes bro that is my problem that is why i say code on VS code better for understanding thx bro
actually, using arrow functions as event listeners is ok, as long as you don't use this anymore, but event.target (with event as arrow function argument)
7:44 This is incorrect. Arrow functions assigned to a variable are named functions with the name being the same as the variable name. This is similar to how the object property shorthand works. The interpreter will name the function after the variable.
Been teaching myself JS for little over half a year ago and almost jumped straight into react.. Realized that I lacked the fundamentals and just got back into understanding the core of JS and man I can't tell you how helpful these videos are! So clean, so simple so perfekt! Thanks you!
Thank you. Made my day. New video dropping tomorrow.
Best explanation of the pros and cons of arrow functions I’ve ever seen. Top quality production in every single sense. Thank you for your excellent work.
Thank you so much for your support Robert. Glad the video was helpful.
oh? you like this better than socratica of python? Yeah, I think both are reall good for each of their respective language.
Arrow Functions JavaScript Tutorial - When to use them and when NOT to use them. Episode 7 of "10 Things JS Developers Should Know But Probably Don't". Enjoy! 💻🎉
As soon as you sang "Say Hello" I immediately thought is this guy singing "The Nurse That Loved Me" by Failure and you were.
@@freemanhubbard6234 No way!!!! haha that's awesome. I've only heard 'A Perfect Circle' version. Listening to Failure now.
The song is: The nurse who loved me - A Perfect Circle
Finally I've found the best video that explains really well arrow functions! I also really like you use proper terminology to describe things in JS (higher order functions, surrounding scope AKA lexical scope?) + backticks use in the right situation instead of writing code "the old way" as many do!
Thanks! :)
Love to watch this series as JS developer.
No idea , how other average/dummy teaching channels are getting more views and subscribers than this channel. please continue the series sir. your subscribers know the value of your teaching.
Thanks Tech Bro. I see your comments :) more videos coming very soon.
بهترین و کامل ترین چیزی که دیدم
کیفیت و وضوح ویدیو بگیر تا کیفیت صدا و قدرت کلام و تسلط استاد واقعا تحسین برانگیزه. به نظرم در آینده نه چندان دوری شاهد صد هزار تایی شدن این چنل خواهیم بود.
OMG man I just love you, Thanks I have been JS developer for last 5 years and me myself didn't know this and arrow function this deeply :)
Great to hear!
Spot on explanation. I now finally understand how this works anywhere. Thank a bunch.
You're welcome!
Thank you so much for creating this series. The way you communicate and share is very nice. You make things seems more easy to grasp.
Awesome! Thank you
Great episode. When you mentioned about the gotcha I was like I hope he goes into why that is the case, and why it’s done that way. I think you covered it but missed one important example. It was done to fix a very common problem with callbacks. Way back before arrow functions people had to write their methods by reassigning the value of this to something like “var self = this” outside of the higher order function so they can keep the binding they wanted. Arrow functions removed the need to do that.
So your example at 21:40 would have been:
talk() {
var self = this // const was not a thing yet
setTimeout(function () {
console.log(self.name)
}
}
That's so funny you mention that because that's one the main reasons I used setTimeout and I totally forgot to make the point at the end. Thanks Ronald. Maybe you should be teaching these lol
@@ColorCode-io ha, I poses the knowledge but my delivery may not be as good as yours :)
Thank you so much to point out this missing point, i am new to javascript and i saw the same thing in debouncing program but unable to understand the real reason behind it.
And yeah Thank you so much @ColorCode for creating these amazing content, this series is really helping me to learn javascript better.
this is excellent. No no. I don't mean this, the keyword. I mean this, the person talking. that is excellent.
Thank you!
Your content is absolutely awesome. You deserve a JavaScript statue.
Last but not least: The Nurse Who Loved Me
Thank you so much for sharing this!!!
I don’t know about a statue but thank you 😀And correct song! DM me on instagram for a ColorCode sticker
I really love the way you teach. please create a full tutorial on JavaScript.
This is my third time watch. I can say that I have understood "THIS" in arrow functions 90%. For the rest 10%, I need to code it myself to fully understand it. Thank you very much Mr. Sina for making such an important content.
Write some code and you’ll get it. I promise 👍
I think this playlist is really underrated
I am absolute beginner, so little bit hard to understand but still the perfect talant of you teaching style, works for me. The melody is created by you on the go, I guess.
Lol. I stumbled upon "this" errors while trying to create some factories and was sooo confused why. Crazy how no one talks about arrow function scopes vs how functions a scoped. Im a year into programming and someone finally explained it to me XD.
Forgot to say that you are the best when it comes to teaching js on youtube ... keep it up .
Thanks!
Thanks
learned something about this I did not know and great ambient sounds in the background
I'm glad!
Best series I have watched for JS concepts. I donno why I never got this channel as recommendation.
Subscribed!
👍🤘
the nurse who loved me by the band failure. later covered by APC. subscribed, great work!
🎉
Sir you are really a good teacher for me . I m hussnain from Pakistan . I just want to sa sir I love your way of teaching
Hat off! crystal clear. I like particularly the last part on arrow function in the EventListener, fantastic explanation.. Thank you for sharing your knowledge.
Here learning arrow function and english too, excellent video! thanks man.
Lovely!
20:51 So for my future reference:
// Functions bind things to the global scope.
// Objects do not bind things. Functions do.
// "arrowtalk: this" in the example is an object property. therefore, bound to the global object. 'this' will point to the window.
// When we invoked talk(), a Method(which is a function that's a property of an object), it looks for the calling object to the left of it, in this case, 'me' , and binds the value of the talk() code block to that calling object 'me' when using 'this'. Again this works because we are using a Method to bind things.
Also, arrow functions shouldn't be used as direct methods inside an object.
your videos are pure enlightenment, can't thank you enough
Very nice of you. Thanks.
Thank you sir, for describing the discrimination of arrow function.❤
Man, you just blow my mind! I have clear all of my doubts in JS. I will be very greatful, please continue making this types of tutorials. Best Wishes for you man ❤
You got it! 👍
Love this series, I have a hard time following though around 4:00, you're deleting stuff, clearing screen, copy pasting, then deleting it all again very quickly. Just wanted to bring it to your attention, as this is a pretty important lesson and it's hard to follow along with that. Thank you! Blessings!
edit: I just realized I had you at 1.25x speed, but nonetheless I suggested it in case you wanted to give it a second look and edit anything ( I don't know how youtube works with changing any parts of videos). I have to say I love your style of teaching, and your candor etc. I think you would do well to make a course or something. Just an idea!
Someone beat me to it already, but the song is "The nurse who loved me" by A Perfect Circle !
You are the definition of coolness mann
@ColorCode Do you agree?
setTimeout is not a higher-order function as it doesn't return a function itself. It's a regular function that schedules the execution of another function (the callback) after a specified delay.
Higher-order functions, on the other hand, either accept functions as arguments or return functions as their result, or both. For example, map, filter, and reduce are higher-order functions because they accept functions as arguments and return transformed data or aggregated results.
You are a master man
I appreciate that!
@@ColorCode-io Waiting for the next video of 20 series, can you explain the basic one like call stack with hoisting and yeah expectng generator functions as well
This series is very helpful. Impressed by the production quality and your teaching style as well. 😉
Thank you!
background music at 25:20 hits you like you don't feel you learning how to write and become a coder anymore you're learning how to create and become a creator.
😎🫵
The song: The nurse who loved me by Failure and covered by my fav band A Perfect Circle :)
I planned to watch for a few minutes,...30 min later 'still watching', I think I'll be here for a long time. ☺
♥️
He is officially the most underrated youtuber in the coding community
This was 🔥, loved the way that you explained the 'this' behavior in arrow functions. Good job.
🔥
Great video, the only things that I can think of missing are, hoisting and how e.target behaves on event listeners.
Great production.Wonderful explanation.
Thank you!
Thank you for creating this episode! Great content. As an Aspiring Web Developer at the age of 39, your explanations are clear and concise and easy for me to follow ! Subscribed. And followed on Twitter.💯👌
Good for you for learning to program. Best of luck and contact me if you have questions.
@@ColorCode-io thank you! It's been a decent journey so far (3.5 months). Just starting to get my feet wet with Javascript.
I would like to thank you alot for your delivering your amazing understanding of the core topics in JavaScript, we are waiting for intermediate projects in JavaScript for Software developers.
Thank you
Your JavaScript course is awesome, personally I develop myself more through your course. And the song is A-perfect-circle band editz. Though I don't know the song but the tone is similar, the song is so relaxing for mind.
Glad you like the material 👍
@@ColorCode-io Please make a full course video on react js and react native
Very good video in terms of code examples and explanation.
This video is incredibly awesome, is a master piece, full of information and deep points.😃 Thank you👍👍👍!
Bravo good sir!👏I understand 90% of it but 10%... I will rewatch this over and over in months after to re-hash, fully remember and fully understand the freakin' the dense concepts of gotchas in #ArrowFunctions.
I fully understand what an "Arrow Function" is... it's that freakin' annoying THIS keyword! If I could bash THIS keyword with real-life Mallet... I would.
The head-y concepts that I've learned from my first language Golang... kinda really helps me understand the dense wonky concepts of #Javascript
Javascript is neat but... it's kinda weird with it's concepts, features and implementation. Sheesh!😅
thank so much for the video, your video is even better than the paid one, you sort out a lot of my confusion
That’s awesome to hear. Thank you.
this was fun and really informative to watch thank you for this series i'm gonna consider watching the rest of it
great great content
🙏Thanks
Should have so many more views and likes. Thanks for the content.
Thank you. Soon :)
@ColorCode What you did at 7:50 _is_ a named arrow function. By that I mean you can access the name of the function via the `name` property. In your example, if you typed `sayHello.name`, you'd get `"sayHello"`.
I think that's a function expression; a function assigned to a variable. A function expression can either be named or anonymous. Both are optional.
@@ultronsam1214the interpreter will make it a named function similar to how object property shorthand works
Congrats on the explanations! You the man!
Thank you
sir i cant,t tell this videos are helping so much please can cover some more topics
Your channel is top notch
Ty!
This is some top tier content
Thanks Sina! This really helped a lot.
Bro, this guy is really cool!
at 7:27
if we type
sayHello=()=>{
console.log("Hello")
}
sayHello()
now doesn't it become that we have a named arrow function ?
oh. I see. But, even without using New, and without using the anonymous function as a constructor, you can still functionally inherit from it with just not using the word new. 9:00
Thanks, your explanation is magnificent 👍👍👍
please keep making videos. They're great
More coming soon
Just remember that this in arrow function take its context from the closest normal function , if it doesn't finds any normal function it will take window Object reference.
thank you
3:26 what did they say??? I need to know
Great explanation
Thank you for taking efforts making life much easier ☺️
Awesome Video! Would be great if after you finish your JavaScript series you do one one react
The song is by Failure. APC covered it.
You win!
Do you have article for the topic which I can refer to, to solidify my understanding?
Next Level Bro.
thanks for the tips.
hi sina thank you so much for the tutorial! it would help all of us a lot if you could leave some projects to do after we finish the whole course beacuse i am finding it difficult to find the use of some the things you teach, with that i tend to forget a lot of the things we learn.
in the video @1:24 you say "here is a constructor "function Personon(n) {this.name=n} " ....I thought the method constructor should always be called "constructor".....
will you make react tutorials in future?
Yes
Thanks for the video. I don't understand the hype with these 'new' arrow. It's almost the same amount of syntax. It makes it more complicated because depending on what you're doing the syntax changes.
Great video! When can we expect the next video in the series to be released?
Mid September
You can do something like arguments with the spread operator (...n) => {n[0]}
This is rest parameter tho. A spread operator used inside a function parameter which groups args into true array, right?
Great video as always! I've been watching your videos and finally decided to subscribe! BTW, what do you code on? How can you output js like that? I've never see this before
Thanks for the sub. I'm just using Chrome DevTools.
@@ColorCode-io looking good !! impressive. thanks for the answer !! you're a legend
2:00 Pet - A Perfect Circle?
The Nurse Who Loved Me*
Where's my gift?
How do you get the horizontal lines that divide the code?
It's not a code editor. These are animations I make manually.
Oh nice!
I think you explain things clear but i wish you showed more examples . The funnest thing i have learned on my own was to simply use a call back function to keep jumping in and out of functions that perform tasks or calculations. I havent seen any really solid tutorials that break real working code down. So far from watching multiple videos of yours i understand me.talk . Build something more interesting with those same concepts add and explain some more techniques on top of them so we can say ahhh that's dope i could do all this cool shit now and get creative . Your dope otherwise though bro. Much respect
Ahhhhh! I see what you mean. The biggest challenge is breaking down theory and show real examples while keeping videos short in time. With that said this one is 30 minutes so that's not a good excuse haha. Thanks for your comment. I'll keep that in mind for future.
@@ColorCode-io I appreciate this video, because you explain things really clearly, and you dive in... I personally think this is what was needed to understand just that... Other videos that shows how to build specific things, doesn't explain theory... I think the 2 are very different, unless there is a theory in building complex things... I would love to hear that :)
Very cool video!
I love you content a lot ❤ you deserve more likes & views 😢
BTW song that you sung was from "The nurse who loved me"
Glad you liked the video
Thank you Sinaaaa!!!!
You got it, Mirkooo!
You are amazing , real amazing
♥️
waiting for next video 🔥
Already??? :)
@@ColorCode-io I mean Higher order functions 😁
Hey colorcode. I got a question for yah.
const animal = {
name:"Lion",
talk() {
setTimeout(function(){
console.log(this);
}, 5000);
},
}
animal.talk(); // outputs setTimeout function/object
I tested this code out, and the value of this was the setTimeout function/object. Does this occur because a binding is created between the callback function passed to setTimeout and setTimeout itself right? Am I wording that the right way?
If you plz make a playlist on react js . It would be great for developers like us who are working in react js but actually do not know how it actually works underhood
the song is The nurse who loved me - A Perfect Circle or by Failure :) no gift needed
That is correct :)
How do you execute JS on demand like that? I know python has something similar, but did not know you could do the same with JS
Chrome DevTools
Helpful for me
Great
what editor are you using? i tried both vscode and devtools console but all i get is "hello ${name}" can't print the input value ..
thank you for this excellent tutorial.
Got a bit confused with your wording. So should we not use arrow functions inside a method. For example, const me = {name: "cat", talk(): setTimeout(()=> {console.log(this.name)})
Thank you
Yw
Awesome video!
Thanks!
thx for the nice video bro but please VS code as well I get confused bro thx
What exactly about VS code is confusing for you? Plug-ins? Setup? Something else?
@@ColorCode-io no bro I mean can u code on VS code then output them to dev toll it,s much better for me and people so I don't know what I say bro I believe one day JS will kill me bro I got so much confuse bro it is about a years now I have a lot of course on Udemy and I did watch a million video on YT so even I don't have my won portfolio even I cant solve one simple problem on CodWAR website I must always follow the video so now I read a book I download about 5 best book I like only one of them I'm on half way now it is about 490 page it is name ( JavaScriptNotesForProfessionals)
and I don't know what to do bro I understand when I read or when I watch but after that I cant do anything even I cant make 2 line of simple project so what is wrong with me bro the problem is I don't care about looking for job I'm at home 24/7 so but I just really love to make website and app so any advise bro I think I have nearly 10 best JS course on Udemy they are TOP course and maybe 5 full stack course but I only focus on HTML and CSS and JS so now i js work with js i ignore HTML and CSS I'm not bad with them yes bro that is my problem that is why i say code on VS code better for understanding thx bro
good stuff!
Appreciate it!
thank you so much
You're welcome!
actually, using arrow functions as event listeners is ok, as long as you don't use this anymore, but event.target (with event as arrow function argument)
The Nurse Who Loved Me by Failure (A Perfect Circle made it famous with their cover)
7:44 This is incorrect. Arrow functions assigned to a variable are named functions with the name being the same as the variable name. This is similar to how the object property shorthand works. The interpreter will name the function after the variable.
Why did you said not o use setTimeout ? If it is that bad why does it exist ?
So, in short.
If the target is this, the arrow will miss.
If the surrounding or context pointer will fit, it's a hit?!
You should be writing for ColorCode :)
@@ColorCode-io lol, with pleasure. 😆
But your writing/teaching style, is already great.