Factory Functions in JavaScript

Подписаться 263 тыс.

Просмотров 211 тыс.

50% 1

💖 Support the show by becoming a Patreon
/ funfunfunction
Video transcript and code examples here:
/ d38e49802555
💛 Follow on Twitch
We record the show live Mondays 7 AM PT
/ funfunfunction
💛 Fun Fun Forum
Private discussion forum with other viewers in between shows. www.funfunforum.com. Available to patron members, become one at / funfunfunction
💛 mpj on Twitter
/ mpjme
💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
circleci.funfunfunction.com
💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:
quokka.funfunfunction.com
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly RU-vid shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.
🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
⏯ On Fridays, an edited version of the show is adapted for and published on RU-vid.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management

Наука

Опубликовано:

13 сен 2015

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 555

@nosajghoul 8 лет назад

If you paired up with the guy who wrote 'You dont Know Javascript', the concepts would be so well explained they could air it on Sesame Street.

@emilywilliams6403 7 лет назад

Kyle Simpson!

@regularwebguy6414 6 лет назад

Ha ha Javascript Sesame Street

@jidaasare7021 5 лет назад

This just made me burst out loud !!!! lol

@frankvee 5 лет назад

That is just as funny as the guy on the video. Thanks for the laugh. :)

@michaelguild 5 лет назад

I am a Sr dev and have been coding for about 13yrs. I discovered your channel while looking up good js videos for refresher's and interns. I have to say, out of everything out there, this is one of the few channels that really does a good dive into the language. Keep up the awesome work :)

@carminetambascia6355 2 года назад

unfortunately the stopped producing content for a full time job. What a shame.

@michaelguild 2 года назад

@@carminetambascia6355 I thought she quit coding all together to just chill. Pretty sure he's making good passive income at this point :)

@tilakmadichettitheappdeveloper 8 лет назад

Thanks for 2 reasons: 1) For learning English 2) For teaching in a simple way !

@Adam.Garrett-Harris 8 лет назад

Great videos! I discovered this channel last night and watched all of them!

@funfunfunction 8 лет назад

+Adam Harris Wow, awesome! Welcome to the channel! :)

@ericromanenghi6346 8 лет назад

wooooooooowww it's awsome! I was watching all the functional programming videos, and i love them! I only implemented functional prog in Haskell before see your videos, and now i will consider to use javascript in the future!

@mr.w7803 8 лет назад

I really like your show! I've been developing for a while and watching it has made me more confident in my abilities. I'm learning new terms and techniques for things I've been doing already haha. Thanks!! 🙂

@vbikcl 8 лет назад

The speed of the factory vs class instantiation isn't really an issue, it's the memory footprint that you should be mindful of. The issue is that an object factory returns completely separate objects that repeat all of the same code, rather than all referencing the class blueprint. This eats more memory.

@funfunfunction 8 лет назад

+Jon L It's the same thing with memory. If you're doing tens of thousand of them per second, it's relevant. Otherwise, no. Computers are fast.

@autochton 8 лет назад

Example I faced in the Real World(r): Contact database containing thousands of entries. Memory breakdown at ~16K entries, some customers had ended up with 100K+ due to import from previous system. Definitely Flyweight time, and that is more easily done with a prototype to furnish functionality.

@samybounouar1979 4 года назад

@@autochton I those cases you could have used a generator or a stream approach as well. If you have 2Go of data, you wouldn't be able to use either prototype or class, you would need a pointer.

@seancampbell5641 8 лет назад

Just thanks again for putting the work into these videos. Helps a lot

@lifeacoeur7037 8 лет назад

Thanks for this amaaaaaazing channel ! Very clear speech, informative content, shitty humour... Actually english not being your native language makes your videos clearer and a lot easier to understand for non-native english speakers and especially for dumb french people like me :) Please keep doing such a good job !

@zackoncode1261 4 года назад

You just earned my subscription because you give attention to some of this little concepts in programming which is very important to any Software Engineer Junior or Senior...

@ruslansataiev9882 8 лет назад

As always concise, clear and useful. Thank you :)

@HariShekhar 5 лет назад

Again a superb video. You have made factory functions so simple. Thank you

