Hey, Ed! I really enjoyed your video, however I would like to add something when it comes to scope. There's a difference between creating a variable using the keyword "var" and using the keywords "let/const". Bascially, a variable created with "var" has a standard scope of "Function scope" (if it is not declared globally, of course). That means that no matter where you declare that variable in a function, it will be accessible by that function anywhere after its declaration, while "let" and "const" have a "Block scope" which means it's only accessible within the block in which it was declared, and any children of that block. A block would be anything like a Switch-statement or an IF-statement for example. If you look at the below code, you'll see that inside the function *sayHello()* , there is an IF-statement, and within that IF-statement is a variable declaration (and assignment) using the "let" keyword. *function sayHello(){* *if(true){* *let name = "Pedro";* *console.log("Hello there, " + name + "!");* *}* *}* *sayHello();* When running the above code, you'll get the following output: *Hello there, Pedro!* If you were to then add a second console.log() call after the IF-statement, but still inside the function, like below: *function sayHello(){* *if(true){* *let name = "Pedro";* *console.log("Hello there, " + name + "!");* *}* *console.log("Is that really you, " + name + "?");* *}* *sayHello();* You will end up getting an error because "name" is undefined. The reason for that being that the variable "name", due to being declared with the "let" keyword, has a block scope. Which, again, means only the block (in this case, the IF-statement), or any child blocks (for example, another IF-statement INSIDE the first IF-statement) has access to the variable. BUT, if it were to be declared using the "var" keyword instead, it would recieve function scope, meaning it would be accessible not only within the block it was declared, but within the whole function in which it was declared. So the following code would NOT throw an error. *function sayHello(){* *if(true){* *var name = "Pedro";* *console.log("Hello there, " + name + "!");* *}* *console.log("Is that really you, " + name + "?");* *}* *sayHello();* Instead, it would give you the following output: *Hello there, Pedro!* *Is that really you, Pedro?*
This is really going deep but if you are at it you should explain closures then since these things are closely related. I myself am lost a little how to understand closures, how it works within the memory.
Sorry, but you haven't really explained how 'Hoisting' works. The JS engine doesn't actually put anything at the top of your page. Here's what really happens.... When your code is run it goes through what is called the 'execution context' and there's two phases to this... 1. The Creation phase.. 2. The Execution phase. During the creation phase your code is scanned for all functions and variable declarations and all what is found is placed within memory (or what is called the 'variable environment’') Then when the JS engine goes through the next phase (execution) all your variables and function declarations are available to use. This is what's called 'Hoisting'. However, they are hoisted in a different way and it's important to remember this.... Functions are already defined BEFORE the execution phase started, but your variables are set to 'undefined' and will only be defined during the execution phase. Sorry to sound like I'm putting you down, but it grips my shit when developers don 't explain truly how hoisting works, so I hope that helps 😃
I believe Ed gave a simplified version without technical details for us to understand the concept. Sometimes it can confuse people who just want to know how it works without delving into the subject. However I like to know the details, thank you very much for your explanation.
Now I have to press bell icon. I've been following your uploads and watching, but now I have to have alert for your uploads. You're creating awesome and quality contents for us, for the community, for the present. Thank you, man.
I was about to close this video thinking you will just talk about what to learn for half an hour but I stick to it a bit longer and I got surprise that you teach the things you talk about. And I thank myself for sticking to it. I got a good grasp of things you teach here. Thank you.
Im so happy to "find" you here man. English is not my native language, and Im not the "smartest" person about computer programming, but you explain very very very well!! Congratulations and all my respect!
Actually, @Dev Ed at 2:10 the javascript compiler will not "move" any code, it will add them to Javascripts lexical environment data structure. Awesome video by the way!
Funny thing is, I am already pretty familiar with all these, but seeing people writing insane packages or libraries using cutting edge code puts me in a weird position. Especially since they are utilizing TypeScript as a norm, and they write it in a pretty complicated way.
@@kresimircosic3753 that's what comes to my mind when I try to build my own version of those crazy packages. When I look into all those codes I was like: Did your mother teach you to code like this? I think I'll back off this project.
Hey Ed, Thank you for making videos like these and explaining complex concepts in simplest way. Can you please make a video series on NodeJs explaining each concept in details. That would be really helpful. Thank you :).
Thanks for event loop, callback queue and web apis. I am a junior full stack developer and that is pretty helpful to know, before I knew how it worked, now I know why
Greetings from France ! You actually are one of the best coding youtuber, with a real personnality :) We are never bored! Even your little mistakes makes the video more "fun" and lively! (Btw, I'm sorry for my english)
The hardest things were Node interface, Element interface and actually their differences, those were so tricky and confusing that I usually got stuck. It would be best of you to explain me their differences from each other. Thank you!
Hey! Just a note. Correct me if I'm wrong but as far as I know there are 3 scopes. Global, function and also block scope which you forgot to mention. An example of a block scope is a block o code following the if() statement. I thought learners should be aware of that too. Cheers
strange you typed the "correct" way to do an IIFE, then it changed to what Doug Crockford calls "dog balls notation". Both work, but I'd be confused if this was my first time seeing it. in case you are reading this and are confused: (function(){ ... }());
I would love to see a video on "Things a JS developer without a CS degree doesn't know" because that is me :) I am 10-11 months into coding, 3000ish hours, working in my first Web Dev job. And I have this suspicion that bc I don't know computer science i am missing a lot of info under the hood. Would love to see info on that topic. Thank you
But if I'm right hoisting isn't actually moving our code to to top if that was the case than your code would of ran with out an undefined value which to correct you is not an error it's actually a value a special value created for us when it's ran through the execution context and this just means lack of existence. The reason your able call the name after using a const is because the variable is already saved in memory and this is what hoisting is. Hoisting is not taking your code and running it as if it was at the top. Hoisting is when the execution context is created during this phase memory space is set up for variables and functions that is called hoisting 😎😎
Hey man. Really appreciate your taking out the time to upload this videos. I'll like to know how you were able to run the console in your VScode. It looks really handy and definitely seems like something I really need. Thanks
Or instead just download the extension for run code. Then you will basically get a button at the top right portion of editor. Or you can click ctrl+alt+n
Hoisting is not moving up variables and functions to the top. It is the process of setting up of memory space during the creation phase. The variables will be assigned undefined and the whole functions will be stored into the memory. This is also a reason in which anonymous function cannot be hoisted as its initial value will be assigned undefined and you cannot call a undefined.
*Hey nice video, thanks a lot!* But did you accidentally cut the part before the async/await? Was there something about promises? Video felt like it was cut off after the event loop to the async. you are even saying that you were doing something before... but it’s not in the video? Or am I very confused? :D
It should have been looked more into the depth. `var` and `function` are function level declarations, `let` and `const` are block level declarations. Therefore the latter ones are not hoistet. You should also show what happens when there are the same names for functions and variables. Look at this ` console.log(name); console.log(name()); function name(){return 'FUNC1'} console.log(name); console.log(name()); function name(){return 'FUNC2'} var name = 'VAR'; console.log(name); console.log(name); function name(){return 'FUNC3'} console.log(name); console.log(name); `
Fullstack React app please! I know it's frustrating that your viewers want more and more and are never satisfied but you asked for it so I just did it!
Hello. Nice tutorial. But one thing to clarify though on hoisting. Is the JS engine/compiler literally moving the code on top? I think this is wrong. There is an action happening before the execution phase, its the CREATION phase, in this phase all var declaration are marked as undefined, “theres no moving on top”. You can read this in spec or from medium post. I forgot but theres no moving on top.
Dear Ed, You are my hero...u made me a front end developer within three months.thank u so much....I'm looking forward to seeing ur videos....ur d best thing dat happened to web development 🤓🤓@dev_Ed
use promise when u have purpose for application to run on after 2009 browser asycn await for application after 2015 broswer if the customer require the app to run on the old things then use classic callback , which can be nightmare if u have 3+ callbacks lol
OMG! DevEd, I am struggling with recursive functions! I don't know if I need recursions for this or maybe if I should use .math.random(); but I am trying to create a mineSweep game you normal find in a lot of PC Desktop computers. Basically, it is a grid normally 32 X 32 square blocks and the principle of the game is you have hidden mines within some of these blocks. Within the grid the blocks spawn and the mines spawn randomly when starting a new game. I am thinking hard and trying to figure out how to get the blocks and mines to spawn randomly using recursive functions. I was thinking maybe the algorithm Fibonacci would solve this issue? Or some other type of algorithm would work better? What is your recommendation? Thanks a million DevEd hope to hear from you and thank you for your excellent content.
Nothing gets moved "to the top"! In the creation phase of the execution context, the parser sets up memory space for variables and functions, doesn't move code anywhere.
Thank you for the instructive video. JS, i tried to get my head around this language , but man , JS is just broken by design. thumbs up for those who can write big frameworks using it
Hey Dev Ed! Nice video.. But what I have noticed when u are explaining IIFE at 11:47 there is a syntax error!! But as soon as you have saved the file the syntax error get removed. Can u tell us which extension you are using for VSCode.
What I feel about JavaScript might sound weird but It's that I don't know what I don't know, I mean I see all these frameworks, animations, behaviors and amazing stuff JavaScript is capable of but I don't know from my perspective what I can do with it or how to do it
8:33 - Yea Boy!! That's the most amazing part of the whole video. BTW loved it. The video.
lol I was thinking that I'm the only one that likes it, don't forget the BOOOM SFX though
Find awesome tutorials for JS, AngularJS, NodeJS, ReactJS
freelectureslinks.blogspot.com
lmao just got on that part was gonna comment but already seen here haha
1 BOOOM !
No, you loved that beautiful face.
Para salto rápido:
00:40 Hoisting
06:50 Callstack
11:16 IIFE
13:03 Scope
17:28 Callbacks
25:06 Async await
you saved my life's 28 mins!
Gracias
Heroe uwu
THANKS, I LOVE YOU😍
Thanks man👍
Never have I watched someone explain callbacks, promises, async and await so clearly! Keep it up
Hey, Ed! I really enjoyed your video, however I would like to add something when it comes to scope.
There's a difference between creating a variable using the keyword "var" and using the keywords "let/const". Bascially, a variable created with "var" has a standard scope of "Function scope" (if it is not declared globally, of course). That means that no matter where you declare that variable in a function, it will be accessible by that function anywhere after its declaration, while "let" and "const" have a "Block scope" which means it's only accessible within the block in which it was declared, and any children of that block. A block would be anything like a Switch-statement or an IF-statement for example.
If you look at the below code, you'll see that inside the function *sayHello()* , there is an IF-statement, and within that IF-statement is a variable declaration (and assignment) using the "let" keyword.
*function sayHello(){*
*if(true){*
*let name = "Pedro";*
*console.log("Hello there, " + name + "!");*
*}*
*}*
*sayHello();*
When running the above code, you'll get the following output:
*Hello there, Pedro!*
If you were to then add a second console.log() call after the IF-statement, but still inside the function, like below:
*function sayHello(){*
*if(true){*
*let name = "Pedro";*
*console.log("Hello there, " + name + "!");*
*}*
*console.log("Is that really you, " + name + "?");*
*}*
*sayHello();*
You will end up getting an error because "name" is undefined. The reason for that being that the variable "name", due to being declared with the "let" keyword, has a block scope. Which, again, means only the block (in this case, the IF-statement), or any child blocks (for example, another IF-statement INSIDE the first IF-statement) has access to the variable. BUT, if it were to be declared using the "var" keyword instead, it would recieve function scope, meaning it would be accessible not only within the block it was declared, but within the whole function in which it was declared. So the following code would NOT throw an error.
*function sayHello(){*
*if(true){*
*var name = "Pedro";*
*console.log("Hello there, " + name + "!");*
*}*
*console.log("Is that really you, " + name + "?");*
*}*
*sayHello();*
Instead, it would give you the following output:
*Hello there, Pedro!*
*Is that really you, Pedro?*
You explanation is really good thank you from india
great explanation, brother. Thanks!
This is really going deep but if you are at it you should explain closures then since these things are closely related. I myself am lost a little how to understand closures, how it works within the memory.
Sorry, but you haven't really explained how 'Hoisting' works. The JS engine doesn't actually put anything at the top of your page. Here's what really happens....
When your code is run it goes through what is called the 'execution context' and there's two phases to this...
1. The Creation phase..
2. The Execution phase.
During the creation phase your code is scanned for all functions and variable declarations and all what is found is placed within memory (or what is called the 'variable environment’') Then when the JS engine goes through the next phase (execution) all your variables and function declarations are available to use. This is what's called 'Hoisting'.
However, they are hoisted in a different way and it's important to remember this....
Functions are already defined BEFORE the execution phase started, but your variables are set to 'undefined' and will only be defined during the execution phase.
Sorry to sound like I'm putting you down, but it grips my shit when developers don 't explain truly how hoisting works, so I hope that helps 😃
Great explanation mate. I was thinking the same thing.
I believe Ed gave a simplified version without technical details for us to understand the concept. Sometimes it can confuse people who just want to know how it works without delving into the subject. However I like to know the details, thank you very much for your explanation.
This!
Anthony alicea 😎
All hail Sir Anthony Alicea 👏👏
Now I have to press bell icon. I've been following your uploads and watching, but now I have to have alert for your uploads. You're creating awesome and quality contents for us, for the community, for the present.
Thank you, man.
I was about to close this video thinking you will just talk about what to learn for half an hour but I stick to it a bit longer and I got surprise that you teach the things you talk about. And I thank myself for sticking to it. I got a good grasp of things you teach here. Thank you.
He sneezes in 2019: God Bless you.
He sneezes these days: I'm outta here
Lol me too😂
coughing*
Im so happy to "find" you here man. English is not my native language, and Im not the "smartest" person about computer programming, but you explain very very very well!! Congratulations and all my respect!
Top 6 - In job interview never forget to tell that P in HTML stands for Programming
There isn't even any 'P' in HTML 😂😂.... (BEST INDIRECT ROAST TO PEOPLE NOT NOTICING THAT)
@@ajbwbd best way to ruin a joke is to explain it :\
@youtubesucks I'm not the only one who immediately thought about the p tag 😂
well html is pee... that's why some people have switched to Pug or others... ^^
I'm HTML engineer, I'll sue you
I've watched a lot of JS beginner videos, and Dev Ed's have always been the most entertaining/interesting. Keep it up!
Actually, @Dev Ed at 2:10 the javascript compiler will not "move" any code, it will add them to Javascripts lexical environment data structure. Awesome video by the way!
Top 3 hardest thing in JavaScript:
1. Promise
2. Prototypes
3. Advanced Syntaxes
Funny thing is, I am already pretty familiar with all these, but seeing people writing insane packages or libraries using cutting edge code puts me in a weird position. Especially since they are utilizing TypeScript as a norm, and they write it in a pretty complicated way.
@@kresimircosic3753 that's what comes to my mind when I try to build my own version of those crazy packages. When I look into all those codes I was like: Did your mother teach you to code like this? I think I'll back off this project.
you're the best doing these tutorials. believe me. it always a fun time learning, thanks!
i just can't control my smile when you come smiling onto the screen :)
Good video, I knew this already. But enjoyed your CSS and html videos so wanted to support the JavaScript videos too!
Hey Ed, Thank you for making videos like these and explaining complex concepts in simplest way. Can you please make a video series on NodeJs explaining each concept in details. That would be really helpful. Thank you :).
Thanks for event loop, callback queue and web apis. I am a junior full stack developer and that is pretty helpful to know, before I knew how it worked, now I know why
👍 for switching gears for that call stack explanation.
Franky, this is the most relevant js course ever. Thank you Mr for your approach. This is really professional
This was a phenomenal explanation of concepts that I was aware of, but couldn't grasp well enough to explain them. Well done. Thank you.
Just keep them comming!!! This may be my favorite coding channel among all, great work!
At the beginning I already knew ur explanation will clear the air ways
One of the best channels on UA-cam
Greetings from France !
You actually are one of the best coding youtuber, with a real personnality :)
We are never bored! Even your little mistakes makes the video more "fun" and lively!
(Btw, I'm sorry for my english)
Thank you so much dude!U r one of my first inspiration to keep up with web dev carrier,when i knew shit about programming.Thank you so much my man!
Best video on the internet about JS!!!
My best teacher on UA-cam!!!!
The hardest things were Node interface, Element interface and actually their differences, those were so tricky and confusing that I usually got stuck. It would be best of you to explain me their differences from each other. Thank you!
for me - the hardest part of JS is - callbacks and promises. Thank you for mentioning that up
Hey! Just a note. Correct me if I'm wrong but as far as I know there are 3 scopes. Global, function and also block scope which you forgot to mention. An example of a block scope is a block o code following the if() statement. I thought learners should be aware of that too. Cheers
ES6 did introduce block scope, but only for let and const.
Keep doing such awesome vids!!! Love from India !!!
strange you typed the "correct" way to do an IIFE, then it changed to what Doug Crockford calls "dog balls notation". Both work, but I'd be confused if this was my first time seeing it.
in case you are reading this and are confused:
(function(){
...
}());
This is pure gold in knowledge
You're absolutely cool. Your sneeze is just perfect.
Not cool now cos of covid 19
@@theBIGgee you're right
Sir Could you please make a video explaining the resources you use to learn or enhance your programming skills
it's my question too.
Great Video as always!
But could you do some videos on algorithms and data structures (hash maps, stacks, binary trees etc.)? That would be awesome
Man this has been the best explanation about CallStack ever. Thanks!!!
I would love to see a video on "Things a JS developer without a CS degree doesn't know" because that is me :)
I am 10-11 months into coding, 3000ish hours, working in my first Web Dev job. And I have this suspicion that bc I don't know computer science i am missing a lot of info under the hood. Would love to see info on that topic. Thank you
understanding is very pleasant feeling!
Amazing Ed, always learning something new with your videos, thanks!
But if I'm right hoisting isn't actually moving our code to to top if that was the case than your code would of ran with out an undefined value which to correct you is not an error it's actually a value a special value created for us when it's ran through the execution context and this just means lack of existence. The reason your able call the name after using a const is because the variable is already saved in memory and this is what hoisting is. Hoisting is not taking your code and running it as if it was at the top. Hoisting is when the execution context is created during this phase memory space is set up for variables and functions that is called hoisting 😎😎
Hey man. Really appreciate your taking out the time to upload this videos. I'll like to know how you were able to run the console in your VScode. It looks really handy and definitely seems like something I really need. Thanks
so, use the terminal to navigate to the folder containing your js file. Then type "node filename" and it will run. ["directory" node app.js]
Or instead just download the extension for run code.
Then you will basically get a button at the top right portion of editor. Or you can click ctrl+alt+n
This is what I wanted ! Keep it Up Ed
Hoisting is not moving up variables and functions to the top. It is the process of setting up of memory space during the creation phase. The variables will be assigned undefined and the whole functions will be stored into the memory. This is also a reason in which anonymous function cannot be hoisted as its initial value will be assigned undefined and you cannot call a undefined.
Explained in the simplest way!! Great job!
Never seen any of this explained so well, thanks!!
Bell clicked,nice video. Can you also explain lexical scope?
new to your channel. the session i watched was so interesting, i subscribed immediately. i just want to know how you've set up your vscode.
*Hey nice video, thanks a lot!*
But did you accidentally cut the part before the async/await? Was there something about promises? Video felt like it was cut off after the event loop to the async. you are even saying that you were doing something before... but it’s not in the video?
Or am I very confused? :D
Hey, Ed! I'd like to suggest a React video about Hooks. I'm loving your channel, keep up with the good work
It should have been looked more into the depth. `var` and `function` are function level declarations, `let` and `const` are block level declarations. Therefore the latter ones are not hoistet. You should also show what happens when there are the same names for functions and variables. Look at this `
console.log(name);
console.log(name());
function name(){return 'FUNC1'}
console.log(name);
console.log(name());
function name(){return 'FUNC2'}
var name = 'VAR';
console.log(name);
console.log(name);
function name(){return 'FUNC3'}
console.log(name);
console.log(name);
`
Great simple explanations
Great Video...Really wanted it...let me know which theme you are using in your VS code...Its cool...
Love your VS Settings. Can you make a video about your VSCode settings would be nice.
I knew all of these concepts already but I still watched it
Succese mai departe ! Salutari din Moldova :)
Multumesc frumos!
var - undefined
const - can't be accessed before initialisation.
Why there's a difference? Both are variable declaration.
Reason - Temporal Dead Zone
IIFE: Immediately Invoked Function Expression ~
Thanks Ed, it was really awesome video and you make it very simple to understand...
PLEASE WHICH THEME IS THIS ON YOUR VSCODE??? The icons are so dope
I guess material icons pack
@@pushkarasapure7514 THANK YOU
what I find hard about JS is methods. An example of them includes preventDefault and preventPropagation
Fullstack React app please! I know it's frustrating that your viewers want more and more and are never satisfied but you asked for it so I just did it!
Thank you for the video Dev. What model and brand of camera and microphone did you used in this video?. Thanks in advance for the answer!
Where can I find visual studio extensions like yours? Dev Ed bro?
Hello. Nice tutorial. But one thing to clarify though on hoisting. Is the JS engine/compiler literally moving the code on top? I think this is wrong. There is an action happening before the execution phase, its the CREATION phase, in this phase all var declaration are marked as undefined, “theres no moving on top”. You can read this in spec or from medium post. I forgot but theres no moving on top.
hoisting is very well explained! double thumbs up
Dear Ed,
You are my hero...u made me a front end developer within three months.thank u so much....I'm looking forward to seeing ur videos....ur d best thing dat happened to web development 🤓🤓@dev_Ed
Awesome explanation. Thank you .
Could you explain on another video about what and when we need to use Promises / Then?
use promise when u have purpose for application to run on after 2009 browser
asycn await for application after 2015 broswer
if the customer require the app to run on the old things then use classic callback , which can be nightmare if u have 3+ callbacks lol
Great content. Straight to the point.
Awesome video. Thank you!
3:21 "Hello there"
My reply
"General Kenobi!"
Tutorial aside, you sound like such a great person :P cheers....
Thank you. Very helpfull
OMG! DevEd, I am struggling with recursive functions!
I don't know if I need recursions for this or maybe if I should use .math.random(); but I am trying to create a mineSweep game you normal find in a lot of PC Desktop computers. Basically, it is a grid normally 32 X 32 square blocks and the principle of the game is you have hidden mines within some of these blocks. Within the grid the blocks spawn and the mines spawn randomly when starting a new game. I am thinking hard and trying to figure out how to get the blocks and mines to spawn randomly using recursive functions. I was thinking maybe the algorithm Fibonacci would solve this issue? Or some other type of algorithm would work better? What is your recommendation? Thanks a million DevEd hope to hear from you and thank you for your excellent content.
What software do you use to create your Thumbnails ? Thank you for the video
Wow!
Learned it by heart!
I love your style...makes me smile a lot. :)) Keep up the good work!!! :D
Do u. Love him dev ed?
In my opinion, the harddet stuff in javascript is how to create the authentication server with, Nodejs, express, mongodb, twj...
Its quite difficult! I agree!
Hey Dev Ed, can you create a video on how you do your recordings and green screen setup?
hay Dev Ed!!! Make a video about working contact form in php for html template.
Very good JavaScript Learn information!
What is that "loupe"? What is the URL of it? I found it helpful. Thanks.
Nicely put! thanks
Nothing gets moved "to the top"! In the creation phase of the execution context, the parser sets up memory space for variables and functions, doesn't move code anywhere.
Thank you for the instructive video. JS, i tried to get my head around this language , but man , JS is just broken by design. thumbs up for those who can write big frameworks using it
Same here, 1 year JS but fighting with the fundamentals...
Thanks a lot Ed this has been really really helpful for me it's crystal clear and well explained!
What vscode theme do you use???
*Ed sneezes*
Wap girl : Corona Virus!
Love your videos dude!
Hello, I am a newbie in javascript. May I ask how to practice logical thinking in programming
Hey Dev Ed! Nice video.. But what I have noticed when u are explaining IIFE at 11:47 there is a syntax error!! But as soon as you have saved the file the syntax error get removed. Can u tell us which extension you are using for VSCode.
Dude you're amazing thanks alot
Thank you (again) Ed !
You said, gorgeous people, I'm missing gorgeous friends... Anyways love you Ed
Very well explained, thank you!
Wooow, finally i understand async/await, thanks a lot 👌
Can you please make a video on JavaScript closure☺️
What I feel about JavaScript might sound weird but It's that I don't know what I don't know, I mean I see all these frameworks, animations, behaviors and amazing stuff JavaScript is capable of but I don't know from my perspective what I can do with it or how to do it