ES6 Arrow Functions in JavaScript tutorial ( Fat Arrow Function Expression es2015, ecma6)

Рет қаралды 96,237

Күн бұрын

What is fat arrow functions, How different they are from regular function expressions in terms of syntax, scoping, and lexical this.
#javaScript #fatArrow #ArrowFunction
*My Udemy Courses
www.udemy.com/js-masterclass/
www.udemy.com/course/react-ho...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* kzfaq.info_cs_...
Note: use translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
transpiler , typescript, ecma5, html5, latest javascript tutorial, shorter function

Пікірлер: 154

@user-zb5jp4ti1d 7 жыл бұрын

fat arrow functions do not have their own 'this.' really cool. thanks v much.

@amicoz 5 жыл бұрын

And that's the most important information about far arrow functions, which lets us decide when to use fat arrow syntax!

@kiberkomar 7 жыл бұрын

You are born to teach others!!!!.

@asmartbajan 6 жыл бұрын

Yes, I agree. Some people just have that gift.

@benhedgepeth3213 7 жыл бұрын

You succeed where many video tutorials fail. Nice job using very basic examples just to illustrate the dynamics.

@xuelianwang5300 6 жыл бұрын

Very clear explanation! Thank you for taking effort to make this video!

@djwave28 5 жыл бұрын

This is so cool. Used fat arrow in a forEach to reference "this" without binding.

@MrAKGarg007 5 жыл бұрын

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

@JohnnyFive 7 жыл бұрын

Great video. I tried many tutorials, but you made it easy!

@SnehasishGhoshSg 5 жыл бұрын

Keep doing this. I have continued to back to you when i have some issue with some concept.

@ruchirai5775 5 жыл бұрын

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

@Okruh_Kolumbiya 5 жыл бұрын

I keep watching different videos on dif topics. And want to say you doing very good job! Thanks

@aritradasbairagya2439 5 жыл бұрын

Very clear explanation. I tried few tutorials but you really made it easy to understand. Thanks for the effort.

@anaduhovny3421 Жыл бұрын

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!

@Mr_BetaMax 7 жыл бұрын

Thank you! That helped me understand the fat arrow!

@amicoz 5 жыл бұрын

A short tutorial with lot of insight for a beginner like me! Please keep uploading ... :)

@dod9652 8 жыл бұрын

Amazing tutorials!, You are so good in doing this lectures. TNX!

@deeproy7292 5 жыл бұрын

thank you...awesome content...I feel according to my knowledge...you did justice to this topic

@Ezzedini 5 жыл бұрын

thank you so fucking much, in 5 min i understood what my internship tried to teach me in 4 months.

@Techsithtube 5 жыл бұрын

Yacine , glad to have helped. keep on learning! and good luck with your internship.

@jeffjgarrett269 7 жыл бұрын

Great video, thanks for the insight.

@jikiwaify 7 жыл бұрын

Great explanation, thank you !

@vishvajeetsingh9843 4 жыл бұрын

Wow You are doing a great work for humanity

@hemanthaabeywardena3442 6 жыл бұрын

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.

@Techsithtube 6 жыл бұрын

appreciate the kind comment. That makes me motivated to make more tutorials.

@ansarmobile9758 6 жыл бұрын

Thanks Sir. May your service continue to the Humanity.

@rammaheshwari3008 5 жыл бұрын

One of the Best Teacher in the Universe

@ajotel94 7 жыл бұрын

thaaaaaaaanks mateeeeee! great video! love it!

@steriadi 5 жыл бұрын

You explained very well!

@AlexBonillas 8 жыл бұрын

Very good explanations, keep it up. Cheers!

@elavanresu 6 жыл бұрын

Awesome video, you helped me a lot!!! Thanks buddy.

@ill-fatedstranger447 5 жыл бұрын

Clear explanation with good examples.

@sureshkumaranbu 4 жыл бұрын

Good know underscore works, new information

@ashutoshsingh5568 3 жыл бұрын

I knew it you're from NASA. 😅 You teach brilliantly.

@bharathmadesh1761 5 жыл бұрын

Great Tutorial....:) Thanks :)

@navidansari1895 5 жыл бұрын