@wishmaker1443 5 лет назад

This is an incredible description! Thank you!

@MrCentripetal 8 лет назад

I love your channel. You learned me so much stuff in a such simple and elegant way ! :)

@velocity1186 5 лет назад

Thank you so much for this video. Got asked to create some factory functions solve something at work and I was a bit lost until I found this video.

@jongeduard 5 лет назад

Thank you for you clear explanation!! Also for your next video (Composition over Inheritance)! I have started learrning JavaScript many years ago (it was actually the first programming language that learned), but it was followed by Java and also C/C++ and some other languages not long after. For years I have mainly programmed in C# now and also done Delphi, and a lot of SQL. Looking back at JavaScript after such a long time and searching around on the internet for the newly added features in ECMAScript 6, I can only say that a lot has changed! Several features (like the lambda function expressions) from other languages have also been added to JS now. But when looking at the OOP part of JavaScript and all the limitations that it has, especially when using the "class" "new" "this" way, which is the way that we are so used to from the other programming languages (Java, C#, C++ and many more), I personally think the OOP thing in JavaScript has just not been finished, it's just not complete. For me it feels actually very weird that there is not a normal/intuitive way to make variables private like in the other programming languages. To many things have to be solved with tricks, like closure, and that weird bind() and call() functions. Things are understandable, but very confusing.

@BigBoxRetroCollector 5 лет назад

These videos are awesome! Thanks a lot. This is the ultimate resource for a developer, and especially for front end devs.

@fhmtz 8 лет назад

Excellent video! Thank you!!! You're the best!

@MapMavericks 8 лет назад

I LOVE your videos and your style. Thanks for making programming easier! CHEERS

@softengi4043 8 лет назад

I like how you got out of a bar and decided "hey I'm going to make a programming video!" haha. Nice wrist band. And nice vid too.

@venicebeachsurfer 6 лет назад

"my gentle soul. It looks like chit"!! lololol. Love it. I like your style. You teach well, and effectively convey poignant points easily. Good job.

@irmoathlete 8 лет назад

You deserve more subs, your explanations are great. Keep up the good work.

@wodemoshou 8 лет назад

This is awesome! Thanks for sharing and teaching!

@tadeoriverosk 7 лет назад

You're a great guy! Thanks so much for doing this!

@BrettCoffin 8 лет назад

You can freeze the "this" in your Class via the BabelJS "es7.classProperties". ie: talk = ()=>{ console.log(this.sound) }; And thank you for your work ! Keep it going it's great !

@ClemmonsX 6 лет назад

it was what I have looking for from long time :) thank you man

@ZawWinnHlaing 8 лет назад

it's a great series and thanks you for sharing @mpjme. i'm stay curious :D

@ianjamiesonmusic 7 лет назад

Very clear, concise, accurate and informative.

@FictionsAndIllusions 6 лет назад

Thanks for posting this video. I've heard of the phrase "factories" in Clean Code book, which is Java based. I didn't understand what it meant or what it does, but now I think I have an idea and I can do this in JavaScript!

@jc-depre 8 лет назад

great video, simple as it should be, thanks mpj

@DannyFeliz 8 лет назад

YOU CRACK ME UP at 01:53 Jaja. Really nice video video

@ThabileVatsha 6 лет назад

hahaha dead!

@lfriedrichsen 6 лет назад

Awesome!! Thank you!! Would love to see more episodes with more function factory examples like a function factory combined with the addEventListener method for use on a web page. Perhaps you have several buttons on a web page, and you need them to run the same function, but you want to pass in different parameters. I can't figure out how to do it without using 'this'. I'm sure you can though!! Thanks for ALL of your great videos!!!!

@diwu183 8 лет назад

Really nice! Thanks for sharing about this!

@baharmand 8 лет назад

Very informative, thanks for the clear explanations.

@scottldn Год назад

Still relevant, and still the best resource for breaking down JS concepts imo

@nchecker00 6 лет назад

whatching your vids not to learn js, but to cheer yourself up

@surajit96 7 лет назад

By the way, I watched lot of your videos lately and totally loved them!!

@joshuavanmeer2002 7 лет назад

