OPERATORI JAVASCRIPT

Prima di iniziare, cerchiamo di capire la terminologia.

Un operando – è ciò a cui si applica l’operatore. Ad esempio, nella moltiplicazione 5 * 2 ci sono due operandi: l’operando sinistro è il numero 5, e l’operando di destra è il numero 2. A volte gli operandi vengo anche chiamati “argomenti”.
Un operatore è unario se ha un singolo operando. Ad esempio, la negazione – inverte il segno di un numero:

let x = 1;

x = -x;

alert( x ); // -1, viene applicata la negazione unaria

Un operatore è binario se ha due operandi. Lo stesso operatore “meno” esiste nella forma binaria:

let x = 1, y = 3;

alert( y – x ); // 2, la sottrazione binaria sottrae i valori

Formalmente, negli esempi precedenti abbiamo due diversi operatori che condividono lo stesso simbolo: la negazione (operatore unario che inverte il segno) e la sottrazione (operatore binario che esegue la sottrazione).

OPERATORI DI CONFRONTO E DI UGUAGLIANZA

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Operatori di confronto e di uguaglianza</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*--Gli operatori si dividono in
        unari, binari e ternari.*/
        //OPERATORI UNARI
        let a = 0;
        a++;
        let booleano = !!0;
        //OPERATORI BINARI, operano su un'espressione costituita da due elementi
        //il risultato dell'espressione è true oppure false.
        //<, <=, >, >= questi operatori normalmente operano sui numeri
        //ma possono essere usati anche per confrontare stringhe.
        //Operatore di confronto semplice ==
        //Opertaore di stretta uguaglianza ===
        console.log('a' > 'A');//true perchè il confronto è effettuato sul codice ASCII.
        console .log('ciao' == 'Ciao')//false JS è case-sensitive
        console.log(' 3\n' == 3)//true
        console.log(-0 == '0')//true
        /*--Per quanto riguarda l'uguaglianza semplice JS opera delle
        trasformazioni in modo automalico. Effettua quella che si chiama
        coercizione implicita. L'operatore === impedische queste trasformazioni.*/
        console.log(NaN == NaN)//false
        console.log(null == undefined)//true
        console.log('0' === 0);//false controllo sul tipo e sul valore
        //se il tipo è diverso restituisce sempre false.
        console.log(0 === 0)//true
    </script>
</body>
</html>

COERCIZIONE IMPLICITA

Javascript è un linguaggio debolmente tipizzato, possiamo assegnare un valore ad una variabile poi cambiarne il tipo. Immagine sotto.

Esistono due tipi di coercizione. Implicita ed esplicita. Nella coercizione esplicita siamo noi a chiedere a javascript la trasformazione di un valore da un tipo ad un altro, il doppio punto esclamativo !! è un tipo di coercizione esplicita che forza un valore al suo relativo valore booleano.

La conversione a number viene effettuata dagli operatori di confronto, dalla semplice uguaglianza e dagli operatori aritmetici. Veniamo all’operatore + la regola è che viene fatto il tentativo di conversione a number. Ma abbiamo un’eccezione, se uno dei due elementi su cui opera + è di tipo string viene fatta una concatenazione forzando gli elementi al tipo string. Questo spiega i casi 1. 2. 3. Se invece non vi è tra gli operandi una stringa viene tentata la conversione a number. Questo spiega i casi 4. 5. 6.

Quando javascript fa le conversioni la prima cosa che fa è eliminare spazi, tabulazioni e ritorni a capo. Questo ci spiega i casi da 4 a 8. Ci sono dei casi speciali per l’operatore di uguaglianza questo succede per null e undefined. Figura sotto

COERCIZIONE ESPLICITA

Il codice sotto riportato visualizza alcuni casi di coercizione esplicita.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Coercizione esplicita</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        //COERCIZIONE ESPLICITA
        console.log(Number("3"));//3
        console.log(Number(""));//0
        console.log(Number(null));//0 null come abbiamo visto viene convertito a 0.
        console.log(Number(false));//0 false come abbiamo visto viene convertito a 0.
        console.log(Number('ciao'));//NaN
        console.log(String(2));//'2'
        console.log(String(null));//'null'
        console.log(String(true));//'true'
        console.log(Boolean(false));//false
        console.log(!!10);//true
        /*--Valori considerati false in javascript:
        false, '' , Nan, null, undefined, 0, -0.
        Tutti gli altri valori sono considerati veri.*/
        /*--Un modo veloce per convertire una stringa in numero
        è usare l'operatore unario +*/
        console.log(+'10'); //10
    </script>
</body>
</html>

OPERATORI LOGICI

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Operatori logici</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        //OPERATORI LOGICI
        console.log(2 && 0);//0
        console.log(2 && 1);//1
        console.log(true && false);//false
        console.log(true && true);//true
        console.log(2 || 0);//true
        console.log(0 || 2);//true
        console.log(!0);//true
        console.log(!10);//false
        console.log(!true);//false
        console.log(!false);//true

