Operador Javascript AND dentro de la asignación

8 minutos de lectura

Operador Javascript AND dentro de la asignacion
Alex

Sé que en JavaScript puedes hacer:

var oneOrTheOther = someOtherVar || "these are not the droids you are looking for...";

donde la variable oneOrTheOther tomará el valor de la primera expresión si no es null, undefinedo false. En cuyo caso se asigna al valor de la segunda declaración.

Sin embargo, ¿qué significa la variable oneOrTheOther ser asignado cuando usamos el operador lógico AND?

var oneOrTheOther = someOtherVar && "some string";

¿Qué pasaría cuando someOtherVar no es falso?
¿Qué pasaría cuando someOtherVar ¿Es falso?

Acabo de aprender JavaScript y tengo curiosidad por saber qué sucedería con la asignación junto con el operador AND.

  • Intentalo. jsfiddle.net/uv6LR

    – icktoofay

    2 de julio de 2010 a las 5:30

  • vea mi respuesta de una publicación relacionada … stackoverflow.com/questions/3088098/…

    – Anurag

    2 de julio de 2010 a las 5:59


  • En su ejemplo, si someOtherVar no está definido, arrojará un error. El uso de window.someOtherVar le permitirá tomar el segundo valor si someOtherVar no está definido.

    – Rico

    13 de mayo de 2015 a las 0:11

Básicamente, el operador lógico AND (&&), devolverá el valor del segundo operando si el primero es verazy devolverá el valor del primer operando si es solo falsopor ejemplo:

true && "foo"; // "foo"
NaN && "anything"; // NaN
0 && "anything";   // 0

Tenga en cuenta que falso Los valores son los que obligan a false cuando se usan en contexto booleano, son null, undefined, 0, NaNuna cadena vacía, y por supuesto falsecualquier otra cosa obliga a true.

  • Está bien. Gracias. Eso tiene sentido ya que, después de todo, es el reverso del operador OR.

    – Alex

    2 de julio de 2010 a las 5:29

  • Por lo tanto, cuando se usa con valores booleanos, && devuelve verdadero si ambos operandos son verdaderos; de lo contrario, devuelve falso. (desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)

    – Bardelman

    22/10/2015 a las 11:00

  • Me encanta el ejemplo. Sería genial si incluyeras un poco sobre && ser llamado un operador de ‘guardia’ que es bueno para verificaciones nulas ya que es un buen contexto para tener. Incluso podría citar a Douglas Crockford aquí: javascript.crockford.com/encuesta.html

    – Akrikos

    21 de abril de 2016 a las 14:02

&& a veces se le llama Guardia operador.

variable = indicator && value

se puede usar para establecer el valor solo si el indicador es verdadero.

  • Respuesta muy clara. Las otras respuestas me dejaron bastante desconcertado, pero esta es una forma muy clara de expresarlo. ¡Gracias!

    – ctaymor

    23 de julio de 2014 a las 20:18

  • Creo que esta respuesta es claramente incorrecta. Después de que se haya ejecutado la declaración anterior, el valor de ‘variable’ es el valor de la expresión “indicador && valor” sea lo que sea. Entonces, el valor de la variable en el lado izquierdo de la asignación siempre se establece en algo. independientemente de lo que suceda en el lado derecho (a menos que se arroje un error). ¿No?

    – Lógica Panu

    29 de diciembre de 2020 a las 21:46


Operador Javascript AND dentro de la asignacion
rey viernes

Ejemplo de principiantes

Si está tratando de acceder a “user.name” pero luego sucede esto:

Uncaught TypeError: Cannot read property 'name' of undefined 

No temáis. Puede usar el encadenamiento opcional de ES6 en los navegadores modernos hoy.

const username = user?.name;

Ver MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Aquí hay algunas explicaciones más profundas sobre los operadores de guardia que pueden resultar útiles para comprender.

Antes de que se introdujera el encadenamiento opcional, resolvería esto usando el && operador en una tarea o a menudo llamado el operador de guardia ya que “protege” de que ocurra un error indefinido.

Aquí hay algunos ejemplos que puede encontrar extraños, pero siga leyendo, ya que se explica más adelante.

var user = undefined;
var username = user && user.username;
// no error, "username" assigned value of "user" which is undefined

user = { username: 'Johnny' };
username = user && user.username;
// no error, "username" assigned 'Johnny'

user = { };
username = user && user.username;
// no error, "username" assigned value of "username" which is undefined

Explicación: En la operación de guardia, cada término se evalúa de izquierda a derecha uno a la vez. Si un valor evaluado es falso, la evaluación se detiene y luego se asigna ese valor. Si se llega al último elemento, se asigna si es falso o no.

falso significa que es cualquiera de estos valores undefined, false, 0, null, NaN, '' y veraz simplemente significa que NO es falso.

Bonificación: el operador OR

La otra extraña asignación útil que tiene un uso práctico es la O operador que normalmente se usa para complementos como este:

this.myWidget = this.myWidget || (function() {
   // define widget
})();