This is awesome. Had a good grasp of this binding, but feels like this was the last missing piece of the puzzle.

@ivanmatvieiev8146 8 лет назад

Best channel about JavaScript that I ever seen!

@mileswarburton9676 8 лет назад

Great videos, I really like your method of teaching.

@uclastudentservices309 6 лет назад

Another very good tutorial! Thank you!

@AlexQuirk 8 лет назад

Really great stuff, good work

@kevincarr2334 7 лет назад

Thank you this was a great and educational video!

@zebcode 7 лет назад

just discovered your channel. amazing! thank you!

@funfunfunction 7 лет назад

+Kiran Randhawa thanks for tuning in, Koran! Glad to have you here!

@jakewilson1070 8 лет назад

Wow how have I never stumbled across your videos before? Good stuff, informative, educating and funny :-)

@santosharakere 8 лет назад

Great video. Thank you.

@wishmaker1443 5 лет назад

"It hurts my gentle and beautiful soul to look at this code - it looks like... the shit!" - awesome! :))))

@collin_ph6023 4 года назад

That's gramatically incorrect. When adding "the" in front of the "S" word, it implies that the thing is good. The word "the" in this instance, should be omitted.

@alimertc 4 года назад

@@collin_ph6023 but it sound more french that way

@88Timur88Bahmudov88 3 года назад

@@collin_ph6023 he is not a native speaker, so he probably didn't know about it at the moment of recording the video

@ekaterinahorton768 4 года назад

Great clear video, thank you very much! Subscribed :)

@Vintharas 8 лет назад

Great video! Keep them coming! ^_^

@tenstairs 5 лет назад

So good! I wish I started watching your videos years ago. Better late than never though

@josepservat211 7 лет назад

great job as always !!

@userJorgeCarmine 6 лет назад

Hi, I'm learning JavaScript and English, with your channel I can learn about both

@Revolution3030 2 года назад

This video solves a problem I've been working on for a week with websockets

@yomasanamae5433 6 лет назад

great episode this is too! i’m watching this series and try it one by one.

@SergeofBIBEK 7 лет назад

I'm sold. I'll be doing this instead of the prototype nightmare from now on.

@Saturdayreview98 Год назад

You are my life(time) saver Thank you very very much

@GodOfMacro 8 лет назад

It's good to note that you can also have factory that use shared prototypes with es5 "Object.create(proto)" so you avoid re-creating part of common code, but that won't free you from "this" so it's not prefect... Also making part of your object in a common separated object can be done for performance, where you can pass your object to the common methods instead of having them nicely on your object directly. A bit less expressive, but avoid the trap of this. Not sure I made perfect sense here, hard to do without propers exemples but, even in the case of performance benefices, you can avoid classes.

@Webschool-io 8 лет назад

Wonderful channel congratzzz!!

@funfunfunction 8 лет назад

+Webschool - JavaScript thanks a lot for your kind words. :)

@miheymik7984 8 лет назад

cool. thank you a lot for the explanation!

@matewilk 8 лет назад

Thanks a lot for the video, it cleared a lot for me, especially the Crockford's idea to not to use classes, nor "this" keyword, as it was a bit of a mystery form me, although I have been using factory functions a lot without knowing their proper naming, until this point ;) I would also add, that nowadays, in framework's world, you are bound to use their concepts of writing code, so I use factory functions mainly for writing my own helpers. But I'm happy to hear, where else can I use them ?

@funfunfunction 8 лет назад

Well, the point of having a framework is that you build within its style and parameteters. This is why I'm not a huge fan of frameworks. ;) That said, I've been having a lot of fun with Redux which only deals with functions and data object. Mind-blowingly nice

@sawomirbudzynski8914 5 лет назад

Better example would be if you will pass some parameters to this factory function and then they would be private variables. This would be really competitive to classes. I like both approaches and diversity and speed of JS.

@GrantGryczan 6 лет назад

I love this channel. 😄

@wagnermoreira786 5 лет назад

awesome explanation!

@LearnFrontendNow 4 года назад

Only MPJ could make Factory Functions this fun 😂

@geocine 7 лет назад

