JavaScript: Introduzione

JavaScript è il linguaggio di programmazione del web. Da semplice linguaggio per script client-side, è diventato uno dei linguaggi più utilizzati al mondo.

Cos'è JavaScript?

JavaScript è un linguaggio di programmazione interpretato, orientato agli oggetti e multi-paradigma. È il linguaggio standard del browser e, grazie a Node.js, può essere eseguito anche lato server.

Variabili e tipi di dato

// Dichiarazione variabili
let nome = "Mario";        // variabile modificabile
const eta = 30;            // costante, non modificabile
var vecchio = "legacy";    // vecchio modo, evitare

// Tipi primitivi
const stringa = "Hello";
const numero = 42;
const booleano = true;
const nullo = null;
const nonDefinito = undefined;
const simbolo = Symbol('id');

Arrow Functions (ES6)

Le arrow functions offrono una sintassi più concisa per le funzioni:

// Funzione tradizionale
function somma(a, b) {
  return a + b;
}

// Arrow function
const somma = (a, b) => a + b;

// Con un solo parametro
const doppio = x => x * 2;

// Con corpo della funzione
const saluta = (nome) => {
  const messaggio = `Ciao, ${nome}!`;
  return messaggio;
};

Template Literals

const nome = "Mario";
const eta = 30;

// Vecchio modo
console.log("Mi chiamo " + nome + " e ho " + eta + " anni");

// Nuovo modo con template literals
console.log(`Mi chiamo ${nome} e ho ${eta} anni`);

// Multi-linea
const messaggio = `
  Ciao ${nome},
  benvenuto nel nostro sito!
`;

Destructuring

// Array destructuring
const colori = ['rosso', 'verde', 'blu'];
const [primo, secondo] = colori;

// Object destructuring
const utente = { nome: 'Mario', eta: 30, citta: 'Roma' };
const { nome, eta } = utente;

// Con alias
const { nome: userName, citta: city } = utente;

// Valori di default
const { ruolo = 'utente' } = utente;

Spread e Rest Operator

// Spread operator
const numeri = [1, 2, 3];
const nuoviNumeri = [...numeri, 4, 5];

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

// Rest operator
function somma(...numeri) {
  return numeri.reduce((tot, n) => tot + n, 0);
}
somma(1, 2, 3, 4); // 10

Promises e Async/Await

// Promise
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Dati caricati!');
    }, 1000);
  });
};

// Utilizzo con .then()
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Utilizzo con async/await
const loadData = async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

Moduli ES6

// math.js
export const somma = (a, b) => a + b;
export const sottrazione = (a, b) => a - b;
export default class Calcolatrice { /* ... */ }

// main.js
import Calcolatrice, { somma, sottrazione } from './math.js';

Array Methods fondamentali

const numeri = [1, 2, 3, 4, 5];

// map - trasforma ogni elemento
const doppi = numeri.map(n => n * 2);

// filter - filtra in base a condizione
const pari = numeri.filter(n => n % 2 === 0);

// reduce - riduce a singolo valore
const somma = numeri.reduce((tot, n) => tot + n, 0);

// find - trova il primo elemento che soddisfa la condizione
const primoPari = numeri.find(n => n % 2 === 0);

// some/every - verifica condizioni
const haPari = numeri.some(n => n % 2 === 0);    // true
const tuttiPositivi = numeri.every(n => n > 0);   // true

Conclusione

JavaScript moderno (ES6+) offre strumenti potenti per scrivere codice più pulito, leggibile e mantenibile. Padroneggiare queste funzionalità è essenziale per qualsiasi sviluppatore web.