Declaración de JavaScript de una sola línea 'if' - mejor sintaxis, esta alternativa?

201

Se ha dicho claramente, aunque no obstante la opinión, que renunciar a los corchetes en una ifdeclaración de una sola línea no es ideal para el mantenimiento y la legibilidad.

¿Pero qué hay de esto?

if (lemons) { document.write("foo gave me a bar"); }

Está aún más comprimido, y si se expande, las llaves no se olvidarán. ¿Hay problemas evidentes y, de no ser así, cuáles son las consideraciones? Siento que todavía es muy legible, al menos tanto como un operador ternario de todos modos. Me parece que los operadores ternarios no se sugieren tanto debido a la legibilidad, aunque creo que esa conclusión no es tan unánime.

El gemelo malvado en mí quiere sugerir esto, aunque la sintaxis obviamente no está hecha para eso, y probablemente sea solo una mala idea.

(syntax) ? document.write("My evil twin emerges"): "";
David Hobs
fuente
2
Sería bueno si JavaScript admitiera los condicionales de fin de frase:document.write("My evil twin emerges") if lemons
Beau Smith
77
Creo que podrías estar pensando en la breve declaración if, else. ( variable = (condition) ? true-value : false-value;.) Buena suerte.
Progo

Respuestas:

328

He visto el comportamiento de cortocircuito del &&operador utilizado para lograr esto, aunque las personas que no están acostumbradas a esto pueden tener dificultades para leer o incluso llamarlo antipatrón:

lemons && document.write("foo gave me a bar");  

Personalmente, a menudo usaré una sola línea ifsin corchetes, como este:

if (lemons) document.write("foo gave me a bar");

Si necesito agregar más declaraciones, pondré las declaraciones en la siguiente línea y agregaré corchetes. Como mi IDE hace sangría automática, las objeciones de mantenibilidad a esta práctica son discutibles.

Peter Olson
fuente
11
Me gusta este último. ¡Gracias por el aporte y una alternativa creativa más en el primero!
David Hobs
debe saber lo que espera, ya que la cadena vacía y 0 son valores falsos, fallará la ejecución de la segunda declaración
Orlando
1
Por supuesto, también puede poner una declaración booleana más explícita allí
acjay el
77
@PeterOlson ¿por qué son discutibles las objeciones de mantenibilidad? ¿Qué sucede si algún otro desarrollador no utiliza su IDE con su configuración?
agconti
2
Gracias por ser lo suficientemente valiente como para hablar en apoyo de una sola línea si las declaraciones sin corchetes. Algún día nuestros hijos te lo agradecerán.
Marc M.
136

Lo uso así:

(lemons) ? alert("please give me a lemonade") : alert("then give me a beer");
asael2
fuente
36
alert(lemons?"please give me a lemonade":"then give me a beer")
MrVaykadji
43

Puede usar este formato, que se usa comúnmente en PHP:

(lemon) ? document.write("foo gave me a bar") : document.write("if condition is FALSE");
Macro
fuente
12
No necesita corchetes en el lemon.
leymannx
66
Puede ser una buena práctica incluir () alrededor de una declaración condicional: elimina cualquier confusión en cuanto al orden de operaciones, etc. para otros desarrolladores. Por lo general, me equivoco al especificarlo, excepto cuando no hay forma de que alguien calificado para confundirse.
djvs
1
document.write(lemon ? "foo gave me a bar" : "if condition is FALSE");:)
Joseph Goh
Me gustan los corchetes ya que para mí implican una coerción booleana.
Daniel Sokolowski
18

Esta línea es mucho más limpia.

if(dog) alert('bark bark');

Prefiero esto. espero que ayude a alguien

shakee93
fuente
16

puede usar esto,

lemons ? alert("please give me a lemonade") : alert("then give me a beer");

explicación: si lemonsexiste entonces dame unalert("please give me a lemonade") else alert("then give me a beer")

