Come fare operazioni matematiche con JavaScript

Introduzione

Le operazioni matematiche sono tra le caratteristiche più fondamentali e universali di qualsiasi linguaggio di programmazione. In JavaScript, i numeri vengono utilizzati frequentemente per attività comuni come la ricerca delle dimensioni della finestra del browser, il prezzo finale di una transazione monetaria e il calcolo della distanza tra gli elementi in un documento del sito Web.

Sebbene una comprensione di alto livello della matematica non sia un prerequisito per essere uno sviluppatore capace, è importante sapere quali tipi di operazioni sono disponibili in JavaScript e come utilizzare la matematica come strumento per svolgere attività pratiche.

A differenza di altri linguaggi di programmazione, JavaScript ha solo un tipo di dati numerici; non viene fatta alcuna distinzione tra numeri interi (numeri interi positivi o negativi) e float, ad esempio (numeri con un punto decimale).

In questo tutorial, esamineremo gli operatori aritmetici, gli operatori di assegnazione e l'ordine delle operazioni utilizzate con i tipi di dati dei numeri JavaScript.

Operatori aritmetici

Gli operatori aritmetici (Arithmetic operators) sono simboli che indicano un'operazione matematica e restituiscono un valore. Nell'equazione 3 + 7 = 10, il simbolo + è la sintassi che sta per addizione.

JavaScript ha molti operatori familiari dalla matematica di base, così come alcuni operatori aggiuntivi specifici per la programmazione.

Ecco una tabella di riferimento degli operatori aritmetici di JavaScript.

Andremo nel dettaglio di ciascuno di questi operatori in questo articolo.

Addizione e sottrazione

Gli operatori di addizione e sottrazione sono disponibili in JavaScript e possono essere utilizzati per trovare la somma e la differenza di valori numerici. JavaScript ha una calcolatrice integrata e le operazioni matematiche possono essere eseguite direttamente nella console.

Possiamo fare qualche semplice aggiunta con i numeri, ad esempio aggiungendo 10 e 20, usando il segno più (+).

10 + 20;

30

Oltre a fare matematica con numeri semplici, possiamo anche assegnare numeri a variabili ed eseguire gli stessi calcoli. In questo caso, possiamo assegnare i valori numerici x e y e posizionare la somma z.

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z);

30

Allo stesso modo, usiamo il segno meno (-) per sottrarre numeri o variabili che rappresentano i numeri.

// Assign values to x and y
let x = 10;
let y = 20;

// Subtract x from y and assign the difference to z
let z = y - x;

console.log(z);

10

Possiamo anche aggiungere e sottrarre numeri e float negativi (decimali).

// Assign values to x and y
let x = -5.2;
let y = 2.5;

// Subtract y from x and assign the difference to z
let z = x - y;

console.log(z);

-7.7

Una cosa interessante da notare e da tenere presente in JavaScript è il risultato dell'aggiunta di un numero e una stringa. Sappiamo che 1 + 1 dovrebbe essere uguale 2, ma questa equazione avrà risultati inaspettati.

let x = 1 + "1";

console.log(x);
typeof x;

11
'string'

Invece di aggiungere i due numeri, JavaScript converte l'intera istruzione in una stringa e li concatena insieme. È importante stare attenti alla natura tipicamente dinamica di JavaScript, in quanto può avere risultati indesiderati.

Aggiunta e sottrazione sono due delle equazioni matematiche più comuni che userete in JavaScript.

Moltiplicazione e divisione

Gli operatori di moltiplicazione e divisione sono disponibili anche in JavaScript e vengono utilizzati per trovare il prodotto e il quoziente di valori numerici.

Un asterisco (*) viene utilizzato per rappresentare l'operatore di moltiplicazione.

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z);

100

La moltiplicazione potrebbe essere utilizzata per calcolare il prezzo di un articolo dopo aver applicato l'imposta sulle vendite.

const price = 26.5;    // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
totalPrice.toFixed(2);

console.log("Total:", totalPrice);

Total: 28.67

Una barra (/) viene utilizzata per rappresentare l'operatore di divisione.

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z);

4

La divisione è particolarmente utile quando si calcola il tempo, come trovare il numero di ore in una quantità di minuti o quando si calcola la percentuale di risposte corrette completate in un test.

Modulo

Un operatore aritmetico leggermente meno familiare è l'operatore modulo (talvolta noto come modulus), che calcola il resto di un quoziente dopo la divisione. Modulo è rappresentato da un segno di percentuale (%).

Ad esempio, sappiamo che 3 va esattamente tre volte in 9 e non c'è resto.

9 % 3;

0

Possiamo usare l'operatore modulo per determinare se un numero è pari o dispari, come si vede con questa funzione:

// Initialize function to test if a number is even
const isEven = x => {
    // If the remainder after dividing by two is 0, return true
    if (x % 2 === 0) {
        return true;
    }
    // If the number is odd, return false
    return false;
}

// Test the number
isEven(12);

true

