title: How to establish global variables for functions - Polymer
body: <p>I have searched through some of the documents on here, but I couldn't quite figure it out.</p>
  
  <p>Basically I am wanting to set some variables globally for this one particular file only (so like a local global variable), so I don't need to keep defining them for every function I use, because it will become rather long and tiring to get through.</p>
  
  <p>Any advice would be fab!</p>
  
  <p><strong><em>I know that global variables and things are difficult to do in Polymer for situations like this, but I'm hoping that I can learn how to do it as it would save me a lot of time and effort.</em></strong></p>
  
  <p><strong>Original JS</strong></p>
  
  <pre><code>Polymer({
  
    is: 'settings-page',
  
    properties: {
        response : {
            type : Object
        },
    },
  
    /* have iron pages show the saved state of each section to start with */
    ready: function () {
        this.selected = 'saved';
        this.selection = 'saved';
    },
  
    editDetails : function () {
        /*    click edit | open edit mode | edit icon disappears | save &amp; cancel icons appear     */
  
        var editButton = this.$.editInfo;
        var saveButton = this.$.saveInfo;
        var cancelButton = this.$.clearInfo;
  
        saveButton.classList.add('show');
        cancelButton.classList.add('show');
        editButton.classList.add('hide');
    },
  
  /* There are saveDetails and cancelDetails functions below doing 
      pretty much the same stuff. */
  </code></pre>
  
  <p><strong>JS after seeing example online</strong></p>
  
  <pre><code>(function() {
      var data = {
              editInfo: this.$.editInfo,
              saveInfo: this.$.saveInfo,
              cancelInfo: this.$.clearInfo
      }
  
      Polymer({
  
        is: 'settings-page',
  
        properties: {
            response : {
                type : Object
            },
        },
  
        /* have iron pages show the saved state of each section to start with */
        ready: function () {
            this.selected = 'saved';
            this.selection = 'saved';
            this.data = data;
        },
  
        editDetails : function () {
            /*    click edit | open edit mode | edit icon disappears | save &amp; cancel icons appear     */
  
  
            saveButton.classList.add('show');
            cancelButton.classList.add('show');
            editButton.classList.add('hide');
        },
  
   /* There are saveDetails and cancelDetails functions below doing 
      pretty much the same stuff. */
  </code></pre>