Oggetti

Indice dei contenuti

Oggetti

L'oggetto JavaScript è un'entità autonoma che contiene più valori in termini di proprietà e metodi. I metodi rappresentano le funzioni. I dati all'interno degli oggetti non sono ordinati e i valori possono essere di qualsiasi tipo.

Un oggetto JavaScript è racchiuso con parentesi graffe {}. I valori sono assegnati a delle parole chiavi con i due punti (:), le coppie parola chiave-valore sono separate da virgole. Tutte le parole chiave sono uniche, ma i valori non lo sono.

Le coppie parola chiave-valore di un oggetto sono anche chiamate in generale proprietà.

Le proprietà di un oggetto JavaScript sono accessibili con la notazione a punti in questo modo: oggetto.nomeProprietà. Si può accedere alle proprietà annidate di un oggetto concatenando i nomi delle chiavi nell'ordine corretto.

const banana = {
colore: 'Giallo',
prezzo: {
bulk: '€3/kg',
smallQty: '€4/kg'
}
};

console.log(banana.colore);
console.log(banana.prezzo.bulk);

Giallo
€3/kg

Quando si tenta di accedere a una proprietà di un oggetto JavaScript non ancora definita, il valore undefined sarà restituito di default.

I nomi delle proprietà e dei metodi degli oggetti JavaScript devono rispettare alcune restrizioni per essere validi. I caratteri speciali come l'underscore non sono ammessi.

Modificabili

Gli oggetti JavaScript sono modificabili, il che significa che il loro contenuto può essere cambiato, anche quando sono dichiarati come const. Possono essere aggiunte nuove proprietà e i valori delle proprietà esistenti possono essere modificati o cancellati.

È il riferimento all'oggetto, legato alla variabile, che non può essere modificato.

const studente = {
nome: 'Anna',
voto: 100,
votoLettera: 'A',
}

console.log(studente)

delete studente.voto
studente.votoLettera = 'F'
console.log(studente)

studente = {}

{ nome: 'Anna', voto: 100, votoLettera: 'A' }
{ nome: 'Anna', votoLettera: 'F' }
TypeError: Assignment to constant variable.

Operatore delete

Una volta creato un oggetto in JavaScript, è possibile rimuovere le proprietà dall'oggetto utilizzando l'operatore delete. La parola chiave delete cancella sia il valore della proprietà che la proprietà stessa dall'oggetto. L'operatore di cancellazione funziona solo sulle proprietà, non sulle variabili o le funzioni.

const persona = {
  nome: "Maia",
  anni: 27,
  hobby: "videogames",
obiettivi: "imparare a programmare"
};

delete persona.hobby; // oppure delete person[hobby];

Oggetti come argomenti

Quando gli oggetti JavaScript vengono passati come argomenti a funzioni o metodi, vengono passati per riferimento, non per valore. Ciò significa che l'oggetto stesso (non una copia) è accessibile e modificabile all'interno di quella funzione.

const numIniziale = 8;
const oggIniziale = {colore: 'blu'};

const cambialo = (num, ogg) => {
num = 7;
ogg.colore = 'red';
};

cambialo(numIniziale, oggIniziale);

‍console.log(numIniziale);

Output sarà 8 poiché i numeri interi sono passati per valore.

console.log(oggIniziale.colore);

Output 'rosso' dal momento che gli oggetti sono passati per riferimento e sono quindi modificabili.

Metodi

Gli oggetti JavaScript possono avere valori che sono funzioni. Questi sono chiamati metodi di oggetti.

I metodi possono essere definiti utilizzando espressioni di funzioni freccia anonime o con la sintassi del metodo abbreviato.

I metodi a oggetti sono invocati con la sintassi: nomeOggetto.nomeMetodo(argomenti).

const motore = {

// metodo abbreviato, con un solo argomento

accensione(parola) {
console.log (`Il motore si accende ${parola}...`);
},

// funzione freccia senza argomenti

sborbotta: () => {
console.log('Il motore sborbotta...');
},
};

motore.accensione('lentamente');
motore.sborbotta();

Assegnamento per destrutturazione

L'assegnamento per destrutturazione (destructuring assignment) in JavaScript è una sintassi abbreviata che permette di estrarre le proprietà dell'oggetto in specifici valori di variabili.

Utilizza una coppia di parentesi graffe con i nomi delle proprietà sul lato sinistro di un'assegnazione per estrarre i valori dagli oggetti. Il numero di variabili può essere anche inferiore al totale delle proprietà di un oggetto.

const oggetto = {
proprA: '1,2,3',
propB: 'a,b,c',
propC: 'x,y,z'
};

const {proprA, propB, propC} = oggetto;
console.log(proprA);
console.log(propB);
console.log(propC);

'1,2,3'
'a,b,c'
'x,y,z'

This

La parola this si riferisce all'oggetto che chiama un metodo e può essere usata per accedere alle proprietà appartenenti a quell'oggetto.

Nell'esempio sotto, usando questa parola chiave all'interno della funzione dell'oggetto, si può fare riferimento all'oggetto gatto e accedere alla sua proprietà del nome.

const gatto = {
nome: 'Pipey',
anni: 8,
cheNome() {
return this.nome
}
};

console.log (gatto.cheNome());

Per una funzione definita all'interno di un oggetto, this si riferirà a quell'oggetto stesso. Per una funzione definita al di fuori di un oggetto, this si riferirà all'oggetto globale.

const ristorante = {
clienti: 45,
postiSedere: 100,
postiDisponibili() {

// this si riferisce all'oggetto ristorante e viene utilizzato per accedere alle sue proprietà

return this.postiSedere - this.clienti;
}
};

Una particolarità sulle funzioni freccia inerente agli oggetti è che non hanno un contesto this. Utilizzano di fatto il this del contesto circostante. Quindi sono generalmente una scelta da non fare per la scrittura di metodi a oggetti.

Getters e setters

I metodi getter e setter in JavaScript sono utili perché offrono un modo per interagire con l'accesso e l'assegnazione di proprietà e consentono di eseguire ulteriori azioni prima che queste modifiche entrino in vigore.

const gatto = {
_nome: 'Snickers',
get nome(){
return this._nome
},
set nome(nuovoNome){

//Verifica che nuovoNome sia una stringa non vuota prima di impostarla come proprietà del nome

if (typeof nuovoNome === 'string' && nuovoNome.length > 0){
this._name = nuovoNome;
} else {
console.log("ERRORE: il nome deve essere una stringa non vuota");
}
}
};

Le proprietà degli oggetti JavaScript non sono strettamente private. Poiché gli oggetti JavaScript vengono passati per riferimento, non c'è modo di prevenire completamente le interazioni errate con le proprietà degli oggetti.

Un modo per implementare interazioni più limitate con le proprietà degli oggetti è quello di utilizzare metodi getter e setter.

Tipicamente il valore interno è memorizzato come una proprietà con un identificatore che corrisponde ai nomi dei metodi getter e setter ma inizia con un trattino basso, l'underscore. Come puoi vedere nell'esempio sopra.

Funzione fabbrica

Una funzione JavaScript che restituisce un oggetto è nota come factory function (funzione fabbrica). Le factory function spesso accettano parametri per personalizzare l'oggetto restituito.

// Una funzione fabbrica accetta il "nome",
// "anni", "razza" e restituisce
// un oggetto cane personalizzato.

const fabbricaCani = (nome, anni, razza) => {
   return {
   nome: nome,
   anni: anni,
   razza: razza,
   abbaia() {
   console.log('Bau!Bau!');
   }
   };
};