Helping you solve those tough coding problems!

Deep clone an object with jQuery Deep clone an object with jQuery

Published on Feb 19, 2019 by Jamie Munro

To copy/clone an object using jQuery, you will want to leverage the extend function. This function accepts N objects to clone/merge as well as a boolean to indicate whether it should copy recursively or not.

Using $.extend to clone an object

In the example below, the jQuery extend function will be used to copy the properties from objectA to objectB. This will be done twice to demonstrate the difference between a recursive clone and non-recursive clone.

After objectA has been copied to objectB, the output of the copy is outputted on screen and shows that the full object, including child properties, have been copied to the new object.

Tags: extend | JavaScript | jQuery | clone

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP