javascript - sentencia - Use if else para declarar un `let` o` const` para usar después de if/else?

que es if else en programacion

Question

No estoy seguro de por qué, pero parece que no puedo llamar a las variables let o const si las declaro en una sentencia if/else .

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>
);

Si uso este código dice que las classes is not defined .

Pero si cambio la const a var clases están definidas, pero recibo una advertencia sobre las classes used outside of binding context y all var declarations must be at the top of the function scope

¿Cómo podría arreglar esto?

Answer 1

Alternativa (aunque no estoy seguro de que sea buena ni elegante ):

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

Answer 2

Deberías usar la asignación ternaria:

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`

Como se especifica en otros comentarios / respuestas, let y const tienen un alcance bloqueado, por eso no funcionan en su ejemplo.

Para un código DRYer también puede anidar el literal ternario dentro de la cadena:

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

Answer 3

El estándar ESLint le gusta a los operadores al principio de la línea. Los condicionales largos también deben abstraerse, a menos que estén en un bucle de tiempo de computadora.

En este caso particular, las cuerdas también son largas, por lo que también las abstraería. El problema con la manera de Bergi es que la mayoría de los linters paralizarán su estilo, por razones de conformidad.

De esta manera, todo estará normal y fácil de leer, si está familiarizado con los ternarios, como debería ser.

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 ]

Answer 4

No utilice una sentencia if - else - sino una expresión ternaria:

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`;

Alternativamente, simplemente declare fuera del bloque if , que le permite deshacerse de la duplicación también:

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}`;
}

También eche un vistazo a la construcción de nombres de clase desordenados .

Answer 5

let y const están a nivel de bloque, por lo que tendrá que definirlos fuera del bloque. var trabaja porque se levanta.

Puedes definir classes antes del bloque if como @finalfreq

o

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

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

Answer 6

let y const tienen un ámbito de nivel de bloque, lo que significa que solo se pueden utilizar dentro del bloque en el que se han definido, es decir. { // if defined in here can only be used here }

En este caso solo definiría arriba la sentencia if / else

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`;
}