Update a certain field identified by a variable

Thanks! this has stumped me for a shamefully stupid amount of time.

Feel no shame. I consider myself pretty bright, and I had to lean on @kuovonne for exactly this lesson shortly after I coaxed her to really dig in and learn Airtable and become an expert.

I am sad because I tried to search for the thread so I could refer to the explanation, but that thread has been removed from the forum. According to this thread, the original thread was here, but that is now a dead link.

There was a lot of good info in that thread. And I learned a lot from Bill. Bill has easily taught me a hundred times whatever I may have explained to him, if not more.

I remember it well, and I recall the moment I realized there was greatness in you as a software engineer. I was pounding my head just like @hayden_mitchell, and you pulled me out of that cesspool without breaking a sweat. You even explained why bracketing the variable exposed the underlying value as a key. It was at that moment that I realized paying it forward may actually pay it backwards from time-to-time. Life is just strange sometimes.

Bill, now I’m blushing.

Let’s see if I can remember the gist of the explanation.

The field names are the keys in a JavaScript object.

If the key is a simple string with no spaces or special characters, the key name can be set directly without quotes. This matches accessing the property of the object in dot syntax.

const obj = {
  color: "green",
}

console.log( obj.color )

However, if the key has spaces or other special characters, the string must be enclosed in quotes. In this case, you cannot use dot syntax to access the property. You must use square brackets with the quotes.

const obj = {
  "my color": "green",
}
console.log( obj["my color"] )

Although not often used, you can also use these square brackets when setting the key values in an object.

const obj = {
  ["my color"]: "green",
}
console.log( obj["my color"] )

So far these examples have only used hardcoded keys. But what happens when you want to use a variable for the key?

You cannot simply use the name of the variable by itself because JavaScript will think that the name of the variable is the name of the key.

const key = "color"
const obj = {
  key: "green",
}
console.log( obj.key ) // green
console.log( obj.color ) // undefined

Instead, we refer back to the syntax that uses quotes and square brackets.

const key = "color"
const obj = {
  [key]: "green",
}

When key is evaluated, it becomes "color". Substituting the value "color" for the variable key brings us back to the square bracket and quotes syntax.

const obj = {
  ["color"]: "green",
}

Here’s the above code snippet with the expected results.

const key = "color"
const obj = {
  [key]: "green",
}

console.log( obj.color ) // green
console.log( obj[key] ) // green
console.log( obj.key ) // undefined

const obj = {
  color: "green",
}

console.log( obj.color )

const obj = {
  "my color": "green",
}
console.log( obj["my color"] )

const obj = {
  ["my color"]: "green",
}
console.log( obj["my color"] )

const key = "color"
const obj = {
  key: "green",
}
console.log( obj.key ) // green
console.log( obj.color ) // undefined

const key = "color"
const obj = {
  [key]: "green",
}

const obj = {
  ["color"]: "green",
}

const key = "color"
const obj = {
  [key]: "green",
}

console.log( obj.color ) // green
console.log( obj[key] ) // green
console.log( obj.key ) // undefined

thanks for this extended explanation, I really appreciate it. This really let me understand why rather than just typing the solution with no context. Also, this forum is MUCH more hospitable than other parallel sites such as stackoverflow.