With operator & dashes in object keys

Question

Until today, I had not known the with operator existed. I stumbled upon it while debugging an issue being thrown from a plugin (Backbone.Epoxy).

The operator creates block level scope for each property on the passed object.

var testObj = { "cat":true };
with (testObj) {
  console.log(cat ? "Cat!": "dog"); // Cat!
}

Simple enough? Initially I thought this could potentially be really cool. Until I realized why my code was throwing an error. Here is an example derived from my code.

var testObj = { "css":true, "background-color":"blue" };
with (testObj) {
  console.log(css ? background-color : ""); // throws
}

The actual code is a bit more dynamic, but this is essentially what occurs behind the scenes in the plugin. Since dashes are not allowed within variable names but are allowed in property names, which cause the error to be thrown.

So, to the questions:

1. Is there a way to sanitize the block scope local variable in order to avoid the issues with the dash while keeping it in my property name?
2. Has anyone else worked around this issue with epoxy?

Answer 1

You would have to make an exception and write:

testObj["background-color"]

As you may suspect, you cannot write just background-color, for the same reason you cannot write testObj.background-color. You should also ask whether using with, which is fairly non-standard, is worth the character-count savings. Usually the answer is "no".