InnoMarts logo
InnoMarts
Fast websites
← Back to course

Oggetti

Oggetti

Bentornato.

Nella lezione precedente hai imparato gli array.

Gli array aiutano a salvare liste di valori.

Molto utili.

Molto potenti.

Molto amici delle parentesi quadre.

Ma a volte una semplice lista non basta.

Per esempio, questo va bene:

const user = "Viktor";

Ma se ci servono più informazioni?

Nome.

Età.

Email.

Ruolo.

Paese.

Linguaggio di programmazione preferito.

Livello di dipendenza dal caffè.

Una sola stringa non basta.

Qui arrivano gli oggetti.

Gli oggetti aiutano a salvare dati strutturati.

Invece di tenere informazioni collegate in tante variabili separate, possiamo tenerle dentro un solo oggetto.

Più pulito.

Più intelligente.

Meno caos.

JavaScript sta lentamente diventando organizzato.

Sospettosamente organizzato.

Cosa Imparerai

In questa lezione imparerai:

Alla fine di questa lezione capirai come JavaScript rappresenta cose del mondo reale.

Utenti.

Prodotti.

Corsi.

Attività.

Auto.

Gatti.

Anche sviluppatori confusi.

Gli oggetti sono ovunque in JavaScript.

Ovunque.

Come i punto e virgola nei vecchi tutorial.

Che Cos'è un Oggetto?

Un oggetto è una raccolta di dati collegati tra loro.

Esempio:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

Questo oggetto ha tre proprietà:

name
age
role

Ogni proprietà ha un valore:

Viktor
33
Developer

La struttura è:

proprietà: valore

Gli oggetti usano le parentesi graffe:

{}

Molto importante.

Gli array usano le parentesi quadre:

[]

Gli oggetti usano le parentesi graffe:

{}

Parentesi diverse.

Lavoro diverso.

JavaScript ama le parentesi.

Forse troppo.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson6
cd javascript-lesson6
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson6/
  index.html
  script.js

Apri la cartella nel tuo editor.

Inizieremo dalla console.

Poi useremo gli oggetti per aggiornare una pagina web.

Nessun drago framework oggi.

Solo JavaScript.

Ancora strano.

Ma utile.

Scrivi l'HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Oggetti</title>
</head>
<body>
  <h1>Oggetti</h1>
  <p>Apri la console del browser per vedere l&apos;output di JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Apri il file nel browser.

Apri la console:

Ora JavaScript è pronto.

La console osserva.

Di nuovo.

Probabilmente sa già troppo.

Il Tuo Primo Oggetto

Apri script.js e aggiungi:

const corso = {
  title: "JavaScript",
  level: "Beginner",
  lessons: 12
};

console.log(corso);

Aggiorna il browser.

Dovresti vedere l’oggetto nella console.

Questo oggetto rappresenta un corso.

Ha:

title: "JavaScript"

level: "Beginner"

lessons: 12

Una variabile.

Tanti valori collegati.

Questa è la forza degli oggetti.

Invece di tre variabili separate:

const title = "JavaScript";
const level = "Beginner";
const lessons = 12;

teniamo tutto insieme:

const corso = {
  title: "JavaScript",
  level: "Beginner",
  lessons: 12
};

Più pulito.

Più organizzato.

Meno spaghetti.

Più lasagna.

Strati ordinati.

Molto professionale.

Molto italiano.

Proprietà e Valori

Gli oggetti contengono proprietà e valori.

Esempio:

const user = {
  name: "Anna",
  age: 25,
  isStudent: true
};

Qui:

name

è una proprietà.

"Anna"

è il valore.

age

è una proprietà.

25

è il valore.

isStudent

è una proprietà.

true

è il valore.

Lo schema è sempre:

proprietà: valore

Usa le virgole tra le proprietà:

const product = {
  name: "Laptop",
  price: 900,
  inStock: true
};

Dopo l’ultima proprietà la virgola non è obbligatoria.

Ma nel JavaScript moderno si vede spesso anche così:

