Reference object inside same variable

Question

I have this javascript file which is containing styles in an object for a React app:

const styles = {
  fonts: {
    Georgia: 'Georgia, \'Times New Roman\', Times, serif',
  },
  App: {
    textAlign: 'center',
    fontFamily: this.fonts.Georgia,
  },
};

module.exports = styles;

fontFamily: this.fonts.Georgia would reference App: { fonts: '' } object, but what I want to do is to access the already defined fonts object inside styles. How can I do that?

What works is:

const fonts = {
  Georgia: 'Georgia, \'Times New Roman\', Times, serif',
};

const styles = {
  App: {
    textAlign: 'center',
    fontFamily: fonts.Georgia,
  },
};

module.exports = styles;

This is works in this case, but the upper solution would be much nicer.

This is impossible if you absolutely want to do this inside a object expression using only this. — user5066707
– user5066707, Commented Sep 18, 2016 at 13:23
The proposed duplicate is wrong. This is a different question with a different answer. — Madara's Ghost
– Madara's Ghost, Commented Sep 18, 2016 at 13:36
@DanielA.White The proposed duplicate was about this not being available on a variable (and only inside a function), this is about this being too deep in the tree, and thus not being able to access properties higher up the tree with it. — Madara's Ghost
– Madara's Ghost, Commented Sep 18, 2016 at 13:42

Madara's Ghost · Accepted Answer · 2016-09-18 13:48:01Z

3

Simply speaking, you can't. JavaScript objects have no notion of parentage.

const App = {
  textAlign: 'center',
  fontFamily: this.fonts.Georgia, // ???
}

What does this means in that context?

Moreover

const styles = {
  fonts: 'Georgia, \'Times New Roman\', Times, serif',
  App
};

This is the same object as the first one you've posted.

Your only choice is to split the two objects as you have. To hide this detail away from outside of the module, you can do the following:

module.exports = {fonts, styles};

That will make it so that both the fonts and the styles are available to the outside. You can mix and match to get the exact object you want, but the actual structure is irrelevant for the question.

answered Sep 18, 2016 at 13:48

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lanti Over a year ago

Sorry to hear that, thank you for the clarification. Later on there will be more fonts and I wanted to store the entire stylesheet under the same variable, but looks like this is not possible if I want to reference things inside the same parent variable.

Madara's Ghost Over a year ago

You could hold a reference to styles inside of App (you'll still need to define them separately), and once you do that, you will be able to access it with something like this.styles, of course, it allows for circular references (this.styles.App.styles.App.styles....), so be careful when recursively iterating.

GOTO 0 · Accepted Answer · 2016-09-18 14:05:03Z

1

An approach that works is using a getter to retrieve the fonts property dynamically.

const styles = {
  fonts: {
    Georgia: 'Georgia, \'Times New Roman\', Times, serif',
  },
  App: {
    textAlign: 'center',
    get fontFamily () { return styles.fonts.Georgia },
  },
};

console.log(styles);

Note that this has some drawbacks:

The App.fontFamily property will always mirror fonts if it changes dynamically. This may or may not be the desired behavior.
Without a setter, App.fontFamily can only be get, not set.
Some serializers may not process objects with non-value properties as one would expect. I guess this is true for some other libraries, too.

answered Sep 18, 2016 at 14:05

GOTO 0

48.8k25 gold badges139 silver badges165 bronze badges

2 Comments

Lanti Over a year ago

Is there any performance hit using get inside objects? If I start to treat inline styles in React like Sass or Stylus stylesheets, I will cross-reference in an object a lot with get.

GOTO 0 Over a year ago

Yes, but I suspect the impact should be negligible, even with a lot of objects. For me, with this code, maintainability would be the biggest concern (because of the reasons above).

Collectives™ on Stack Overflow

Reference object inside same variable

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related