Top 5 Javascript Things You Should Know!

Check out my courses and become more creative!
developedbyed....
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/Dev...
#javascript #webdevelopment

[@sayantoroy8790]

8:33 - Yea Boy!! That's the most amazing part of the whole video. BTW loved it. The video.

[@starkxz]

lol I was thinking that I'm the only one that likes it, don't forget the BOOOM SFX though

[@ytb.addict]

Find awesome tutorials for JS, AngularJS, NodeJS, ReactJS freelectureslinks.blogspot.com

[@SH-lt2iv]

lmao just got on that part was gonna comment but already seen here haha

[@salemouail627]

1 BOOOM !

[@bragiodinsen4604]

No, you loved that beautiful face.

[@bokibogi]

Para salto rápido: 00:40 Hoisting 06:50 Callstack 11:16 IIFE 13:03 Scope 17:28 Callbacks 25:06 Async await

[@arm-pr2ki]

you saved my life's 28 mins!

[@heathenfire]

Gracias

[@jaimerojas6578]

Heroe uwu

[@saarthakjohari9045]

THANKS, I LOVE YOU😍

[@SandeepSaini-tr9sv]

Thanks man👍

[@reachammad]

Never have I watched someone explain callbacks, promises, async and await so clearly! Keep it up

[@neilpearce]

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 😃

[@kornelnyp]

Great explanation mate. I was thinking the same thing.

[@igeoerre]

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.

[@hip04hop85]

This!

[@siyaram2855]

Anthony alicea 😎

[@SumitKumar-co2pm]

All hail Sir Anthony Alicea 👏👏

[@Jinado1]

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?*

[@satishreddy1284]

You explanation is really good thank you from india

[@rishabhgupta8876]

great explanation, brother. Thanks!

[@marcopolocs]

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.

[@yt.mhasan]

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.

[@sammaxudov1246]

He sneezes in 2019: God Bless you. He sneezes these days: I'm outta here

[@virathshuklla56]

Lol me too😂

[@wotizit]

coughing*

[@wafaken]

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.

[@aliprokanggames4458]

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

[@davidguetta9874]

Top 6 - In job interview never forget to tell that P in HTML stands for Programming

[@ajbwbd]

There isn't even any 'P' in HTML 😂😂.... (BEST INDIRECT ROAST TO PEOPLE NOT NOTICING THAT)

[@evakuator8118]

@@ajbwbd best way to ruin a joke is to explain it :\

[@medoubella]

@youtubesucks I'm not the only one who immediately thought about the p tag 😂

[@Microphunktv-jb3kj]

well html is pee... that's why some people have switched to Pug or others... ^^

[@yusakmanullang7656]

I'm HTML engineer, I'll sue you

[@runningthenorth-west516]

I've watched a lot of JS beginner videos, and Dev Ed's have always been the most entertaining/interesting. Keep it up!

[@robertto1ify]

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!

[@AndrewGray-natreve]

Good video, I knew this already. But enjoyed your CSS and html videos so wanted to support the JavaScript videos too!

[@busyrand]

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.

[@nith.p]

Top 3 hardest thing in JavaScript: 1. Promise 2. Prototypes 3. Advanced Syntaxes

[@kresimircosic3753]

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.

[@nith.p]

@@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.

[@pushpakgupta7396]

i just can't control my smile when you come smiling onto the screen :)

[@suchitbande5074]

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 :).

[@CleeveMorris]

you're the best doing these tutorials. believe me. it always a fun time learning, thanks!

[@emmytobs]

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

[@okmorenumbers]

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]

[@timepassscript]

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

[@RyanJohnson]

👍 for switching gears for that call stack explanation.

[@ralphlouis2705]

At the beginning I already knew ur explanation will clear the air ways

[@naiki1409]

Bell clicked,nice video. Can you also explain lexical scope?

[@Rambou92]

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!

[@aleksd286]

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

[@sudharshaniyengar1587]

Keep doing such awesome vids!!! Love from India !!!

[@abhishektyagi4428]

Sir Could you please make a video explaining the resources you use to learn or enhance your programming skills

[@RameenFallschirmjager]

it's my question too.

[@shahbozabdullayev5583]

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!

[@agent000000008]

*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

[@devdude7607]

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!

[@stevenherra4975]

Just keep them comming!!! This may be my favorite coding channel among all, great work!

[@MexicanFamilyinPEI]

Amazing Ed, always learning something new with your videos, thanks!

[@GeordyJames]

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.

[@rahulrana892]

This is pure gold in knowledge

[@wilbertopachecobatista5049]

Man this has been the best explanation about CallStack ever. Thanks!!!

[@MANISHSHARMA-xk1su]

Great Video...Really wanted it...let me know which theme you are using in your VS code...Its cool...

[@abdalwahab7370]

One of the best channels on KZbin

[@RameenFallschirmjager]

understanding is very pleasant feeling!

[@naveedalirehmani4135]

I knew all of these concepts already but I still watched it

[@pichdarapo3145]

My best teacher on KZbin!!!!

[@rajanbrahma0]

Explained in the simplest way!! Great job!

[@danielbilic702]

Love your VS Settings. Can you make a video about your VSCode settings would be nice.

[@whatsappboy6980]

This is what I wanted ! Keep it Up Ed

[@wirklichtotal8996]

Franky, this is the most relevant js course ever. Thank you Mr for your approach. This is really professional