const product = {
  name: "Laptop",
  price: 900,
  inStock: true,
};

Entrambi vanno bene.

JavaScript sopravviverà.

Probabilmente.

Accedere alle Proprietà

Puoi accedere alle proprietà usando la dot notation.

Esempio:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

console.log(user.name);
console.log(user.age);
console.log(user.role);

Output:

Viktor
33
Developer

La dot notation significa:

user.name

“Dammi la proprietà name dell’oggetto user.”

Molto leggibile.

Molto comune.

Molto utile.

Altro esempio:

const product = {
  name: "Tastiera",
  price: 49,
  color: "nero"
};

console.log(`Prodotto: ${product.name}`);
console.log(`Prezzo: €${product.price}`);

Output:

Prodotto: Tastiera
Prezzo: €49

Gli oggetti ti aiutano a tenere insieme dati collegati.

Il codice diventa più facile da capire.

E il tuo futuro io diventa leggermente meno arrabbiato.

Bracket Notation

Esiste un altro modo per accedere alle proprietà.

La bracket notation.

Esempio:

const user = {
  name: "Viktor",
  age: 33
};

console.log(user["name"]);
console.log(user["age"]);

Output:

Viktor
33

Funziona anche così.

La dot notation di solito è più semplice:

user.name

La bracket notation è utile quando il nome della proprietà è salvato in una variabile.

Esempio:

const propertyName = "name";

console.log(user[propertyName]);

Output:

Viktor

Per ora usa quasi sempre la dot notation.

È pulita.

È semplice.

Non sembra che JavaScript stia cercando di evocare un demone.

Modificare i Valori

Puoi modificare il valore di una proprietà.

Esempio:

const user = {
  name: "Anna",
  age: 25
};

user.age = 26;

console.log(user);

Output:

{name: "Anna", age: 26}

L’età è cambiata da 25 a 26.

Anche se l’oggetto è stato creato con const, puoi comunque modificare le sue proprietà.

Questo è importante.

const significa che non puoi sostituire tutto l’oggetto.

Ma puoi modificare ciò che contiene.

Esempio:

const user = {
  name: "Anna",
  age: 25
};

user.age = 26;

Questo è permesso.

Ma questo no:

user = {
  name: "Marco",
  age: 30
};

Questo prova a sostituire l’intero oggetto.

JavaScript si lamenterà.

E onestamente, questa volta JavaScript ha ragione.

Aggiungere Nuove Proprietà

Puoi aggiungere nuove proprietà a un oggetto.

Esempio:

const user = {
  name: "Viktor",
  age: 33
};

user.role = "Developer";

console.log(user);

Ora l’oggetto ha una nuova proprietà:

role: "Developer"

Risultato:

{name: "Viktor", age: 33, role: "Developer"}

Questo è utile quando ricevi più informazioni dopo.

Esempio:

const product = {
  name: "Mouse",
  price: 25
};

product.inStock = true;

console.log(product);

Gli oggetti sono flessibili.

A volte troppo flessibili.

Come un insegnante di yoga che conosce anche il backend.

Potente.

Ma leggermente intimidatorio.

Eliminare Proprietà

Puoi eliminare una proprietà usando delete.

Esempio:

const user = {
  name: "Anna",
  age: 25,
  password: "secret123"
};

delete user.password;

console.log(user);

Output:

{name: "Anna", age: 25}

La proprietà password è stata rimossa.

Bene.

Non stampare mai password nei progetti reali.

Non salvare mai password così.

Non fidarti mai di una password da tutorial.

Questo esempio serve solo per imparare.

La sicurezza non è una pianta decorativa.

Conta davvero.

Oggetti e Funzioni

Gli oggetti funzionano molto bene con le funzioni.

Esempio:

function showUser(user) {
  console.log(`Nome: ${user.name}`);
  console.log(`Età: ${user.age}`);
}

const user = {
  name: "Viktor",
  age: 33
};

showUser(user);

Output:

Nome: Viktor
Età: 33

La funzione riceve un oggetto.

Poi legge le proprietà di quell’oggetto.