let v = 19;
        let g = 'Sole';
        if (v >= 18 && v < 22){
            console.log('Passeggiata');
        }
        // true && true Passeggiata
        if ((v >= 18 && v < 22) && (g == 'Sole') || (g == 'Nuvoloso')){
            console.log('Passeggiata');
        }
        //Quando ci sono espressioni multiple è bene raggrupparle tra parentesi
        //(true && true) && (true || false)
        //true && true
        //true
    </script>
</body>
</html>

PASSAGGIO PER VALORE O PER RIFERIMENTO

In javascript number, string, boolean, null e undefined sono passati per valore. Una modifica in a non influisce sul valore di b in quanto l’assegnazione let b = a crea una copia del valore di a in b. Oggetti array e funzioni vengono passati per riferimento, ossia non viene fatta una copia ma viene passato il riferimento in memoria. Una modifica a obj1 o obj2 si rispecchierà l’una sull’altra. Figura sotto riportata.

Restituiscono true in quanto condividono lo stesso riferimento in memoria.

OPERATORI ARITMETICI

Gli operatori aritmetici vengono utilizzati per eseguire operazioni aritmetiche sui numeri:

L’operatore di addizione (+) somma i numeri:

let x = 55;
let y = 29;
let z = x + y; //Result 84

L’operatore di sottrazione (–) sottrae i numeri.

let x = 5;
let y = 2;
let z = x – y; //Result 3

L’operatore di moltiplicazione (*) moltiplica i numeri.

let x = 51;
let y = 20;
let z = x * y; //Result 1020

L’operatore di divisione (/) divide i numeri.

let x = 5;
let y = 2;
let z = x / y; //Result 2.5

L’operatore modulo (%) restituisce il resto della divisione.

let x = 5;
let y = 2;
let z = x % y; //Result 1

In aritmetica, la divisione di due interi produce un quoziente e un resto. In matematica, il risultato di un’operazione modulo è il resto di una divisione aritmetica.

L’operatore di incremento (++) incrementa i numeri.

let x = 50;
x++;
let z = x; //z=51

L’operatore di decremento (—) decrementa i numeri.

let x = 50;
x–;
let z = x; //z=49

L’operatore di esponenziazione (**) eleva il primo operando alla potenza del secondo operando.

let x = 5;
let z = x ** 2; //result is 25

x ** y produce lo stesso risultato di Math.pow(x,y):

PRECEDENZA TRA GLI OPERATORI

La precedenza dell’operatore descrive l’ordine in cui le operazioni vengono eseguite in un’espressione aritmetica.

let x = 1000 + 5 * 3;

Si fa prima l’addizione o la moltiplicazione? Come nella matematica scolastica tradizionale, la moltiplicazione viene eseguita prima. La moltiplicazione (*) e la divisione (/) hanno una precedenza maggiore rispetto all’addizione (+) e alla sottrazione (-). E (come nella matematica scolastica) la precedenza può essere modificata usando le parentesi:

let x = (1000 + 5) * 3; //result is 3015

Quando si usano le parentesi, le operazioni all’interno delle parentesi vengono calcolate per prime. Se molte operazioni hanno la stessa precedenza (come addizione e sottrazione), vengono calcolate da sinistra a destra:

let x = 100 + 50 – 3; //result 147

OPERATORI DI ASSEGNAZIONE

Gli operatori di assegnazione assegnano valori alle variabili JavaScript.

L’operatore di assegnazione (=) assegna un valore a una variabile.

let x = 10;

L’operatore di assegnazione += aggiunge un valore a una variabile.

let x = 15;
x += 5; //x=x+5 = 20

L’operatore di assegnazione -= sottrae un valore da una variabile.

let x = 15;
x -= 5; //x=x-5 = 10

L’operatore di assegnazione *= moltiplica una variabile.

let x = 10;
x *= 5; //x=x*5 = 50

L’assegnazione /= divide una variabile.

let x = 15;
x /= 5; //x = x / 5 = 3

L’operatore di assegnazione %= assegna un resto a una variabile.

let x = 15;
x %= 5; //x = x % 5 = 0

OPERAZIONI SULLE STRINGHE

Nota che se almeno uno degli operandi è una stringa, anche gli altri verranno convertiti in stringa.

Ad esempio:

alert( ‘1’ + 2 ); // “12”

alert( 2 + ‘1’ ); // “21”

Come puoi vedere, non è importante se la stringa è il primo o il secondo operando. La regola è semplice: se uno degli operandi è una stringa, anche gli altri vengono convertiti a stringa. Comunque, queste operazioni vengono eseguite da sinistra verso destra, se ci sono due numeri prima di una stringa, prima vengono sommati e il risultato convertito in stringa:

Ora un esempio più complesso:

alert(2 + 2 + ‘1’ ); // “41” non “221”

Qui le operazioni vengo eseguite una di seguito all’altra, da sinistra verso destra. Il primo + somma i due numeri e restituisce 4, quindi il successivo + concatena a quest’ultimo la stringa 1, quindi sarebbe come fare 4 + ‘1’ = “41”. L’operatore binario + è l’unico che può lavorare con le stringhe in questo modo. Gli altri operatori aritmetici funzionano solo con i numeri. Infatti, convertono sempre i loro operandi in numeri.

Questo è un esempio per la sottrazione e la divisione:

alert( 6 – ‘2’ ); // 4, converte la stringa ‘2’ in numero

alert( ‘6’ / ‘2’ ); // 3, converte entrambi gli operandi in numeri

CONVERSIONE NUMERICA OPERATORE UNARIO +

L’operatore + esiste in due forme. La forma binaria che abbiamo utilizzato sopra, e quella unaria. L’operatore unario + viene applicato ad un singolo valore. Nel caso questo sia un numero, non succede nulla. Se invece non è un numero, questo viene convertito in un operando di tipo numerico.

Ad esempio:

// Nessun effetto sui numeri

let x = 1;

alert( +x ); //1

let y = -2;

alert( +y ); // -2

// Converte i valori non numerici

alert( +true ); // 1

alert( +”” ); // 0

Si ottiene lo stesso risultato di Number(…), ma in un modo più veloce.

La necessità di convertire stringhe in numeri si presenta molto spesso. Ad esempio, se stiamo prelevando un valore da un campo HTML, questo solitamente sarà di tipo stringa. Come procedere in caso volessimo sommare questi valori?

La somma binaria li concatenerebbe come stringhe:

let apples = “2”;

let oranges = “3”;

// entrambi i valori vengono convertiti in numeri prima della somma binaria

alert( +apples + +oranges ); // 5

// la variante più lunga

// alert( Number(apples) + Number(oranges) ); // 5

L’operatore + può essere utilizzato anche per aggiungere (concatenare) stringhe.

let text1 = “Mario”;
let text2 = “Rossi”;
let text3 = text1 + ” ” + text2; // output text3 = Mario Rossi

L’operatore di assegnazione += può essere utilizzato anche per aggiungere (concatenare) stringhe:

let text1 = “Oggi è una bella “;
text1 += “giornata “; //text1 = Oggi è una bella giornata

APPROFONDIMENTO OPERATORI DI CONFRONTO

Gli operatori di confronto e logici vengono utilizzati per verificare una condizione di vero o falso. Gli operatori di confronto vengono utilizzati nelle istruzioni logiche per determinare l’uguaglianza o la differenza tra variabili o valori.

Dato che x = 5, la tabella seguente spiega gli operatori di confronto:

DOVE VENGONO USATI GLI OPERATORI DI CONFRONTO

Gli operatori di confronto possono essere utilizzati nelle istruzioni condizionali per confrontare i valori e agire in base al risultato:

if (age < 18) text = “Non puoi guidare.”;

APPROFONDIMENTO OPERATORI LOGICI

Gli operatori logici vengono utilizzati per determinare la logica tra variabili o valori. Dato che x = 6 e y = 3, la tabella seguente spiega gli operatori logici:

OPERATORE TERNARIO

JavaScript contiene anche un operatore condizionale che assegna un valore a una variabile in base ad alcune condizioni.

variablename = (condition) ? value1:value2

let voteable = (age < 18) ? “Non puoi votare“:”Puoi votare“;

Il confronto di dati di diverso tipo può dare risultati inaspettati. Quando si confronta una stringa con un numero, JavaScript converte la stringa in un numero durante il confronto. Una stringa vuota viene convertita in 0. Una stringa non numerica viene convertita in NaN (Not a Number) che è sempre falso.

Quando si confrontano due stringhe, “2” sarà maggiore di “12″, perché (in ordine alfabetico) 1 è minore di 2. Per garantire un risultato corretto, le variabili devono essere convertite nel tipo corretto prima del confronto:

age = Number(age);
if (isNaN(age)) {
voteable = “Input is not a number“;
} else {
voteable = (age < 18) ? “Non puoi votare” : “Puoi votare”;
}

TYPE OPERATORS

OPERATORI BITWISE (BIT PER BIT)

Questi operatori vengono utilizzati molto raramente, quando abbiamo bisogno di lavorare con i numeri al più basso livello (bit per bit). Non avremo bisogno di questi operatori molto presto, poiché lo sviluppo web ne fa un uso limitato, ma in alcune aree speciali, come la crittografia, sono utili.

