One thing I absolutely love about your channel is how you ruthlessly hunt "blind spots" that are very common yet rarely get the attention they deserve. Another gem by you
"but what _is_ print?" _vsauce music starts playing_ Edit: also, great video! I never really thought of giving functions properties like objects, I'm not sure how it's useful but it's interesting to know!
It would be a lot more useful if all the variables defined in the function were left as properties of the function object. It would only work if they got reset each time the function gets called
@@ericskelton5191 Yeah that would've been very cool. All variables without definition become properties while those with definition work as they do now. That way you choose what to reinitialize and what to persist without stress.🤗
가장 명쾌한 설명입니다. JS 의 function 은 Object 이기 때문에, callFunc( calledFunc ) 또는 callFunc( () => { doSomething } ) 이렇게 쓰는 게 맞다. () => { doSomething } 는 자체가 object 이기 때문이다. callFunction( calledFunc() ) 가 혼란과 에러를 발생시키는 이유에 대해 정확하게 이해했습니다.
I did a trickier, higher-order form of this mistake with a react interface recently Put my buttons as onClick={setState('such&such')} causing those to just run on render and fire off alarm bells with react Fixed it with onClick={() => setState('such&such')}
@@karanparmar4318 wdym? what does currying have to do with it? for me currying is const f = x => y => x + y; const add5 = f(5); console.log(f(10)(20)); // 30 console.log(add5(11)); // 16
@@Kitulous instead of making stuff complex and for reusability purposes you could create separate function for it like this that uses currying as well, currying doesn't mean you "should" pass and call arguments individually... I hope following snippet helps you in some way. //callback: const handleClick=(a,b,c,d)=>(event)=> { //handleYourCrap... } //render:
What i learned from this video function TM( r ) { if(!( 'tracker' in TM )){ TM.tracker = 0; TM.maxR = r; } console.log('relevant execution completed'); TM.tracker++; console.log('you can only replay this message '+ (TM.maxR - TM.tracker) +' times'); if(TM.tracker === TM.maxR){ console.log('TM is self-destructing...'); } }
I thought that this is knowledge that is supposed to be common knowledge, but then again I have been in this world of software engineering for decades now. But if it is true that many are not aware, then this is a great video that is excellent in getting those many developers out there that are missing a great idea, informed. Thanks for the video, and no thanks to the 33 dislikes who do not get the point with training videos.
This is the first step to understanding Haskell: a function is a value which takes other values. Would be interesting to hear about making functions which make functions (allowing for staged execution and peaking at fully curried functions).
I been trying to understand callback function for a very long time and it just took less than a minute for you to explain what it is and i finally understooddddddddd...finallllyyyyyyyyyyyy Thanks 😭😭😭
Was kinda expecting something more with that title. If you’re an experienced coder you’d never make that mistake since its pretty self explanatory, especially if you’ve worked with other languages that have similar rules. In a beginner’s perspective I think they learn this very early on, but maybe not to the depth you explained.
I started learning Js just like two months ago, i needed to rewatch some parts of the video to full understanding but i feel i ve learn this hard topic. Finding your channel was a realy lucky thing to me, im absorving all your content and feel im fast learning the essencial things about js and coding. Thanks for that, really
Thanks for the video!! I've always been confused about what people really meant by callback functions, you explanation was perfect and it just clicked. Cheers!
One thing about functions few understand is that with IIFE syntax : (function x(){})(), from inside the function 'this' is always the CREATOR or OWNER of the function (usually Window at the top level), and that is because ALL vars in js (of which functions are just lists of instructions referenced by a var) are owned by whatever they are created inside of. If all you want is a singleton that runs once and returns a handle to an interface you created, then no biggie...but... If you use the syntax var x = new function(){} instead, the function is also immediately invoked - but from within the new function 'this' will be Object which is *often* what was intended because your whole point was to create a new execution context. I call this DIFO (dynamically instantiated function object). Crockford got this wrong IMHO. If you use DIFO syntax instead of IIFE, all the this=that b.s. is not needed because you are not having to compensate for 'this' not being what you expect it to be. Crockford says this was an error in js but if you do a LOT of console logging tests the elegant design of js makes sense. In js ALL vars are static, retaining their value between invocations of their enclosing function b/c they actually are data members ATTACHED to something, effectively a member of whatever it is created inside of - it's just confusing because much code is top level meaning it is owned by the Window object. Because of all this, IMHO all the new ECMA 6 syntax like the class keyword, construction, even object.create is just syntactic sugar for C type programmers who are having a hard time grokking how js works.
arrow functions are likewise dumb b/c in practice not only do you hardly save any keystrokes, but to understand at a glance what the code is doing - it just makes it harder with virtually no upside imho b/c you have to mentally sort the various flavors of arrow functions
Literally every video you make, make sense. Things I dont understand is understood right after I watch your videos. Thank you so much for the value you bring to the Web Dev wold.
Wow this video is probably one of the best i haves seen as fresh JS and React coder. Always know how to use call back but never knew why am i doing it this way:D THX
Hey Kyle! You're the BEST when I comes to break down the fundamentals in a comprehensive and elegant way 🙏 In 03:50 When you say: Functions are just like normal objects, the only difference is that you can call a function using parentheses passing different PARAMETERS to it. Wouldn't be more correct to say ARGUMENTS since you here is referring to values passed to the function and not names defined in the function declaration? Or am I missing something in regards of parameter/argument naming in function callbacks?
Great video Kyle! These concepts helped demystify JavaScript for me in a big way and I find it odd how little this concept is spoken about. Almost everything in JS is an object-like at a fundamental level, even Primitive types like strings. More specifically, there's usually a __proto__ key applied to these "objects" which refers to the blueprint of key value pairs that correspond to that data type. That's where methods like "string".tolowercase() and Array.map() come from. When declaring a function or number etc. it's similar to generating a new object from a class in the sense that the number, function, string etc. receives some default keys and values. I'm sure that you (Kyle) know all of this and I think it would make a great video which would help demystify JS for a lot of people like it did for me.
There's a noteworthy difference between string primitives and String objects instantiated using the constructor with the `new` keyword. The latter creates an object which is of type 'object', even though strings are normally of type 'string'. The constructor can be used to convert other things to strings, but it is safer to do so without using the `new` keyword. Using objects as strings disables us from comparing strings like we're used to, since `new String('str') !== 'str'`. It also causes unexpected behaviour if you're typechecking since all of the lines below evaluate to true: typeof String('str') === 'string' typeof new String('str') === 'object' 'str' instanceof String === false String('str') instanceof String === false Primitives actually get converted into their wrapper objects (String in this case) behind the scenes if you're trying to invoke a method or a property of theirs, which means this too, is true: 'str'.prototype === new String('str').prototype This behaviour is called auto-boxing.
@@Italiafani Sorry if I wasn't very clear, I was simply trying to say that they are object-like in the sense that they have keys and values, methods etc. just like typical objects. Besides, I mentioned making a video as Kyle would do a much better job than I could in a comment.
@@leebuckle8288 No problem, my fellow dev. I was just elaborating on your comment so people might know just a bit more than they did. I agree it's important to know that everything in JS behaves like an object, but I also think the difference I explained is something to keep in mind.
@@Italiafani so does the new keyword always generate an object with the "blueprint" that references the initial object? As in: in the initial it is a string, but with the new keyword you reference the initial value but create a new object of that initial value? (My explanation might not be very clear, indicating to me I don't think I really get the concept)
@@Italiafani Thanks for your input. I've edited my comment to be a bit more clear as to try and not confuse or give incorrect information. I should have mentioned that I'm by no means an expert on this matter, as is probably evident 😅
I'm liking your React course Kyle! Way better then another one I bought that was a lot more expensive. Very easy to follow and you explain the concepts well!
Interesting insight into what a JavaScript function actually is, under the hood. But regarding usage when passing functions as arguments, I'm confused that there is any confusion over this. All you have to remember is that parenthesis "()" mean "DO THIS RIGHT NOW", and causes a function to be invoked IMMEDIATELY. So you only use them if/when you want the function to be called right at that point in your code. If you intend that the function be called LATER (as is the normal intent with a callback), do not use the parenthesis. Need it be more complicated than this?
@UC5uBCnYHtX2VR3yJbHi5Egg There is tremendous value in many of WDS videos. I just think in this case, the waters were muddied with a lot of superfluous information, and the gist could have been conveyed much more succinctly.
I really like that you cover more web theorie related content lately. I felt that more and more content related to your personal opinion (e.g. VSC extensions) took over. I subcribed because of the foundation principles and re-subed because you got back to those again.
Thanks Kyle and do you mind to make a video for JavaScript prototype? Wish to know a bit more from your video ~~
3 года назад
Thanks a lot for this useful video. I came across this kind of problem recently, while I was trying to make a function, which was using a callback as an input parameter and use it across multiple components in Vue JS, but I got stuck and temporarely left the problem undone. Now I will definetly try again :). Thanks again and thumbs up
It's bit confusing to say that you pass a function print to another function as an input parameter. You pass a pointer which points to a print function or to be more explicit to the memory space on the heap where the memory for print function was allocated. Correct me if I'm wrong. Good vid btw.
Its abstraction. What you said is more confusing especially considering Javascript is a language where you don’t directly manage the stack, heap, etcetera. Maybe in languages like C that would make more sense.
Despite being a beginner, their comment was ironically more understandable. It my head, that's exactly what I see, 'passing pointers' that point to the 'print' function, as opposed to 'passing the function'.
I actually learned the difference between passing a function With and Without parenthesis, thanks! even so, I downvoted the video because of the confusing accelerated explanation that as usual lookes more like thinking in a loud voice rather than TEACHING.
Hey Kyle, thanks for the informative video. I'm sure a lot of people will benefit from this. I just wanted to point out that the whole idea of functions (which are essentially objects) to be used as a variable (like passed in as an argument or returned from a function etc) is known to us as "Functions are First-Class Objects or First-Class Citizens in JavaScript". Just a little terminology that can help people in interviews or elsewhere. Thanks!
I've never made this mistake (maybe typos, but never because of a lack of understanding), so I feel oddly left out now 😂😂. The setting properties on functions thing was very cool though, never knew about that! ☮️🙌🏽🎊🏆
Anonymous / Arrow / Lambda functions. When I started playing with them, the idea that "functions are also variables" finally clicked. And those are littered throughout JavaScript lmao
Hi Kyle! First of all thanks for your content man ,it's really helpful... I started noticing your guitar on your videos, what type of music do you like to play? Any videos of that soon ;) Cheers!
Hmm, I think you need to change the name of the video (make too made rather?). I may have made this mistake loooong ago (couldn't even tell you if I did), but I worked with prototyping back in 2008 already which is the basis of what you're eluding to... I actually thought you were gonna talk about prototyping. And, my prototyping knowledge came from my Flash ActionScript 1 days which was based on ECMA.
"Whether you're a novice or have been programming for years, I'm gonna blow your mind!" *proceeds to explain the most basic concept of JavaScript, that functions are first-class objects* No offense but I'm glad I had my adblocker on for this, you do not deserve any revenue for 7 minutes of content that should have been in your "Intro To" series back in 2018.
If this makes sense, I just think of functions as a way to create a temporary scope like one of the worlds in our solar system. A world / planet has access to meteorites and other universal things from the universe but to return it back out to the universe we must explicitly return it (punch it back out like ultraman fist!).. hence return lol
Actually I already knows this. What I don't know is dir. such a useful function. Ps. next time I wouldn't be surprised if you say. You can actually call two or more callbacks.
I was not a big fan of Javascript some time ago, but it has grown on me and there are things I do think are cool in it. But one thing I think I will never like, or use if I can avoid it, is Callbacks. I hate them. I can't see the reason or the logic behind using them. *Here, let me write a function that takes in a callback, write another function that prints out some input and bla bla bla...* Why?! Just write console.log("something") and there you go. And there is probably also another, easier, solution if the scenario is different. I don't see how or why using callbacks would be smarter. I just don't. And I haven't heard anyone explain it in a way that made me go "aaaah, now I see".
This is because they're not showing real callbacks, they're showing a spaghetti version. How I would use a callback. I'd have another object that is a controller. Other objects can store their launch, pause, destroy methods (functions). I would call this registering with the controller. Now a user can make a choice from a the ui, and it calls the proper objects (call me back when you need me bro) methods. This way that code never needs to run unless necessary. I can make each object have the same name for their functions that control them. Now the API to control my objects are the same. So the controller can get the object from a map, and call it's launch, or whatever. So my launcher function in my controller is a function that takes a search term. dummy code to express idea. launcher(searchterm){ launcherMap.get(searchterm).launch()} pauser(searchterm){ launcherMap.get(searchterm).pause()}
I'm confused. Isn't a function different in that it defines a bunch of code to execute? A plain object only contains properties, whereas a function executes a block of code (conditional logic, loops, etc)
I actually explained basically this entire video to a newer programmer today lmao 🤣 I have validation functions I made that return a function that were confusing him.
What I find confusing is when a function is set to a const. The following will print "hello world" even though there is no explicit statement myWorld() to execute the function assigned to it. Makes no sense to me. If I set a const to a function it should mean that I don't want the function to execute until the const is called. const myWorld= setTimeout(() => { //setTimeout executes console.log("hello world") }, 500);
setInterval returns a number that you can use later to clear that interval: const interval = setInterval(() => console.log("I will log this every second"), 1000); function stopLogging() { clearInterval(interval); }
Hello Kyle and thank you for all of your content! (btw I really like how you styled the battleship game, amazing job!) Another example for the concept you delivered in this video is actually in REDUX actions creators... naturally we destruct action creators functions when we use bindActionCreators function. like this for example: const { actionCreator1, actionCreator2, actionCreator3 } = bindActionCreators(actionCreators, dispatch) we can see that we destruct those functions like regular objects.
hello please, i have an input, i created a function to get the input value and put it inside a text, the problem is that i need the function to put the value inside the text multiple times and the function take the value and put it in the one only! so how can tell the function to whenever it finds the div to put the value it put it there (multiple times)
One thing I absolutely love about your channel is how you ruthlessly hunt "blind spots" that are very common yet rarely get the attention they deserve. Another gem by you
Bro, your hair is getting more and more magnificent. Enable god mode and go for a full Bob Ross.
Full Johnny Bravo.
More like Guile from SF, funny enough his name is Kyle :D
Please don't, everytime his hair levels up people like me lose more hair
lol
@@maema255 Kyle wins! Perfect!
"but what _is_ print?"
_vsauce music starts playing_
Edit: also, great video! I never really thought of giving functions properties like objects, I'm not sure how it's useful but it's interesting to know!
It would be a lot more useful if all the variables defined in the function were left as properties of the function object. It would only work if they got reset each time the function gets called
@@ericskelton5191
Yeah that would've been very cool. All variables without definition become properties while those with definition work as they do now. That way you choose what to reinitialize and what to persist without stress.🤗
가장 명쾌한 설명입니다.
JS 의 function 은 Object 이기 때문에,
callFunc( calledFunc ) 또는
callFunc( () => { doSomething } )
이렇게 쓰는 게 맞다.
() => { doSomething } 는 자체가 object 이기 때문이다.
callFunction( calledFunc() ) 가 혼란과 에러를 발생시키는 이유에 대해 정확하게 이해했습니다.
If you are a beginner see his videos 2 times and make notes of it you will never again have to struggle about that topic
I did a trickier, higher-order form of this mistake with a react interface recently
Put my buttons as onClick={setState('such&such')} causing those to just run on render and fire off alarm bells with react
Fixed it with onClick={() => setState('such&such')}
use currying it's better than creating arrow function on each render
@@karanparmar4318 wdym? what does currying have to do with it?
for me currying is
const f = x => y => x + y;
const add5 = f(5);
console.log(f(10)(20)); // 30
console.log(add5(11)); // 16
@@Kitulous instead of making stuff complex and for reusability purposes
you could create separate function for it like this that uses currying as well,
currying doesn't mean you "should" pass and call arguments individually...
I hope following snippet helps you in some way.
//callback:
const handleClick=(a,b,c,d)=>(event)=> {
//handleYourCrap...
}
//render:
@@karanparmar4318 got it! yeah, I've been doing it kinda the same, but I was defining a separate function for each element and just passing it like
Hate to say this, but this video is much easier to digest than the one on your JavaScript Simplified for beginners.
What i learned from this video
function TM( r ) {
if(!( 'tracker' in TM )){
TM.tracker = 0;
TM.maxR = r;
}
console.log('relevant execution completed');
TM.tracker++;
console.log('you can only replay this message '+ (TM.maxR - TM.tracker) +' times');
if(TM.tracker === TM.maxR){
console.log('TM is self-destructing...');
}
}
I thought that this is knowledge that is supposed to be common knowledge, but then again I have been in this world of software engineering for decades now. But if it is true that many are not aware, then this is a great video that is excellent in getting those many developers out there that are missing a great idea, informed. Thanks for the video, and no thanks to the 33 dislikes who do not get the point with training videos.
recommended channel if you are interested ruclips.net/channel/UCvu6J9q1AM6q4xysGqAvVyw
This is the first step to understanding Haskell: a function is a value which takes other values. Would be interesting to hear about making functions which make functions (allowing for staged execution and peaking at fully curried functions).
I been trying to understand callback function for a very long time and it just took less than a minute for you to explain what it is and i finally understooddddddddd...finallllyyyyyyyyyyyy
Thanks 😭😭😭
Was kinda expecting something more with that title. If you’re an experienced coder you’d never make that mistake since its pretty self explanatory, especially if you’ve worked with other languages that have similar rules. In a beginner’s perspective I think they learn this very early on, but maybe not to the depth you explained.
100% agree
Hmmm plz def "exp coder"?
As ... Exp web dev coder?
Desktop app coder?
CMD line coder?
Scriptor???
Yeah I’ve only been coding for about 5 months and this was nothing new to me
Yeah, object oriented 101
agree
I started learning Js just like two months ago, i needed to rewatch some parts of the video to full understanding but i feel i ve learn this hard topic. Finding your channel was a realy lucky thing to me, im absorving all your content and feel im fast learning the essencial things about js and coding. Thanks for that, really
I'm new to developing, and OMG this video helped me A LOOOT to finally understand functions. Thaaank you
Thanks for the video!! I've always been confused about what people really meant by callback functions, you explanation was perfect and it just clicked. Cheers!
this video is spot on. thank you for pointing out this common mistake
The hype is deserved, kyle. Great job and thank you.
One thing about functions few understand is that with IIFE syntax : (function x(){})(), from inside the function 'this' is always the CREATOR or OWNER of the function (usually Window at the top level), and that is because ALL vars in js (of which functions are just lists of instructions referenced by a var) are owned by whatever they are created inside of.
If all you want is a singleton that runs once and returns a handle to an interface you created, then no biggie...but...
If you use the syntax var x = new function(){} instead, the function is also immediately invoked - but from within the new function 'this' will be Object which is *often* what was intended because your whole point was to create a new execution context.
I call this DIFO (dynamically instantiated function object). Crockford got this wrong IMHO. If you use DIFO syntax instead of IIFE, all the this=that b.s. is not needed because you are not having to compensate for 'this' not being what you expect it to be. Crockford says this was an error in js but if you do a LOT of console logging tests the elegant design of js makes sense.
In js ALL vars are static, retaining their value between invocations of their enclosing function b/c they actually are data members ATTACHED to something, effectively a member of whatever it is created inside of - it's just confusing because much code is top level meaning it is owned by the Window object.
Because of all this, IMHO all the new ECMA 6 syntax like the class keyword, construction, even object.create is just syntactic sugar for C type programmers who are having a hard time grokking how js works.
Lovely comment
I made this comment almost a year ago but stand by it ;)
@@NicholasShanks
arrow functions are likewise dumb b/c in practice not only do you hardly save any keystrokes, but to understand at a glance what the code is doing - it just makes it harder with virtually no upside imho b/c you have to mentally sort the various flavors of arrow functions
Thanks because I just learned that callback in callback("hello") can be treated as a key
Literally every video you make, make sense. Things I dont understand is understood right after I watch your videos. Thank you so much for the value you bring to the Web Dev wold.
Wow this video is probably one of the best i haves seen as fresh JS and React coder. Always know how to use call back but never knew why am i doing it this way:D THX
That is why we call these first class function
First class citizens
That is why we call Javascript functions first class objects.
Hey Kyle! You're the BEST when I comes to break down the fundamentals in a comprehensive and elegant way 🙏 In 03:50 When you say: Functions are just like normal objects, the only difference is that you can call a function using parentheses passing different PARAMETERS to it. Wouldn't be more correct to say ARGUMENTS since you here is referring to values passed to the function and not names defined in the function declaration? Or am I missing something in regards of parameter/argument naming in function callbacks?
Great video Kyle! These concepts helped demystify JavaScript for me in a big way and I find it odd how little this concept is spoken about.
Almost everything in JS is an object-like at a fundamental level, even Primitive types like strings. More specifically, there's usually a __proto__ key applied to these "objects" which refers to the blueprint of key value pairs that correspond to that data type. That's where methods like "string".tolowercase() and Array.map() come from.
When declaring a function or number etc. it's similar to generating a new object from a class in the sense that the number, function, string etc. receives some default keys and values.
I'm sure that you (Kyle) know all of this and I think it would make a great video which would help demystify JS for a lot of people like it did for me.
There's a noteworthy difference between string primitives and String objects instantiated using the constructor with the `new` keyword. The latter creates an object which is of type 'object', even though strings are normally of type 'string'. The constructor can be used to convert other things to strings, but it is safer to do so without using the `new` keyword. Using objects as strings disables us from comparing strings like we're used to, since `new String('str') !== 'str'`. It also causes unexpected behaviour if you're typechecking since all of the lines below evaluate to true:
typeof String('str') === 'string'
typeof new String('str') === 'object'
'str' instanceof String === false
String('str') instanceof String === false
Primitives actually get converted into their wrapper objects (String in this case) behind the scenes if you're trying to invoke a method or a property of theirs, which means this too, is true:
'str'.prototype === new String('str').prototype
This behaviour is called auto-boxing.
@@Italiafani Sorry if I wasn't very clear, I was simply trying to say that they are object-like in the sense that they have keys and values, methods etc. just like typical objects. Besides, I mentioned making a video as Kyle would do a much better job than I could in a comment.
@@leebuckle8288 No problem, my fellow dev. I was just elaborating on your comment so people might know just a bit more than they did. I agree it's important to know that everything in JS behaves like an object, but I also think the difference I explained is something to keep in mind.
@@Italiafani so does the new keyword always generate an object with the "blueprint" that references the initial object?
As in: in the initial it is a string, but with the new keyword you reference the initial value but create a new object of that initial value? (My explanation might not be very clear, indicating to me I don't think I really get the concept)
@@Italiafani Thanks for your input. I've edited my comment to be a bit more clear as to try and not confuse or give incorrect information. I should have mentioned that I'm by no means an expert on this matter, as is probably evident 😅
so clear! I kinda learned it myself, but really appreciate how concise and clear your explanation is!
closures: allow us to introduce ourselves.
It's just fundamental in JS, very simple to think, we use .call .apply .bind , so function is an object itself.... We can add more properties.
I'm liking your React course Kyle! Way better then another one I bought that was a lot more expensive. Very easy to follow and you explain the concepts well!
It just so happens that I'm learning JS today! lol
Thanks appreciate the explanation!
Assigning a key:value to the function killed me :D :D :D Amazing explanations!
That's why JavaScript is my favourite language.
Interesting insight into what a JavaScript function actually is, under the hood. But regarding usage when passing functions as arguments, I'm confused that there is any confusion over this.
All you have to remember is that parenthesis "()" mean "DO THIS RIGHT NOW", and causes a function to be invoked IMMEDIATELY. So you only use them if/when you want the function to be called right at that point in your code. If you intend that the function be called LATER (as is the normal intent with a callback), do not use the parenthesis. Need it be more complicated than this?
Honestly if anyone is confused over this, that person skipped his code training. (in any language)
@UC5uBCnYHtX2VR3yJbHi5Egg There is tremendous value in many of WDS videos. I just think in this case, the waters were muddied with a lot of superfluous information, and the gist could have been conveyed much more succinctly.
@@who41683 there's no elitism in that comment
you should learn to respect others and not call them losers
@@who41683 @Darrys @Darrys
Thanks Kyle. You really helped me to understand React and JavaScript. Love u man ❤❤
thanks so much Kyle, it help so much how explained it
I really like that you cover more web theorie related content lately. I felt that more and more content related to your personal opinion (e.g. VSC extensions) took over. I subcribed because of the foundation principles and re-subed because you got back to those again.
I love your videos so much Kyle, thank you for being so concise and helpful! You make every one of us better devs.
recommended channel if you are interested ruclips.net/channel/UCvu6J9q1AM6q4xysGqAvVyw
Yes bro sometimes I messed up with this and ultimately left that code, thank you for this... :)
RUclips literally recommends me this right after I used it in my code
Very useful tips, dude. Thanks!!!
It's surprising how many people get confused by this.. I don't really understand why
This makes so much more sense now! 😮
Thanks Kyle and do you mind to make a video for JavaScript prototype? Wish to know a bit more from your video ~~
Thanks a lot for this useful video. I came across this kind of problem recently, while I was trying to make a function, which was using a callback as an input parameter and use it across multiple components in Vue JS, but I got stuck and temporarely left the problem undone. Now I will definetly try again :). Thanks again and thumbs up
It's bit confusing to say that you pass a function print to another function as an input parameter. You pass a pointer which points to a print function or to be more explicit to the memory space on the heap where the memory for print function was allocated. Correct me if I'm wrong. Good vid btw.
Its abstraction. What you said is more confusing especially considering Javascript is a language where you don’t directly manage the stack, heap, etcetera. Maybe in languages like C that would make more sense.
Despite being a beginner, their comment was ironically more understandable. It my head, that's exactly what I see, 'passing pointers' that point to the 'print' function, as opposed to 'passing the function'.
Very Helpful Video
Hey Kyle! Could you make a video of deployment ? Web hosting, DNS and so on ...
Web Dev Challenge-Ethiopia
I actually learned the difference between passing a function With and Without parenthesis, thanks! even so, I downvoted the video because of the confusing accelerated explanation that as usual lookes more like thinking in a loud voice rather than TEACHING.
recommended channel if you are interested ruclips.net/channel/UCvu6J9q1AM6q4xysGqAvVyw
Man this is so good. Thanks for this
Thanks mate!
Reminds me of the "*Everything* in JS is an object" argument. (Which is not true). But still, good catch, Kyle, thank you for the info
Thanks, Kyle for sharing and continuous effort for sharing all the stuff its really help
Wow kyle am always great full with your content and tutorials I have leant alot from your working, Javascript it's awesome
Really neat introduce to OOP :)
This is amazing to know, thanks man!
So true, great video Kyle
hi can you explain the difference between a factory function and a constructor function and it's applications?
Johnny Bravo knows JavaScript!
Hey Kyle, thanks for the informative video. I'm sure a lot of people will benefit from this.
I just wanted to point out that the whole idea of functions (which are essentially objects) to be used as a variable (like passed in as an argument or returned from a function etc) is known to us as "Functions are First-Class Objects or First-Class Citizens in JavaScript". Just a little terminology that can help people in interviews or elsewhere.
Thanks!
Awesome stuff as always Kyle, keep it up!
recommended channel if you are interested ruclips.net/channel/UCvu6J9q1AM6q4xysGqAvVyw
This is good and all, but when are you picking up that guitar?
I've never made this mistake (maybe typos, but never because of a lack of understanding), so I feel oddly left out now 😂😂. The setting properties on functions thing was very cool though, never knew about that! ☮️🙌🏽🎊🏆
coming from java, sometimes its difficult to wrap head around weirdness of javascript
like Jeff (Fireship) said, "welcome to javaScript world"
Anonymous / Arrow / Lambda functions. When I started playing with them, the idea that "functions are also variables" finally clicked. And those are littered throughout JavaScript lmao
Really helpful
Thanks
Hi Kyle! First of all thanks for your content man ,it's really helpful...
I started noticing your guitar on your videos, what type of music do you like to play? Any videos of that soon ;) Cheers!
Thanks !!
Yo this was so informative! Thanks for helping us fill in the gaps 🙂
Function is just a variable, essentially like an object… makes sense! 🤯😂
Hmm, I think you need to change the name of the video (make too made rather?). I may have made this mistake loooong ago (couldn't even tell you if I did), but I worked with prototyping back in 2008 already which is the basis of what you're eluding to... I actually thought you were gonna talk about prototyping.
And, my prototyping knowledge came from my Flash ActionScript 1 days which was based on ECMA.
Good point. I just updated the title.
this video saved me
"Whether you're a novice or have been programming for years, I'm gonna blow your mind!" *proceeds to explain the most basic concept of JavaScript, that functions are first-class objects* No offense but I'm glad I had my adblocker on for this, you do not deserve any revenue for 7 minutes of content that should have been in your "Intro To" series back in 2018.
this just made more confused bro. I think I need to watch it a couple of times.
Your videos ALWAYS blow my mind ; )
If this makes sense, I just think of functions as a way to create a temporary scope like one of the worlds in our solar system. A world / planet has access to meteorites and other universal things from the universe but to return it back out to the universe we must explicitly return it (punch it back out like ultraman fist!).. hence return lol
Lol nice metaphor
so cool 👍🏻 thanks
Actually I already knows this.
What I don't know is dir. such a useful function.
Ps. next time I wouldn't be surprised if you say. You can actually call two or more callbacks.
i get it thanks
I was not a big fan of Javascript some time ago, but it has grown on me and there are things I do think are cool in it.
But one thing I think I will never like, or use if I can avoid it, is Callbacks.
I hate them. I can't see the reason or the logic behind using them.
*Here, let me write a function that takes in a callback, write another function that prints out some input and bla bla bla...*
Why?! Just write console.log("something") and there you go. And there is probably also another, easier, solution if the scenario is different. I don't see how or why using callbacks would be smarter. I just don't. And I haven't heard anyone explain it in a way that made me go "aaaah, now I see".
This is because they're not showing real callbacks, they're showing a spaghetti version.
How I would use a callback. I'd have another object that is a controller. Other objects can store their launch, pause, destroy methods (functions). I would call this registering with the controller.
Now a user can make a choice from a the ui, and it calls the proper objects (call me back when you need me bro) methods.
This way that code never needs to run unless necessary.
I can make each object have the same name for their functions that control them. Now the API to control my objects are the same. So the controller can get the object from a map, and call it's launch, or whatever. So my launcher function in my controller is a function that takes a search term.
dummy code to express idea.
launcher(searchterm){ launcherMap.get(searchterm).launch()}
pauser(searchterm){ launcherMap.get(searchterm).pause()}
I love it. You're awesome 👌👌👌
I'm confused. Isn't a function different in that it defines a bunch of code to execute? A plain object only contains properties, whereas a function executes a block of code (conditional logic, loops, etc)
Awesome man 😎😎😎
stupid question: why no ";" at end of statments ? I didn't know we could skip them... is it new ?
Love you, Kyle
Types in typescript can also be functions if you're crazy enough
The first programming language I learned was golang so this was fairly easy for me in JavaScript.
I actually explained basically this entire video to a newer programmer today lmao 🤣 I have validation functions I made that return a function that were confusing him.
recommended channel if you are interested ruclips.net/channel/UCvu6J9q1AM6q4xysGqAvVyw
The function you defined, "print" actually overrides a JavaScript default function. Be ware!
It would only override it in that specific instance, though, right?
Well, it's just for educational purposes. And the _print_ function isn't even native to JavaScript, it's from the browser.
@@farhanaditya2647 ...which is where JS originated.
Hi, could you make a video about importing something from string variable?
Something like:
const dir = './img.png'
import(dir)
What I find confusing is when a function is set to a const. The following will print "hello world" even though there is no explicit statement myWorld() to execute the function assigned to it. Makes no sense to me. If I set a const to a function it should mean that I don't want the function to execute until the const is called.
const myWorld= setTimeout(() => { //setTimeout executes
console.log("hello world")
}, 500);
you assign setTimeout() call result to a constant, not a function
when you call setTimeout, it already creates a timer that calls the specified function in a specified timeout
idk if it returns anything even
setInterval returns a number that you can use later to clear that interval:
const interval = setInterval(() => console.log("I will log this every second"), 1000);
function stopLogging() {
clearInterval(interval);
}
Hello Kyle and thank you for all of your content!
(btw I really like how you styled the battleship game, amazing job!)
Another example for the concept you delivered in this video is actually in REDUX actions creators...
naturally we destruct action creators functions when we use bindActionCreators function.
like this for example:
const { actionCreator1, actionCreator2, actionCreator3 } = bindActionCreators(actionCreators, dispatch)
we can see that we destruct those functions like regular objects.
hello please, i have an input, i created a function to get the input value and put it inside a text, the problem is that i need the function to put the value inside the text multiple times and the function take the value and put it in the one only! so how can tell the function to whenever it finds the div to put the value it put it there (multiple times)
Awesome video
00:07 well.. no i didn't
Very insightful tutorial. Thanks, Kyle
{2021-08-15}
Useful.
good to know theses things but no use in real project 😁
Nice one