The 'new' keyword - Object Creation in JavaScript P4 - FunFunFunction #50

[@harshvardhanbhati9001]

This is my favorite fucking channel over the entire youtube. Keep up the good work man!

[@funfunfunction]

awww

[@oldbootz]

Your channel makes me excited for Mondays, which is quite strange considering how much I love the weekend.

[@Byamarro2]

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]

Youp! Thats what I came to say :)

[@briancarroll4211]

Great video mpj! I am feeling: 1) happy to finally understand this.. and 2) a little bit frustrated with JavaScript's craziness!

[@darrenking8941]

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". :)

[@sudee999]

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]

+sudee999 ooooh

[@ellaa_nashwara]

@sudee999, in your example, Boolean will just return true or false(as opposed to an object), doesn't it?

[@charlesnicoll4544]

Writing the code for new is brilliant!! Great for clear definition! (Verbal descriptions and graphical representations are confusing.

[@adrienmentoroc7355]

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

[@ociemitchell]

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.

[@autochton]

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]

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]

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]

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]

makes sense!

[@jamin79]

Jesus you are a tutor and a half...... All I need is your videos. Please keep them coming

[@SergeyBaranyuk]

"From scratch" videos is awesome! Thank you mpj! Keep doing these videos

[@daggawagga]

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

[@conoroflanagan2908]

These vids help clarify my reading Secrets of the Javascript Ninja, real js booster. cheers mpj ;)

[@MattKander]

So glad you're uploading regularly. This channel is an absolute goldmine of awesome content.

[@fotios4902]

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.

[@FabianKurata]

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.

[@shreshthmohan]

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!

[@andrewrubin1327]

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

[@dansmar_2414]

This is a gold mine

[@christianhorauf9958]

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]

+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]

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]

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

[@The-cyber-imbiber]

Hard mode: writing custom object-functions. Insane mode: getting Typescript to not blow up.

[@jnfsmile]

20:50 To create a closure, perhaps? Have "private" data?

[@malkeynz]

"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]

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]

For the record, he covers the better Object.create issue in the previous video. But that setPrototypeOf is ES6 is anachronistic.

[@wagnerneto8785]

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]

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]

yeah, i just abstracted that as "the way javascript found" :)

[@okoiful]

my brain! my brain!!!!

[@sergysergi]

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.

[@milehighsi]

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!

[@faisalmohammed8742]

"Spawn more Crockford overlords" got me to subscribe, lol. Great videos, easy to watch and informative. You're doing an awesome job!

[@wmhilton-old]

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]

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.

[@atxaqualion75]

I really enjoyed this deep dive, for the various nuggets (convert to array, arguments, how new works) mined thruout the show. Thanks mpj!!!1one1

[@mrjosephDJ]

I love watching your channel. It really accelerates self learning.

[@TheDataArchitect]

Man, you deserves a clap :) you are opening my mind towards what internally happens in programming engine :)

[@mallowismallow]

you should have waaaayyyy more views... these are fantastic tuts!

[@MmmMmmGood17]

Yep...I gotta watch the whole series (:... good stuff mpj!!

[@hakimproductive4093]

The title of the video underrates the content of the video.

[@dfence1985]

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?

[@shivangchaturvedi237]

Even in 2021, this is the best fucking JS series.

[@sabihahmed760]

still best place to learn javascript this guy is a legend

[@SamBakerRichards]

"spawn" made me ROFL! Keep up it, great stuff. I learn something new every video.

[@DaveCranwell]

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]

+Dave Cranwell yeah, sorry about that. I am gonna try to get a less dumb tripod this week.

[@BaselHamadeh]

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.

[@L8rCloud]

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

[@kavianrabbani5382]

hey man, you and your explanation are amazing, thanks for your efforts (from a non-native speaker to the other one)

[@jackyoncom]

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

[@victorlongon]

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!

[@sladav4046]

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]

Excellent find! I have such a good audience.

[@ruegen_9443]

Great episode - really enjoyed this one (I enjoy all of them really).

[@joseceron4670]

Great explanation about new keyword with fxs! Thanks

[@Akimb321]

'Spawn more crockford overlodrs' lol, nice starcraft reference :)

[@CynicatPro]

My cat loves this video. he was sitting on my lap watching the whole thing. X3

[@aswekils]

Can you do a video series on "Eloquent JavaScript " ? So that way you cover the entire Javascript? That would be super helpful

[@NixTheG0at]

why didnt u use call() instead of apply?

[@kozmicluis2552]

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

[@SlavaShp]

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?

[@markadell]

I also suggest JavaScript: Understanding the Weird Parts course at Udemy, these concepts are very clearly explained.

[@jamesriall432]

What's the helper tool which pops up a tip on the arguments which can be passed to apply at 13:58?

