0:18 - 1. What is a closure? 5:10 - 2. What is hoisting? 8:44 - 3. What’s the difference between a Promise and a callback? 12:33 - 4. How does “this” work? 18:23 - 5. What is a prototype?
Hahhah I put on 0.75 at the start of the video, but I went to eat, and then I came again and started watching, but forgot that am on 0.75, so I double checked am I on 0.75 :D
In the beginning i was skeptical of “help you land your next role” but i have been asked these questions almost every time and i have to agree that this will in fact help!
I had to stop the video after 2 min...and appreciate your great teaching style. It is so clear and concise. Like a breath of fresh air. You have a true gift. If you were to make a full blown tutorial on anything I would purchase it without hesitation. Toda raba.
I've never thought of it as 'declarations get hoisted, assignments don't' but that's a good observation and will make it super easy to remember the behavior of var and function declarations.
This video made me a position in a very relevant company, absolutely everything that this video covers was asked to me on the interview, and if i didn't watch your video before it, I would have never answered so clearly to these VERY relavant questions about JavaScript! Thanks for sharing your knowledge with the rest of us, it's definitively something that all of us should consider on doing to our next generations to come.
Buddy was going fast as hell and sounded like he had a speech impediment... And yet... This is by far the best and most clear/concise breakdown of any coding problem/scenario/ or docs detail i've ever heard... Subbed
I never comment on someone, but you are a legend, simple, and clear, and the analogies and examples are spot-on, and simple enough for anyone to understand. Engineering should always be explained simply enough for everyone to understand even if they can't code. Sometimes the only blocker between a bad and a good developer is the understanding of the concepts he is using in his own way. There is a need for a compiler between the technical explanation and our understanding. well done. Bless
In my first ever interview I was asked about closures and hoisting. They also tested my knowledge on the .map(), .reduce() and .filter() functions, which of course also included callbacks. Mind you, that was one part of the whole interview but these are definitely popular questions.
@@crisi6754 Hey! It was for a junior front end developer role. The stuff I mentioned before was the only technical/white board aspect of it so that was pretty brief. The rest was just figuring out who I was and why I wanted to be there, what kind of stuff I built and what my experience was with the technologies I listed on my resume (only put things you're ready to talk about in depth). The last guy asked me about inversion of control, dependency injection, and asked me to name some design patterns and what I knew about them.
the funny thing is, I've been developing javascript and react apps for 2 years and I feel like it's the first time for me to understand most of these concepts. :'D
I had an interview yesterday regarding a JS developer position for a pretty relevant company and I aced it. The reason? I found this video the night before it and god how grateful I am that I did that. I got asked exactly the first two things on this video, what is closure? and what is hoisting? This is excellent and well-explained content. Awesome job!
This video has over 80,000 views. I’m surprised it doesn’t have over 80,000 comments thanks you for your clear n easy approach to be explaining such annoying/ difficult concepts of what is a loosely type programming language.
One of the most valuable videos I've watched to refresh my memory on how to explain terms just in case it comes up during tech interview. Succinct explanation! Thank you.
Just to add to your hoisting explanation and detail why we percieve that JS brings the functions and variables to the top of the scope, JS has two main phases when building your code: the creation and the execution phase. In the creation phase, JS does a syntactic and semantic verification (tokens and lexemes), and by the time it allocates in memory the variables and functions, but does not initialize them. That's why JS will know functions exist before they are initialized, they exist in memory, but it fails to work with a variable that is a function, because in the creation phase the variable whas allocated in memory with a undefined value
Const and let do show some sort of hoisting.. const x = 1 { console.log(x) // Reference error const x = 2 } This shows const x got hoisted at top of curly braces. Source - MDN Web Docs
I had a production nightmare once with regards to our IE8 customers when I used prototype to add a method to an Array. IE8 treated it like the element had an additional array value. This bug prevented 1% of our customers from being able to check out at all - which obviously was a priority 1 emergency. I'm so glad IE8 is gone.
I didn't know about the prototype functionality that's really helpful coming from a C# background. It allows me to mimic inheritance like I am used to in C#, in JS. Prepping for a possible interview as a Node JS Backend Developer. Your videos have been extremely helpful.
Great video! Really helped me to prep for my first junior JS dev interview. One thing though, from what I understand and have researched is that let and const do get hoisted, they just don't get initialized with a value of undefined, whereas var does.
An awesome and detailed explanation of how functions are 'hoisted'. However, I think it's valuable to focus more on how objects are being added to memory during the compilation phase by the compiler creating the illusion of 'hoisting'. With that, the code that we usually say is hoisted doesn't actually move. It stays exactly where you wrote it.
Very compact video. So much information. Well explained. Well articulated. Am very impressed. 20min felt like 5mins and that's due the pace at which you speak. Well done. Keep up the hard work.
let x = 100; function logx() { console.log(x); } logx(); This is not a closure unless you put logx in any ancestor scope i.e. a scope that has not access to logx definition. const clsr = function() { let x = 100; function logx() { console.log(x); } return logx; )(); this would be a closure.
I hate theory; however, I love your videos, so I watched this one as well :D So I've got a few questions 2) Hoisting.. I think I got the idea. My question is why would we ever call a function before defining it?? 4) This keyword: (14:46) why does it turn into global context?? Why not localSayName.sayName? 16:04 (is there any real life usage? why would we ever define a const (person) and then have another const (boundSayName) = person and bind it to person. Seems redundant) Amazing video anyway. It was like WOW holy sh*t I didn't know you could do that in JS O_o
@@CodingWithChaim That'd be great. Personally, I would love to see some more like real life examples (I'm not experiences, so some of these interview questions seem kinda wierd. like yeah you probably have to know this stuff but when / where are you gonna use it ever??? (While debugging I guess:D )
Answer to 4) why it turns into global context. Some background details. The object that the this keyword in JavaScript refers to in an arrow function is defined ‘statically’/‘lexically’. This means that instead of defining it dynamically depending on how you call the function (such as with a function deceleration), it is instead a constant value which is defined based on where you define the arrow function. Now to answer your question. How does JavaScript decide what object to refer ‘this’ to in an arrow function? When you define the arrow function it simply inherits whatever the this object refers to in the parent scope.
I wanna thank you for your valuable and precisely chosen topics which is conveyed in the fastest and most efficient way. Keep up the good work and wish you the best 💕
About what 'this' refers to for arrow functions: for the second version of person (with the arrow function), you say that the reason 'this.name' is undefined is because the 'this' inside the arrow func just refers to the global context, where no 'name' property is defined. Why does the following code print 'Percival', 'Gloria', 'undefined' then instead of 'Percival', 'Gloria', 'Gloria'? Because it seems like if the arrow function's 'this' was globalThis, then it should also print Gloria. global.firstName = "Gloria" // (same as firstName = "Gloria", globalThis.firstName = "Gloria") const person = { firstName: "Percival", sayHello: function () { console.log(`Hello ${this.firstName}`) } } const arrowPerson = { firstName: "Aaron", sayHello: () => { console.log(`Hello ${this.firstName}`) // (could use arrowPerson.firstName for 'Aaron'.) } } person.sayHello() // => Percival const globalSayHello = person.sayHello; globalSayHello(); // => Gloria arrowPerson.sayHello() // => undefined?
Well done!!! very concise and I commend your choices of questions. I think the piece I missed was WHY does the arrow function indicate global scope at around min 18? I believe it is bc this is defined when CALLED as if there was a bind(this) on line 22, correct?
it's because of the fat arrow function gets the context of 'this.' globally when declared like that. You can declare the fat arrow function directly instead of key/value within the object (es6) and then 'this.' will be scoped intentionally to the object. ex: const person = { name: 'kevin', sayName() => { console.log(`${this.name} is my name`);}
For your localSayName 'this' example you can also use .call method like so: const localSayName = person.sayName localSayName.call(person) // returns 'chaim, we are saying attach 'this' to the person object when calling localSayName.
For API calls you can use only Promise.then or async/await, callback would not be executed at all, it only works in Node.js, am i correct? fetch(url, payload, callback)
@@CodingWithChaim it is a pleasure to see your explanations... I saw your 5 videos in a single day...You explain so well that what you say gets fit into the brain.
0:18 - 1. What is a closure?
5:10 - 2. What is hoisting?
8:44 - 3. What’s the difference between a Promise and a callback?
12:33 - 4. How does “this” work?
18:23 - 5. What is a prototype?
Thanks this is helpful!
Same bro, same. Haha
Same bro, jaja
Thank you kindly :)
20 minutes of complete value, best video I’ve seen on JS. Answered every question that popped into my head. Truly remarkable.
Damn, I had to check twice wether I was watching this at 2x speed lol.
Regardless a great video. Thanks!
me too =)))
Adderall
Hahhah I put on 0.75 at the start of the video, but I went to eat, and then I came again and started watching, but forgot that am on 0.75, so I double checked am I on 0.75 :D
haha funny i saw this comment...i usually watch videos at 1.75. I had to slow this guy down lol
In the beginning i was skeptical of “help you land your next role” but i have been asked these questions almost every time and i have to agree that this will in fact help!
I had to stop the video after 2 min...and appreciate your great teaching style. It is so clear and concise. Like a breath of fresh air. You have a true gift. If you were to make a full blown tutorial on anything I would purchase it without hesitation. Toda raba.
Wow, thank you!
I've never thought of it as 'declarations get hoisted, assignments don't' but that's a good observation and will make it super easy to remember the behavior of var and function declarations.
This video made me a position in a very relevant company, absolutely everything that this video covers was asked to me on the interview, and if i didn't watch your video before it, I would have never answered so clearly to these VERY relavant questions about JavaScript! Thanks for sharing your knowledge with the rest of us, it's definitively something that all of us should consider on doing to our next generations to come.
Buddy was going fast as hell and sounded like he had a speech impediment... And yet...
This is by far the best and most clear/concise breakdown of any coding problem/scenario/ or docs detail i've ever heard...
Subbed
So clear! So many hours watched and all I needed was 20mins from you! Thanks!
I’m really glad you find the video useful
After so wasting so many months ,got to know that it could have been cleared in just 20 mints ❤❤❤❤
My goodness!! How can you be so crystal clear while you explain!! I'm glad that I hit your video.
I never comment on someone, but you are a legend, simple, and clear, and the analogies and examples are spot-on, and simple enough for anyone to understand. Engineering should always be explained simply enough for everyone to understand even if they can't code. Sometimes the only blocker between a bad and a good developer is the understanding of the concepts he is using in his own way. There is a need for a compiler between the technical explanation and our understanding. well done. Bless
Been trying to wrap my head around hoisting all day and this was the clearest answer i could find.
In my first ever interview I was asked about closures and hoisting. They also tested my knowledge on the .map(), .reduce() and .filter() functions, which of course also included callbacks. Mind you, that was one part of the whole interview but these are definitely popular questions.
What was the position for if you don't mind me asking? :)
@@crisi6754 Hey! It was for a junior front end developer role. The stuff I mentioned before was the only technical/white board aspect of it so that was pretty brief. The rest was just figuring out who I was and why I wanted to be there, what kind of stuff I built and what my experience was with the technologies I listed on my resume (only put things you're ready to talk about in depth). The last guy asked me about inversion of control, dependency injection, and asked me to name some design patterns and what I knew about them.
Great video, everything's very clearly explained! It's best if you watch it with 0.75 playback speed :)
lol I was watching at 2x and it was smooth. :)
the funny thing is, I've been developing javascript and react apps for 2 years and I feel like it's the first time for me to understand most of these concepts. :'D
I would like to say, that this is the clearest and fastest way I've seen about this subjects! Wow, well done!
I had an interview yesterday regarding a JS developer position for a pretty relevant company and I aced it. The reason? I found this video the night before it and god how grateful I am that I did that. I got asked exactly the first two things on this video, what is closure? and what is hoisting? This is excellent and well-explained content. Awesome job!
This video has over 80,000 views. I’m surprised it doesn’t have over 80,000 comments thanks you for your clear n easy approach to be explaining such annoying/ difficult concepts of what is a loosely type programming language.
One of the most valuable videos I've watched to refresh my memory on how to explain terms just in case it comes up during tech interview. Succinct explanation! Thank you.
You are an excellent Javascript tutor! I am preparing for Job interview and I feel like I have passed it
thats awesome! Please report back once you know
I really love that I don't have to set the video to 2x like you have to for practically all other tutorials. Thanks for this haha
Just to add to your hoisting explanation and detail why we percieve that JS brings the functions and variables to the top of the scope, JS has two main phases when building your code: the creation and the execution phase. In the creation phase, JS does a syntactic and semantic verification (tokens and lexemes), and by the time it allocates in memory the variables and functions, but does not initialize them. That's why JS will know functions exist before they are initialized, they exist in memory, but it fails to work with a variable that is a function, because in the creation phase the variable whas allocated in memory with a undefined value
Your videos need more attention. These are very clear explanations. Great content.
Const and let do show some sort of hoisting..
const x = 1
{
console.log(x) // Reference error
const x = 2
}
This shows const x got hoisted at top of curly braces. Source - MDN Web Docs
I had a production nightmare once with regards to our IE8 customers when I used prototype to add a method to an Array. IE8 treated it like the element had an additional array value. This bug prevented 1% of our customers from being able to check out at all - which obviously was a priority 1 emergency. I'm so glad IE8 is gone.
You cannot be bored watching these videos. Great job!
You are very good at explaining things. You could write a JavaScript for Dummies book for sure!
This guy is insanely smart. Got my sub.
That burger example was really good, it helped me to finally understand the concept of Promises. Great video!
You can thank Kyle Simpson for that example. Really helped me understand it as well
You made it clear the diff b/w Promise and Callback. Its great all other concepts too very clear. Great!
What a tempo! :)
Incredibly efficient yet extremely valuable video
I didn't know about the prototype functionality that's really helpful coming from a C# background. It allows me to mimic inheritance like I am used to in C#, in JS. Prepping for a possible interview as a Node JS Backend Developer. Your videos have been extremely helpful.
The explanation on closures was perfect for me.
What a great refresher for me I have a couple of interviews coming up. Thank you!
Yeah very good video! Thanks a lot, finally I understand "this"! 💪
ayyyyy! thats awesome! I am happy to hear that
Great video! Really helped me to prep for my first junior JS dev interview. One thing though, from what I understand and have researched is that let and const do get hoisted, they just don't get initialized with a value of undefined, whereas var does.
Correct
These 20 minutes can get you a job definitely
this vid was amazing, really helped me improve my concept about all these essential parts of JS.
Maaaann....this is GOLD! Thank you for such clear explanations!
That's just a BANGER GOLDEN video, obligatory to rewatch. Subscribed to you, such content needs to be praised with more subscriptions.
Great tips. Would be awesome to include event loop and concepts of HOF and delegation
An awesome and detailed explanation of how functions are 'hoisted'. However, I think it's valuable to focus more on how objects are being added to memory during the compilation phase by the compiler creating the illusion of 'hoisting'. With that, the code that we usually say is hoisted doesn't actually move. It stays exactly where you wrote it.
Thank you so much!!!! I’m using this for my next technical interview.
Very compact video. So much information. Well explained. Well articulated. Am very impressed. 20min felt like 5mins and that's due the pace at which you speak. Well done. Keep up the hard work.
You are very clear and concise describing these exact concepts I need to touch up on!
Thanks! I am glad you found the video helpful!
Mind blowing explanation..... 100% clearly explained the concepts....
First time I'm watching your content and I'm in love with your energy. I hit the subscribe button without thinking about it.
Love the way you explain things. Very useful for interviews. Mazel tov.
I had to stop half way through... you're an AMAZING teacher!!!
Thank you! Really appreciate that
@@CodingWithChaim you're welcome!:)
Thanks! I like the way you are explaning everything, it's like you are speaking directly to my brain!
dude you are an excellent teacher.
Dude, such a clear explanation! Namaste and gratitude from Nepal!
let x = 100;
function logx() {
console.log(x);
}
logx();
This is not a closure unless you put logx in any ancestor scope i.e. a scope that has not access to logx definition.
const clsr = function() {
let x = 100;
function logx() {
console.log(x);
}
return logx;
)();
this would be a closure.
I hate theory; however, I love your videos, so I watched this one as well :D So I've got a few questions 2) Hoisting.. I think I got the idea. My question is why would we ever call a function before defining it?? 4) This keyword: (14:46) why does it turn into global context?? Why not localSayName.sayName?
16:04 (is there any real life usage? why would we ever define a const (person) and then have another const (boundSayName) = person and bind it to person. Seems redundant)
Amazing video anyway. It was like WOW holy sh*t I didn't know you could do that in JS O_o
Fantastic questions!! The problem is these are a little tough to answer here in comments. Maybe I should make a follow up video?
@@CodingWithChaim That'd be great. Personally, I would love to see some more like real life examples (I'm not experiences, so some of these interview questions seem kinda wierd. like yeah you probably have to know this stuff but when / where are you gonna use it ever??? (While debugging I guess:D )
Answer to 4) why it turns into global context.
Some background details. The object that the this keyword in JavaScript refers to in an arrow function is defined ‘statically’/‘lexically’. This means that instead of defining it dynamically depending on how you call the function (such as with a function deceleration), it is instead a constant value which is defined based on where you define the arrow function.
Now to answer your question. How does JavaScript decide what object to refer ‘this’ to in an arrow function? When you define the arrow function it simply inherits whatever the this object refers to in the parent scope.
I wanna thank you for your valuable and precisely chosen topics which is conveyed in the fastest and most efficient way. Keep up the good work and wish you the best 💕
5:00
const compute = (addOrMinus) => {
if (addOrMinus === '+') {
return (x, y) => x + y;
}
return (x, y) => x - y;
};
console.log(compute('+')(5, 6))
// result => 11
console.log(compute()(5, 6))
// result => -1
Excellent tutorial. Very articulate, thank you so much!
About what 'this' refers to for arrow functions: for the second version of person (with the arrow function), you say that the reason 'this.name' is undefined is because the 'this' inside the arrow func just refers to the global context, where no 'name' property is defined. Why does the following code print 'Percival', 'Gloria', 'undefined' then instead of 'Percival', 'Gloria', 'Gloria'? Because it seems like if the arrow function's 'this' was globalThis, then it should also print Gloria.
global.firstName = "Gloria" // (same as firstName = "Gloria", globalThis.firstName = "Gloria")
const person = {
firstName: "Percival",
sayHello: function () {
console.log(`Hello ${this.firstName}`)
}
}
const arrowPerson = {
firstName: "Aaron",
sayHello: () => {
console.log(`Hello ${this.firstName}`) // (could use arrowPerson.firstName for 'Aaron'.)
}
}
person.sayHello() // => Percival
const globalSayHello = person.sayHello;
globalSayHello(); // => Gloria
arrowPerson.sayHello() // => undefined?
There is no such thing as global.firstName. If you want to put a variable on global scope you do it like window.myGlobalVar .
Well done!!! very concise and I commend your choices of questions.
I think the piece I missed was WHY does the arrow function indicate global scope at around min 18? I believe it is bc this is defined when CALLED as if there was a bind(this) on line 22, correct?
Nice video Chaim. Very clear instruction 🙌
thank you so much, i wish you were my teacher. Please make more of these
This video made it so simple and clear to understand, thanks
Dude you explain it so well
Just found your channel and it is super informative, thank you !
Can you show us a tutorial of how to code the LAYOUT for guest viewer to where webRTC camera LAYOUT SWITCH
Very good and informative video, thank you very much
You are very welcome!
Nice video and thanks for covering the most asked and important questions for Js. You got a new sub!
These are some excellent tech questions! I'm going to note them and start tormenting candidates with them... :D
At 18:08 why is the “this” keyword (in the arrow function) pointing to the global context and not at its parent object?
it's because of the fat arrow function gets the context of 'this.' globally when declared like that. You can declare the fat arrow function directly instead of key/value within the object (es6) and then 'this.' will be scoped intentionally to the object. ex: const person = { name: 'kevin', sayName() => { console.log(`${this.name} is my name`);}
Thanks for this great vide, they asked all questions you covered plus import and export
Amazing video dude, really enjoyed it!
What do you use to record your videos? How did you get your webcam video on bottom right?
awesome.....great. thanks a lot Chaim for clearing the concepts...:-)
Most welcome!
First Jewish developing channel, respect!
The cap he wears thus gets hoisted ontop his head 😂
❤❤❤long live jews
Love it! Clear and straight to the point.
Great video! I learned a lot from this. You break these concepts down for even Jr. Developers do understand. Subscribed.
Crisp clear explanation ,thanks
Brilliant explanations, well done.
Thanks for the awesome video! What is this IDE?
For your localSayName 'this' example you can also use .call method like so:
const localSayName = person.sayName
localSayName.call(person) // returns 'chaim, we are saying attach 'this' to the person object when calling localSayName.
as always thank you for your great videos! please keep making more of them!
Will certainly try 😉
@@CodingWithChaim I actually have an interview on Friday would love to see more interview videos especially on react hooks
This is so neat! Great Content
The content is amazing, the speed though..
Super explanation👏👏
Thank you!
Let and const are actually hoisted but not initialised with undefined like var. But your explanation is superb
And the practical difference being what?
Man, thank you for your work. Toda raba, nice video.
Just one thing. You speak very fast
Great circle analogy
Great explanations. Thank you!
This is amazing so glad I watched it.
Great content. Thank you for the time invested!
Glad it was helpful!
Actually let and const do get hoisted but without initialised with default values, thats why you get error
Awesome Many Thanks Please bring Awsome video...........
Assignments get hoisted as well, but with undefined value until initiazilation moment
By the way, can callback (without setTimeout) be used insead of promise for API call?
For API calls you can use only Promise.then or async/await, callback would not be executed at all, it only works in Node.js, am i correct? fetch(url, payload, callback)
wow explanation is so on point !
Thanks man! This really helped me!
ive found my coding
mentor
Wonderful information... Lots of quality in your content... The explanation is also mind blowing.
Thank you! Glad you found the video helpful
@@CodingWithChaim it is a pleasure to see your explanations... I saw your 5 videos in a single day...You explain so well that what you say gets fit into the brain.
Great explanations, given at cheetah speed.
Good explanation and good energy, thank you.