title: Rename javascript object key
body: <p>I have a multidimensional object like this:</p>
  
  <pre><code>var elements = {
      front: {
          "1": {
             "backgroundImage": "url(images/elements/pig.png)",
          },
          "2": {
             "backgroundImage": "url(images/elements/star.png)",
          },
          "3": {
             "backgroundImage": "url(images/elements/fish.png)",
          }
      },
      top: {},
      left: {},
      right: {}
  };
  </code></pre>
  
  <p>and I need to switch two elements in this object so I do:</p>
  
  <pre><code>var temp = elements[front][2];
  elements[front][2] = elements[front][3];
  elements[front][3] = temp;
  </code></pre>
  
  <p>which gives me (switches fish and star - but only the properties not the object key):</p>
  
  <pre><code>var elements = {
      front: {
          "1": {
             "backgroundImage": "url(images/elements/pig.png)",
          },
          "2": {
             "backgroundImage": "url(images/elements/fish.png)",
          },
          "3": {
             "backgroundImage": "url(images/elements/star.png)",
          }
      },
      top: {},
      left: {},
      right: {}
  };
  </code></pre>
  
  <p><strong>How can I also rename the object key?</strong></p>
  
  <p>Desired result:</p>
  
  <pre><code>var elements = {
      front: {
          "1": {
             "backgroundImage": "url(images/elements/pig.png)",
          },
          "3": {
             "backgroundImage": "url(images/elements/fish.png)",
          },
          "2": {
             "backgroundImage": "url(images/elements/star.png)",
          }
      },
      top: {},
      left: {},
      right: {}
  };
  </code></pre>