que solo asignará la parte del código si “this.myWidget” es falso. Esto es útil porque puede declarar el código en cualquier lugar y varias veces sin importar si se asignó o no previamente, sabiendo que solo se asignará una vez, ya que las personas que usan un complemento pueden declarar accidentalmente su etiqueta de secuencia de comandos src varias veces.

Explicación: Cada valor se evalúa a partir de de izquierda a derecha, uno a la vez. Si un valor es verdadero, detiene la evaluación y asigna ese valor, de lo contrario, continúa, si se llega al último elemento, se asigna sin importar si es falso o no.

Crédito Extra: Combinando && y || en una tarea

Ahora tienes el poder supremo y puedes hacer cosas muy extrañas, como este ejemplo muy extraño de usarlo en un palíndromo.

function palindrome(s,i) {
 return (i=i || 0) < 0 || i >= s.length >> 1 || s[i] == s[s.length - 1 - i] && isPalindrome(s,++i);
}

Explicación detallada aquí: Verificación de Palindrome en Javascript

Codificación feliz.

  • gracias, excelente ejemplo! Me ayuda mucho a entender && y || operadores! +1

    – Afortunado

    17 de julio de 2015 a las 19:27

  • ¡Gracias por esta respuesta! Tengo curiosidad por cuánto tiempo JS seguirá intentando acceder a la propiedad de nivel más profundo. Por ejemplo, si estaba esperando una respuesta para llegar a su backend, ¿es seguro usar var x = y && y.z ?

    –Scott Savarie

    8 de enero de 2018 a las 8:29

citando douglas crockford1:

los && El operador produce el valor de su primer operando si el primer operando es falso. De lo contrario, produce el valor del segundo operando.


1 Douglas Crockford: JavaScript: las partes buenas – Página 16

De acuerdo a ECMAScript 5.1 anotado sección 11.11:

En el caso del operador OR lógico (||),

expr1 || expr2 Devuelve expr1 si se puede convertir en verdadero; de lo contrario, devuelve expr2. Por lo tanto, cuando se usa con valores booleanos, || devuelve verdadero si alguno de los operandos es verdadero; si ambos son falsos, devuelve falso.

En el ejemplo dado,

var unoOElOtro = algunaOtraVar || “estos no son los droides que estás buscando… muévete”;

El resultado sería el valor de someOtherVar, si Boolean(someOtherVar) es verdadero.(Consulte. Veracidad de una expresión.). Si es falso, el resultado sería “estos no son los droides que estás buscando… sigue adelante”;

Y en el caso del operador lógico AND (&&),

Devuelve expr1 si se puede convertir a falso; de lo contrario, devuelve expr2. Por lo tanto, cuando se usa con valores booleanos, && devuelve verdadero si ambos operandos son verdaderos; de lo contrario, devuelve falso.

En el ejemplo dado,

caso 1: cuando Boolean(someOtherVar) es falso: devuelve el valor de someOtherVar.

caso 2: cuando Boolean(someOtherVar) es verdadero: devuelve “estos no son los droides que estás buscando… sigue adelante”.

Veo esto de manera diferente a la mayoría de las respuestas, así que espero que esto ayude a alguien.

Para calcular una expresión que involucre ||, puede dejar de evaluar la expresión tan pronto como encuentre un término que sea verdadero. En ese caso, tienes dos piezas de conocimiento, no solo una:

  1. Dado el término que es veraz, toda la expresión se evalúa como verdadera.
  2. Sabiendo 1, puede terminar la evaluación y devolver el último término evaluado.

Por ejemplo, false || 5 || "hello" evalúa hasta e incluyendo 5, lo cual es cierto, por lo que esta expresión se evalúa como true y devuelve 5.

Entonces, el valor de la expresión es lo que se usa para una declaración if, pero el último término evaluado es lo que se devuelve al asignar una variable.

De manera similar, evaluar una expresión con && implica terminar en el primer término que es falso. Luego arroja un valor falso y devuelve el último término que se evaluó. (Editar: en realidad, devuelve el último término evaluado que no era falso. Si no hay ninguno de esos, devuelve el primero).

Si ahora lee todos los ejemplos en las respuestas anteriores, todo tiene perfecto sentido 🙂

(Esta es solo mi opinión sobre el asunto, y mi suposición de cómo funciona esto realmente. Pero no está verificado).

1646749753 30 Operador Javascript AND dentro de la asignacion
Dibujó trato

He estado viendo && usado en exceso aquí en el trabajo para declaraciones de asignación. La preocupación es doble: 1) La verificación del ‘indicador’ a veces es una función con sobrecarga que los desarrolladores no tienen en cuenta. 2) Es fácil para los desarrolladores verlo simplemente como una verificación de seguridad y no considerar que están asignando false a su var. Me gusta que tengan una actitud de seguridad tipográfica, así que les pido que cambien esto:

var currentIndex = App.instance && App.instance.rightSideView.getFocusItemIndex();

a esto:

var currentIndex = App.instance && App.instance.rightSideView.getFocusItemIndex() || 0;

por lo que obtienen un número entero como se esperaba.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad