Oggetti in

Informazioni su Oggetti

Spiegazione

Oltre ai tipi di dati primitivi come number e string, in JavaScript esiste un altro importante tipo di dati chiamato object. Gli oggetti sono collezioni di coppie chiave-valore. Per questo motivo, possono essere usati come quelli che in altri linguaggi vengono spesso chiamati mappe o dizionari.

In altri linguaggi, spesso tutti i valori di una mappa devono avere lo stesso tipo di dati. In JavaScript, solo il tipo della chiave è vincolato: deve essere una stringa. I valori all'interno di un oggetto possono avere tipi diversi. Possono essere tipi primitivi come i numeri, ma anche array, altri oggetti o persino funzioni. Questo rende gli oggetti molto versatili: sono anche entità fondamentali per la programmazione orientata agli oggetti (OOP) in JavaScript.

Nel seguito ci concentreremo sugli oggetti come collezioni o mappe. Altri casi d'uso degli oggetti saranno trattati in altri concetti, vedi ad esempio Classi.

Creare un oggetto

Per creare un oggetto letterale si usano le parentesi graffe. Puoi anche includere direttamente alcune voci (coppie chiave-valore). Per farlo, indica prima la chiave, seguita da due punti e dal valore.

const emptyObject = {};

const obj = {
  favoriteNumber: 42,
  greeting: 'Hello World',
  useGreeting: true,
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
  fruits: ['melon', 'papaya'],
  addNumbers: function (a, b) {
    return a + b;
  },
};

La virgola finale dopo l'ultima voce è opzionale in JavaScript. Puoi leggere i vantaggi del suo utilizzo qui.

Potresti chiederti perché le chiavi non sono racchiuse tra virgolette anche se dovrebbero essere stringhe. Questa è una notazione abbreviata. Se la chiave segue le regole di denominazione per un identificatore JavaScript, puoi omettere le virgolette. Per le chiavi con caratteri speciali nel nome, devi usare la solita notazione delle stringhe.

const obj = {
  '1keyStartsWithNumber': '...',
  'key/with/slashes': '...',
  'key-with-dashes': '...',
  'key with spaces': '...',
  '#&()[]{}èä樹keyWithSpecialChars': '...',
};

Spesso vorrai aggiungere variabili esistenti quando dichiari un oggetto. Questo porterebbe spesso a coppie chiave-valore come name: name. JavaScript ha una notazione abbreviata che permette di scrivere semplicemente name. Esiste anche una notazione abbreviata per definire una funzione in un oggetto. In quel caso puoi omettere i due punti e la parola chiave function.

const x = 1;
const y = 2;

const obj = {
  x: x,
  y: y,
  calcSum: function (a, b) {
    return a + b;
  },
};

// Can be shortened to ...
const obj = {
  x,
  y,
  calcSum(a, b) {
    return a + b;
  },
};

Se vuoi creare un oggetto letterale con un nome di chiave memorizzato in una variabile o ricavato tramite un'espressione, devi racchiudere la variabile o l'espressione tra parentesi quadre.

const key = 'greeting';

const obj = {
  [key]: 'hello world',
};
console.log(obj);
// => { greeting: 'hello world' }

Recuperare un valore

Ci sono due modi per recuperare il valore di una data chiave: la notazione con il punto e la notazione con le parentesi.

const obj = { greeting: 'hello world' };

obj.greeting;
// => hello world

obj['greeting'];
// => hello world

// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world

Usare la notazione con il punto come abbreviazione ha la stessa restrizione dell'omettere le virgolette. Funziona solo se la chiave segue le regole di denominazione degli identificatori.

Se provi a recuperare una chiave che non esiste nell'oggetto, JavaScript restituisce undefined. Vedi Null e Undefined per maggiori dettagli.

Puoi concatenare le chiavi se vuoi recuperare un valore da un oggetto annidato.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.city;
// => 'Batticaloa'

obj['address']['city'];
// => 'Batticaloa'

// Notations can also be mixed.
obj.address['city'];
// => 'Batticaloa'

Aggiungere o modificare un valore

Puoi aggiungere o modificare un valore usando l'operatore di assegnazione =. Anche in questo caso sono disponibili la notazione con il punto e quella con le parentesi.

const obj = { greeting: 'hello world' };

obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';

obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';

const key = 'new key 3';
obj[key] = 'new value 3';

Eliminare una voce

Puoi eliminare una coppia chiave-valore da un oggetto usando la parola chiave delete.

const obj = {
  key1: 'value1',
  key2: 'value2',
};

delete obj.key1;
delete obj['key2'];

Nota che, anche se per le chiavi inesistenti viene restituito undefined, impostare una chiave a undefined non rimuove la voce. Usa sempre delete invece.

Verificare se una chiave esiste

Puoi verificare se una certa chiave esiste in un oggetto con il metodo hasOwnProperty.

const obj = { greeting: 'hello world' };

obj.hasOwnProperty('greeting');
// => true

obj.hasOwnProperty('age');
// => false

hasOwnProperty restituisce false per le chiavi ereditate. Di solito questo è il comportamento desiderato. Se vuoi includere le chiavi ereditate nella verifica di esistenza, puoi usare invece l'operatore in.

Iterare su un oggetto

Esiste un ciclo for...in speciale per iterare su tutte le chiavi di un oggetto.

const obj = {
  name: 'Ali',
  age: 65,
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// name Ali
// age 65

Potrebbe sembrare che for...in visiti sempre le chiavi nell'ordine in cui appaiono o sono state aggiunte all'oggetto (ordine di inserimento). Tuttavia, non dovresti farci affidamento, perché ci sono casi speciali in cui l'ordine sarà diverso dall'ordine di inserimento. Scrivi sempre il codice come se l'ordine fosse arbitrario. Se hai bisogno di un ordine affidabile, usa una Map o un [array][concept-arrays] annidato invece di un oggetto.

Il ciclo for…in ha una trappola nel caso in cui l'oggetto abbia chiavi ereditate. Anche quelle verranno visitate dal ciclo for…in. Di solito vuoi evitarlo, quindi devi saltarle come mostrato di seguito.

for (let key in obj) {
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  // ...
}

JavaScript ha anche un ciclo for...of, ad esempio per iterare sugli array. È importante notare che for...in e for...of non sono intercambiabili; vedi la documentazione MDN per i dettagli.

Chiavi, valori e voci

L'oggetto integrato Object fornisce metodi ausiliari per recuperare tutte le chiavi, i valori o le voci di un dato oggetto sotto forma di array.

const obj = {
  name: 'Ali',
  age: 65,
};

Object.keys(obj);
// => [ 'name', 'age' ]

Object.values(obj);
// => [ 'Ali', 65 ]

Object.entries(obj);
// => [ [ 'name', 'Ali' ], [ 'age', 65 ] ]

Un oggetto davvero vuoto

Potresti aver notato che un oggetto vuoto in JavaScript non è completamente vuoto. Per esempio, contiene il metodo hasOwnProperty e altri metodi come toString. Di solito questo non causa problemi, ma se mai ti servisse creare un oggetto davvero vuoto, usa un oggetto null che può essere creato tramite Object.create(null).