Copying an Object in JavaScript

The Setup

var default = { param1: "one", param2: "two", param3: [] },
    working = default;

// Fill form fields from working data
// User modifies form fields
// Save form fields in working data
// Perform calculation based on working data
// User clicks a button to reset the form to default state

function reset(){
  working = default;
  // Fill form fields from working data
  // Perform calculation based on working data
}

The Problem

The form was not being reset to the default data, but instead did not change at all.

When I debugged, I noticed that the data in default was identical to the data in working, even though I never assign any values to default after initialization.

The Cause

Little did I know, that assigning an object in JavaScript actually only assigns the reference, and does not create a new copy of the object.

The Solution

The object needs to be copied, rather than simply assigned. Based on a quick Google search, there is no built-in method to do this. But I did find a great post on Stack Overflow explaining the issue and how to copy one object to another.

I ended up using the function provided by A. Levy, which I'll post here for convenience (Though I removed the Date section, since I would not be needing it).

function clone(obj) {
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, var len = obj.length; i < len; ++i) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

I had actually just written a similar function to recursively step through an object and convert it to an array, so I could have written this myself, however the code was right there in the article that explained why I was having this problem, and so much easier to just copy and paste. Plus I didn't know about the hasOwnProperty method, which makes this code better than mine would have been.

Lesson Learned

Unless you want to assign a pointer to an object, you will need to clone, or copy, the object into the new variable.

Use the hasOwnProperty method when looping through the properties of an object to only copy local attributes