Questo è molto comune nel JavaScript reale.

Altro esempio:

function createProductMessage(product) {
  return `${product.name} costa €${product.price}.`;
}

const product = {
  name: "Tastiera",
  price: 49
};

console.log(createProductMessage(product));

Output:

Tastiera costa €49.

L’oggetto contiene i dati.

La funzione usa quei dati.

Pulito.

Semplice.

Quasi sospettosamente normale.

Metodi

Un metodo è una funzione dentro un oggetto.

Esempio:

const user = {
  name: "Viktor",
  sayHello: function () {
    console.log("Ciao!");
  }
};

user.sayHello();

Output:

Ciao!

Qui:

sayHello

è un metodo.

Perché è una funzione salvata dentro un oggetto.

Puoi anche usare i dati dell’oggetto dentro un metodo con this.

Esempio:

const user = {
  name: "Viktor",
  sayHello: function () {
    console.log(`Ciao, mi chiamo ${this.name}.`);
  }
};

user.sayHello();

Output:

Ciao, mi chiamo Viktor.

this.name significa:

“Usa la proprietà name di questo oggetto.”

this può creare confusione.

Molta confusione.

Per ora ricorda l’idea base:

Dentro un metodo di un oggetto, this può riferirsi all’oggetto.

Non preoccuparti se sembra strano.

JavaScript ha reso this strano apposta.

Probabilmente per mantenerci umili.

Oggetti Dentro Array

Oggetti e array spesso lavorano insieme.

Esempio:

const products = [
  {
    name: "Laptop",
    price: 900
  },
  {
    name: "Mouse",
    price: 25
  },
  {
    name: "Tastiera",
    price: 49
  }
];

console.log(products[0].name);

Output:

Laptop

Qui abbiamo un array di oggetti.

Questo è estremamente comune.

Molto comune.

Quasi ovunque comune.

Una lista di utenti?

Array di oggetti.

Una lista di prodotti?

Array di oggetti.

Una lista di articoli?

Array di oggetti.

Esempio:

for (const product of products) {
  console.log(`${product.name}: €${product.price}`);
}

Output:

Laptop: €900
Mouse: €25
Tastiera: €49

Questo è JavaScript reale.

I dati spesso arrivano come liste di oggetti.

Non sempre.

Ma molto spesso.

Abituati a questo schema.

Ti seguirà.

Come la cache del browser.

Costruire una Scheda Profilo

