Appunti JavaScript

JavaScript

JavaScript è un linguaggio di programmazione di alto livello, dinamico e interpretato che ben si adatta agli stili di programmazione orientati agli oggetti e funzionali. Le variabili di JavaScript non sono tipizzate. La sua sintassi è vagamente basata su Java.

Ambiente di esecuzione

Per essere utile, ogni linguaggio deve avere una piattaforma, o libreria standard, per eseguire operazioni come input e output di base. Il linguaggio JavaScript di base definisce un'API minima per lavorare con numeri, testo, array, set, mappe e così via, ma non include alcuna funzionalità di input o output. L'input e l'output (così come le funzionalità più sofisticate, come il networking, l'archiviazione e la grafica) sono di responsabilità di "Ambiente host" all'interno del quale è incorporato JavaScript.

L'ambiente host originale per JavaScript era un browser Web e questo è ancora l'ambiente di esecuzione più comune per il codice JavaScript. L'ambiente del browser web consente al codice JavaScript di ottenere input dal mouse e dalla tastiera dell'utente e attraverso richieste HTTP. E consente al codice JavaScript di mostrare l'output all'utente con HTML e CSS.

Dal 2010 è disponibile un altro ambiente host per il codice JavaScript. Invece di costringere JavaScript a lavorare con le API fornite da un browser web, Node.js fornisce a JavaScript l'accesso all'intero sistema operativo, consentendo ai programmi JavaScript di leggere e scrivere file, inviare e ricevere dati sulla rete e fare e servire richieste HTTP. Node è una scelta popolare per l'implementazione di server web e anche un comodo strumento per scrivere semplici script di utilità come alternativa agli script di shell.

Eseguire codice JavaScript con Node da terminale:

$ node snippet.js

Sintassi

JavaScript è case-sensitive. Un letterale è un valore che appare direttamente in un programma.

Parole chiave

• as
• void
• async
• while
• await
• with
• break
• yield
• case
• catch
• class
• const
• continue
• debugger
• default
• delete
• do
• else
• export
• extends
• false
• finally
• for
• from
• function
• get
• null
• target
• if
• of
• this
• import
• return
• throw
• in
• set
• true
• instanceof
• static
• try
• let
• super
• typeof
• new
• switch
• var

In JavaScript il ( ; ) alla fine di un istruzione non è richiesto. JavaScript potrebbe interpretare in modo errato alcune istruzioni se non provviste di ( ; ).

Tipi di dati

• I tipi in JS possono essere divisi in due categorie:
  • Primitivi
  • Objects

Primitivi

• Numbers
• Strings
• Booleans
• Null
• Undefined

Objects

Un oggetto è una collezione di proprietà, dove ogni proprietà ha un nome e un valore (o un valore primitivo o un altro oggetto).

Array

Gli array sono un tipo particolare di oggetto, rappresentano una collezione numerata di valori.

Altri tipi

• Set
• Map
• RegExp
• Date
• Error
• Un oggetto Set rappresenta un insieme di valori.
• Un oggetto Map rappresenta una mappatura da chiavi a valori.
• Il tipo RegExp rappresenta modelli testuali e consente sofisticate operazioni di corrispondenza, ricerca e sostituzione sulle stringhe.
• Il tipo Date rappresenta date e ore e supporta operazioni aritmetiche di date rudimentali.
• Error e i suoi sottotipi rappresentano gli errori che possono sorgere durante l'esecuzione del codice JavaScript.

Funzioni

JavaScript differisce dai linguaggi più statici in quanto le funzioni e le classi non sono solo una parte della sintassi del linguaggio: sono essi stessi valori che possono essere manipolati dai programmi JavaScript. L'interprete JS utilizza il garbage collector per la gestione della memoria.

Gli oggetti sono tipi mutabili (i cui valori possono essere alterati). I tipi primitivi sono immutabili (il valore della variabile non viene modificato ma ne viene creata una nuova che la sostituisca). JS converte liberamente i valori da un tipo all'altro.

