Gestire gli oggetti con Javascript

In questa parte finale della nostra guida a Javascript ritengo opportuno affrontare alcuni concetti avanzati, come ad esempio la gestione degli oggetti e, conseguentemente, accennare alla cosiddetta programmazione orientata agli oggetti.

Prima di poter parlare di OOP, ovviamente, è necessario introdurre il concetto di oggetto. In realtà, nel corso di questa guida, abbiamo già avuto modo di avere a che fare con oggetti nativi del linguaggio; in questa lezione vedremo come creare oggetti personalizzati.

Definizione di oggetto

In via di estrema sintesi possiamo definire un oggetto come un’entità che possiede determinate caratteristiche (che si estrinsecano sotto forma di dati che prendono il nome di proprietà) ed è in grado di svolgere determinate azioni (che si estrinsecano in funzionalità che prendono il nome di metodi).

Creare un oggetto personalizzato in Javascript

In un certo senso possiamo paragonare gli oggetti agli Array, nel senso che i primi ricordano strutturalmente un array associativo essendo composti da una serie di coppie nome/valore. Vediamo un esempio:

var auto = { marca: "Audi", modello: "A4" }

Nel nostro esempio abbiamo creato una variabile oggetto di nome "auto" avente due distinte proprietà (marca e modello).

La sintassi, che estende la definizione di una comune variabile, prevede l’utilizzo delle parentesi graffe per circondare le diverse coppie di nome/valore tra loro separate da virgole. L’operatore di assegnazione che "collega" il nome al valore è il simbolo dei due punti (:).

E’ appena il caso di sottolineare che nulla vieta di scrivere il medesimo oggetto sfruttando ritorni a capo ed un po di "indentatura" per migliorarne la leggibilità:

var auto = {
  marca: "Audi",
  modello: "A4"
}

Una sintassi alternativa, ma del tutto equivalente a quella appena vista, prevede il ricorso all’oggetto Object in questo modo:

var auto = new Object({
  marca: "Audi",
  modello: "A4"  
});

Lettura e modifica delle proprietà di un oggetto Javascript

Accedere alla proprietà di un oggetto javascript è estremamente semplice. Per farlo sarà necessario far ricorso a questa sintassi:

nome_oggetto.nome_proprieta

Oppure:

nome_oggetto[nome_proprieta]

Le due sintassi sopra esposte sono analoghe.

Tornando al nostro esempio pratico, supponiamo di voler stampare a video la marca del nostro oggetto "auto". Per farlo utilizzeremo:

document.write(auto.marca);

Oppure:

document.write(auto["marca"]);

Altrettanto semplice e la modifica del valore di una delle proprietà dell’oggetto. Per farlo sarà sufficiente comportarsi come nel caso della assegnazione di un nuovo valore ad una comune variabile:

nome_oggetto.nome_proprieta = nuovo_valore

Oppure:

nome_oggetto[nome_proprieta] = nuovo_valore

Ad esempio:

auto.modello = "Q3";

Oppure:

auto["modello"] = "Q3";

Aggiunta di nuove proprietà ad un oggetto Javascript

Le procedura per l’aggiunta e l’eliminazione di proprietà da un oggetto sono altrettanto semplici ed intuitive.

Supponiamo di voler aggiungere una nuova proprietà "cilindrata" al nostro oggetto "auto". Per farlo scriveremo, semplicemente:

auto.cilindrata = 1800;

In sostanza, la sintassi per aggiungere una nuova proprietà ad un dato oggetto è la seguente:

nome_oggetto.nome_nuova_proprieta = valore

In alternativa possiamo utilizzare la sintassi con le parentesi quadre:

nome_oggetto[nome_nuova_proprieta] = valore

Utilizzando questa seconda sintassi potremo utilizzare anche dei nomi con degli spazi al loro interno, ad esempio:

auto["tipo di trazione"] = "integrale"

Verificare se un oggetto possiede una data proprietà

Vediamo come verificare se un oggetto possiede o meno una specifica proprietà. Per farlo utilizzeremo l’operatore "in"; esso accetta come argomenti due operandi:

• a sinistra di "in" deve essere presente una stringa o qualsiasi altro elemento che a sua volta possa essere convertito in un stringa;
• a destra dell’operatore deve invece essere indicato l’oggetto all’interno del quale eseguire la ricerca della proprietà.

Questa la sintassi:

if ("nome_proprieta" in nome_oggetto) {
  // ...
}

Si analizzi un semplice esempio:

var auto = new Object({
  marca: "Audi",
  modello: "A4"  
});
var testMarca = "marca" in auto;
var testCilindrata = "cilindrata" in auto;

In questo caso, il primo controllo sull’oggetto "auto" restituirà TRUE, la proprietà "marca" è infatti associata ad esso, il secondo restituirà invece FALSE, in quanto la proprietà "cilindrata" non è presente nell’oggetto "auto".

Molto simile alloperatore "in" è il metodo hasOwnProperty().

Quest’ultimo, a differenza di "in", restituisce TRUE solo se la proprietà appartiene direttamente all’oggetto ("in" restituisce TRUE anche se la proprietà non è diretta ma è comunque presente nella catena di prototipi dell’oggetto).

La sintassi di hasOwnProperty() è la seguente:

if (nome_oggetto.hasOwnProperty("nome_proprieta")) {
  // ...
}

Tornando all’esempio precedente avremmo potuto scrivere così:

var auto = new Object({
  marca: "Audi",
  modello: "A4"  
});
var testMarca = auto.hasOwnProperty("marca");
var testCilindrata = auto.hasOwnProperty("cilindrata");

Nel caso specifico l’esempio con "in" produrrà lo stesso risultato di quest’ultimo.

Eliminazione di proprietà di un oggetto

L’eliminazione di proprietà avviene mediante lo statement delete secondo questa sintassi:

delete nome_oggetto.nome_proprieta

Tornando al nostro oggetto "auto" supponiamo di voler eliminare la proprietà "modello":

delete auto.modello;

D’ora in avanti, cercando di accedere a questa proprietà, l’interprete Javascript ci restituirà un valore undefined.

Impostare una proprietà come "undefined" o "null" non ne determinerà l’eliminazione completa, sarà infatti eliminato il valore della proprietà ma non la chiave; quanto detto è dimostrabile attraverso un semplice esempio:

var auto = new Object({
  marca: "Audi",
  modello: "A4",
  cilindrata: 1800  
});
auto.marca = null;
auto.modello = undefined;
delete auto.cilindrata;

for(var i in auto) {
  if (auto.hasOwnProperty(i)) {
    console.log(i, '' + auto[i]);
  }
}

Si verifichi nella console il risultato dello script: come potete vedere le proprietà "marca" e "modello" sono ancora regolamente presenti nell’oggetto "auto".

Nella prossima lezione della nostra guida vedremo le basi della programmazione ad oggetti con javascript.