This is my favorite fucking channel over the entire youtube. Keep up the good work man!
@funfunfunction
8 жыл бұрын
awww
@oldbootz
8 жыл бұрын
Your channel makes me excited for Mondays, which is quite strange considering how much I love the weekend.
@Byamarro2
8 жыл бұрын
17:18 "If it was ES6 then we could use Array.from(arguments)" Well, if it was ES6, we could simply use destructuring operator. spawn(constructor, ...args){ //args is an array inside spawn's body } Also, you wouldn't need to slice first element, as the array would start from second argument. Cheers!
@Emnalyeriar
8 жыл бұрын
Youp! Thats what I came to say :)
@briancarroll4211
8 жыл бұрын
Great video mpj! I am feeling: 1) happy to finally understand this.. and 2) a little bit frustrated with JavaScript's craziness!
@darrenking8941
8 жыл бұрын
Great stuff. One thing that wasn't mentioned explicitly is that when you use "apply", as opposed to "bind", you need to pass in an array. I always remember it this way: when you see the "a" in "apply", remember it requires an "a" as in "array". :)
@charlesnicoll4544
7 жыл бұрын
Writing the code for new is brilliant!! Great for clear definition! (Verbal descriptions and graphical representations are confusing.
@jamin79
7 жыл бұрын
Jesus you are a tutor and a half...... All I need is your videos. Please keep them coming
@ociemitchell
8 жыл бұрын
Great explanation of new. One suggestion for your shell window is to use the up arrow instead of retyping the node command. You can save valuable keystrokes.
@SergeyBaranyuk
8 жыл бұрын
"From scratch" videos is awesome! Thank you mpj! Keep doing these videos
@conoroflanagan2908
8 жыл бұрын
These vids help clarify my reading Secrets of the Javascript Ninja, real js booster. cheers mpj ;)
@MattKander
8 жыл бұрын
So glad you're uploading regularly. This channel is an absolute goldmine of awesome content.
@autochton
8 жыл бұрын
Minor niggle: Your implementation didn't check if the value returned from the constructor was an object - just that it was truthy. The new keyword will only replace the return value if the constructor returns an object, not any other type. :-)
@AquinasProtocol
7 жыл бұрын
Oh, thank you! I was about to comment on how I was confused that "new Date()" returns a Date object, while "Date()" will return a string. Your comment cleared that up for me.
@nicolapedretti235
7 жыл бұрын
That does not clarify it for me though. If as Gert said, the constructor should always return an object, how does calling Date() return a string?
@autochton
7 жыл бұрын
Nicola Pedretti It's twofold. Date() returns a string. new Date() returns an object. This is because, if a constructor does not return an object, the result of new'ing it will be 'this' as seen from inside the constructor. If it _does_ return an object, the result of the 'new' statement will be that object, not 'this'.
@nicolapedretti235
7 жыл бұрын
makes sense!
@daggawagga
8 жыл бұрын
I think it's amazing how you managed to make this clearer than most of the very popular tutorials on this subject (at least for me).
@The-cyber-imbiber
3 жыл бұрын
Hard mode: writing custom object-functions. Insane mode: getting Typescript to not blow up.
@okoiful
7 жыл бұрын
my brain! my brain!!!!
@adrienmentoroc7355
6 жыл бұрын
seriously I keep coming back to check again all the basics with Javascript, the quality of each videos is very high. MPJ should open a school to create a skilled developer army. Keep going ! I learnt a lot thanks to you
@fotios4902
6 жыл бұрын
12:44 About the existence of the 'prototype' property... Well, in the book that you mentioned (JavaScript The Good Parts) on page 47, Crockford says that: "The new function object is given a prototype property whose value is an object containing a constructor property whose value is the new function object (this.prototype = {constructor: this};). The prototype object is the place where inherited traits are to be deposited. Every function gets a prototype object because the language does not provide a way of determining which functions are intended to be used as constructors. The constructor property is not useful. It is the prototype object that is important." So the answer is yes. Thanks for the nice videos, keep on the good work.
@user-qm1tt8fv1c
10 ай бұрын
I am impressed by the quality of the videos, given the time, even the first video of the high order functions is super good for a first video.
@jnfsmile
8 жыл бұрын
20:50 To create a closure, perhaps? Have "private" data?
@sudee999
8 жыл бұрын
A constructor function returning an object is actually pretty useful. Most of the built in constructors (String, Number, Boolean, Date, ...) do this and it allows you to do stuff like: arrayOfNumbers.map(Boolean), which can be super handy if you're writing functional style code.
@funfunfunction
8 жыл бұрын
+sudee999 ooooh
@ellaa_nashwara
5 жыл бұрын
@sudee999, in your example, Boolean will just return true or false(as opposed to an object), doesn't it?
@shreshthmohan
5 жыл бұрын
I had watched the videos about prototype about a year ago. Wasn't very intuitive to me back then. I have been actively using JS regularly since. This subject is now much easier to follow. Thanks!
@Akimb321
8 жыл бұрын
'Spawn more crockford overlodrs' lol, nice starcraft reference :)
@hakimproductive4093
3 жыл бұрын
The title of the video underrates the content of the video.
@andrewrubin1327
7 жыл бұрын
This video was super helpful, dude. I watched it a couple times before implementing the function myself, but it totally made sense in the end. Very grateful for your videos over here -- keep it up. Thanks
@DaveCranwell
8 жыл бұрын
Standing desk eh? Camera position is like you're a City 17 overlord on a giant monitor bellowing edicts from the a tv on the side of a building :P
@funfunfunction
8 жыл бұрын
+Dave Cranwell yeah, sorry about that. I am gonna try to get a less dumb tripod this week.
@shivangchaturvedi237
3 жыл бұрын
Even in 2021, this is the best fucking JS series.
@faisalmohammed8742
7 жыл бұрын
"Spawn more Crockford overlords" got me to subscribe, lol. Great videos, easy to watch and informative. You're doing an awesome job!
@wagnerneto8785
8 жыл бұрын
About the question you asked in 12:52 - Based in what i remember of the course about javascript in code school, prototype is the way javascript found to implement inheritance. The top of this tree of inheritance is the Object and all other objects implements the Object prototype. As a functional language, javascript (and other functional languages) see functions as a first order element (just as Number, Object, Strings and Arrays) so function inherits the prototype of Object, just as the others first order elements has prototype. You can do Number.prototype, Array.prototype and so on. This image can show you that javascript.info/files/tutorial/intro/object/natives.png So...the reason why functions has prototype is because javascript is a functional language and see functions as a first order element. @Edit : I'm not pretty sure that the term "first order element" is a term used in other places but basically first order elements is the native types of elements in the language like int, char,float, boolean in C and other languages Source: javascript.info/tutorial/native-prototypes Greetings from Brazil o/ I spoken with you in BrazilJS. (About the video thing if you remember)
@RobertFerentz
8 жыл бұрын
There is no real inheritance in Javascript. Javascript objects are linked through the prototype, but they do not actually inherit anything. Biologically speaking, inheriting traits is actually getting copies of those traits in the 'child'. The same goes for inheritance in languages like C#, C++, Java etc. In Javascript, if an object doesn't have a property, that property is looked up on it's prototype (and keeps going back the chain of prototypes until it is found or it fails) and if it is a function, it will get called with the original object as the 'this'. In Javascript, you could (potentially and dangerously) change an object's prototype at runtime, while that would be impossible in C#.
@wagnerneto8785
8 жыл бұрын
yeah, i just abstracted that as "the way javascript found" :)
@MmmMmmGood17
8 жыл бұрын
Yep...I gotta watch the whole series (:... good stuff mpj!!
@joseceron4670
2 жыл бұрын
Great explanation about new keyword with fxs! Thanks
@sabihahmed760
Жыл бұрын
still best place to learn javascript this guy is a legend
@mallowismallow
7 жыл бұрын
you should have waaaayyyy more views... these are fantastic tuts!
@ruegen_9443
8 жыл бұрын
Great episode - really enjoyed this one (I enjoy all of them really).
@dansmar_2414
Жыл бұрын
This is a gold mine
@mrjosephDJ
8 жыл бұрын
I love watching your channel. It really accelerates self learning.
@BaselHamadeh
8 жыл бұрын
Your videos have taught me a lot. But would you make a video where you describe your workflow when starting a new porject. ofcourse each project has its on set of tools and different requirements depending on the problem its solving. And the tools change fast as new ones come up. But a generic web project in JavaScript. how do you start with studying the problem. setting up your dev tools and starting coding. its educating to see how other people approche problem solving.
@atxaqualion75
8 жыл бұрын
I really enjoyed this deep dive, for the various nuggets (convert to array, arguments, how new works) mined thruout the show. Thanks mpj!!!1one1
@SamBakerRichards
6 жыл бұрын
"spawn" made me ROFL! Keep up it, great stuff. I learn something new every video.
@nromancarcamo
6 жыл бұрын
hahaha the slowmotion was very funny haha good video
@sergysergi
8 жыл бұрын
Thank for the great show. I think you forgot to mention one important thing. If a function is invoked via the 'new' keyword and returns a primitive value - this return statement is ignored and implicitly created object returned instead.
@christianhorauf9958
8 жыл бұрын
What a great show! Finally we get some real meat again. :D So spawn() mimics new perfectly? Or is it possible, that there are further things under the hood, we are not aware of? Like setting the .constructor reference of Functions, or "reserving Memory" what new is used in other languages like C++ for. I was wondering this series is targeting? Will we use the spawn-function in combination with classes to _.flow (or R.pipe or R.compose or...) functions? So maybe something like this might be interesting to examine: const curriedSpawn = _.curry(spawn); const managedCreate = _.flow( censorSemicolons, curriedSpawn(Person) ) Does anybody know if something like MPJs spawn() is already part of a functional library like lodash or ramda?
@funfunfunction
8 жыл бұрын
+Christian Hörauf it should be noted that while I'm pretty sure that spawn is functionally correct (99% sure) it's horrible from a performance standpoint because setProtypeOf has very bad performance characteristics. It's fantastic when explaining these things, but I think there are better ways of going about it if you're building a function as a library. Object.create probably.
@timmalbers5661
8 жыл бұрын
spawn can't be curried like this, because spawn.length will be one since it only has one named argument. (It will be called directly when doing curriedSpawn(Person))
@christianhorauf9958
8 жыл бұрын
You are right. But not cause of the length is one, because besides the constructor we would also pass in the constructors parameters. instead we don't know how many parameters are required. so you would have to set the _.arity in addition or instead of currying partially apply it. But I was not aware that we were discussing those differences as well :) I am just curious what the next topic if MPJ will be about ;)
@TheDataArchitect
6 жыл бұрын
Man, you deserves a clap :) you are opening my mind towards what internally happens in programming engine :)
@nehajain7720
6 жыл бұрын
Nice to here you...Pls keep continue on the great learning....
@malkeynz
8 жыл бұрын
"We want to do this in ECMAscript 5 for consistency reasons" That's kind of ironic, because Object.setPrototypeOf is also an ES6 method. Also it's not recommended to be used because changing the prototype of an already existing object (in this case from the default Object.prototype to Person.prototype) has negative performance implications (see MDN). Really you should have done: var obj = Object.create(Person.prototype). I realize it's just for demonstration purposes, but I just wanted to point that out in case anyone watching thinks using setPrototypeOf (or obj.__proto__ = ...) is a good idea.
@danielorodriguez1689
8 жыл бұрын
I was going to say exactly the same thing. The faster, more clear and smaller in code way to do it is Object.create on the prototype
@joshuacoppersmith
7 жыл бұрын
For the record, he covers the better Object.create issue in the previous video. But that setPrototypeOf is ES6 is anachronistic.
@trappedcat3615
6 жыл бұрын
10:32 obj (ohbeej) -- forever stuck in my head
@CynicatPro
8 жыл бұрын
My cat loves this video. he was sitting on my lap watching the whole thing. X3
@SayuStrife
8 жыл бұрын
Function is an object. *Brain Explodes*
@antoniopavicevac-ortiz8886
8 жыл бұрын
wha? "BOOOOOOOOM!"
@cevxj
7 жыл бұрын
It's easier to reason with "everything in js is an object".
@jackyoncom
7 жыл бұрын
I think you probably forgot to point out another benefit from your order videos, that is: prototype will be little "faster" than factory function if you create more than 10000 items :)
@wmhilton-old
8 жыл бұрын
Beautiful! I've seen this before in written form, so I knew what to expect, but every time it makes a little more sense. And by that I mean it becomes clearer how "new" works. WHY does it work that way? Why have the weird edge case for if the constructor returns an object? Why set the prototype to Person.prototype instead of just Person? Was new added to JavaScript in version 2 and had to be backwards compatible in some funky way for browsers that didn't support the "new" keyword?
@ShobhitGupta12
6 жыл бұрын
I think the new's behavior to return whatever is returned in constructor is to support Encapsulation. I can totally think of so many Encapsulation examples.
@NazS2
8 жыл бұрын
+1 for the rebuild approach
@milehighsi
6 жыл бұрын
Hey mate, love the series and channel. I know these videos are a little old but just some quick feedback: the code editor starts in the top left with little/no 'padding'. This is okay on desktop but can get cropped on other devices. I'm watching on my Apple TV and the first line is always chopped. Anyway thanks again MPJ I really like your style!
@zachthenebula
8 жыл бұрын
Thank you for taking time to explain things to us newbies
@kavianrabbani5382
6 жыл бұрын
hey man, you and your explanation are amazing, thanks for your efforts (from a non-native speaker to the other one)
@aswekils
8 жыл бұрын
Can you do a video series on "Eloquent JavaScript " ? So that way you cover the entire Javascript? That would be super helpful
@SumanKumar-ek9yw
6 жыл бұрын
Great job MPJ
@mad4zakaria
7 жыл бұрын
As per Mdn's docs. the usage of Object.setPrototypeOf has performance penalties and they recommend using Object.create instead. and by the way, Object.create would be the perfect fit for the new function that you have tries to recreate. Cheers!
@funfunfunction
7 жыл бұрын
+zakaria el condor hi! The purpose of this video is to explain the new keyword. The series goes through all variants of creating objects, including object.create.
@johnx9175
7 жыл бұрын
SIMPLY awesome!!! EVERYTHING
@pasqualenettis9329
7 жыл бұрын
for the first two steps you could use Object.create (). It would be shorter and would work just fine
@funfunfunction
7 жыл бұрын
+Pasquale Nettis the purpose of this video series is to explain the different ways of doing object creation in JavaScript. There is a separate episode about Object.create
@dalebailey1626
8 жыл бұрын
Could you do a video about interfaces/decorators, it would also be interesting to see how the shortened work day has affected you at work :).
@asmartbajan
6 жыл бұрын
7:06 Ha ha. The grammar on the card is correct. But "What is it exactly that new do?" would _definitely_ be incorrect! We would have to substitute "does" for "do" in that instance. I'm a native English speaker, but I know it's a hard language to learn. So congrats on accepting the challenge to speak and write it!
@mahdip6103
7 жыл бұрын
Great Video. if a function being called through a `new` keyword and is returning a value only if it returns an `Object` it will override the this value. if it returns any other data type it will fallback to return the `this`
@jlmonroy13
7 жыл бұрын
You can get the second argument of the spawn function like this: arguments[1] Try it!
@eggertjohannesson
7 жыл бұрын
It would work for this example but he is demonstrating a general spawn method which would need to allow for possible constructors with more than 1 argument. Therefor getting everything from index 1 is needed.
@markadell
8 жыл бұрын
I also suggest JavaScript: Understanding the Weird Parts course at Udemy, these concepts are very clearly explained.
@eatfrenchtoast
4 жыл бұрын
"Javascript is a language that has been around a really long time". Making me feel old...
@learnityourself
8 жыл бұрын
Great talk, i think it would be awesome to make series of small project applying everything you teach us :) Thanks anyways cheers and love
@sladav4046
8 жыл бұрын
The spawn function and the new keyword aren't exactly identical! Try returning a primitive (eg. return 7) from the constructor and spawn will break where the new keyword doesn't. The short-circuit logic on the return should also check that the constructor returns an object/function: return (Object(constructor.apply(obj,args)) === constructor.apply(obj,args)) || obj. Still an awesome episode!
@funfunfunction
8 жыл бұрын
Excellent find! I have such a good audience.
@HSMAdvisor
6 жыл бұрын
This is so cool. i wish i watched it earlier because i spent an hour creating this: /** * Instantiate object, passing array or arguments into constructor * @param {any} pageConstructor * @param {any[]} args */ function createPageInstance(pageConstructor, args){ var page = Object.create(pageConstructor.prototype); return pageConstructor.apply(page, args) || page; } I wonder if Object.create is any different because there seems to be issue with setPrototypeOf not being supported everywhere...
@NixTheG0at
5 жыл бұрын
why didnt u use call() instead of apply?
@GrantGryczan
6 жыл бұрын
Now _that_ is intuitive.
@kauePBD
8 жыл бұрын
Great, great video!
@josher3436
7 жыл бұрын
My barebones attempt at MPJ's Spawn/New: function spawn (fcn, arg1) { let obj = {}; obj.__proto__ = fcn.prototype; fcn.call(obj, arg1); return obj; } :)
@rlee431
6 жыл бұрын
Thanks for the awesome video. You really explained it well.
@kozmicluis2552
8 жыл бұрын
Nice stuff, was it crockforg as in Douglas CrockforD? // NVM I finished the video haha, he truly hates Automatic Semicolon Insertion and prototypal inheritance (nowadays).
@rja421
8 жыл бұрын
Good stuff. Thanks.
@lenaggar
8 жыл бұрын
great episode man, as always PS. I liked the wider view of the camera more
@AmaanKulshreshtha
5 жыл бұрын
I believe using Object.create would be a better approach as per the docs here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf . As you mentioned, objects don't have an internal prototype property. Therefore, new function can also be written like this. function spawn(constructor){ var obj = Object.create(constructor.prototype); var argsArr = Array.prototype.slice.call(arguments, 1); constructor.apply(obj, argsArr); return obj; }
@dfence1985
7 жыл бұрын
In your implementation of spawn(), you're you're taking only one of all the possible arguments new could receive. How would you make it work with any number of args? Would you iterate over the arguments object using Array's iteration capabilities? Does the apply function take an array of args?
@HardwareAddiction
7 жыл бұрын
It seems prototype properties don't register if the constructor returns. You didn't relate to those errors. Why?
@TheRavageFang
8 жыл бұрын
Sorry for being picky, BUT! 19:00 you could just call var argsArray=Array.prototype.slice.apply(arguments, [1]) and call constructor.apply(obj, argsArray) instead of two separate slice calls. Love your vids though!
@HardwareAddiction
7 жыл бұрын
Not only that. You can shorten it: [].slice.apply...
@shmckay
6 жыл бұрын
It would be a bit easier to capture the args with the restful param: function spawn(constructor, ...args) { // rest const obj = {} Object.setPrototypeOf(obj, constructor.prototype) return constructor.apply(obj, args) || obj }
@funfunfunction
6 жыл бұрын
Yeah, but I wanted to keep the video focused on the subject at hand. Explaining the spread would have required a detour. Had I made the video today, maybe, and certainly next year, yes.
@cantirv
3 жыл бұрын
For performance, which is best case to use: factory function or 'new' function with prototype?? Tnx.
@jamesriall432
7 жыл бұрын
What's the helper tool which pops up a tip on the arguments which can be passed to apply at 13:58?
@cmarkme
7 жыл бұрын
You remind me of a young 'Dr. King Schultz' from the Film, Django Unchained (2012).. It's a compliment :-)
@stasdusha
2 жыл бұрын
Almost right, but if constructor will return primitives, it will not work. But in native implementation, it will return this.
@u4yk
8 жыл бұрын
Maybe I'm being a tad bit pedantic, but there's no A in SEMICOLONS. Also, I would have gone with: constructor.apply(obj, [].slice.apply(arguments,1)); and saved myself the extra typing -- I think Mr. Crockford would agree. Still, great video!
@malkeynz
8 жыл бұрын
You'd want to use [].slice.call instead of apply.
@u4yk
8 жыл бұрын
You're right. I don't know why I put apply there. Good catch.
@funfunfunction
7 жыл бұрын
SEMICOLANS is a lolcat-speak joke. :) As for the code example, this video is targeted towards devs new to JS and didn't want to have to do a diversion into slice and apply.
@auchucknorris
5 жыл бұрын
my one question is how does it know to apply your second argument of "semicolons!!" when only one argument is stated in the function "spawn", which is the parameter of what prototype to get, then your second argument is just put into the "person" function parameter? why does it do this?
@SlavaShp
7 жыл бұрын
There is an edge case in which the c'tor returns a falsy value such as false or an empty array. In this case your spawn function will return wrong result. There is a convention in JS to set default value with || which I don't really like. I prefer to use some defaults method. It's an issue that together with weird JS castings hides a lot of bugs. Do you have any rules or conversations about it? Or you just hope your tests will catch those edge cases?
@slidewineder3953
8 жыл бұрын
GOOODDDD MORNING
@L8rCloud
6 жыл бұрын
If you have a project that you need to refactor - Is it worth rewriting it in ECMAScript 6, or should I just leave it alone (if it ain't broke don't fix it)?
@FedeOttalagano
8 жыл бұрын
Great video, man!
@Radiokot42
8 жыл бұрын
Nice video!
@VikasKapadiya1993
8 жыл бұрын
You should have added thug life meme when spawn() got working. It would be priceless
@doncoder13
8 жыл бұрын
I video about your opinion on typescript will be cool as well !
@victorlongon
8 жыл бұрын
nice to see you reimplementing some of the most concepts in js. I thought I would just mention that creating object from object is a nice way to inherit prototype, like var bar = Object.create(Foo). If somebody else is interested in having a look at OLOO (från getify): gist.github.com/getify/5572383 Thanks for the video and sharing knowledge!
@Derrickasaur
8 жыл бұрын
Are there any pitfalls to preferring object notation instead of 'this' wherever possible? Cause, seems like you can get surprisingly far without ever even using 'this'. Particularly with the help of **gasp** another lib; specifically underscore's _.clone and _.extend var person = { talk : function(said) { console.log('I say: ', said) } } var crockford = _.clone(person) crockford.talk('SEMICOLANS!!1on1') var mpj = _.chain(person).clone().extend({ wastePaper: function() { throw err }}).value() mpj.talk('goood monday morning')
@funfunfunction
8 жыл бұрын
Golden star to you! I pretty much never use new, this or prototypes when I code. The video factory functions shows a bit how it's done.
@Derrickasaur
8 жыл бұрын
Cool! Glad we're on the same page there. Indeed, I watched (and just re-watched) the FFF FFiJ episode. Really appreciate your example and the implied ability to control exactly what kind of object and properties are spit out the factory. Short, simple and no fancy this, prototype or 'new' words to deal with - you don't even have to call a factory function a factory - it's just a funcing function!
@booskie11
8 жыл бұрын
Great video! Just curious.. couldn't you have just said [arguments["1"]] to get the second argument and insert it into an array instead of messing with Array.prototype.yadda....?
@FictionsAndIllusions
6 жыл бұрын
Thanks for this video. I had to watch it 2-3 times to get the gist of this concept. I found the "constructor.prototype" part the most confusing because in the prototype video, the example consisted of setting the prototype of the cat to animal, which contains the method talk(). My question is, why do we have to set Prototype of obj to constructor.prototype instead of just "constructor"? Would writing: Object.setPrototypeOf(obj, constructor) not mean the same thing? What is the difference?
@rindiainvestments9878
8 жыл бұрын
Great video! What is the Atom plugin you use for such nice intellisense / autocomplete-prompt?
@justadev____7232
4 жыл бұрын
"If you cheated...." LMAO!!!!
@gbcr09
7 жыл бұрын
Firstly, awesome video! Secondly, could we substitute the lines 13 and 14 for var obj = Object.create(Person.prototype)?
@AdamCedric
8 жыл бұрын
I love your video. thanks a lot. Gratitude :) :) :)
Пікірлер: 254