I was wondering are you planning to create a paid course so we would have the opportunity to donate? I have never seen a programming video as entertaining, concise yet very clear as yours.

@funfunfunction 7 лет назад

+geocine thanks! I have something like that in the works.

@artgreg2296 6 лет назад

on patreon you can donate www.patreon.com/funfunfunction

@dmh20002 8 лет назад

another good reason to use factories instead of instantiating concrete classes is that you can choose between factories (or parameterize them) at runtime to get different object variants without changing source code. which you would have to do if you directly instantiate a concrete class.

@michaelmbah4952 8 лет назад

Awesome video. really nice!

@RonanConnolly 5 лет назад

You rock man! Keep it up :)

@davidsaint8866 5 лет назад

LMAOOOO!!!! 2:08 made me subscribe, turn on notifications and like this video.

@exquisiteoath 8 лет назад

I think there comes a point where personal style can be allowed to enter into this. I'm a big fan of factories, but I still find plenty of times when binding makes perfect sense; even within factories. Not that I don't appreciate the value of factories, just that I would argue against the unilateral application of any approach. **EDIT** Actually, maybe you can suggest a cleaner way of thinking about something like this: engine.init = function (params) { this.targets = document.querySelectorAll(params.targetClass); Array.prototype.forEach.call(this.anchors, function (element, index, array) { this.doSomethingWithElement(element); }.bind(this)); I'd rather not have to write engine.listenAndExpand so as to ensure late binding. Engine will eventually be returned by a factory after it's been built up and then inside a consumer it can be called like: engineConsumer = factory()init({targetClass: ".myTargets"});

@ShaneCrouch 6 лет назад

Great video, thank you. A little bit cleaner but still similar bind ugliness is to do this below, putting your binds in the constructor, that way any client of your Pet API does not have to know about it. It is hidden. I wonder why frameworks such as ReactJS using the classes a little. MyReactComponent extends React.Component {}; . They must be using a design pattern such as a GoF Template Pattern, which is maybe easier to implement using classes. Not sure, I have been meaning to dig into the why. class Pet { constructor() { this.sound = 'woof'; this.talk = this.talk.bind(this); } talk() { console.log(this.sound); } }

@juliepanko 6 лет назад

dude, you're amazing! :D

@labeebahmad1602 8 лет назад

Awesome show.

@josher3436 8 лет назад

Great video, thanks Dude.

@deepakdeep3498 6 лет назад

This is really awesome. I started learning design patterns in JavaScript. Could you teach us all the design patterns in JavaScript?

@surajit96 7 лет назад

Hi, I think this is also called module pattern. There are two versions of module pattern. If you write the talk function within the body and expose by the property {talk: talk } or simply {talk} (I did not try this!) then it is revealing module pattern or the other way around!!

@funfunfunction 6 лет назад

I thought so for a while by, no, they are not quite equivalent. I don't quite remember what the differences are, but if I had called the video revealing module pattern (which is the full name of the pattern I believe you are referring to) people would have complained that I did not implement it correctly. Thus, the "factory function" terminology.

@WendtRiding 8 лет назад

Great addition to the series. I miss the plant. :(

@funfunfunction 8 лет назад

+Brian Wendt Me too. Hopefully I'll be back in my normal study in a couple of months (we have live-in relatives at the moments hogging it :))

@tylerharden2152 8 лет назад

@mpjme great video! thanks for making it. I understanding using factories over classes is more common/preferable with front-end javascript, however what is your opinion on using classes in the backend. What instances would you recommend using a class outside of the one described in the video?

@funfunfunction 8 лет назад

+Tyler Harden My advice does not change if it's on the frontend, backend, or in an Arduino. If you're creating hundreds of thousands of items per second, use classes. Otherwise, use factories. Always write as simple code as you can get away with, and only reach for clever, optimized code when you actually need it.

@jackquarry3345 8 лет назад

loving the bg music XD

@djb5255 8 лет назад

I never use "this" in C#. Thanks for the insight :-)

@dhanababu4361 8 лет назад

You are great man :), every video linked to another video...

@OhadS 8 лет назад

Hey Matthies! I really like your channel watched many of your videos they all were exciting and interesting. I have a question, In case I want to construct mutable objects is it possible to use factory as well or should I go with classes?

@chenrvn 8 лет назад

1. For functions that are "shared" between objects u dont need mutable objects But for saving state inside the object, u right there is a bit problem. u solve it by object.create and object.assign + see the episode regard to composition.

@funfunfunction 8 лет назад

Hi Ohad! No problem at all. If you change sound to be let instead of const you can change it just fine: const dog = () => { let sound = 'woof' return { setSound: newSound => sound = newSound, talk: () => console.log(sound) } }

@laeeqa310 3 года назад

hahahah you are so funny.... Just love the way you teach... Thank you sir...

@yaronlevy 8 лет назад

Great! thanks

@bryannsotomayor2575 4 года назад

1:53 My favorite part of this video.

@HiepLe5 8 лет назад

I did not quite get the case you refered about 'this' pointing to the wrong object. Can you make a video about 'this'?

@panicogalactico7379 2 года назад

All you are saying is true... except that using arrow methods will solve all the problems that classes might have. Classes rule, but you need to know how to use them

@avimehenwal 3 года назад

great video. Between I wanted to know how to measure how much time did JS took to instantiate a class or a factory function on my computer? How did you measure those numbers? They looks cool

@fzxtT 8 лет назад

Coming from an OOP background, I really appreciate the Class method better. You could always just bind each of the functions of your class in your constructor.

@funfunfunction 8 лет назад

+fzxtT yes, but if you do binding in the constuctor, you're creating new function instances of them all, completely evaporating all performance benefits of the class. You're just creating something that is slower and more convoluted than the alternative for no other good reason than it feeling familiar (even though it really isn't because it's all a leaky and confusing abstraction on top of the prototype anyway)

@fzxtT 8 лет назад

funfunfunction guess you learn something new everyday. thanks funfunfunction.

@richardmccormack2486 6 лет назад

Dude, you are the best! Your videos clear up so much :) What event if the green wristband in the vid from? :D