Costanti sono dichiarate con const. Le variabili sono dichiarate con let o var.

Numbers

Math object. Il risultato di un overflow viene rappresentato con il valore speciale Infinity. NaN (not-a-number) è un valore speciale.

BigInt

I letterali sono scritti come una stringa di cifre seguita da una lettera minuscola n.

Date

JavaScript definisce una semplice classe Date per rappresentare e manipolare i numeri che rappresentano date e ore. Le date JavaScript sono oggetti, ma hanno anche una rappresentazione numerica come timestamp che specifica il numero di millisecondi trascorsi dal 1 gennaio 1970:

let timestamp = Date.now( ); // L'ora corrente come timestamp (un numero).
let now = new Date( ); // L'ora corrente come oggetto Date.
let ms = now.getTime( ); // Converte in un timestamp in millisecondi.
let iso = now.toISOString( ); // Converte in una stringa in formato standard.

Stringhe

Le stringhe sono immutabili in JS. Per determinare la lunghezza di una stringa si usa la proprietà length.

• Obtaining portions of a string
  • s.substring(1,4) // "ell": the 2nd, 3rd, and 4th characters.
  • s.slice(1,4) // "ell": same thing.
  • s.slice(-3) // "rld": last 3 characters.
  • s.split(", ") // ["Hello", "world"]: split at delimiter string.
• Searching a string
  • s.indexOf("l") // 2: position of first letter l.
  • s.indexOf("l", 3) // 3: position of first "l" at or after 3.
  • s.indexOf("zz") // -1: s does not include the substring "zz".
  • s.lastIndexOf("l") // 10: position of last letter l.
• Boolean searching functions in ES6 and later
  • s.startsWith("Hell") // true: the string starts with these.
  • s.endsWith("!") // false: s does not end with that.
  • s.includes("or") // true: s includes substring "or".
• Creating modified versions of a string
  • s.replace("llo", "ya") // "Heya, world".
  • s.toLowerCase() // "hello, world".
  • s.toUpperCase() // "HELLO, WORLD".
  • s.normalize() // Unicode NFC normalization: ES6.
  • s.normalize("NFD") // NFD normalization. Also "NFKC", "NFKD".
• Inspecting individual (16-bit) characters of a string
  • s.charAt(0) // "H": the first character.
  • s.charAt(s.length-1) // "d": the last character.
  • s.charCodeAt(0) // 72: 16-bit number at the specified position.
  • s.codePointAt(0) // 72: ES6, works for code points > 16 bits.
• String padding functions in ES2017
  • "x".padStart(3) // " x": add spaces on the left to a length of 3.
  • "x".padEnd(3) // "x ": add spaces on the right to a length of 3.
  • "x".padStart(3, "*") // "**x": add stars on the left to a length of 3.
  • "x".padEnd(3, "-") // "x--": add dashes on the right to a length of 3.
• Space trimming functions. trim() is ES5; others ES2019
  • " test ".trim() // "test": remove spaces at start and end.
  • " test ".trimStart() // "test ": remove spaces on left. Also trimLeft.
  • " test ".trimEnd() // " test": remove spaces at right. Also trimRight.
• Miscellaneous string methods
  • s.concat("!") // "Hello, world!": just use + operator instead.
  • "<>".repeat(5) // "<><><><><>": concatenate n copies. ES6.

Template letterali

Tutto quello compreso in ${...} viene valutato come un'espressione. String.raw() valuta gli escape come caratteri normali.

Pattern matching (RegExp)

Il testo fra un paio di slash costituisce un'espressione regolare. Il secondo slash della coppia può essere seguito da uno o più letterali, che modificano il significato del pattern.

• /^HTML/; // Match the letters H T M L at the start of a string.
• /[1-9][0-9]*/; // Match a nonzero digit, followed by any # of digits.
• /\bjavascript\b/i; // Match "javascript" as a word, case-insensitive.

RegExp objects methods

let text = "testing: 1, 2, 3"; // Sample text
let pattern = /\d+/g; // Matches all instances of one or more digits
pattern.test(text) // true: a match exists
text.search(pattern) // 9: position of first match
text.match(pattern) // ["1", "2", "3"]: array of all matches
text.replace(pattern, "#") // "testing: #, #, #"
text.split(/\D+/) // ["","1","2","3"]: split on non-digits

Boolean

I seguenti valori si convertono in false: undefined, null, 0, -0, NaN, "" (la stringa vuota).

Null e undefined

null è una parola chiave del linguaggio che restituisce un valore speciale che viene solitamente utilizzato per indicare l'assenza di un valore. L'utilizzo dell'operatore typeof su null restituisce la stringa "object", indicando che null può essere pensato come un valore di object speciale che indica "no object".

JavaScript ha anche un secondo valore che indica l'assenza di valore. Il valore undefined rappresenta un tipo più profondo di assenza. È il valore delle variabili che non sono state inizializzate e il valore che si ottiene quando si interroga il valore di una proprietà di un oggetto o di un elemento di un array che non esiste. Il valore indefinito è anche il valore di ritorno delle funzioni che non restituiscono esplicitamente un valore e il valore dei parametri di funzione per i quali non viene passato alcun argomento.

L'operatore di uguaglianza == li considera uguali. (Usa l'operatore di uguaglianza rigorosa === per distinguerli.) Entrambi sono valori falsi: si comportano come false quando è richiesto un valore booleano. Né null né undefined hanno proprietà o metodi. In effetti, utilizzando . o [] per accedere a una proprietà o a un metodo di questi valori si provoca un'eccezione TypeError.

Considero indefinito per rappresentare un'assenza di valore a livello di sistema, inattesa o simile a un errore e null per rappresentare un'assenza di valore a livello di programma, normale o attesa. Evito di usare null e undefined quando posso, ma se devo assegnare uno di questi valori a una variabile o una proprietà o passare o restituire uno di questi valori a o da una funzione, di solito uso null. Alcuni programmatori si sforzano di evitare completamente null e di utilizzare undefined al suo posto ovunque possono.

Symbols

Un nuovo tipo di dato primitivo. È utilizzato chiamando la funzione Symbol(String name) con un valore stringa opzionale. Quella stringa sarà inclusa nel valore di ritorno. Crea un id univoco ad ogni nuova chiamata, il parametro stringa viene utilizzato per associare un nome a quell'id.

Utilizzato per creare etichette univoche per variabili/oggetti (lavora come una proprietà id="..."). Utilizzato nel meccanismo di iterazione.

Symbol.for() è utilizzato per creare un registro globale. La funzione Symbol.for() accetta un argomento stringa e restituisce un valore Symbol associato alla stringa passata. Se nessun simbolo è già associato a quella stringa, ne viene creato uno nuovo e ne viene restituito; in caso contrario, viene restituito il simbolo già esistente.

La funzione Symbol.for() è completamente diversa dalla funzione Symbol(): Symbol() non restituisce mai lo stesso valore due volte, ma Symbol.for() restituisce sempre lo stesso valore quando viene chiamato con la stessa stringa. La stringa passata a Symbol.for() appare nell'output di toString() per il Simbolo restituito e può anche essere recuperato chiamando Symbol.keyFor() sul simbolo restituito.

let s = Symbol.for("shared");
let t = Symbol.for("shared");
s === t // true
s.toString() // "Symbol(shared)"
Symbol.keyFor(t) // "shared"

Oggetto globale

Quando l'interprete JavaScript si avvia (o ogni volta che un browser web carica una nuova pagina), crea un nuovo oggetto globale e gli fornisce un insieme iniziale di proprietà che definiscono:

• Costanti globali come undefined, Infinity e NaN
• Funzioni globali come isNaN(), parseInt() e eval()
• Funzioni di costruzione come Date(), RegExp(), String(), Object() e Array()
• Oggetti globali come Math e JSON

In Node l'oggetto è chiamato global.

Nei browser Web, l'oggetto funge da oggetto globale per tutto il codice JavaScript contenuto nella finestra del browser che rappresenta. Questo oggetto Window globale ha una proprietà window autoreferenziale che può essere utilizzata per fare riferimento all'oggetto globale. L'oggetto Window definisce le proprietà globali di base, ma definisce anche un bel po' di altri valori globali specifici per i browser Web e JavaScript lato client. I thread di lavoro Web hanno un oggetto globale diverso dalla finestra a cui sono associati. Il codice in un worker può fare riferimento al suo oggetto globale come self.

globalThis - ES2020 definisce infine come il modo standard per fare riferimento all'oggetto globale in qualsiasi contesto. All'inizio del 2020, questa funzione è stata implementata da tutti i browser moderni e da Node.

Tipi primitivi e oggetti/array

I tipi primitivi sono immutabili. Gli oggetti/array sono mutabili. Gli oggetti/array sono riferimenti (reference type).

Equità

JavaScript ha due operatori che verificano se due valori sono uguali. L'“operatore di uguaglianza rigorosa" === (!== inverso), non considera i suoi operandi uguali se non sono dello stesso tipo, e questo è quasi sempre l'operatore giusto da usare durante la codifica. Ma poiché JavaScript è così flessibile con le conversioni di tipo, definisce anche l'operatore == con una definizione flessibile di uguaglianza. Tutti i seguenti confronti sono veri, ad esempio:

• null == undefined // true: These two values are treated as equal.
• "0" == 0 // true: String converts to a number before comparing.
• 0 == false // true: Boolean converts to number before comparing.
• "0" == false // true: Both operands convert to 0 before comparing.

Tieni presente che la convertibilità di un valore in un altro non implica l'uguaglianza di questi due valori. Se undefined viene utilizzato dove è previsto un valore booleano, ad esempio, verrà convertito in falso. Ma questo non significa che undefined == false. Gli operatori JS e le istruzioni si aspettano valori di vari tipi ed eseguono conversioni a quei tipi. L'istruzione if converte undefined in false, ma l'operatore == non tenta mai di convertire i suoi operandi in booleani.

Conversioni esplicite (Consigliato!)

Il modo più semplice per eseguire una conversione di tipo esplicita consiste nell'usare le funzioni Boolean(), Number() e String():

Number( "3" ) // 3
String( false ) // "false": Or use false.toString()
Boolean( [ ] ) // true
parseInt("3 blind mice") // 3
parseFloat(" 3.14 meters") // 3.14
parseInt("-12.34") // -12
parseInt("0xFF") // 255
parseInt("0xff") // 255
parseInt("-0XFF") // -255
parseFloat(".1") // 0.1
parseInt("0.1") // 0
parseInt(".1") // NaN: integers can't start with "."
parseFloat("$72.47") // NaN: numbers can't start with "$"
parseInt("11", 2) // 3: (1*2 + 1)
parseInt("ff", 16) // 255: (15*16 + 15)
parseInt("zz", 36) // 1295: (35*36 + 35)
parseInt("077", 8) // 63: (7*8 + 7)
parseInt("077", 10) // 77: (7*10 + 7)

Metodi per la formattazione dei numeri

• toFixed()
• toExponential()
• toPrecision()

Conversione da oggetti a tipi primitivi

Variabili let, const - Keywords:

• let e const hanno visibilità di blocco (sono visibili solo nel blocco di codice in cui sono definite, if/else, while, for, ...).
• In parole povere, se una variabile o una costante è dichiarata all'interno di un insieme di parentesi graffe, allora quelle parentesi graffe delimitano la regione del codice in cui è definita la variabile o la costante.
• Le variabili in JS non hanno tipo.

Var

Alternativa:

Sebbene var e let abbiano la stessa sintassi, ci sono importanti differenze nel modo in cui funzionano: le variabili dichiarate con var non hanno visibilità di blocco. Sono visibili nel corpo della funzione in cui sono definite, non importa quanto profondamente siano annidate all'interno di quella funzione. Se usi var al di fuori del corpo di una funzione, la variabile diventa globale.