Key Value Pair initialization not working with variable?

Question

I am trying to understanding why the behavior of these two lines of code are behaving differently I am also trying to create the behavior in example one using variables such as in example two, please see example below:

  var kv = {
    'abc': 'moon',
  };
  Browser.msgBox(kv['abc']);

returns moon as expected.

  var f = 'abc';
  var r = 'moon';
  var kv2 = {
    f: r,
  };
  Browser.msgBox(kv2[f]);

returns undefined.

On the second example, use `var kv2 = {[f]: r};` read about [computed property names](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names). Otherwise the name of your key will be `f` and you will have to do `Browser.msgBox(kv2["f"]);` — Shidersz, May 03 '19 at 15:48
@Shidersz Google apps script currently uses an older version of Ecmascript so computed property names are not (yet) supported. — TheAddonDepot, May 03 '19 at 15:51
@DimuDesigns Oh, I see, in that case he will need to do `var kv2 = {}; kv2[f] = r;` if he still wants to use the `key` and `value` from variables. — Shidersz, May 03 '19 at 15:54
See my answer here for related explanation: https://stackoverflow.com/a/51732281/9337071 — tehhowch, May 04 '19 at 04:47

score 3 · Answer 1 · answered May 03 '19 at 16:08

On the second example you are creating kv2 as an object with an unique property named f.

var f = 'abc';
var r = 'moon';
var kv2 = {
  f: r,
};

console.log(kv2);
console.log(kv2.f);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

The new ECMAScript (ES6) includes a feature named computed property names that will be adequate for what you are trying to do, i.e, use a property name stored in some variable. Example:

var f = 'abc';
var r = 'moon';
var kv2 = {
  [f]: r, // Using computed property name!
};

console.log(kv2);
console.log(kv2[f]);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

However, and from wikipedia, you can see this feature isn't available for you:

Apps Script is a scripting language for light-weight application development in the G Suite platform. It is based on JavaScript 1.6 with some portions of 1.7 and 1.8 and provides subset of ECMAScript 5 API.

So, the best you can do, if you still want to use a property name stored in a variable, is this:

var f = 'abc';
var r = 'moon';
var kv2 = {};
kv2[f] = r;

console.log(kv2);
console.log(kv2[f]);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

excellent explanation. If he wants to use a variable for the property name, this should be the accepted answer. — ludovico, May 03 '19 at 19:33

score 2 · Answer 2 · answered May 03 '19 at 16:00

2

You can use object notation:

  Browser.msgBox(kv2.f);

answered May 03 '19 at 16:00

ludovico

2,103
1
13
32

score 0 · Answer 3 · answered May 03 '19 at 16:16

These two methods work for me:

You can actually see in this situation kvr = {f:r} that the editor is showing that the key is not receiving the substitution.

function sampletest() {
  var f='abc';
  var r='moon';
  var kv2={abc:r};
  Browser.msgBox(kv2[f]);
}

function sampletest1() {
  var f='abc';
  var r='moon';
  var kv2={};
  kv2[f]=r;
  Browser.msgBox(kv2[f]);
}

Key Value Pair initialization not working with variable?

3 Answers3