Top 5 Javascript Things You Should Know!
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2019
- Check out my courses and become more creative!
developedbyed.com/
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
In this episode we are going to take a look at the top 5 concepts you should know in javascript.
These concepts are good to learn after you are comfortable with the basic syntax of javascript and you want to dive deeper into what is happening under the hood.
We are going to take a look at things like how hoisting works, visualizing how our javascript code runs with the call stack.
A basic overview of callbacks and async await (deserves its own episode).
📕 Things covered in this video:
- Javascript Hoisting
- Call Stack
- IIFE
- Scope
- Event Loop, Web Api's and callback queue
- Callbacks, async-await
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/DevEdwin
#javascript #webdevelopment - วิทยาศาสตร์และเทคโนโลยี
![[ไฮไลต์] เจ้าฟ่าง ธีรพงศ์ ศิลาชัย "คว้าเหรียญเงิน" ยกน้ำหนักชาย รุ่น 61kg | โอลิมปิก 2024](http://i.ytimg.com/vi/981lYv1AwKk/mqdefault.jpg)
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
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've watched a lot of JS beginner videos, and Dev Ed's have always been the most entertaining/interesting. Keep it up!
Good video, I knew this already. But enjoyed your CSS and html videos so wanted to support the JavaScript videos too!
i just can't control my smile when you come smiling onto the screen :)
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.
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!
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
you're the best doing these tutorials. believe me. it always a fun time learning, thanks!
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 :).
Amazing Ed, always learning something new with your videos, thanks!
Franky, this is the most relevant js course ever. Thank you Mr for your approach. This is really professional
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!
Explained in the simplest way!! Great job!
Hey, Ed! I'd like to suggest a React video about Hooks. I'm loving your channel, keep up with the good work
This is what I wanted ! Keep it Up Ed
Man this has been the best explanation about CallStack ever. Thanks!!!
Keep doing such awesome vids!!! Love from India !!!
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.
Damn dude, thanks for the intro compliment man!! xD
Love your videos dude!
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!
👍 for switching gears for that call stack explanation.
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)
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
At the beginning I already knew ur explanation will clear the air ways
Thanks a lot Ed this has been really really helpful for me it's crystal clear and well explained!
Awesome video. Thank you!
Great content. Straight to the point.
Never seen any of this explained so well, thanks!!
Thanks Ed, it was really awesome video and you make it very simple to understand...
*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
He sneezes in 2019: God Bless you.
He sneezes these days: I'm outta here
Lol me too😂
coughing*
Bell clicked,nice video. Can you also explain lexical scope?
Great Video...Really wanted it...let me know which theme you are using in your VS code...Its cool...
I love your style...makes me smile a lot. :)) Keep up the good work!!! :D
Do u. Love him dev ed?
This was crazy helpful, thanks a lot!
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 👏👏
Thanks Ed, keep up the good work!
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
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.
Wow!
Learned it by heart!
Nicely put! thanks
This is pure gold in knowledge
Love your VS Settings. Can you make a video about your VSCode settings would be nice.
Wooow, finally i understand async/await, thanks a lot 👌
Tutorial aside, you sound like such a great person :P cheers....
Awesome explanation. Thank you .
Amazing video as always ! :D Can u now explain closures ?
Great simple explanations
One of the best channels on TH-cam
Awesome tutorial... Can please do video about how to learn hard functionalities in easiest way
love it.. keep it up.. i am a fan
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
Very well explained, thank you!
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!
hoisting is very well explained! double thumbs up
Thank you man, you the best!
Nice vid. Thanks!
Dude you're amazing thanks alot
Thanks for this video, nice job!
Thank you. Very helpfull
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.
Very good JavaScript Learn information!
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!
Thank you (again) Ed !
understanding is very pleasant feeling!
Great work sir
Best video on the internet about JS!!!
Thanks! You are a great teacher!
Succese mai departe ! Salutari din Moldova :)
Multumesc frumos!
Great video 👌
What software do you use to create your Thumbnails ? Thank you for the video
My best teacher on TH-cam!!!!
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!
I knew all of these concepts already but I still watched it
Dev Ed thanks for you'r content.. You are the best
Loved it...subcribed...bang!
What vscode theme do you use???
for me - the hardest part of JS is - callbacks and promises. Thank you for mentioning that up
You're absolutely cool. Your sneeze is just perfect.
Not cool now cos of covid 19
@@theBIGgee you're right
I was sure I read you were to explain Closures. Did I miss something? Great video btw
i also like iifes for variables that require a function to run for its return falue
Hey Dev Ed, can you create a video on how you do your recordings and green screen setup?
love your content
Sir Could you please make a video explaining the resources you use to learn or enhance your programming skills
it's my question too.
Hi, can you do videos on data structures & common javascript interview problems?
I knew all of that it means I know JS well. Yay!
Thank you, Ed.
hay Dev Ed!!! Make a video about working contact form in php for html template.
Thank you! Even though I have already know all of them.
tnx. Good Video.
Can you please make a video on JavaScript closure☺️
You are good teacher man🙂🙂
what I find hard about JS is methods. An example of them includes preventDefault and preventPropagation
hardest thing for me is the debugging for JS!! May be I am the noob one here :P
what happened to promises though? did that part get edited out or did i fall asleep?