watching this video for the interview purpose. Clear cut explaination . thanx buddy....

@Techsithtube 5 жыл бұрын

Good luck with your interview Navid!

@vmjacob123 5 жыл бұрын

Great Video. Thank you so much.

@ruchirai5775 6 жыл бұрын

very clear and crisply explained.

@Techsithtube 6 жыл бұрын

Thank you Ruchi ! Keep learning !

@VinaySingh-nq4ge 5 жыл бұрын

Thanks, sir for great explanation ...nice

@OhGurov 8 жыл бұрын

Waiting for the next videos! Really good explanation. It would be great, if you will use more complex and usable examples.

@Cmatsoukis 8 жыл бұрын

wysiwyg

@RajKumar-kt5pd 7 жыл бұрын

awesome man. great

@ShampooWow 8 жыл бұрын

Awesome video! I like it

@thesunfei 8 жыл бұрын

Nice,so easy to use math functions now.

@theskysthelimit. 4 жыл бұрын

thank you, nice explanation..

@vaibhavatiitm007 8 жыл бұрын

Dear, Awesome Explanation. You Always Rocks...!!

@Techsithtube 8 жыл бұрын

+Vaibhav Shrivastava Thanks you!

@mikematsumoto 7 жыл бұрын

thank you for the videos

@hiteshkumarmakwana7761 7 жыл бұрын

Thanks brother :)

@gagangupta1255 4 жыл бұрын

One of the easiest video that explained fat arrow this concept.

@Techsithtube 4 жыл бұрын

Thanks Gagan for watching and an awesome comment

@yourManLan 5 жыл бұрын

thank you! what a g

@hasanm4973 6 жыл бұрын

Beautifully explained. Thumbs up

@Techsithtube 6 жыл бұрын

Thanks for watching! :)

@theunbearables 8 жыл бұрын

thanks mate

@abidts2333 3 жыл бұрын

I believe you are being a part of developing react js

@binoysubhakumar9955 6 жыл бұрын

Awesome!.

@javascript_developer 6 жыл бұрын

Cool Thanks.

@georgie_e 5 жыл бұрын

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?

@wasifshehzad1987 6 жыл бұрын

it was really helpful.

@Techsithtube 6 жыл бұрын

Thanks for watching!

@bhanubaghel3012 5 жыл бұрын

now i really understood arrow function deeply i used it lot but i don't have a clue that it can work differently

@anthonyhoang1044 6 жыл бұрын

Big fan of all your tutorials. I see you're also from San Jose. Do you teach classes in the area?

@Techsithtube 6 жыл бұрын

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.

@ankurvishwakarma8731 6 жыл бұрын

Perfect :)

@pricesmith8450 4 жыл бұрын

Thank you. Hard to find comprehensive videos on some of these things.

@pricesmith8450 4 жыл бұрын

Good ones***

@DanielSternCode 8 жыл бұрын

Very cool format! What program are you using to add your overlays?

@Techsithtube 8 жыл бұрын

+Code Whisperer Camtasia

@DanielSternCode 8 жыл бұрын

Thanks

@Rino37 3 жыл бұрын

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!

@denonbasf3117 2 жыл бұрын

Thanks :)

@sahilarora7186 3 жыл бұрын

Thank you sir

@Techsithtube 3 жыл бұрын

Welcome!

@seenuvasanv 6 жыл бұрын

Thanks,

@AshwaniSharma-vg5xm 3 жыл бұрын

brilliant

@moswilam91 5 жыл бұрын

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

@jbrabec6811 4 жыл бұрын

"if using curly braces you should probably use 'return', otherwise it won't work" - LOL, awesome humor!

@MBehtemam 6 жыл бұрын

thanks for amazing video , i have question , is it thin arrow ? const a => "hello"

@omermindivanli2981 5 жыл бұрын

thanks :)

@ruchirai5775 6 жыл бұрын

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

@Techsithtube 6 жыл бұрын

I have started a series on React . And after few important fundamentals about react. I will go into redux.

@albjzan 6 жыл бұрын

Super helpful

@Techsithtube 6 жыл бұрын

Thanks for watching! :)

@whome1319 6 жыл бұрын

thanks

