YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: Combine Data Sets with `merge`

## The YUI Global Object: Combine Data Sets with `merge`

`merge` allows you to combine any number of input objects and output a single merged set.

If the input is a single object, the return value will be a shallow copy of the input, meaning that the return value is a different object, but any non-primitive value in the input object is referenced in the returned object.

Click the "Merge" button to generate the merged set, the "Copy" button to create a shallow copy of an object.

View example in new window.

    set1 = { foo : "foo" };

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

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

### result

    click Merge or Copy

## Using `merge`

### Instantiate YUI

    <!-- include yui --><script type="text/javascript" src="../../build/yui/yui.js"></script> 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'.

    <!-- include yui -->
    <script type="text/javascript" src="../../build/yui/yui.js"></script>

    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'.

<!-- include yui --> <script type="text/javascript" src="../../build/yui/yui.js"></script> 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'.

### 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.set('innerHTML', '<p>' + stringifyObj(merged) + '</p>');}; Y.on('click', doMerge, '#demo_btn');

    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.set('innerHTML', '<p>' + stringifyObj(merged) + '</p>');
    };

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

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.set('innerHTML', '<p>' + stringifyObj(merged) + '</p>'); }; Y.on('click', doMerge, '#demo_btn');

### 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 />copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' +             (copy.obj.addedToCopy === set4.obj.addedToCopy);     Y.log(msg);    result.set('innerHTML', '<p>' + msg + '</p>');};

    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 />copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' +
                (copy.obj.addedToCopy === set4.obj.addedToCopy);

        Y.log(msg);
        result.set('innerHTML', '<p>' + msg + '</p>');
    };

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 />copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' + (copy.obj.addedToCopy === set4.obj.addedToCopy); Y.log(msg); result.set('innerHTML', '<p>' + msg + '</p>'); };

See the `clone` method to create deep copies of objects.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings