Example: Combine Data Sets with `merge`

set1 = { foo : "foo" };

set2 = { foo : "BAR", bar : "bar"  };

set3 = { foo : "FOO", baz : "BAZ" };

Using merge

YUI().use('node', 'dump', function(Y) {
    // This method is in the core of the library, so we don't have to use() any
    // additional modules to access it.  However, this example requires 'node' and 'dump'.

Merging hash tables

When the "Merge" button is clicked, we merge three object literals in the form of hash tables. Note the key values in later parameters override those in previous parameters.

var set1 = { foo : "foo" };
var set2 = { foo : "BAR", bar : "bar" };
var set3 = { foo : "FOO", baz : "BAZ" };
var result = Y.one('#demo_result');

var doMerge = function () {

    Y.log('set1 = ' + Y.dump(set1));
    Y.log('set2 = ' + Y.dump(set2));
    Y.log('set3 = ' + Y.dump(set3));

    Y.log('Merging set1, set2, and set3');
    var merged = Y.merge(set1, set2, set3);
    Y.log('merged = ' + Y.dump(merged));

    result.setHTML(Y.dump(merged));
};

Y.on('click', doMerge, '#demo_btn1');

Creating Shallow Copies

When the "Copy" button is clicked, we create use merge on a single object in order to create a shallow clone. The code illustrates the fact that object properties of the result object are shared with the input object.

var doCopy = function () {

    // Create set4 with an object property 'obj'
    var set4 = {
        obj: {}
    };

    // Create a shallow copy of set4
    var copy = Y.merge(set4);

    // Add a property to the copy inside of the 'obj' property
    copy.obj.addedToCopy = true;

    Y.log('After modifying the copy: ');

    // The result object is not the same as the original, but
    var msg = ('"copy" should NOT be equal to the "original" (false expected): ' + (copy === set4));

    // objects in the result object will reference the same object in
    // the input object.
    msg += '<br><br>copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' + 
            (copy.obj.addedToCopy === set4.obj.addedToCopy);

    Y.log(msg);
    result.setHTML(msg);
};

Y.on('click', doCopy, '#demo_btn2');

See the clone method to create deep copies of objects.

Full Javascript Source

YUI().use('node', 'dump', function(Y) {

        var set1 = { foo : "foo" };
    var set2 = { foo : "BAR", bar : "bar" };
    var set3 = { foo : "FOO", baz : "BAZ" };
    var result = Y.one('#demo_result');

    var doMerge = function () {

        Y.log('set1 = ' + Y.dump(set1));
        Y.log('set2 = ' + Y.dump(set2));
        Y.log('set3 = ' + Y.dump(set3));

        Y.log('Merging set1, set2, and set3');
        var merged = Y.merge(set1, set2, set3);
        Y.log('merged = ' + Y.dump(merged));

        result.setHTML(Y.dump(merged));
    };

    Y.on('click', doMerge, '#demo_btn1');


        var doCopy = function () {

        // Create set4 with an object property 'obj'
        var set4 = {
            obj: {}
        };

        // Create a shallow copy of set4
        var copy = Y.merge(set4);

        // Add a property to the copy inside of the 'obj' property
        copy.obj.addedToCopy = true;

        Y.log('After modifying the copy: ');

        // The result object is not the same as the original, but
        var msg = ('"copy" should NOT be equal to the "original" (false expected): ' + (copy === set4));

        // objects in the result object will reference the same object in
        // the input object.
        msg += '<br><br>copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' + 
                (copy.obj.addedToCopy === set4.obj.addedToCopy);

        Y.log(msg);
        result.setHTML(msg);
    };

    Y.on('click', doCopy, '#demo_btn2');



});