@martinbozinovski 5 жыл бұрын

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

@deepsandy3370 5 жыл бұрын

Sir which book is best for learning js

@nofavors 6 жыл бұрын

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.

@Techsithtube 6 жыл бұрын

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 ?

@nofavors 6 жыл бұрын

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!

@sushantkshirsagar 6 жыл бұрын

Hey . Thanks for the upload. Do you work in Nimble Storage ?

@Techsithtube 6 жыл бұрын

yes i do

@sushantkshirsagar 6 жыл бұрын

The moment I saw your video I remembered you :) Your videos are really good.

@Techsithtube 6 жыл бұрын

you also work at nimble?

@sushantkshirsagar 6 жыл бұрын

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.

@Techsithtube 6 жыл бұрын

oh i see. I am in the Nexgen UI team . Sok You are learning JavaScript now :)

@pavansaibitla9008 10 ай бұрын

Are you using vs code? If not what type of ide it is

@dimitargetsov9690 6 жыл бұрын

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

@Techsithtube 6 жыл бұрын

Good point. thanks for sharing!

@someoneoutthere1866 3 жыл бұрын

Thank you for the (...n)!!!

@Techsithtube 3 жыл бұрын

I am gald it helped. Thanks for watching!

@jainshilpi3 6 жыл бұрын

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?

@Techsithtube 6 жыл бұрын

es6 is a new version of javaScript so it is JavaScript.

@jainshilpi3 6 жыл бұрын

techsith so we can say javascript is faster. This question is asked in interview

@Techsithtube 6 жыл бұрын

you should say ES6 is JavaScript so Its like saying "Am I faster than me" You know what I mean?

@jainshilpi3 6 жыл бұрын

techsith yes sir.. Thanku so much

@jaffareddy6449 5 жыл бұрын

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

@Techsithtube 5 жыл бұрын

its becase every function has its own this. so this inside the settimeout is belongs to that function only.

@ayyappaaryan3121 6 жыл бұрын

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

@Techsithtube 6 жыл бұрын

which example are you referring to?

@ayyappaaryan3121 6 жыл бұрын

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

@ayyappaaryan3121 6 жыл бұрын

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

@Techsithtube 6 жыл бұрын

That is correct

@ayyappaaryan3121 6 жыл бұрын

can we replace function key word in parent object

@jainshilpi3 6 жыл бұрын

nice video.could you please explain es6 symbol?

@Techsithtube 6 жыл бұрын

Symbol is a new data type in JavaScript it allows you to create uniqure values.

@DKolha 5 жыл бұрын

Is this fat arrow concept exactly the same as lambdas? or there is important differences?

@Techsithtube 5 жыл бұрын

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.

@DKolha 5 жыл бұрын

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

@rahulchaube2898 3 жыл бұрын

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

@reemshabir5029 4 жыл бұрын

Why in arrow functions var keyword is giving an error?

@saksham.malhotra 5 жыл бұрын

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

@Techsithtube 5 жыл бұрын

this inside the setTimeout is a closure

@kartikbisht56 4 жыл бұрын

10:03 spread? I guess its rest operator.

@ajas105 7 жыл бұрын

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.

@Techsithtube 7 жыл бұрын

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/

@ajas105 7 жыл бұрын

Thank you for taking the time to explain it. It makes sense now.

@SapanKumarDas 4 жыл бұрын

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()

@shubhambhagat1572 4 жыл бұрын

I think instead of spread operators you meant to say Rest Parameters at 10.35 ?

@aswebdev 6 жыл бұрын

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' }]

@Techsithtube 6 жыл бұрын

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

@udayyadav9230 5 жыл бұрын

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

@Techsithtube 5 жыл бұрын

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.

@WanderingBackpacker 5 жыл бұрын

can I borrow your brain for tomorrow? I have an interview

@lexxfirecore123 5 жыл бұрын

this.that, no wonder why peope hate JS'ers

@qaerdogan 6 жыл бұрын

JavaScript has a lot of trick. I am scared.

@avertry9529 3 жыл бұрын

NASA ...lol

@anakin0405 3 жыл бұрын

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.

@RajKumar-kt5pd 7 жыл бұрын

hey increase your voice man.please