JavaScript Objects: Compare and Clone

This JavaScript article tutorial shows you a short overview about JavaScript objects in comparing and cloning. You'll know how to clone JavaScript objects, make JavaScript object copy. This is really a should-read JavaScript tutorial when you would like to learn more advance JavaScript skills.


Sampled by © JavaScriptBank.com

Here's a handy way to determine if two JavaScript objects are identical without using a framework like jQuery or MooTools:

var compare_objects = function (obj1, obj2){

 
    var parameter_name;
 
    var compare = function(objA, objB, param){

 
        var param_objA = objA[param],
            param_objB = (typeof objB[param] === "undefined") ? false : objB[param];

 
        switch(typeof objA[param]){
            case "object": return (compare_objects(param_objA, param_objB));

            case "function": return (param_objA.toString() === param_objB.toString());

            default: return (param_objA === param_objB);
        }

 
    };
 
    for(parameter_name in obj1){
        if(typeof obj2[parameter_name] === "undefined" || !compare(obj1, obj2, parameter_name)){

            return false;
        }
    }
 
    for(parameter_name in obj2){

        if(typeof obj1[parameter_name] === "undefined" || !compare(obj1, obj2, parameter_name)){

            return false;
        }        
    }
 
    return true;

 
};

Here's an easy way to clone a JavaScript object:

var clone_object = function (original_obj) {

    var new_obj = {};
    for(var param in original_obj) {

        if(original_obj.hasOwnProperty(param)){
            if(typeof(original_obj[param]) === "object"){

                new_obj[param] = clone_object(original_obj[param]);

            } else {
                new_obj[param] = original_obj[param];

            }
        }
    }
    return new_obj;
};

A real-world example of the two functions:

var object_1 = { fruit: "apple", tree: "dogwood", number: 3 };

var object_2 = { fruit: "apple", tree: "dogwood", number: 3, cartoons: { anime: "robotech", fantasy: "he-man" } };

var object_3 = clone_object(object_2);
 
console.log("objects 1 and 2 match? " +compare_objects(object_1, object_2));

//displays false;
 
console.log("objects 2 and 3 match? " +compare_objects(object_2, object_3));

//displays true

Bear in mind both of these functions are recursive, which means the larger the object, the slower the performance.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Insights for Advanced Zooming and Panning in JavaScript Charts
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website


Top view articles
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Top 10 Beautiful Christmas Countdown Timers
Top 10 Best JavaScript eBooks that Beginners should Learn
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com