Question 266853 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Assign multiple const variables in single declaration

I’m rather new to react/JS therefore this question my sound somehow dumb:

I need multiple variables that are set depending on a location(System variable). Those variables should be constants as they should never change for a given instance.

This is my current solution, it works but it feels very wrong to define variables inside other variable declarations. It also seems to not be possible to declare footerWidth and footerAltText as constants without an initial value.

 <Box
    as='img'
    width={footerWidth}
    justifyContent='center'
    alignContent='center'
    src={footerLogoSource}
    alt={footerAltText}
 />

Those attributes are provided by my features.ts:

export let footerWidth: string
export let footerAltText: string
export const footerLogoSource: string =
  getAppConfig().contextPath +
  (() => {
    switch (getAppConfig().landesvariante) {
      case Variante.SN:
        footerWidth = '30%'
        footerAltText = 'lorem ipsum'
        return '/assets/kofin_eu_logo.svg'
      case Variante.BB:
        footerWidth = '20%'
        footerAltText = 'lorem ipsum 2'
        return '/assets/logo_bb.svg'
      default:
        return null
    }
  })()

One solution would be to make 3 switch-case configurations for the 3 variables, but that would lead to alot of duplicated code…

Is there a proper way to do this?

Tags:

2

Answers


  1. 0

    Here’s an approach using array destructuring

    const [footerWidth, footerAltText, footerLogoSource] = (() => {
  const config = getAppConfig();

  switch (config.landesvariante) {
    case Variante.SN:
      return ['30%', 'lorem ipsum', `${config.contextPath}/assets/kofin_eu_logo.svg`];
    case Variante.BB:
      return ['20%', 'lorem ipsum 2', `${config.contextPath}/assets/logo_bb.svg`];
    default:
      return [undefined, undefined, null];
  }
})();

    You can use object destructuring as well

    const { width: footerWidth, altText: footerAltText, logo: footerLogoSource } = (() => {
  const config = getAppConfig();
  switch (config.landesvariante) {
    case Variante.SN:
      return {
        width: '30%',
        altText: 'lorem ipsum',
        logo: `${config.contextPath}/assets/kofin_eu_logo.svg`
      };
    case Variante.BB:
      return {
        width: '20%',
        altText: 'lorem ipsum 2',
        logo: `${config.contextPath}/assets/logo_bb.svg`
      };
    default:
      return {logo: null};
  }
})();
    Login or Signup to reply.
  2. 0

    You can also do it without any destructering or self invoking functions and with some additional typing

    enum Variante {
  SN,
  BB
}

interface IConfig {
  footerWidth: string;
  footerAltText: string;
  footerLogoSource: string;
}

type AppConfig = {
  [key in Variante]: IConfig;
};

const config: AppConfig = {
  [Variante.BB]: {
    footerWidth: "30%",
    footerAltText: "lorem ipsum",
    footerLogoSource: "lorem ipsum"
  },
  [Variante.SN]: {
    footerWidth: "20%",
    footerAltText: "lorem ipsum",
    footerLogoSource: "lorem ipsum"
  }
};

export default config[getAppConfig().landesvariante as keyof typeof Variante];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search