This works just fine (prints "lll"), because I didn't forget `return`: class p { constructor (name){ this.name = name; } b = function(){ return this.name } } const c = new p('lll') console.log(c.b())
Please mark missleading explanation at 11:42 as it might confuse others. Return is missing. Also interesting to mention if you have regular object (not an instance of a class), you actually get undefined with arrow func: var a = { prop: 'hi', a1: () => this.prop, a2: function () {return this.prop} } a.a1() // undefined a.a2() // 'hi'
You're wrong about let, const, and arrow functions not hoisting. They ARE hoisted. They just aren't hoisted the same way. let and const are hoisted, but put in a "temporal dead zone" until declared. So you don't get "undefined", but you do get "reference error", because the interpreter does know they exist. And arrow functions are also hoisted. In fact, their hoisting is based on how you declare them. Most people declare them with const. But if you instead declare an arrow function with var and use it early, you will get a "type error", because it WAS hoisted, but not yet defined.
I finally know why we need to bind(this) for class components... because otherwise "this" is global context rather than parent context - thank you sir!
Your example for the context and this is wrong. The normal function returns undefined because you don't return anything from the function. The arrow function returns the pet name because you've written it in a way in which it returns this.name.
Actually currying is the question that I like to ask people on interviews (because I'm a functional programming fan) but I didn't get this question often during interviews this is why I didn't include it in the list.
it's very hard to do a video like this, thank you. I think functions should be explained in hoisting as they can be invoked before declaring, I know it's one of those js quirks
Hold on, that's not an example of closure, really. That's an example of currying. In fact, by showing it as an example of closure, you're going to confuse the viewers. Currying is a whole, separate, and relatively rare trick and question you will far less often encounter. Also, you'd rarely, if ever, evoke both halves at once like that(3)(2)...so it's a bad example even then. More likely, you'd do something like: const totaler = addTo(3); totaler(2); If you're going to instantly evoke both of them like addTo(3)(2), then you're just wasting your time and should have just written the function to take (3, 2).
@@MonsterlessonsAcademy It CONTAINS closure, but is currying. You may as well claim it's not an example of closures because it contains a function. That there is one thing in it doesn't change that its MAIN demonstration is of a different thing. Embedding a function in another function and calling them in sequence is currying. That is the MAIN lesson here, which is going to be confusing to viewers.
Regarding class example and „this” binding. You are not returning anything from getSurname function. That is why I think you are getting undefined. If you console log “this” for both functions you should get class context.
@@MonsterlessonsAcademy By logging “this” I meant something like this: codesandbox.io/s/nifty-chebyshev-8z1yo Both functions are reporting “this” as class object.
@@devilslide8463 wow actually I expected it to be undefined as in such construction someMethod() { function foo () { console.log(this) } foo() } Sorry that I didn't test it properly :(
@@MonsterlessonsAcademy exactly honestly speaking it was also my expectation:) If we throw out classes and jump to prototypes we will see that clear difference between regular and arrow functions :)
You have an error explaining the difference between arrow and plain function: First of all, you used classes, which is really bad for explaining diff between arrow vs regular functions. If I add following code to jsfiddle/codesandbox I am getting compiler errors => we should use only methods inside classes. But anyway your getSurname method returns nothing, so undefined is the only value you could get. If you return this you would get object here, this is some weird behavior of classes which is not obvious again. And generally, after your example, it seems like we need to use arrowFunctions for object methods, when the reality is opposite: We need to use arrow functions almost everywhere where we want to save current context e.g. callbacks, but for object methods, where we need to use regular functions.
WATCH NEXT: Javascript Interview Questions and Answers - Dominate Your Next Interview - th-cam.com/video/wnYKH2dO620/w-d-xo.htmlsi=5DfbGEfhXWiiv0a_
This works just fine (prints "lll"), because I didn't forget `return`:
class p {
constructor (name){
this.name = name;
}
b = function(){
return this.name
}
}
const c = new p('lll')
console.log(c.b())
Please mark missleading explanation at 11:42 as it might confuse others. Return is missing.
Also interesting to mention if you have regular object (not an instance of a class), you actually get undefined with arrow func:
var a = {
prop: 'hi',
a1: () => this.prop,
a2: function () {return this.prop}
}
a.a1() // undefined
a.a2() // 'hi'
He got MANY details wrong.
I wonder if he's caused some people to fail coding interviews.
You're wrong about let, const, and arrow functions not hoisting.
They ARE hoisted.
They just aren't hoisted the same way.
let and const are hoisted, but put in a "temporal dead zone" until declared. So you don't get "undefined", but you do get "reference error", because the interpreter does know they exist.
And arrow functions are also hoisted. In fact, their hoisting is based on how you declare them.
Most people declare them with const. But if you instead declare an arrow function with var and use it early, you will get a "type error", because it WAS hoisted, but not yet defined.
I finally know why we need to bind(this) for class components... because otherwise "this" is global context rather than parent context - thank you sir!
You are welcome!
@11:45, the function version did not have return, which is why is logs to undefined. if return is added to line 9, it also returns 'Fluffy'
Your example for the context and this is wrong. The normal function returns undefined because you don't return anything from the function. The arrow function returns the pet name because you've written it in a way in which it returns this.name.
You explained Closures with one more js topic I was asked in an interview "Currying". I guess this is a bonus hidden tip for this video. 😛
Actually currying is the question that I like to ask people on interviews (because I'm a functional programming fan) but I didn't get this question often during interviews this is why I didn't include it in the list.
@@MonsterlessonsAcademy Then on that basis I'll get selected in that interview. 😆
THRE IS A MASSIVE BUG in 10:17 example. Line 7 misses "return" and only this is why line 16 logs 'undefined' to the console!!!
You are totally right
it's very hard to do a video like this, thank you. I think functions should be explained in hoisting as they can be invoked before declaring, I know it's one of those js quirks
Glad it was helpful!
Excellent video! That channel worth more boost! Keep going well man!
Thanks! Will do!
Hold on, that's not an example of closure, really.
That's an example of currying.
In fact, by showing it as an example of closure, you're going to confuse the viewers.
Currying is a whole, separate, and relatively rare trick and question you will far less often encounter.
Also, you'd rarely, if ever, evoke both halves at once like that(3)(2)...so it's a bad example even then.
More likely, you'd do something like:
const totaler = addTo(3);
totaler(2);
If you're going to instantly evoke both of them like addTo(3)(2), then you're just wasting your time and should have just written the function to take (3, 2).
It's not an example of currying. On 5:00 your can see a variable inside closure.
@@MonsterlessonsAcademy It CONTAINS closure, but is currying. You may as well claim it's not an example of closures because it contains a function. That there is one thing in it doesn't change that its MAIN demonstration is of a different thing.
Embedding a function in another function and calling them in sequence is currying. That is the MAIN lesson here, which is going to be confusing to viewers.
Regarding class example and „this” binding. You are not returning anything from getSurname function. That is why I think you are getting undefined. If you console log “this” for both functions you should get class context.
Yes, you are correct, you passed the interview :) I forgot to write return there -_-
P.S. this in function console.log will be undefined.
@@MonsterlessonsAcademy By logging “this” I meant something like this: codesandbox.io/s/nifty-chebyshev-8z1yo Both functions are reporting “this” as class object.
@@devilslide8463 wow actually I expected it to be undefined as in such construction
someMethod() {
function foo () {
console.log(this)
}
foo()
}
Sorry that I didn't test it properly :(
@@MonsterlessonsAcademy exactly honestly speaking it was also my expectation:) If we throw out classes and jump to prototypes we will see that clear difference between regular and arrow functions :)
@@MonsterlessonsAcademy Its a dangerously beautiful tutorial...
You have an error explaining the difference between arrow and plain function:
First of all, you used classes, which is really bad for explaining diff between arrow vs regular functions.
If I add following code to jsfiddle/codesandbox I am getting compiler errors => we should use only methods inside classes.
But anyway your getSurname method returns nothing, so undefined is the only value you could get.
If you return this you would get object here, this is some weird behavior of classes which is not obvious again.
And generally, after your example, it seems like we need to use arrowFunctions for object methods, when the reality is opposite:
We need to use arrow functions almost everywhere where we want to save current context e.g. callbacks, but for object methods, where we need to use regular functions.
Hi thank you for your input!
thanks!
Welcome!
Thanks.
You're welcome
thanks
You're welcome!
you missed the return keyword in function
Yeap
thanks
You're welcome!
thanks
Welcome