JavaScript and, or und not – Logik-Operatoren

Logische Operatoren

Neben einfachen Bedingungen wie if (a > b) gibt es Situationen, in denen komplexe Bedingungen formuliert werden müssen.

Logische Operatoren prüfen, ob eine oder mehrere Bedingungen true oder false liefern

Bitweise Operatoren führen logische Operationen auf dem Bitlevel aus

NOT – Umkehrung

Das Ausrufezeichen – der !-Operator – gibt true zurück, wenn der Operand den Wert false aufweist und umgekehrt. ! dreht als den Wert um.

let x;
if (!x) {
	console.log ("wird true")
}

const x = 200;
const b = !x;
console.log ("b", b);

const x = 0;
const c = !x;
console.log ("c", c);

let x = "";
const s = !x;
console.log ("s", s); 

OR – »logisches Oder«

Der ||-Operator gibt true zurück, wenn mindestens ein Operand true ist. Ist kein Operand true, entwickelt sich der Ausdruck zu false.

const x = 20;
const y = 200;

if (x > 10 || y < 5)
       ▲        ▲
      true    false

const foo = "#FFF";
const bar = "#AAA";

if (foo < bar || !foo ) 
        ▲         ▲
      false     false

Strings können ebenfalls miteinander verglichen werden. Der Vergleich von Strings ordnet nach dem Alphabet: foo ist nicht kleiner als bar. !foo liefert false, denn foo ist definiert, nicht leer und hat also einen truthy-Wert. Die Bedingung im zweiten Block entwickelt sich zu false.

Das gibt uns eine komfortable Methode, um Defaultwerte zu deklarieren:

myVal = v || 10;

Wenn der erste Operand false, null, undefined, "" (leere Zeichenkette) oder die Zahl 0 zurückgibt, gibt der ||-Operator den zweiten Operanden zurückgegeben, ansonsten den ersten Operanden.

AND – »logisches Und«

&& gibt true zurück, wenn sich sowohl der linke als auch der rechte Wert (und auch alle weiteren Operanden) zu true entwickeln.

const x = 20;
const y = 0;
if (x > 100 && y < 5) { //true }
      ▲          ▲
    true        true

const x = 20;
const y = 0;
if (x > 0 && y) { //false }
      ▲      ▲
    true    false 

const a = 400;
const b = "400";

if (a > 0 && a == b) { //true}
      ▲        ▲
    true      true

const a = 400;
const b = "400";
const c = 400.0
if (a === c && a === b) { //false }
       ▲          ▲
     true       false

truthy und falsy – wahr oder falsch

In logischen Operationen werden Werte in true oder false konvertiert, auch wenn diese Werte eigentlich Zahlen oder Strings sind. Jeder Wert in JavaScript hat auch einen inhärenten booleschen Wert, der als truthy oder falsy bezeichnet wird.

Der Wert 0 einer Zahl ist falsy, liefert also in einer logischen Operation false, während ein Wert 17 truthy ist. Ein weiterer Begriff ist nullish – null-ähnlich. Diese feinen Unterschiede brauchen Skripte z.B. um zu untersuchen, ob Variablen oder Eigenschaften definiert und vorhanden sind.

Variable oder Eigenschaft – existiert oder existiert nicht?

Mit dem &&-Operator kann man schnell einen null-Check durchführen. Wenn der erste Operand falsy ist (false, null, undefined, "" oder 0), gibt der &&-Operator den ersten Operanden zurück (also false), ansonsten den zweiten bzw. letzten Operanden.

function output (x) {
	console.log ("output x", x)
}

const article = document.querySelector ("article");
article && output (article.innerHTML);

Der Ausdruck untersucht, ob das Objekt article einen Wert hat, und wenn ja, wird die Funktion output() aufgerufen.

Wenn Daten von einer Anwendung auf dem Server übernommen werden, muss geprüft werden, ob die Daten tatsächlich vorliegen und sinnvolle Werte enthalten. Hier: prüfen, ob das Array Werte enthält.

const color = [];
color.length > 0 && console.log (color[0]);

Bitweise Operationen

Bitweise Operatoren führen logische Operationen und Schiebeoperationen durch. Sie operieren auf den Operanden, als wären diese eine Folge von 32 Bits, geben aber eine Dezimalzahl zurück.

Bitweise AND

Der &-Operator gibt eine 1 für jede Stelle zurück, an der die korrespondierenden Bits beider Operanden 1 ist.

let x = 2;             // 0000 0010
let y = 42;            // 0010 1010

let z = x & y;         // 0000 0010 = 2

Bitweise OR

Der |-Operator gibt eine 1 für jede Stelle zurück, an der eines oder beide der korrespondierenden Bits der Operanden 1 sind.

let x = 2;             // 0000 0010
let y = 42;            // 0010 1010

let z = x | y;         // 0010 1010 = 42

Bitweise XOR

Der ^-Operator gibt eine 1 zurück für jede Stelle, an der genau einer (aber nicht beide) korrespondierenden Bits der Operanden 1 sind.

let x = 2;             // 0000 0010
let y = 42;            // 0010 1010

let z = x ^ y;         // 0010 1000 = 40

Nach links schieben

Der << -Operator schiebt die Bits des ersten Operanden nach links, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind. Die Stellen, die dabei auf der rechten Seite entstehen, werden mit Nullen gefüllt und alle Nullen und Einsen, die auf der linken Seite herausfallen, werden gelöscht. Das Verschieben des binären Werts nach links um n Stellen entspricht der Multiplikation mit 2ⁿ.

let x = 1024;           // 0100 0000 0000
x = x<<2;               // 1000 0000 0000
alert(x);               // gibt 4096 aus

<p><input type="text" id="opX" size="6" />  
um <input type="text" id="opS" size="2" /> nach links schieben

<div id="opResult"> </div>
<div><button id="shift">Schieb los</button></div>

let shift = document.getElementById('shift');
shift.onclick = function() {
    let x = parseInt(document.getElementById('opX').value);
    let s = parseInt(document.getElementById('opS').value);
    let y = document.getElementById('opResult');

    if (isNaN(x) || isNaN(s)) {
        y.innerHTML = "Fehlerhafte Eingabe";
    } else {
        y.innerHTML = x<<s;
    }
}

Nach rechts verschieben

Der >>-Operator schiebt die Ziffern der Binärdarstellung des ersten Operanden nach rechts, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind und löscht dabei alle Ziffern, die nach rechts herausgeschoben werden. Das Bits der linken Seite werden kopiert, so dass das Vorzeichen der Zahl erhalten bleibt. Das Verschieben des Binärwerts um n Stellen entspricht der Division durch 2ⁿ.

let x = -1024;           // 1111 1100 0000 0000
x = x>>4;                // 1111 1111 1100 0000 = -64
alert(x);

Nach rechts schieben und mit Nullen auffüllen

Der >>>-Operator schiebt die Binärdarstellung des ersten Operanden nach rechts, und zwar um die Anzahl der Stellen, die im zweiten Operanden notiert sind. Bits, die dabei zur rechten Seite herausfallen, werden gelöscht und auf der linken Seite werden Nullen eingesetzt. Der >>>-Operator funktioniert also genauso wie der >>-Operator, aber negative Werte verlieren ihr Vorzeichen.

Bitweises Komplement

Der ~-Operator komplementiert die Stellen des Binärwerts – aus Null wird Eins und aus Eins wird Null.

let y = 42;         // ... 0000 0010 1010
let z = ~y;         // ... 1111 1101 0101 = -43