So if I wanted to stop writing many const statements for a simple repeatable thing, should it be possible to create a function or generator or something that would let me write each statement on one line?

Example constant:

const bgColor = theme('mode', {
  default: light.backgroundColor,
  dark: dark.backgroundColor,
});

const textColor = theme('mode', {
  default: light.color,
  dark: dark.color,
});

const shadowColor = theme('mode', {
  default: light.boxShadowColor,
  dark: dark.boxShadowColor,
});

Example desired statement:

themeProperty('bgColor', backgroundColor);
themeProperty('textColor', color);
themeProperty('shadowColor', boxShadowColor);

So if I wanted to stop writing many const statements for a simple repeatable thing, should it be possible to create a function or generator or something that would let me write each statement on one line?

Example constant:

const bgColor = theme('mode', {
  default: light.backgroundColor,
  dark: dark.backgroundColor,
});

const textColor = theme('mode', {
  default: light.color,
  dark: dark.color,
});

const shadowColor = theme('mode', {
  default: light.boxShadowColor,
  dark: dark.boxShadowColor,
});

Example desired statement:

themeProperty('bgColor', backgroundColor);
themeProperty('textColor', color);
themeProperty('shadowColor', boxShadowColor);

• javascript
• ecmascript-6

• 1 Sorry, but I just can't tell what you're asking or how the two code examples are related. Are you saying you want to retrieve all the backgroundColor properties of each property in the bgColor object? Please plainly describe what you want. – llama Commented Oct 26, 2017 at 17:05
• I think @ftor got to what I was looking for. Thanks! – Stephen Way Commented Oct 26, 2017 at 17:11
• How so? What are the constants you're talking about? You can certainly pass or return the value of a const; you just can't delcare it inline because it's not an expression. Your example only uses one single const, and there's no indication of you passing or returning it. – llama Commented Oct 26, 2017 at 17:12
• 1 Your second example seems to want to use backgroundColor to access a mon property of a set of objects. If that's what you want, then absolutely this can be done, though with a little tweaking. Is there a reason you're refusing to give more detail? – llama Commented Oct 26, 2017 at 17:15
• Are you looking for something like function themeProperty(prop) { return theme('mode', {default: light[prop], dark: dark[prop]}); const bgColor = themeProperty('backgroundColor'); ? – Felix Kling Commented Oct 26, 2017 at 17:17

2 Answers 2

So shortening the code seems to be the concern.

There are two things being shortened, the first is the repeated const declaration, which indeed can be eliminated by using destructuring assignment.

So let's do that first before we move on.

const [bgColor, textColor, shadowColor] = [
    theme('mode', {
      default: light.backgroundColor,
      dark: dark.backgroundColor,
    }),
    theme('mode', {
      default: light.color,
      dark: dark.color,
    }),
    theme('mode', {
      default: light.boxShadowColor,
      dark: dark.boxShadowColor,
    })
];

Of course, that's a minimal improvement, but it does eliminate the const being typed thrice.

As to the objects being passed, I don't know why 'mode' disappeared, but I'll add it back in. What you can do is create a map of target properties to objects, and provide the mon property that should be extracted for each.

const propObjMap = new Map([
  ["default", light],
  ["dark", dark],
]);

Then create a function that creates a new object from the map and property name.

function mToObj(map, prop) {
  const res = {};
  for (const [key, obj] of map.entries()) {
    res[key] = obj[prop];
  }
  return res;
}

And use it like this:

const [bgColor, textColor, shadowColor] = [
  theme('mode', mToObj(propObjMap, "backgroundColor")),
  theme('mode', mToObj(propObjMap, "color")),
  theme('mode', mToObj(propObjMap, "boxShadowColor")),
];

And then because there's still a bit of repetition, you can create another function that receives a list of the properties, and returns an array to destructure.

function themes(...props) {
  return props.map(p => theme('mode', mToObj(propObjMap, p)));
}

So now your const destructuring assignment will look like this:

const [bgColor, textColor, shadowColor] = themes(
  "backgroundColor", "color", "boxShadowColor"
);

The themes function can be made more generic by receiving the argument for 'mode' as a parameter, as well as that of the propObjMap in case there are other mappings.

function themes(m, map, ...props) {
  return props.map(p => theme(m, mToObj(map, p)));
}

Making the call look like this:

const [bgColor, textColor, shadowColor] = themes(
  'mode',
   propObjMap,
  "backgroundColor", "color", "boxShadowColor"
);

In Javascript, it is a particular variable declaration that determines whether it is const or not and the const feature only applies to that specific declared variable, not to its contents.

So, you can't return a value from a function that is const. You would have to assign it to a variable that was declared as const.

const color = themeProperty(...);

In this, color is const, not because of anything that themeProperty() did, but because of the declaration of the color variable.

If you then did:

const color = themeProperty(...);
let color2 = color;

Then, color2 is not const.

Similarly, it doesn't matter what you do inside of themeProperty():

 function themeProperty() {
     // only this particular color variable is const
     const color = 'red';
     return color;        // returning it will not make the value const
 }

 let x = themeProperty();
 let y = x;
 x = 'blue';     // allowed because x is not const
 y = 'green';    // allowed because y is not const

So, variables themselves are const as determined only by their declaration, not particular values that are assigned to other variables.

A variable's const-ness cannot be passed to a function or returned from a function. The closest work-around would like be to pass in or return a frozen object (thus the object's properties could not be changed). But, you can't "freeze" a single value that is passed in or returned.