Mohideen bin Mohammed
fuente
Gran solución
Davidson Lima
1
lemons? alert("please give me a fancy beer with a lemon wedge in it"): alert(please give me a beer")FTFY
stib
15

// Otro ejemplo simple

 var a = 11;
 a == 10 ? alert("true") : alert("false");
usuario3413838
fuente
15
¿Por qué no simplemente ... var a = 11; alert(a === 10);?
ManuKaracho
@ManuKaracho Veo mucho este problema cuando trabajo con declaraciones ternarias. Entiendo que OP puede haber estado tratando de escribir uno simple, pero está rampante en el código que leí en el trabajo.
Adam-Beck
alert(a === 10 ? "true" : "false")
Josh Wood el
@JoshWood, la alerta también imprimirá booleanos, así que puedes hacer lo alert(a===10)que dijo Manu.
Keith
12

Como mucha gente ha dicho, si está buscando una línea 1 real, entonces:

    if (Boolean_expression) do.something();

se prefiere. Sin embargo, si estás buscando hacer un if / else, entonces ternary es tu amigo (y también genial):

    (Boolean_expression) ? do.somethingForTrue() : do.somethingForFalse();

ADEMÁS:

    var something = (Boolean_expression) ? trueValueHardware : falseATRON;

Sin embargo, vi un ejemplo muy bueno. Grita a @ Peter-Oslson por &&

    (Boolean_expression) && do.something();

Por último, no es una declaración if, pero ejecutar cosas en un bucle con map / reduce o Promise.resolve () también es divertido. Grita a @brunettdan

Kemacal
fuente
7

Como ya se ha indicado, puede usar:

&& estilo

lemons && document.write("foo gave me a bar");  

o

estilo sin soporte

if (lemons) document.write("foo gave me a bar");

retorno de cortocircuito

Sin embargo, si desea utilizar la ifinstrucción de una línea para hacer un cortocircuito en una función, necesitaría usar la versión sin paréntesis de esta manera:

if (lemons) return "foo gave me a bar";

como

lemons && return "foo gave me a bar"; // does not work!

te dará un SyntaxError: Unexpected keyword 'return'

Bagazo
fuente
En los cortocircuitos de una sola línea, podemos omitir 'retorno' y debería funcionar como se esperaba. `` `limones &&" foo me dio un bar "; // ¡trabajos! ``
siwalikm
@siwalikm podrías explicar? Esto es para el caso en el que no quieres regresar lemons(si es falsey), solo quieres regresar "foo me dio barra" cuando lemonses verdad.
Marc
si (limones) devuelven "foo me dio una barra"; esto está mal. Le dará "Error de sintaxis no capturado: declaración de devolución ilegal"
Fenec
@Fenec, ¿compartiría el navegador y la versión que le causa este error? Esto funcionó para mí hace casi 2 años y sigue funcionando para mí.
Marc
4

He visto muchas respuestas con muchos votos defendiendo el uso del operador ternario. El ternario es excelente si a) tiene una opción alternativa yb) está devolviendo un valor bastante simple de una condición simple. Pero...

La pregunta original no tenía una alternativa, y el operador ternario con una sola rama (real) lo obliga a devolver una respuesta precisa.

lemons ? "foo gave me a bar" : "who knows what you'll get back"

Creo que la variación más común es lemons ? 'foo...' : '' , y, como sabrá al leer la miríada de artículos para cualquier idioma sobre verdadero, falso, verdadero, falso, nulo, nulo, en blanco, vacío (¿con nuestro sin?), Está entrando un campo minado (aunque un campo minado bien documentado)

Tan pronto como cualquier parte del ternario se complique, estará mejor con una forma más explícita de condicional.

Un largo camino para decir que estoy votando if (lemons) "foo".

Anita Graham
fuente
2

También se puede hacer usando una sola línea con whilebucles y ifasí:

if (blah)
    doThis();

También funciona con whilebucles.

Noitidart
fuente
77
Esto fallará en el revestimiento y no se recomienda
danwellman
9
El OP también pidió una línea.
codificación aaron
2

Ejemplo en funciones de flecha:

let somethingTrue = true
[1,2,3,4,5].map(i=>somethingTrue && i*2)

En promesas:

Promise.resolve()
  .then(_=>checkTrueFalse && asyncFunc())
  .then(_=>{ .. })

De otra manera:

if(somethingTrue) thenDo()

Si es solo un condicional simple, prefiero usar if (valor) siempre que sea posible porque la palabra if al comienzo de la declaración dice más sobre lo que está sucediendo que la parálisis y los signos de interrogación.

Brunettdan
fuente
1
**Old Method:**
if(x){
   add(x);
}
New Method:
x && add(x);

Incluso asignar operación también podemos hacer con corchetes

exp.includes('regexp_replace') && (exp = exp.replace(/,/g, '@&'));
Sajith Mantharath
fuente
"Incluso asignar la operación también podemos hacerlo con corchetes". Esto es muy interesante, no sabía que era posible realizar operaciones de asignación dentro de estas operaciones de una sola línea.
Sagits