Ora costruiamo una piccola scheda profilo usando un oggetto.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Oggetti</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    h2 {
      font-size: 30px;
      margin-bottom: 8px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    .badge {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      background-color: #2563eb;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h1>Oggetti</h1>

  <div class="card">
    <h2 id="profileName"></h2>
    <p id="profileRole"></p>
    <p id="profileCountry"></p>
    <span id="profileLevel" class="badge"></span>
  </div>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const profile = {
  name: "Viktor",
  role: "Studente JavaScript",
  country: "Italia",
  level: "Beginner"
};

const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");

function showProfile(profile) {
  profileNameElement.textContent = profile.name;
  profileRoleElement.textContent = `Ruolo: ${profile.role}`;
  profileCountryElement.textContent = `Paese: ${profile.country}`;
  profileLevelElement.textContent = profile.level;
}

showProfile(profile);

Aggiorna il browser.

Dovresti vedere una scheda profilo.

JavaScript ha preso i dati da un oggetto e li ha mostrati nella pagina.

Questo è importante.

Molto importante.

Perché molti siti funzionano così:

L’oggetto è il dato.

Il DOM è la pagina.

JavaScript è il cameriere che porta informazioni dalla cucina.

Speriamo senza rovesciare la zuppa.

Come Funziona Questo Codice

Questo oggetto salva i dati del profilo:

const profile = {
  name: "Viktor",
  role: "Studente JavaScript",
  country: "Italia",
  level: "Beginner"
};

Queste righe trovano gli elementi HTML:

const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");

Questa funzione mostra i dati dell’oggetto:

function showProfile(profile) {
  profileNameElement.textContent = profile.name;
  profileRoleElement.textContent = `Ruolo: ${profile.role}`;
  profileCountryElement.textContent = `Paese: ${profile.country}`;
  profileLevelElement.textContent = profile.level;
}

Questo esegue la funzione:

showProfile(profile);

Nota lo schema:

I dati vivono nell’oggetto.

La funzione legge i dati.

La pagina mostra i dati.

Questo schema è ovunque.

Semplice adesso.

Potente dopo.

Errori Comuni

Dimenticare le Virgole tra le Proprietà

Sbagliato:

const user = {
  name: "Anna"
  age: 25
};

Corretto:

const user = {
  name: "Anna",
  age: 25
};

Usa le virgole tra le proprietà.

JavaScript ne ha bisogno.

Non è bravo a indovinare.

Non legge la tua anima.

Per fortuna.

Usare = Invece di :

Sbagliato:

const user = {
  name = "Anna"
};

Corretto:

const user = {
  name: "Anna"
};

Dentro gli oggetti usa : tra proprietà e valore.

Non =.

Simbolo piccolo.

Differenza grande.

Classica trappola JavaScript.

Accedere a una Proprietà che Non Esiste

Esempio:

const user = {
  name: "Anna"
};

console.log(user.email);

Output:

undefined

Non esiste la proprietà email.

JavaScript restituisce undefined.

Di nuovo.

Molto calmo.

Molto misterioso.

Confondere Array e Oggetti

Array:

const colors = ["red", "green", "blue"];

Oggetto:

const user = {
  name: "Anna",
  age: 25
};

Usa gli array per le liste.

Usa gli oggetti per dettagli strutturati.

Una lista di nomi?

Array.

Un utente con tanti dettagli?

Oggetto.

Una lista di utenti?

Array di oggetti.

Questa è la via.

Pratica

Crea un oggetto chiamato book.

Deve avere:

Esempio:

const book = {
  title: "JavaScript Basics",
  author: "InnoMarts",
  pages: 120,
  isFinished: false
};

Stampa ogni proprietà nella console:

console.log(book.title);
console.log(book.author);
console.log(book.pages);
console.log(book.isFinished);

Poi cambia isFinished in true.

book.isFinished = true;

Stampa di nuovo l’oggetto.

Rompilo.

Sistemalo.

È ancora il miglior insegnante.

A parte il caffè.

Anche il caffè è un insegnante.

Molto severo.

Mini Challenge

Costruisci una piccola scheda prodotto.

Crea un oggetto:

const product = {
  name: "Corso JavaScript",
  price: 49,
  category: "Programmazione",
  available: true
};

Crea HTML con:

Poi crea una funzione:

function showProduct(product) {
  // aggiorna la pagina qui
}

Se available è true, mostra:

Disponibile ora

Altrimenti mostra:

Non disponibile

Questo è molto vicino allo sviluppo web reale.

I prodotti sono oggetti.

Gli utenti sono oggetti.

Gli ordini sono oggetti.

I corsi sono oggetti.

Anche i bug sembrano oggetti a volte.

Pesanti.

Complicati.

Pieni di proprietà che nessuno ha chiesto.

Riepilogo

Oggi hai imparato:

Questo è un grande passo.

Gli oggetti sono una delle parti più importanti di JavaScript.

Se gli array sono liste, gli oggetti sono dettagli.

Insieme permettono di rappresentare dati del mondo reale.

Un utente.

Un prodotto.

Un corso.

Un’attività.

Un messaggio.

Una banana molto drammatica.

Tutto può diventare un oggetto.

JavaScript sta diventando serio.

Ancora strano.

Ma serio.

Prossima Lezione

Nella prossima lezione impareremo di più sul DOM.

Il DOM permette a JavaScript di parlare con la pagina web.

Cambiare testo.

Cambiare stili.

Creare elementi.

Reagire agli utenti.

In pratica, il DOM è il posto dove JavaScript smette di essere teoria e inizia a toccare la pagina.

Con cautela.

Di solito.