YUI 3.x Home -

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.

set1 = { foo : "foo" };
set2 = { foo : "BAR", bar : "bar"  };
set3 = { foo : "FOO", baz : "BAZ" };

result

click Merge or Copy

Using merge

Instantiate YUI

  1. <!-- include yui -->
  2. <script type="text/javascript" src="../../build/yui/yui.js"></script>
  3.  
  4. YUI().use("node", "dump", function(Y) {
  5. // This method is in the core of the library, so we don't have to use() any
  6. // 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.

  1. var set1 = { foo : "foo" };
  2. var set2 = { foo : "BAR", bar : "bar" };
  3. var set3 = { foo : "FOO", baz : "BAZ" };
  4. var result = Y.one('#demo_result');
  5.  
  6. var doMerge = function () {
  7.  
  8. Y.log('set1 = ' + Y.dump(set1));
  9. Y.log('set2 = ' + Y.dump(set2));
  10. Y.log('set3 = ' + Y.dump(set3));
  11.  
  12. Y.log('Merging set1, set2, and set3');
  13. var merged = Y.merge(set1, set2, set3);
  14. Y.log('merged = ' + Y.dump(merged));
  15.  
  16. result.set('innerHTML', '<p>' + stringifyObj(merged) + '</p>');
  17. };
  18.  
  19. Y.on('click', doMerge, '#demo_btn');
  20.  
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.

  1. var doCopy = function () {
  2.  
  3. // Create set4 with an object property 'obj'
  4. var set4 = {
  5. obj: {}
  6. };
  7.  
  8. // Create a shallow copy of set4
  9. var copy = Y.merge(set4);
  10.  
  11. // Add a property to the copy inside of the 'obj' property
  12. copy.obj.addedToCopy = true;
  13.  
  14. Y.log('After modifying the copy: ');
  15.  
  16. // The result object is not the same as the original, but
  17. var msg = ('"copy" should NOT be equal to the "original" (false expected): ' + (copy === set4));
  18.  
  19. // objects in the result object will reference the same object in
  20. // the input object.
  21. msg += '<br />copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' +
  22. (copy.obj.addedToCopy === set4.obj.addedToCopy);
  23.  
  24. Y.log(msg);
  25. result.set('innerHTML', '<p>' + msg + '</p>');
  26. };
  27.  
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