Why is there a difference in defining a JavaScript object literal with or without quotations marks?

Question

In pure JavaScript, MDN and the Google JavaScript style guide suggest that the two snippets below are equivalent:

// Snippet one
var myObject = {
  "test":"test"
}

// Snippet two
var myObject = {
  test:"test"
}

However, the JSON specification mandates the use of quotation marks.

When is it correct to use quotation marks when defining an object literal, if at all? Does it imply/make any difference to the interpreter?

I've written a test function which uses performance.now() (MDN) to measure the time it takes to create a million simple objects:

function test(iterations) {
  var withQuotes = [];
  var withoutQuotes = [];

  function testQuotes() {
      var objects = [];
      var startTime, endTime, elapsedTimeWithQuotes, elapsedTimeWithoutQuotes;

      // With quotes
      startTime = window.performance.now();

      for (var i = 0; i < 1000000; i++) {
          objects[objects.length] = {
              "test": "test"
          };
      }

      endTime = window.performance.now();
      elapsedTimeWithQuotes = endTime - startTime;

      // reset
      objects = undefined;
      startTime = undefined;
      endTime = undefined;
      objects = [];

      // Without quotes
      startTime = window.performance.now();

      for (var i = 0; i < 1000000; i++) {
          objects[objects.length] = {
              test: "test"
          };
      }

      endTime = window.performance.now();
      elapsedTimeWithoutQuotes = endTime - startTime;

      return {
          withQuotes: elapsedTimeWithQuotes,
          withoutQuotes: elapsedTimeWithoutQuotes
      };
    }

  for (var y = 0; y < iterations; y++) {
      var result = testQuotes();
      withQuotes[withQuotes.length] = result.withQuotes;
      withoutQuotes[withoutQuotes.length] = result.withoutQuotes;

      console.log("Iteration ", y);
      console.log("With quotes: ", result.withQuotes);
      console.log("Without quotes: ", result.withoutQuotes);
  }

  console.log("\n\n==========================\n\n");
  console.log("With quotes average: ", (eval(withQuotes.join("+")) / withQuotes.length));
  console.log("Without quotes average: ", (eval(withoutQuotes.join("+")) / withoutQuotes.length));
}

test(300);

The results I get imply that it is (marginally) faster to use quotation marks. Why would this be?

On my browser, I get these results from my test function, (average over 300 iterations):

With quotes: 167.6750966666926ms
Without quotes: 187.5536800000494ms

Of course, it's more than possible that my test function is duff too...

Answer 1

A property's name can be any string, including the empty string. The quotes around a property's name in an object literal are optional if the name would be a legal JavaScript name and not a reserved word. So quotes are required around "first-name", but are optional around first_name.

Source: "JavaScript: The Good Parts" by Douglas Crockford.