[@mahdip6103]

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`

[@cantirv]

For performance, which is best case to use: factory function or 'new' function with prototype?? Tnx.

[@booskie11]

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

[@rindiainvestments9878]

Great video! What is the Atom plugin you use for such nice intellisense / autocomplete-prompt?

[@NazS2]

+1 for the rebuild approach

[@asmartbajan]

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!

[@mad4zakaria]

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]

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

[@trappedcat3615]

10:32 obj (ohbeej) -- forever stuck in my head

[@zachthenebula]

Thank you for taking time to explain things to us newbies

[@AbdurrahmanMaged95]

Is that atom ? May I know the name of the package you are using that autocomplete and give you hints ?

[@HardwareAddiction]

It seems prototype properties don't register if the constructor returns. You didn't relate to those errors. Why?

[@learnityourself]

Great talk, i think it would be awesome to make series of small project applying everything you teach us :) Thanks anyways cheers and love

[@SayuStrife]

Function is an object. *Brain Explodes*

[@antoniopavicevac-ortiz8886]

wha? "BOOOOOOOOM!"

[@cevxj]

It's easier to reason with "everything in js is an object".

[@HSMAdvisor]

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

[@nehajain7720]

Nice to here you...Pls keep continue on the great learning....

[@TheRavageFang]

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]

Not only that. You can shorten it: [].slice.apply...

[@gbcr09]

Firstly, awesome video! Secondly, could we substitute the lines 13 and 14 for var obj = Object.create(Person.prototype)?

[@dalebailey1626]

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 :).

[@lenaggar]

great episode man, as always PS. I liked the wider view of the camera more

[@FictionsAndIllusions]

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?

[@pasqualenettis9329]

for the first two steps you could use Object.create (). It would be shorter and would work just fine

[@funfunfunction]

+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

[@wilsonibekason]

Please what code editor do you use sir

[@auchucknorris]

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?

[@GrantGryczan]

Now _that_ is intuitive.

[@CabbageYe]

Do you have any videos on error handling(try catch finally)?

[@funfunfunction]

+Dr. Pepper no. I feel that is a bit basic for the channel. I try to keep junior professional programmers (1 year or so into your first job) and they are very likely to know that.

[@webneat]

Thanks for the tutorial. Just one detail: why do you keep writing "node exemples.js" when you can simply hit the "UP" arrow then Enter ?

[@funfunfunction]

It's for the same reason a sometimes add breaks, space and little nosense - so that the audience gets a bit of time to breathe in between me spraying info.

[@johnx9175]

SIMPLY awesome!!! EVERYTHING

[@dkennell998]

Hey, so I'm having some trouble understanding the second-to-last line of the implementation. So that `constructor.apply`...it *calls* the constructor with `obj` as `this`? Honestly, I don't think I understand what it means to call a constructor. I mean, there's no return statement, so what does that even do? Thanks in advance for any help!

[@funfunfunction]

+dkennell998 the purpose of the constructor is to add properties to obj. Keep in mind that "constructor" has no special significance in the language, it's just the name of a normal function.

[@nromancarcamo]

hahaha the slowmotion was very funny haha good video

[@josher3436]

My barebones attempt at MPJ's Spawn/New: function spawn (fcn, arg1) { let obj = {}; obj.__proto__ = fcn.prototype; fcn.call(obj, arg1); return obj; } :)

[@AmaanKulshreshtha]

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

[@SumanKumar-ek9yw]

Great job MPJ

[@dealloc]

While I agree with Crockford on a lot of things; like avoiding prototypes/class, null and the use of `this`, I disagree with him on using semicolons.

[@u4yk]

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]

You'd want to use [].slice.call instead of apply.

[@u4yk]

You're right. I don't know why I put apply there. Good catch.

[@funfunfunction]

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.

[@Derrickasaur]

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]

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]

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!

[@cmarkme]

You remind me of a young 'Dr. King Schultz' from the Film, Django Unchained (2012).. It's a compliment :-)

[@jlmonroy13]

You can get the second argument of the spawn function like this: arguments[1] Try it!

[@eggertjohannesson]

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.

[@rlee431]

Thanks for the awesome video. You really explained it well.

[@pnwbjj]

Is the word constructor a reserved word or a specific word used in Javascript in this example or could that parameter name have been anything, such as 'billybob' ?

[@funfunfunction]

You could have used billybob in this example. "constructor" has some significance in some situations but not this one.

[@pnwbjj]

Thank you for the quick response and the clarification.

[@shmckay]

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]

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.

[@whiskey4609]

this is like my adult kids show i watch on saturdays

[@maksimiurlov9897]

Hello Mattias, what are your thoughts about 6 hour work day?

[@funfunfunction]

+Maksim Yurlov it seems like a good idea to try with science supporting it. It's a rumor that we have it in Sweden, but we don't.

[@doncoder-channel]

I video about your opinion on typescript will be cool as well !

[@punio4]

Is that javascript code intel built into Atom, or is that a plugin?

[@WiBla]

MPJ uses intentionally no plugins at all, so i'm guessing it's implemented in atom by default.

[@funfunfunction]

+Ivan Čurić I've installed termjs. Not sure if I like it enough to keep it. I should probably remove it because it distracts from the content in the video. ;) people go "oooh plugin"

[@punio4]

Nah. This was the best video on pseudoclasses I've seen.