@Fred-eo4ry 4 года назад

Hi @mpj! Thanks by the video.

@mr.w7803 8 лет назад

I noticed some similarities between the example you showed and the React.js tutorials I've been following. Could be interesting to see somethings where the syntax is compared, maybe it could include a quick overview of ES6 too :)

@SoeaOu 8 лет назад

now i get why new and class keyword in JS suck, thanks

@hyperbooldog7468 5 лет назад

Technically speaking, closures are not completely necessary to understand this concept. Actually, the talk method (which is the closure in sight) can be refactored to a property, assigning to it the value talk instead of a function returning it. Then, the returned object will not be nor contain a closure anymore, since object literals don't create a scope and don't need to remember the generating scope after it's popped out from the call stack, they're just values returned from functions ;-)

@sezerboluk4310 5 лет назад

this is a nice lesson

@tomd5678 5 лет назад

Very good. It looks better, cleaner

@SuperCotik 8 лет назад

Hello Mathias, I really like your show, and agree with most of your points of view. Considering the factory pattern, how do you mix it with the EventEmitter pattern in node ? I mean, when you want your instances to emit events, you can't util.inherits(EventEmitter) because, if I'm right, util.inherits takes a constructor as a parameter. So how do you deal with that aspect ? Thank you ! And keep doing what you do :) Cheers

@dacksmilliken9804 7 лет назад

the factory function is an example of prototypal inheritance, right? the first object we create is 'dog' with the talk method. we then create 'sniffles', which is an instance of 'dog'. when we call talk on 'sniffles', the method does not exist on 'sniffles', so the Js interpreter looks to it's prototype, which is 'dog', and there it sees the talk method, which can be called by 'sniffles'.

@brianpmorin 7 лет назад

Not exactly. I think you're going wrong by saying the first object, 'dog' has a talk method. Instead, dog is a function. That function returns an object with a talk method. If you were to type out the example code and check sniffles.__proto__, you would see that sniffle's prototype is Object, not dog. Happy coding!

@cintron3d 6 лет назад

Anyone else notice that dot in the video? I thought it was on my screen at first - then I thought it was a dead-pixel - then I realized it's actually part of the video.