title: Efficient way to trim() space characters off all Properties in a JavaScript Object as they are being set?
body: <p>This is a stripped down demo with the very basic needed to replicate what I need to do.</p>
  
  <p>In my JavaScript application I have a <strong>Click event</strong> on <strong>Project Task Records</strong>.</p>
  
  <p>When a Task is clicked on, I populate a JavaScript Object with data from the DOM related to the clicked on Task record.</p>
  
  <p>My problem is that, when I print out the values saved to my object from the DOM, there is always massive space characters in front and behind my strings.</p>
  
  <p><img src="https://i.stack.imgur.com/nQLjA.png" alt="enter image description here"></p>
  
  <p>I have this Shim to utilize the newer built in JavaScript <code>trim()</code> function...  </p>
  
  <pre><code>/* JavaScript trim() method is ES 5, just in case polyfill it (IE 8 and down):
   * example usage:
   *  var str = " a b    c d e   f g   ";
   *  var newStr = str.trim();
  */
  if (!String.prototype.trim) {
    String.prototype.trim = function () {
      return this.replace(/^\s+|\s+$/g, '');
    };
  }
  </code></pre>
  
  <p>Below I have a simple demo thrown together for this question.  </p>
  
  <p>You will see a JavaScript Object stored in <code>taskDataObject</code></p>
  
  <blockquote>
    <p>(NOTICE: I realize the actual selector code below is disgusting, that is
    next on my to-do list!)</p>
  </blockquote>
  
  <p>This JSFiddle page has all the code to show my demo running:<br>
  <a href="http://jsfiddle.net/jasondavis/2hkz0gp4/" rel="noreferrer">http://jsfiddle.net/jasondavis/2hkz0gp4/</a>  </p>
  
  <p>When <code>.taskName</code> is clicked on, it grabs data from the DOM and saves it to the <code>taskDataObject</code> JavaScript Object.</p>
  
  <p>I am looking for a good way to apply this <code>str.trim()</code> code to all the properties in <code>taskDataObject</code> and was hoping I wouldn't have to make a bunch of temporary variables.</p>
  
  <p><strong>Demo code</strong>  </p>
  
  <pre><code>//Open Task Modal when a Task record is clicked in Task List
  $('body').on('click', '.taskName', function() {
  
  
      // Set and Cache Task ID from clicked on Task Item
      var taskId = $(this).parent().parent().parent().dataAttr('task-id');
  
      var $taskEl = $(this);
  
      // Populate Task Data Object from DOM values
      taskDataObject = {
          //projectId: projectTaskModal.cache.projectId,
          taskId: taskId,
          taskName: $taskEl.text(),
          taskDescription: $taskEl.next('.description').text(),
          taskStatus: $taskEl.parent().parent('td').next().text(),
          taskPriority: $taskEl.parent().parent('td').next().next().text(),
          taskTags: $taskEl.parent().parent('td').next().next().next().text(),
          taskCreatedDate: $taskEl.parent().parent('td').next().next().next().next().text(),
          taskModifiedDate: $taskEl.parent().parent('td').next().next().next().next().next().text(),
          taskDueDate: $taskEl.parent().parent('td').next().next().next().next().next().next().text(),
      };
  
      console.log('taskDataObject', taskDataObject);
  
  
      // Just playing around, this applies the trim() however I had
      // to create a bunch of temp variables and I am not sure if 
      // this can be avoided or done differently?
      for (var key in taskDataObject) {
  
        if (taskDataObject.hasOwnProperty(key)) {
  
          alert(key + " -&gt; " + taskDataObject[key]);
  
          //console.log(key + " -&gt; " + taskDataObject[key]);
  
            console.log(taskDataObject[key]);
  
            var tmpVal1 = taskDataObject[key]
            var tmpVal2 = tmpVal1.trim();
  
            console.log(tmpVal2);
  
        }
      }
  
  });
  </code></pre>