Use if else to declare a `let` or `const` to use after the if/else?

Question

I'm not sure why but it seems that I can't call the let or const variables if I declare them in an if/else statement.

if (withBorder) {
  const classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
  const classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}
return (
  <div className={classes}>
    {renderedResult}
  </div>
);

If I use this code it says that classes is not defined.

But if I change the const to var classes is defined but I get a warning about classes used outside of binding contextand all var declarations must be at the top of the function scope

How could I fix this?

`let` and `const` have been designed to be scoped inside control statements such as `if` and `for`. If you want to use `let` you need to define the variable before the `if` and just assign it inside. — UnholySheep, Nov 29 '16 at 22:37
that's expected in most programming languages. older javascript will still let you get away with it. However, if it's a constant, the value should be assigned once and never change... declare it as a `let` outside the if block and set it inside the if/else blocks. — ps2goat, Nov 29 '16 at 22:38
@Bergi—I'm gonna use that, especially with a Kiwi accent. :-) — RobG, Nov 29 '16 at 22:47

score 65 · Accepted Answer · edited Jul 07 '22 at 08:39

This is a good example of where a simple ternary assignment could suffice:

const classes = withBorder ?
 `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` : 
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

As specified in other comments/answers let and const are block scoped, so that's why they don't work in your example.

For DRYer code, you can use the ternary only for the part that depends on it:

 const classes = (withBorder ? `${styles.circularBorder} ` : "") +
 `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`

ah yeah, totally forgot about inline if/else that will definitely refactor the code pretty well. thanks! — Johhan Santana, Nov 29 '16 at 23:41

finalfreq · Answer 2 · 2016-11-29T22:39:34.430

53

let and const are block level scoped meaning they can only be used within the block they have been defined in ie. { // if defined in here can only be used here }

In this case I would just define above the if/else statement

let classes;

if (withBorder) {
  classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
  classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}

edited Nov 29 '16 at 22:39

answered Nov 29 '16 at 22:38

finalfreq

6,830
2
27
28

13

This can't be done with const, as const needs an initializer value – yunzen Jun 13 '18 at 07:32
1

The example uses `let` since we are redefining a variable based on if withBorder exists only way to use `const` would to be with a ternary operator since you can't redefine a constant variable – finalfreq Jun 13 '18 at 16:21

rap-2-h · Answer 3 · 2022-01-13T08:45:58.133

38

Alternative (not sure it's good nor elegant though):

const classes = (() => {
  if (withBorder) {
    return `${styles.circularBorder}...`;
  } else {
    return `${styles.dimensions}...`;
  }
})();

edited Jan 13 '22 at 08:45

answered Aug 02 '18 at 14:11

rap-2-h

30,204
37
167
263

9

That moment when Javascript kicks in with all it's freedom. – Seaskyways Sep 12 '19 at 17:19
3

This sure beats nested shorthand conditionals. – ambe5960 Jun 17 '20 at 19:44
1

Better than a switch or a nested ternary – E-jarod Aug 30 '21 at 20:52

score 5 · Answer 4 · edited May 23 '17 at 11:33

Don't use an if-else-statement but a ternary expression:

const classes = withBorder
  ? `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
  :                          `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;

Alternatively, just declare it outside of the if block, which allows you to get rid of the duplication as well:

let classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
if (withBorder) {
  classes += ` ${styles.circularBorder}`;
  // or if you care about the order,
  // classes = `${styles.circularBorder} ${classes}`;
}

Also have a look at messy classnames construction.

Someone who understands how the judicial use of whitespace can make code easier to understand! (Boo, Prettier.) — David Hull, Jul 27 '23 at 21:41

score 4 · Answer 5 · edited May 23 '17 at 12:10

4

let and const are block level scoped, so you will have to define them outside of the block. var works because it hoists out.

You can defined classes before the if block like @finalfreq

or

let classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;

if (withBorder) {
  classes += `${styles.circularBorder}`;
}

edited May 23 '17 at 12:10

Community

1
1

answered Nov 29 '16 at 23:03

antyang

51
4

score 3 · Answer 6 · answered Jan 23 '18 at 22:57

ESLint standard likes the operators at the beginning of the line. Long conditionals should also be abstracted out, unless in a computer time loop.

In this particular case the strings are also long, so I would abstract those out too. Problem with Bergi's way is most linters will cripple his style, for conformance reasons.

This way keeps everything normal and easy to read, if you are familiar with ternaries, which you should be.

const styleWithBorder = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const styleWithoutBorder = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const classes = isBorderedElement ? [ styleWithBorder ] : [ styleWithoutBorder ]

score 0 · Answer 7 · answered Apr 03 '19 at 11:11

Simple, just do this:

const genericStyle = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`,

classes = withBorder ? `${styles.circularBorder} ${genericStyle}` : genericStyle;

return (
  <div className={classes}>
    {renderedResult}
  </div>
);

This has some clean-up also, the class used twice and only circularBorder is the difference...

Use if else to declare a `let` or `const` to use after the if/else?

7 Answers7

Linked

Related