Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using Object.create to clone

Posted on Aug 7 • Originally published at Idmontie.github.io In “Javascript: The Definitive Guide” there is an example that uses Object.inherit to inherit the prototype change. JavaScript defines a method Object.create that creates a new object using the given argument as the prototype of that object. Translating the examples from The Definitive Guide to Typescript, it looks like:Playground LinkHowever, we lied. Notice that in the above code, the myClone object was created without a being initialized.This creates what is known as a type-hole: the Typescript compiler will not report any bugs when we try to use myClone.a. That’s because we used Object.create which returns the any type. In the above example, if we tried to use myClone.a in a case where we expected a number, but got undefined, we can end up with runtime bugs that should have been caught by the compiler.We can make the typings a little more clear by doing the following:Now Typescript will report that the value of myClone.a might be undefined.Let’s improve this a bit more and create an object that inherits and freezes the data in the given object:Playground LinkIf we didn’t mark the return value as Readonly>, and instead just had Partial we would once again have a type-hole and myClone.a = 999; would be allowed by Typescript, but would throw an exception at runtime because property a is read only as a runtime constraint.Let’s step back and really look at what inherit was doing. All it gave us was a template object, and if you read on MDN about Inheritance and prototype chaining:You may also see some legacy code using [Object.create()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) to build the inheritance chain. However, because this reassigns the prototype property and removes the [constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) property, it can be more error-prone, while performance gains may not be apparent if the constructors haven't created any instances yet.The key here is to be wary of using utility functions built into the language that return the any type. Be careful what the Typescript constraints are and make sure you don’t have any type-holes when you are using these generic functions.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Lucas Barret - Aug 7 Endgame - Aug 7 Andy - Aug 7 Arsalan Mlaik - Aug 7 Once suspended, idmontie will not be able to comment or publish posts until their suspension is removed. Once unsuspended, idmontie will be able to comment and publish posts again. Once unpublished, all posts by idmontie will become hidden and only accessible to themselves. If idmontie is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Ivan Montiel. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag idmontie: idmontie consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging idmontie will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.



This post first appeared on VedVyas Articles, please read the originial post: here

Share the post

Using Object.create to clone

×

Subscribe to Vedvyas Articles

Get updates delivered right to your inbox!

Thank you for your subscription

×