Come accedere alle proprietà degli oggetti in Javascript

Gli oggetti in Javascript sono valori compositi o, meglio, aggregati di proprietà. Abbiamo visto come crearli, in questa lezione vediamo ora come accedere alle loro proprietà.

Accesso alle proprietà di un oggetto

Esistono due modi per accedere alle proprietà di un oggetto in Javascript:

• Usando la "dot notation", ossia usando il nome dell'oggetto seguito da un punto e dall'identificativo della proprietà.
• Usando le parentesi quadre []. Si specifica il nome dell'oggetto seguito da parentesi quadre. Il contenuto delle parentesi può essere una qualunque espressione che, quando valutata, restituisce una stringa che contiene il nome della proprietà desiderata.

Vediamo un esempio di accesso in lettura:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Creiamo dapprima un oggetto
let persona = {
    nome: "Mario",
    cognome: "Rossi"
}

// Metodo di accesso 1: Dot notation
console.log(persona.nome);

// Metodo di accesso 2: Parentesi Quadre
console.log(persona["cognome"]);

Le proprietà possono essere accedute anche in scrittura:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// Creiamo dapprima un oggetto
let persona = {
    nome: "Mario",
    cognome: "Rossi"
}

// Accediamo in lettura alla proprietà "nome"
console.log(persona.nome); // Output: 'Mario'

// Accediamo in scrittura
persona.nome = "Giuseppe";

// Accediamo di nuovo in lettura
console.log(persona.nome); // Output: 'Giuseppe'

Quando accediamo ad una proprietà e quest'ultima non esiste possono accadere due cose:

• Se accediamo in lettura ad una proprietà che non esiste il risultato sarà undefined.
• Se accediamo in scrittura ad una proprietà che non esiste, l'interprete Javascript creerà una nuova proprietà nell'oggetto.

Vediamo un esempio:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// Creiamo dapprima un oggetto
let persona = {
    nome: "Mario",
    cognome: "Rossi"
}

// Accediamo in lettura alla proprietà inesistente "nazione"
console.log(persona.nazione); // Output: 'undefined'

// Accediamo in scrittura alla proprietà inesistente "nazione"
persona.nazione = "Italia"; // L'oggetto persona avrà una nuova proprietà: "nazione"

// Accediamo di nuovo in lettura
console.log(persona.nazione); // Output: 'Italia'

Oggetti Javascript come Dizionari

Nella sezione precedente abbiamo visto che le due espressioni seguenti sono equivalenti:

persona.nome;
persona["nome"];

Nel primo caso abbiamo usato la dot notation, ossia il punto seguito da un identificatore della proprietà. Nel secondo caso abbiamo usato la notazione con parentesi graffe, che assomiglia alla notazione usata per accedere agli elementi di un array.

Infatti, la prima notazione viene usata nei linguaggi come C, C++, Java o C# per accedere ai membri di una struttura, mentre la seconda viene usata per accedere agli elementi di un array. In questo caso, tuttavia, invece che usare un indice per accedere agli elementi dell'array abbiamo usato una stringa. Si parla in questo caso di Array Associativo o Dizionario.

Come abbiamo spiegato nella lezione introduttiva agli oggetti in Javascript, gli oggetti sono sostanzialmente dei Dizionari. Infatti, Javascript è un linguaggio weakly typed, ossia debolmente tipizzato. In un linguaggio come Java o C#, che sono fortemente tipizzati (strongly typed), le proprietà di un oggetto devono essere definite in precedenza e non possono essere modificate dinamicamente. Viceversa, per un linguaggio come Javascript, ciò non avviene e le proprietà possono essere aggiunte o rimosse dinamicamente.

L'unica limitazione che pone Javascript è che quando si usa la dot notation, la proprietà deve essere specificata da un identificatore valido. Ciò comporta due conseguenze:

1. L'identificatore della proprietà deve essere un identificatore valido per Javascript. Per cui non può contenere spazi o caratteri speciali.
2. L'identificatore è fisso nel codice sorgente e non può essere manipolato dal programma.

Ecco per quale motivo la notazione di array associativo è più flessibile. Dato che in questo caso la proprietà è espressa come una stringa e dato che le stringhe possono essere manipolate dal programma, anche l'accesso alle proprietà può avvenire in modo dinamico.

Per capirlo prendiamo un semplice esempio:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// Creiamo dapprima un oggetto
let ricetta = {
    ingrediente1: "latte",
    ingrediente2: "uova",
    ingrediente3: "farina",
    ingrediente4: "zucchero",
    ingrediente5: "lievito",
    ingrediente6: "acqua"
}

let ingredienti = "";
for (let i = 1; i <= 6; i++) {
    ingredienti += ricetta[`ingrediente${i}`] + "\n";
}

console.log(ingredienti);

In questo semplice esempio, si può vedere come accedere alle proprietà dell'oggetto in maniera programmatica. Avremmo potuto usare anche la dot notation, ma la notazione array associativo è più flessibile ed a volte è l'unica opzione.

Riassumendo

In questa lezione abbiamo visto come accedere alle proprietà di un oggetto in Javascript usando la dot notation oppure la notazione di array associativo. Abbiamo, inoltre, visto che accedendo in scrittura ad una proprietà inesistente essa verrà creata dinamicamente.

Nella prossima lezione entreremo nel dettaglio dell'ereditarietà delle proprietà tra oggetti Javascript utilizzando i prototipi.