Liked the video, when you explained, when not to use " fat arrow" function. And you don't need to say, "Thank you for watching", when you are delivering such informative content. Thanks for the tutorial
Thanks a lot, I really appreciate it. Finding free, high-quality content is very difficult. The sound is good, and the examples are deep. It's a great job you do, thanks a lot!
You are doing an amazing job.Most of the people doesn't know why to use fat arrow in there code.They just use it more like syntactical sugar.Hope they follow this amazing series and learn the core concepts of javascript.I am awaiting for your series on react + mobx and RXJS observer subscriber.Thank you
Once again, it's to the point and clear. techsith is a role model for tech teachers. Thank you for your effort to plan these, time spent in producing them. I don't get how it attracted three dislikes.
Not sure if you will see this but here it goes. You suggest that the syntax using the curly brackets with return inside would be more appropriate than simply using implicit return with regards to the one liner. Can you please explain why? Thank you!
Hello, I know you probably know this. But just for people watching this. Arrow functions are function expressions, that means they are not hoisted. Just another difference that came to mind. console.log(calcAge(1993)); let calcAge = birthYear => 2021 - birthYear;// it's a function expression
@7:40 you could just delete this.val = 1; and write val = 1;. Or, just invoke x(). Why is that a bad option? Btw, i am just starting to learn Js, and your tutorials are the best to learn from. Keep up the amazing job!!!
can you please make a video on how to know that a person is ready for job market or how to self assess programming skills.. probably for javascript related roles like ui dev or fe dev.
I am defiantly going to make it. I have an idea if you are up for it. I can take your mock interview and we can look at the area where you need to improve and such . what do you think ?
Thanks for the offer. It is an ambitious proposition. I may not be ready for this at the moment but give me a few months. And I would want to stay anon too. But I would love to see a mock interview in near future with someone who is willing to take the plunge. Thanks again!
Sir, I would like to ask You a question.If i am wrong,just send me "NO". This code : "use strict"; function e(){this.r=1; setTimeout(console.log(this.r),1000);};var m=new e; - works, This : "use strict"; function e(){this.r=1; function setTimeout(){(console.log(this.r),1000);}};var m=new e; -doesnt. I think the combination of parentheses+ curly braces by default gives THIS as "property" within the curly braces. Best regards Dimitar
const X = function(){ //can we replace function key word with fat arrow hear this.val =1; setTimeout(()=>{ // we have used fat arrow to contine the scope this.val++; console.log(this.val) },1) }; const xx= new x(); Thanks for your quick reply
I have one more example Const Person = { name: "arya" cars: ['Ferrari','lambo'] //can we use back ticks hear i have tried but its not working toSome:function(){ //can i use fat arrow hear i tried but its not working i don't know yellow this.cars.forEach((car)=>{ console.log(`${this.name} has ${car}); }) } } Person.toSome();
I am working a plan to start a class, it would be in class and online . Let me know if you or any one interested in it. Send me an email . you can find my email on the channel page. Thanks fro watching.
there is no doubt about the content of quality it's awesome. but the most frustrating thing is the advertisement we have to watch and feel helpless when you can't skip the advertisement and I am facing this situation after subscribing this channel. Is there anything you can do for this ? Don't keep any advertisement which we can't skip.. Please
uday, Google decide which adds are skippable and which are not. I wish I had control over it. I believe when you start watching, the adds are skippable but after watching a few videos, Google knows that you will be watching more videos so they put non-skippable adds.
why does the `new` keyword actually runs the x() function thats what i don't understand, because when i call x() directly it having the regular functions inside, it logs 2, however like in the video, when i create a new variable xx and assign the x() to it using the new, it logs NaN, why is that and whats the purpose of the (xx) variable anyway
If we do iife to the function x , then this.val is available in settimeout function,whereas this.val was not available when you created the object.Is it because of the visibility??
Its a wrong comparison, what you want to compare is a function expression that you pass to another function that is a lambda function. that function can be a regular or an arrow function.
@@Techsithtube very clarifying, thanks... Is that the concept of lamba in python and Java as Well? In my mind I always thought It was directly related on reducing the syntax only...
sir, I have one question, seeing the performance which is fast javascript or es6?Can we say javascript is fast as it directly runs on the browser whereas es6 need to compile first?
Since its an object. you need property name. so here is a working example const classes = [ ['Chemistry', '9AM', 'Mr. Darnick'], ['Physics', '10:15AM', 'Mrs. Lithun'], ['Math', '11:30AM', 'Mrs. Vitalis'] ]; const classesAsObject = classes.map((x) => { const y = {}; y.subject = x[0]; y.time = x[1]; y.teacher = x[2]; return y; });
For the setTimeout example, if instead of var xx=new x(); we do x(); this.value is recognized inside setTimeout function written just as above. Can you please explain why that is? Ideally this.value should not have been recognizable in function for setTimeout. To clarify, what I am saying is: jsfiddle.net/sa4nd3by/ The answer is 2 instead of NaN like it should've been.
when you use xx = new x() , this is a constructor. so it will create a new object and bind 'this' to that object. if you do x() , this is a normal function first "this" you see is the windows object which is nothing but global object . if you run this you will see what "this" really is if you do x() jsfiddle.net/sa4nd3by/1/
I don't find this example as a proper one to explain the fat arrow as there is no need for 'this' in that method. The scope of val has no ambiguity so no 'this' is necessary. Remove all 'this' and the output value is 2.
You are born to teach others!!!!.
Yes, I agree. Some people just have that gift.
fat arrow functions do not have their own 'this.' really cool. thanks v much.
And that's the most important information about far arrow functions, which lets us decide when to use fat arrow syntax!
You succeed where many video tutorials fail. Nice job using very basic examples just to illustrate the dynamics.
Liked the video, when you explained, when not to use " fat arrow" function. And you don't need to say, "Thank you for watching", when you are delivering such informative content. Thanks for the tutorial
Wow
You are doing a great work for humanity
Thanks a lot, I really appreciate it. Finding free, high-quality content is very difficult. The sound is good, and the examples are deep. It's a great job you do, thanks a lot!
You are doing an amazing job.Most of the people doesn't know why to use fat arrow in there code.They just use it more like syntactical sugar.Hope they follow this amazing series and learn the core concepts of javascript.I am awaiting for your series on react + mobx and RXJS observer subscriber.Thank you
This is so cool. Used fat arrow in a forEach to reference "this" without binding.
One of the Best Teacher in the Universe
One of the easiest video that explained fat arrow this concept.
Thanks Gagan for watching and an awesome comment
thank you so fucking much, in 5 min i understood what my internship tried to teach me in 4 months.
Yacine , glad to have helped. keep on learning! and good luck with your internship.
Once again, it's to the point and clear. techsith is a role model for tech teachers. Thank you for your effort to plan these, time spent in producing them. I don't get how it attracted three dislikes.
appreciate the kind comment. That makes me motivated to make more tutorials.
Thanks Sir. May your service continue to the Humanity.
I knew it you're from NASA. 😅 You teach brilliantly.
Very clear explanation. I tried few tutorials but you really made it easy to understand. Thanks for the effort.
watching this video for the interview purpose.
Clear cut explaination .
thanx buddy....
Good luck with your interview Navid!
Good know underscore works, new information
I keep watching different videos on dif topics. And want to say you doing very good job! Thanks
Very clear explanation! Thank you for taking effort to make this video!
Clear explanation with good examples.
Keep doing this. I have continued to back to you when i have some issue with some concept.
I believe you are being a part of developing react js
Great video. I tried many tutorials, but you made it easy!
Not sure if you will see this but here it goes. You suggest that the syntax using the curly brackets with return inside would be more appropriate than simply using implicit return with regards to the one liner. Can you please explain why? Thank you!
A short tutorial with lot of insight for a beginner like me! Please keep uploading ... :)
You explained very well!
very clear and crisply explained.
Thank you Ruchi ! Keep learning !
Thank you! That helped me understand the fat arrow!
Beautifully explained. Thumbs up
Thanks for watching! :)
Hello,
I know you probably know this. But just for people watching this. Arrow functions are function expressions, that means they are not hoisted. Just another difference that came to mind.
console.log(calcAge(1993));
let calcAge = birthYear => 2021 - birthYear;// it's a function expression
"if using curly braces you should probably use 'return', otherwise it won't work" - LOL, awesome humor!
Dear, Awesome Explanation. You Always Rocks...!!
+Vaibhav Shrivastava Thanks you!
Nice,so easy to use math functions now.
now i really understood arrow function deeply i used it lot but i don't have a clue that it can work differently
Thank you. Hard to find comprehensive videos on some of these things.
Good ones***
Amazing tutorials!, You are so good in doing this lectures.
TNX!
thank you...awesome content...I feel according to my knowledge...you did justice to this topic
Thanks, sir for great explanation ...nice
@7:40 you could just delete this.val = 1; and write val = 1;. Or, just invoke x(). Why is that a bad option?
Btw, i am just starting to learn Js, and your tutorials are the best to learn from. Keep up the amazing job!!!
Great video, thanks for the insight.
Very good explanations, keep it up. Cheers!
Waiting for the next videos! Really good explanation.
It would be great, if you will use more complex and usable examples.
wysiwyg
Awesome video, you helped me a lot!!! Thanks buddy.
Great explanation, thank you !
can you please make a video on how to know that a person is ready for job market or how to self assess programming skills.. probably for javascript related roles like ui dev or fe dev.
I am defiantly going to make it. I have an idea if you are up for it. I can take your mock interview and we can look at the area where you need to improve and such . what do you think ?
Thanks for the offer. It is an ambitious proposition. I may not be ready for this at the moment but give me a few months. And I would want to stay anon too. But I would love to see a mock interview in near future with someone who is willing to take the plunge. Thanks again!
thank you, nice explanation..
Great video ,loved it.
Just a small doubt correct me if am wrong, isn't it rest operator instead of spread operator that you were using?
I want to learn react js from begining specially redux part of it. Also recharts and some of the controls. Can you please start a series on redux
I have started a series on React . And after few important fundamentals about react. I will go into redux.
thanks for amazing video , i have question , is it thin arrow ? const a => "hello"
Sir,
I would like to ask You a question.If i am wrong,just send me "NO".
This code : "use strict"; function e(){this.r=1;
setTimeout(console.log(this.r),1000);};var m=new e; - works,
This : "use strict"; function e(){this.r=1;
function setTimeout(){(console.log(this.r),1000);}};var m=new e; -doesnt.
I think the combination of parentheses+ curly braces by default gives THIS as "property" within the curly braces.
Best regards
Dimitar
Good point. thanks for sharing!
Great Video. Thank you so much.
I have doubt can we use fat arrows in parent function too... for the above given example ..Thanks i am learning great things from you
which example are you referring to?
const X = function(){ //can we replace function key word with fat arrow hear
this.val =1;
setTimeout(()=>{ // we have used fat arrow to contine the scope
this.val++;
console.log(this.val)
},1)
};
const xx= new x();
Thanks for your quick reply
I have one more example
Const Person = {
name: "arya"
cars: ['Ferrari','lambo'] //can we use back ticks hear i have tried but its not working
toSome:function(){ //can i use fat arrow hear i tried but its not working i don't know yellow
this.cars.forEach((car)=>{
console.log(`${this.name} has ${car});
})
}
}
Person.toSome();
That is correct
can we replace function key word in parent object
Great Tutorial....:) Thanks :)
Thank you sir
Welcome!
Big fan of all your tutorials. I see you're also from San Jose. Do you teach classes in the area?
I am working a plan to start a class, it would be in class and online . Let me know if you or any one interested in it. Send me an email . you can find my email on the channel page. Thanks fro watching.
it was really helpful.
Thanks for watching!
Are you using vs code? If not what type of ide it is
Awesome video! I like it
there is no doubt about the content of quality it's awesome. but the most frustrating thing is the advertisement we have to watch and feel helpless when you can't skip the advertisement and I am facing this situation after subscribing this channel.
Is there anything you can do for this ? Don't keep any advertisement which we can't skip.. Please
uday, Google decide which adds are skippable and which are not. I wish I had control over it. I believe when you start watching, the adds are skippable but after watching a few videos, Google knows that you will be watching more videos so they put non-skippable adds.
Sir which book is best for learning js
nice video.could you please explain es6 symbol?
Symbol is a new data type in JavaScript it allows you to create uniqure values.
why does the `new` keyword actually runs the x() function thats what i don't understand, because when i call x() directly it having the regular functions inside, it logs 2, however like in the video, when i create a new variable xx and assign the x() to it using the new, it logs NaN, why is that and whats the purpose of the (xx) variable anyway
Very cool format! What program are you using to add your overlays?
+Code Whisperer Camtasia
Thanks
thank you for the videos
awesome man. great
thaaaaaaaanks mateeeeee! great video! love it!
I think instead of spread operators you meant to say Rest Parameters at 10.35 ?
If we do iife to the function x , then this.val is available in settimeout function,whereas this.val was not available when you created the object.Is it because of the visibility??
its becase every function has its own this. so this inside the settimeout is belongs to that function only.
Hey . Thanks for the upload. Do you work in Nimble Storage ?
yes i do
The moment I saw your video I remembered you :) Your videos are really good.
you also work at nimble?
I use to. Left 2 months back. I had seen you at work couple of times, that how I suddenly remembered. I was in performance automation team.
oh i see. I am in the Nexgen UI team . Sok You are learning JavaScript now :)
brilliant
Is this fat arrow concept exactly the same as lambdas? or there is important differences?
Its a wrong comparison, what you want to compare is a function expression that you pass to another function that is a lambda function. that function can be a regular or an arrow function.
@@Techsithtube very clarifying, thanks... Is that the concept of lamba in python and Java as Well? In my mind I always thought It was directly related on reducing the syntax only...
sir, I have one question, seeing the performance which is fast javascript or es6?Can we say javascript is fast as it directly runs on the browser whereas es6 need to compile first?
es6 is a new version of javaScript so it is JavaScript.
techsith so we can say javascript is faster. This question is asked in interview
you should say ES6 is JavaScript so Its like saying "Am I faster than me" You know what I mean?
techsith yes sir.. Thanku so much
Super helpful
Thanks for watching! :)
Awesome!.
How to resolve below one please?
class Abc {
constructor(name) {
var that = this
this.name = name
}
printArrowFunction() {
setTimeout(() => {
console.log(this.name)
}, 1000)
}
printFunction() {
setTimeout(function () {
that.name
console.log(that.name)
}, 1000)
}
}
const abc = new Abc('Sapan')
abc.printArrowFunction()
abc.printFunction()
Doesn’t this inside setTimeout refer to the global window object? At 7:12 you said that this refers to the function scope itself which is misleading
this inside the setTimeout is a closure
Cool Thanks.
Thanks brother :)
Why in arrow functions var keyword is giving an error?
10:03 spread? I guess its rest operator.
Thank you for the (...n)!!!
I am gald it helped. Thanks for watching!
thanks mate
thanks
Thanks,
this.that, no wonder why peope hate JS'ers
thank you! what a g
Hi
I would like to know why this is incorrect:
const classes = [
[ 'Chemistry', '9AM', 'Mr. Darnick' ],
[ 'Physics', '10:15AM', 'Mrs. Lithun'],
[ 'Math', '11:30AM', 'Mrs. Vitalis' ]
];
const classesAsObject = classes.map(([subject, time, teacher]) => {subject, time, teacher });
gives [undefined, undefined, undefined] but i expected
const classesAsObject = [{ subject: 'Geography', time: '2PM', teacher: 'Mrs. Larsen' }]
Since its an object. you need property name. so here is a working example
const classes = [
['Chemistry', '9AM', 'Mr. Darnick'],
['Physics', '10:15AM', 'Mrs. Lithun'],
['Math', '11:30AM', 'Mrs. Vitalis']
];
const classesAsObject = classes.map((x) => {
const y = {};
y.subject = x[0];
y.time = x[1];
y.teacher = x[2];
return y;
});
For the setTimeout example, if instead of var xx=new x(); we do x(); this.value is recognized inside setTimeout function written just as above. Can you please explain why that is? Ideally this.value should not have been recognizable in function for setTimeout. To clarify, what I am saying is: jsfiddle.net/sa4nd3by/
The answer is 2 instead of NaN like it should've been.
when you use xx = new x() , this is a constructor. so it will create a new object and bind 'this' to that object. if you do x() , this is a normal function first "this" you see is the windows object which is nothing but global object . if you run this you will see what "this" really is if you do x() jsfiddle.net/sa4nd3by/1/
Thank you for taking the time to explain it. It makes sense now.
thanks :)
JavaScript has a lot of trick. I am scared.
Perfect :)
can I borrow your brain for tomorrow? I have an interview
NASA ...lol
hey increase your voice man.please
I don't find this example as a proper one to explain the fat arrow as there is no need for 'this' in that method. The scope of val has no ambiguity so no 'this' is necessary. Remove all 'this' and the output value is 2.
Why are wearing NASA logo on ur T-shirt
I used to work for NASA sometime ago. I have collected few tshirts over time
I watch your videos. But this one is very bad explanation, confusing...
Awesome video! I like it
+Shampoo Wow Thanks. :)
Thanks :)