JavaScript memorizza i numeri come numeri in virgola mobile a 64 bit, ma tutte le operazioni bit per bit vengono eseguite su numeri binari a 32 bit. Prima che venga eseguita un’operazione bit per bit, JavaScript converte i numeri in interi con segno a 32 bit. Dopo aver eseguito l’operazione bit per bit, il risultato viene riconvertito in numeri JavaScript a 64 bit. Un intero con segno utilizza il bit più a sinistra come segno meno.

BITWISE AND

Quando un AND bit per bit viene eseguito su una coppia di bit, restituisce 1 se entrambi i bit sono 1.

Gli operandi vengono convertiti in numeri interi a 32 bit ed espressi da una serie di bit (zero e uno). I numeri con più di 32 bit hanno i loro bit più significativi scartati. Ad esempio, il seguente numero intero con più di 32 bit verrà convertito in un numero intero a 32 bit:

Before: 11100110111110100000000000000110000000000001

After: 10100000000000000110000000000001

Ciascun bit nel primo operando è associato al bit corrispondente nel secondo operando: dal primo bit al primo bit, dal secondo bit al secondo bit e così via. L’operatore viene applicato a ciascuna coppia di bit e il risultato viene costruito bit a bit.

9 =    00000000000000000000000000001001
14 =   00000000000000000000000000001110 
       --------------------------------
14 & 9=00000000000000000000000000001000 = 8

BITWISE OR

Quando viene eseguito un OR bit per bit su una coppia di bit, restituisce 1 se uno dei bit è 1:

9 =    00000000000000000000000000001001
14 =   00000000000000000000000000001110
       --------------------------------
14 | 9=00000000000000000000000000001111 = 15

BITWISE XOR

Quando viene eseguito un XOR bit per bit su una coppia di bit, restituisce 1 se i bit sono diversi:

9=     00000000000000000000000000001001
14=    00000000000000000000000000001110
       --------------------------------
14 ^ 9=00000000000000000000000000000111 = 7

BITWISE NOT (~)

L’operatore NOT bit per bit (~) inverte i bit del suo operando. Come altri operatori bitwise, converte l’operando in un intero con segno a 32 bit.

9 = 00000000000000000000000000001001
    --------------------------------
~9 =11111111111111111111111111110110 = -10

L’operando intero con segno a 32 bit è invertito secondo il complemento a due. Cioè, la presenza del bit più significativo viene utilizzata per esprimere numeri interi negativi. Eseguendo il NOT bit a bit di qualsiasi numero x restituisce -(x + 1). Ad esempio, ~-5 restituisce 4.

LEFT SHIFT (<<)

Questo operatore sposta il primo operando a sinistra del numero di bit specificato. I bit in eccesso spostati a sinistra vengono eliminati. I bit zero vengono spostati da destra.

Ad esempio, 9 << 2 restituisce 36:

9:     00000000000000000000000000001001
       --------------------------------
9 << 2:00000000000000000000000000100100=36

Spostando qualsiasi numero x a sinistra di y bit si ottiene x * 2 ** y. Quindi, ad esempio: 9 << 3 si traduce in: 9 * (2 ** 3) = 9 * (8) = 72.

SIGN-PROPAGATING RIGHT SHIFT (>>)

L’operatore di spostamento a destra (>>) sposta a destra il primo operando del numero di bit specificato. I bit in eccesso spostati a destra vengono eliminati. Le copie del bit più a sinistra vengono spostate da sinistra. Poiché il nuovo bit più a sinistra ha lo stesso valore del precedente bit più a sinistra, il bit del segno (il bit più a sinistra) non cambia. Da qui il nome “sign-propagating”.

9: 00000000000000000000000000001001

--------------------------------

9 >> 2:00000000000000000000000000000010= 2

Allo stesso modo, -9 >> 2 produce -3, perché il segno è preservato:

-9 :    11111111111111111111111111110111
        --------------------------------
-9 >> 2:11111111111111111111111111111101= -3

UNSIGNED RIGHT SHIFT (>>>)

L’operatore di spostamento a destra senza segno (>>>) (spostamento a destra di riempimento zero) sposta il primo operando del numero di bit specificato a destra. I bit in eccesso spostati a destra vengono eliminati. I bit zero vengono spostati da sinistra. Il bit del segno diventa 0, quindi il risultato è sempre non negativo. A differenza degli altri operatori bit per bit, lo spostamento a destra di riempimento zero restituisce un intero a 32 bit senza segno.

9:    00000000000000000000000000001001
      --------------------------------
9>>>2:00000000000000000000000000000010= 2

Tuttavia, questo non è il caso dei numeri negativi. Ad esempio, -9 >>> 2 restituisce 1073741821, che è diverso da -9 >> 2 (che restituisce -3):

-9:    11111111111111111111111111110111
       --------------------------------
-9>>>2:00111111111111111111111111111101=1073741821

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB