Concetti di base di JavaScript

Questo articolo spiega i concetti di base di JavaScript.

YouTube Video

Esecuzione di Hello World!

Panoramica su JavaScript

JavaScript è uno dei linguaggi di programmazione più ampiamente utilizzati nello sviluppo web. È principalmente utilizzato per aggiungere elementi dinamici alle pagine web, consentendo la manipolazione dell'interfaccia utente, la trasmissione dei dati e la creazione di animazioni. Può operare sia lato client (in un browser) sia lato server utilizzando tecnologie come Node.js. Grazie alla sua semplicità e flessibilità, è facile da apprendere per i principianti ed è ampiamente utilizzato dai sviluppatori professionisti.

Variabili in JavaScript

Le variabili in JavaScript sono come contenitori utilizzati per memorizzare e riutilizzare i dati. Utilizzando le variabili, è possibile conservare e manipolare i valori nel proprio programma.

Dichiarazione delle Variabili

In JavaScript, ci sono tre parole chiave per dichiarare le variabili.

• var: Un vecchio metodo per dichiarare le variabili, ma gestirne l’ambito è complesso e richiede attenzione. Si basa sull'ambito della funzione.

1var x = 10;

• let: Introdotto in ES6, è un modo per dichiarare variabili con ambito di blocco. Può essere riassegnato ma non può essere ridefinito nello stesso ambito.

1let y = 20;

• const: Utilizzato per dichiarare variabili che sono immutabili (costanti). Ha uno scope a blocco e non può essere riassegnato o ridefinito dopo la dichiarazione.

1const z = 30;

Scope

Le variabili hanno il concetto di scope.

Scope Globale

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Le variabili con scope globale sono accessibili ovunque. Le variabili dichiarate con var hanno uno scope globale o di funzione, mentre let e const hanno uno scope a blocco.

Scope a Blocco

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Scope a blocco: Le variabili dichiarate con let o const sono valide solo all'interno delle {} (parentesi graffe).

• Si verifica un errore quando si accede dall'esterno di {} (parentesi graffe).

Scope di Funzione

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Scope di funzione: Variabili e funzioni definite all'interno di una funzione non possono essere accessibili dall'esterno della funzione. Le variabili dichiarate all'interno di una funzione con var appartengono a questo scope.

• In questo esempio, la variabile functionVar può essere accessibile dall'esterno delle parentesi graffe {} purché sia all'interno dello scope della funzione. D'altra parte, accedere alla variabile functionScoped dall'esterno dello scope della funzione provoca un errore.

Pertanto, le variabili dichiarate con var hanno solo uno scope di funzione e non uno scope a blocco, rappresentando un rischio di utilizzo in ambiti inaspettati. È preferibile usare const per le variabili che non cambiano e solitamente usare let, evitando il più possibile l'uso di var.

Tipi di Dati

Le variabili JavaScript possono memorizzare valori di vari tipi di dati. Esistono string per gestire il testo e number per gestire i valori numerici.

I principali tipi di dati sono i seguenti:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Tipi Primitivi:
  • number: Gestisce valori numerici (interi e numeri a virgola mobile).
  • string: Gestisce stringhe di caratteri.
  • boolean: Gestisce i valori booleani true o false.
  • null: Rappresenta esplicitamente un valore di 'nulla'.
  • undefined: Un valore assegnato automaticamente alle variabili che non sono state inizializzate.
  • Symbol: Un tipo di dato utilizzato per creare valori unici.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Tipi di Oggetti:
  • Object: Una struttura dati con più proprietà.
  • Array: Un elenco che contiene valori multipli.
  • Function: Un oggetto funzione.

Assegnazione e Riassegnazione di Variabili

Le variabili dichiarate con let o var possono essere riassegnate, ma const non può essere riassegnato dopo essere stato dichiarato.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Sollevamento (Hoisting) delle Variabili

In JavaScript, esiste un fenomeno in cui le dichiarazioni delle variabili vengono 'portate' in cima al loro contesto. Le variabili dichiarate con var vengono sollevate, ma usare let o const prima della dichiarazione causa un errore.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• In questo caso, le variabili dichiarate con var vengono sollevate e i loro valori sono stampati.

1console.log(b); // ReferenceError
2let b = 20;

• Le variabili dichiarate con let non vengono sollevate, producendo un errore.

Uso corretto delle variabili

Considera i seguenti punti per un uso corretto delle variabili.

• Preferisci utilizzare const e evita di usare var.
• Segui le convenzioni di denominazione delle variabili.
  • Usa il camelCase, come userName o totalPrice.
  • Evita nomi ambigui come data o value, e utilizza nomi significativi per migliorare la leggibilità.
  • Un nome di variabile non può iniziare con un numero, quindi nomi come 1variable non sono consentiti.
• L'utilizzo eccessivo di variabili globali può causare ambiguità di ambito e portare a bug, quindi evita di usarle ogni volta che è possibile.

Riepilogo

• var: Un vecchio metodo di dichiarazione di variabili con ambito di funzione.
• let: Una variabile con ambito di blocco che può essere riassegnata.
• const: Una variabile con ambito di blocco che non può essere riassegnata (costante).
• È importante utilizzare le variabili in base ai loro tipi di dati e considerare attentamente il loro ambito.

Cosa sono i caratteri di escape in JavaScript?

I caratteri di escape sono un metodo utilizzato per rappresentare caratteri con significati speciali all'interno di stringhe letterali normali. In JavaScript, i caratteri di escape sono introdotti con una barra rovesciata \ per conferire effetti speciali a una stringa o per includere caratteri di controllo. I caratteri di escape sono utili per includere elementi come nuove righe, tabulazioni o virgolette in una stringa.

Esempi di utilizzo dei caratteri di escape

Di seguito sono riportati alcuni esempi di codice che utilizzano i caratteri di escape.

Escape delle virgolette doppie e singole

Utilizza i caratteri di escape per rappresentare virgolette doppie o singole all'interno di una stringa.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Escape delle barre rovesciate

Per includere una barra rovesciata all'interno di una stringa, utilizza l'escape con \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Escape di nuove righe e tabulazioni

Puoi inserire nuove righe e tabulazioni per rendere più leggibili le stringhe lunghe.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Escape dei caratteri Unicode

L'uso di sequenze di escape Unicode ti permette di rappresentare caratteri specifici con codici esadecimali.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Note

Un uso eccessivo di escape può compromettere la leggibilità

Un uso eccessivo dei caratteri di escape può ridurre la leggibilità del tuo codice. È particolarmente importante utilizzare i caratteri di escape con moderazione nelle stringhe lunghe.

Valuta l'utilizzo dei template literal

In JavaScript, i template literal con backtick ti consentono di includere nuove righe o espressioni incorporate senza utilizzare caratteri di escape.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Riepilogo

I caratteri di escape sono essenziali per rappresentare caratteri speciali o di controllo all'interno delle stringhe. Escape delle virgolette singole o doppie e l'aggiunta di nuove righe o tabulazioni consentono di creare stringhe più flessibili. Tuttavia, un uso eccessivo dei caratteri di escape può rendere il codice più difficile da leggere; valuta di utilizzare i template literal quando opportuno.

Versioni di JavaScript

JavaScript ha una specifica standard chiamata ECMAScript (ES). JavaScript si è evoluto basandosi su questo standard. Di seguito una breve descrizione delle sue principali versioni.

• ES3 (1999)

  La prima versione ampiamente adottata. Furono stabilite la sintassi di base e le funzionalità.

• ES5 (2009)

  Introduzione della strict mode e aggiunta di nuove funzionalità come Array.prototype.forEach, Object.keys, ecc.

• ES6 / ES2015 (2015)

  Un aggiornamento importante è stato apportato a JavaScript. Molte funzionalità fondamentali per JavaScript moderno, come let, const, arrow functions, classes, promises, modules, ecc., sono state introdotte.

• ES7 / ES2016 (2016)

  Sono stati aggiunti Array.prototype.includes e l’Operatore di Esponenziazione (**).

• ES8 / ES2017 (2017)

  async/await è stato introdotto, semplificando la scrittura di processi asincroni.

• ES9 / ES2018 (2018)

  Sono stati aggiunti gli iteratori asincroni e le Rest/Spread Properties.

• ES10 / ES2019 (2019)

  Sono stati aggiunti flatMap e Object.fromEntries.

• ES11 / ES2020 (2020)

  Sono stati aggiunti Optional Chaining (?.) e l’Operatore di Coalizzazione Nullish (??), permettendo di scrivere codice in modo più semplice e sicuro.

• ES12 / ES2021 (2021)

  Sono stati aggiunti String.prototype.replaceAll e Promise.any, tra gli altri.

• ES13 / ES2022 (2022)

  Sono stati aggiunti Array.prototype.at e i campi private delle classi (#field), tra gli altri.

• ES14 / ES2023 (2023)

  Sono stati aggiunti Array.prototype.toSorted e Symbol.prototype.description, tra gli altri.

• ES15 / ES2024 (2024)

  Sono stati aggiunti Promise.withResolvers per una gestione più semplice delle Promise e ArrayBuffer ridimensionabili, tra gli altri.

Il JavaScript attuale viene aggiornato ogni anno, e nuove funzionalità vengono aggiunte anche nella versione più recente.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video