Nell'esempio sopra, si divide 12 uniformemente in 2, quindi è un numero pari.

Spesso nella programmazione, modulo viene utilizzato insieme alle istruzioni condizionali per il controllo del flusso.

Elevamento a potenza

L'esponenziazione è uno dei più recenti operatori in JavaScript e ci consente di calcolare la potenza di un numero in base al suo esponente. La sintassi per è di due asterischi in una riga (**).

10 alla quinta potenza, o 10 ^ 5, è scritto in questo modo:

10 ** 5;

100000

10 ** 5 rappresenta 10 moltiplicato per 10 cinque volte:

10 * 10 * 10 * 10 * 10;

Un altro modo di scrivere questo è con il metodo Math.pow().

Math.pow(10, 5);

100000

L'uso dell'operatore di esponenziazione è un modo conciso di trovare la potenza di un determinato numero, ma come al solito è importante rimanere coerenti con lo stile della base di codice quando si sceglie tra un metodo e un operatore.

Incremento e decremento

Gli operatori di incremento e decremento aumentano o riducono di uno il valore numerico di una variabile. Sono rappresentati da due segni più (++) o due segni meno (--) e sono spesso usati con i loop.

Si noti che gli operatori di incremento e decremento possono essere utilizzati solo su variabili; il tentativo di usarli su un numero non elaborato comporterà un errore.

7++

Uncaught ReferenceError: Invalid left-hand side expression in postfix operation

Gli operatori di incremento e decremento possono essere classificati come operazioni prefisso o postfisso, a seconda che l'operatore sia posizionato prima o dopo la variabile.

Per prima cosa, possiamo scrivere l'incremento del prefisso con ++x.

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);

8

Il valore di x è stato aumentato di uno. Per vedere la differenza, testeremo l'incremento postfix, con y++.

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);

7

Il valore di y non è stato aumentato nell'operazione postfix. Questo perché il valore non verrà incrementato fino a dopo che l'espressione è stata valutata. Eseguire l'operazione due volte aumenterà quindi il valore.

let y = 7;

y++;
y++;

console.log(y);

8

L'operatore di incremento o decremento verrà visualizzato più spesso in un ciclo. In questo esempio di ciclo for, eseguiremo l'operazione dieci volte, iniziando con 0 e aumentando il valore 1 con ogni iterazione.

// Run a loop ten times
for (let i = 0; i < 10; i++) {
  console.log(i);
}

0
1
2
3
4
5
6
7
8
9

Il codice sopra mostra un'iterazione attraverso un ciclo che si ottiene usando l'operatore di incremento.

Possiamo pensare x++ a una scorciatoia per x = x + 1, e x-- come una scorciatoia per x = x - 1.

Operatori di assegnazione

Uno degli operatori più comunemente usati è l' operatore di assegnazione, che abbiamo già visto ed è rappresentato da un segno di uguale (=). Usiamo = per assegnare un valore a destra a una variabile a sinistra.

// Assign 27 to age variable
let age = 27;

Oltre all'operatore di assegnazione standard, JavaScript ha operatori di assegnazione composti, che combinano un operatore aritmetico con =.

Ad esempio, l'operatore addizione inizierà con il valore originale e aggiungerà un nuovo valore.

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);

30

In questo caso, age += 3 è lo stesso della scrittura age = age + 3.

Gli operatori di assegnazione composti vengono spesso utilizzati con loop, simili all'incremento e alla decrementazione, e vengono utilizzati quando è necessario ripetere o automatizzare le equazioni.

Precedenza dell'operatore

Sebbene leggiamo da sinistra a destra, gli operatori verranno valutati in ordine di precedenza, proprio come nella matematica normale.

Nell'esempio seguente, la moltiplicazione ha una precedenza maggiore rispetto all'addizione, che determina il risultato dell'equazione.

// First multiply 3 by 5, then add 10
10 + 3 * 5;

25

Se invece desideriamo eseguire prima l'operazione di addizione, dovremmo raggrupparla tra parentesi, che ha sempre la precedenza più alta.

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;

65

Di seguito è riportata una tabella di riferimento della precedenza dell'operatore degli operatori aritmetici in JavaScript, dal più alto al più basso. Per l'incremento e la decrementazione, postfix ha una precedenza maggiore rispetto al prefisso.

Incrementazione/decrementazione, moltiplicazione/divisione e addizione/sottrazione hanno lo stesso livello di precedenza.

La precedenza degli operatori include non solo operatori aritmetici, ma anche operatori di assegnazione, operatori logici, operatori condizionali e altro. Per un elenco completo, visualizzare la precedenza dell'operatore su Mozilla Developer Network (MDN).

Conclusione

In questo articolo, abbiamo trattato gli operatori aritmetici e la sintassi, inclusi molti operatori matematici familiari e alcuni specifici della programmazione.

Inoltre, abbiamo imparato come combinare aritmetica e assegnazione per creare operatori di assegnazione composti e l'ordine delle operazioni in JavaScript.