[@jlambert12013]

Never seen any of this explained so well, thanks!!

[@nikolaykoychev8261]

Best video on the internet about JS!!!

[@kornelnyp]

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

[@TheMessixaviniesta]

ES6 did introduce block scope, but only for let and const.

[@djlee0721]

Awesome video. Thank you!

[@silvoaxhacka5506]

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)

[@cyberprompt]

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(){ ... }());

[@thewildsisters4596]

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 😎😎

[@abcodemoldova1907]

Succese mai departe ! Salutari din Moldova :)

[@developedbyed]

Multumesc frumos!

[@FirstLast-gk6lg]

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

[@olatunjisamson3918]

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.

[@MRMOTOFOTO]

Great simple explanations

[@Mark_Kop]

Hey, Ed! I'd like to suggest a React video about Hooks. I'm loving your channel, keep up with the good work

[@sed_artis]

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.

[@mouhamaddiop1144]

You're absolutely cool. Your sneeze is just perfect.

[@theBIGgee]

Not cool now cos of covid 19

[@mouhamaddiop1144]

@@theBIGgee you're right

[@pinkeHelga]

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); `

[@CarlosKimutai-p2g]

what I find hard about JS is methods. An example of them includes preventDefault and preventPropagation

[@romanroman9638]

for me - the hardest part of JS is - callbacks and promises. Thank you for mentioning that up

[@SuboptimalEng]

What vscode theme do you use???

[@t74devkw]

PLEASE WHICH THEME IS THIS ON YOUR VSCODE??? The icons are so dope

[@pushkarasapure7514]

I guess material icons pack

[@t74devkw]

@@pushkarasapure7514 THANK YOU

[@mdarifulhouqe3209]

hay Dev Ed!!! Make a video about working contact form in php for html template.

[@Amar11115]

Wow! Learned it by heart!

[@PouyaAtaei]

Tutorial aside, you sound like such a great person :P cheers....

[@jeddals3613]

3:21 "Hello there" My reply "General Kenobi!"

[@omsinha3572]

Thanks Ed, it was really awesome video and you make it very simple to understand...

[@ChillCityNaveen]

Awesome tutorial... Can please do video about how to learn hard functionalities in easiest way

[@oanamacarie5155]

I love your style...makes me smile a lot. :)) Keep up the good work!!! :D

[@vikasni95]

Do u. Love him dev ed?

[@raymondc5874]

Great content. Straight to the point.

[@debugmedia]

What software do you use to create your Thumbnails ? Thank you for the video

[@jaimerojas6578]

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

[@alimir5350]

I knew all of that it means I know JS well. Yay!

[@swarajkaran]

var - undefined const - can't be accessed before initialisation. Why there's a difference? Both are variable declaration. Reason - Temporal Dead Zone

[@aqibfayyaz1619]

Thank you. Very helpfull

[@benmor7021]

Thank you (again) Ed !

[@gasbill19]

hoisting is very well explained! double thumbs up

[@muntherjaber9643]

Nothing is moved let alone hoisted. The JavaScript engine does both compile and interpret the code. The first pass variable and functions parsed in place. When the interpreter takes over if it runs into a variable from the compile phase with no value it is “undefined”. Otherwise, it is “not defined”. And functions are already parsed in the compile phase.

[@ffgcvs]

Could you explain on another video about what and when we need to use Promises / Then?

[@acloudonthebluestsky9687]

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

[@rakeshsontakke7570]

Can you please make a video on JavaScript closure☺️

[@manuelsantos7807]

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!

[@bluepill9131]

What I find the hardest is how to make JavaScript work with html in vanilla js. I tried to link my Nav to slides. When you click on a link like “cover”, “resume”, or “contact”, I want it to slide the div it is linked to into the page and slide the home page out of view.

[@fmartinez004]

Hey Dev Ed, can you create a video on how you do your recordings and green screen setup?

[@kid_kulafu_1727]

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.

[@auchucknorris]

i also like iifes for variables that require a function to run for its return falue

[@sylhos]

Yeah Boy!!! Very gangsta... very Ed

[@91alkerS]

hardest thing for me is the debugging for JS!! May be I am the noob one here :P

[@RockyDarlami7]

Awesome explanation. Thank you .

[@maxiequa567]

what happened to promises though? did that part get edited out or did i fall asleep?

[@mayurdugar03]

Nicely put! thanks

[@indianathe3rd742]

*Ed sneezes* Wap girl : Corona Virus!

[@RedEyedJedi]

There is now global-scope, function-scope and block-scope since let and const are block-scoped.

[@maxwee5276]

Where can I find visual studio extensions like yours? Dev Ed bro?

[@jaimerojas6578]

Thanks a lot Ed this has been really really helpful for me it's crystal clear and well explained!

[@alejandrogomez8766]

Wooow, finally i understand async/await, thanks a lot 👌

[@lugy3346]

ehmm what do you mean with compiler? i thought javascript is an interpreter languange witch not work with compilers where every single line of code gets readed and executed immediately

[@niemirek18]

Amazing video as always ! :D Can u now explain closures ?

[@debojyotighosh3715]

For me, the Callback Function is the hardest thing in JavaScript...What should I do to understand it?

[@PablxVillarreal]

Love your videos dude!

[@sebailing6219]

Very good JavaScript Learn information!