Articolo originale: JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair

In JavaScript, è possibile raggruppare insieme dei dati in una singola struttura di dati usando un oggetto, in questo modo:

const desk = {
   height: "4 feet",
   weight: "30 pounds",
   color: "brown",
   material: "wood",
 };

Un oggetto contiene proprietà, o coppie chiave-valore. L'oggetto desk qui sopra ha quattro proprietà. Ognuna di esse ha un nome, anche detto chiave, e un valore corrispondente.

Ad esempio, la chiave height ha il valore "4 feet". Insieme, la chiave e il valore costituiscono una singola proprietà.

height: "4 feet",

L'oggetto desk contiene dei dati riguardo a una scrivania. Questa è una ragione per utilizzare un oggetto JavaScript: conservare dati. È anche semplice recuperare i dati archiviati in un oggetto. Questo aspetto rende gli oggetti molto utili.

In questo articolo sugli oggetti JavaScript imparerai:

  • come creare un oggetto
  • come salvare dei dati in un oggetto
  • e come recuperare i dati inseriti.

Iniziamo creando un oggetto!

Come creare un oggetto in JavaScript

Di seguito, ho creato un oggetto chiamato pizza, a cui ho aggiunto delle coppie chiave-valore.

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

Le chiavi sono a sinistra dei due punti : e i valori sono sulla destra. Ogni coppia chiave-valore è una proprietà. In questo esempio ci sono tre proprietà:

  • La chiave topping ha il valore “cheese”.
  • La chiave sauce ha il valore “marinara”.
  • La chiave size ha il valore “small”.

Ogni proprietà è separata da una virgola. Nel complesso, tutte le proprietà sono racchiuse tra parentesi graffe.

Questa è la sintassi di base degli oggetti. Ma ci sono alcune regole da tenere a mente quando si creano degli oggetti in JavaScript.

Chiavi degli oggetti JavaScript

Ogni chiave di un oggetto JavaScript deve essere una stringa, un simbolo o un numero.

Guarda con attenzione il seguente esempio. I nomi delle chiavi 1 e 2 in realtà vengono "convertiti" (tramite coercizione) in stringhe.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

La differenza risulta chiara stampando l'oggetto sulla console.

console.log(shoppingCart);
//Risultato: { '1': 'apple', '2': 'oranges' }

Esiste un'altra regola da tenere a mente riguardo ai nomi delle chiavi: se il nome contiene degli spazi occorre racchiuderlo tra virgolette.

Dai un'occhiata all'oggetto programmer qui sotto. Nota il nome dell'ultima chiave, "current project name". Contiene degli spazi, quindi va racchiuso tra virgolette.

const programmer = {
   firstname: "Phil",
   age: 21,
   backendDeveloper: true,
   languages: ["Python", "JavaScript", "Java", "C++"],
   "current project name": "The Amazing App"
};

Valori degli oggetti JavaScript

Un valore, d'altro canto, può essere un qualsiasi tipo di dato, compresi array, numeri o booleani. L'esempio qui sopra contiene valori di tipo stringa, intero, booleano e array.

Puoi anche usare una funzione come valore. In tal caso viene detta metodo. Un esempio è sounds(), nel seguente oggetto.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Ora diciamo che vuoi aggiungere o eliminare una coppia chiave-valore, o semplicemente recuperare il valore di un oggetto.

Puoi farlo usando la notazione con punto (dot notation) o con parentesi (bracket notation), di cui ci occuperemo adesso.

Come funzionano le notazioni con punto e parentesi in JavaScript

La notazione con punto e quella con parentesi sono due modi per accedere e utilizzare le proprietà di un oggetto. Probabilmente ti troverai a usare più spesso la notazione con punto, quindi partiamo da questa.

Come aggiungere una coppia chiave-valore con la notazione con punto in JavaScript

Qui sotto ho creato un oggetto book vuoto.

const book = {};

Per aggiungere una coppia chiave-valore usando la notazione con punto, usa la sintassi:

nomeOggetto.nomeChiave = valore

Questo è il codice per aggiungere la chiave (author) e il valore ("Jane Smith") all'oggetto book:

book.author = "Jane Smith";

Ecco un'analisi del codice qui sopra:

  • book è il nome dell'oggetto
  • . (punto)
  • author è il nome della chiave
  • = (uguale)
  • "Jane Smith" è il valore

Quando stampiamo l'oggetto vedremo la coppia chiave-valore appena aggiunta.

console.log(book);
//Risultato: { author: 'Jane Smith' }

Aggiungiamo un'altra coppia chiave-valore all'oggetto book.

book.publicationYear = 2006;

Ora l'oggetto book ha due proprietà.

console.log(book);
//Risultato: { author: 'Jane Smith', publicationYear: 2006 }

Come accedere ai dati di un oggetto JavaScript usando la notazione con punto

Puoi usare la notazione con punto su una chiave per accedere al relativo valore.

Considera l'oggetto basketballPlayer.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Diciamo che vuoi recuperare il valore “shooting guard”. Questa è la sintassi da usare:

nomeOggetto.nomeChiave

Usiamo questa sintassi per ottenere e stampare il valore "shooting guard".

console.log(basketballPlayer.position);
//Risultato: shooting guard

Ecco un'analisi del codice qui sopra:

  • basketballPlayer è il nome dell'oggetto
  • . (punto)
  • position è il nome della chiave

Ecco un altro esempio.

console.log(basketballPlayer.name);
//Risultato: James

Come eliminare una coppia chiave-valore in JavaScript

Per eliminare una coppia chiave-valore utilizza l'operatore delete con la seguente sintassi:

delete nomeOggetto.nomeChiave

Quindi per cancellare la chiave height e il suo valore dall'oggetto basketballPlayer dovrai scrivere il seguente codice:

delete basketballPlayer.height;

Di conseguenza, l'oggetto basketballPlayer adesso ha tre coppie chiave-valore.

console.log(basketballPlayer);
//Risultato: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

Probabilmente ti troverai a usare frequentemente la notazione con punto, anche se ci sono alcuni requisiti a cui prestare attenzione.

Quando utilizzi la notazione con punto, i nomi delle chiavi non possono contenere spazi, trattini o iniziare con un numero.

Ad esempio, se proviamo ad aggiungere una chiave che contiene spazi con la notazione con punto, otteniamo un errore.

basketballPlayer.shooting percentage = "75%";
//Errore

Quindi questa notazione non funziona in ogni situazione. Ecco perché c'è un'altra opzione: la notazione con parentesi.

Come aggiungere una coppia chiave-valore usando la notazione con parentesi in JavaScript

Puoi usare anche la notazione con parentesi per aggiungere una coppia chiave-valore a un oggetto.

La notazione con parentesi offre più flessibilità, visto che i nomi delle chiavi possono includere spazi e trattini e possono iniziare con numeri.

Qui sotto ho creato un oggetto employee.

const employee = {};

Adesso aggiungo una coppia chiave-valore usando la notazione con parentesi. Ecco la sintassi:

nomeOggetto[“nomeChiave”] = valore

Ed ecco come aggiungere la chiave occupation e il valore "sales" all'oggetto employee:

employee["occupation"] = "sales";

Di seguito, un'analisi del codice qui sopra:

  • employee è il nome dell'oggetto
  • "occupation" è il nome della chiave
  • = (uguale)
  • "sales" è il valore

Qui sotto ci sono altri esempi della flessibilità della notazione con parentesi per aggiungere una serie di coppie chiave-valore.

//Aggiungere chiavi composte da più parole
employee["travels frequently"] = true;
 
//Aggiungere chiavi che iniziano con un numero e contengono trattini
employee["1st-territory"] = "Chicago";
 
//Aggiungere chiavi che iniziano con un numero
employee["25"] = "total customers";

Quando stampiamo l'oggetto employee, otteniamo:

{
  '25': 'total customers',
  occupation: 'sales',
  'travels frequently': true,
  '1st-territory': 'Chicago'
}

Sapendo questo possiamo aggiungere la chiave “shooting percentage” all'oggetto basketballPlayer precedente.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Se ricordi, la notazione con punto ci ha lasciati con un errore quando abbiamo provato ad aggiungere una chiave che include spazi.

basketballPlayer.shooting percentage = "75%";
//Errore

Ma la notazione con parentesi non ci dà alcun errore, come puoi vedere qui:

basketballPlayer["shooting percentage"] = "75%";

Questo è il risultato che otteniamo stampando l'oggetto:

{
  name: 'James',
  averagePointsPerGame: 20,
  height: '6 feet, 2 inches',
  position: 'shooting guard',
  'shooting percentage': '75%'
}

Come accedere ai dati di un oggetto JavaScript usando la notazione con parentesi

Puoi usare anche la notazione con parentesi su una chiave per accedere al valore relativo.

Recuperiamo l'oggetto animal dall'inizio dell'articolo.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Otteniamo il valore associato alla chiave name. Per farlo racchiudiamo il nome della chiave tra virgolette e lo inseriamo tra parentesi quadre. Ecco la sintassi:

nomeOggetto[“nomeChiave”]

Questo è il codice che dovresti scrivere in notazione con parentesi: animal["name"];.

Ecco un'analisi del codice qui sopra:

  • animal è il nome dell'oggetto
  • ["name"] è il nome della chiave tra parentesi quadre

Vediamo un altro esempio.

console.log(animal["sounds"]());

//Risultato: 
meow meow
undefined

sounds() è un metodo, per questo alla fine ho aggiunto le parentesi per invocarlo.

Ed ecco come invocare il metodo usando la notazione con punto.

console.log(animal.sounds());

//Risultato: 
meow meow
undefined

Metodi di oggetti JavaScript

Ora sai come accedere a specifiche proprietà. Ma se volessi tutte le chiavi o tutti i valori di un oggetto?

Esistono due metodi che ti daranno le informazioni che ti servono.

const runner = {
   name: "Jessica",
   age: 20,
   milesPerWeek: 40,
   race: "marathon"
};

Puoi usare il metodo Object.keys() per recuperare i nomi di tutti le chiavi di un oggetto.

Ecco la sintassi:

Object.keys(nomeOggetto)

Possiamo usare questo metodo sull'oggetto runner usato in precedenza.

Object.keys(runner);

Stampando il risultato, otteniamo un array con le chiavi dell'oggetto.

console.log(Object.keys(runner));
//Risultato: [ 'name', 'age', 'milesPerWeek', 'race' ]

Allo stesso modo possiamo usare il metodo Object.values() per ottenere tutti i valori di un oggetto. Questa è la sintassi:

Object.values(nomeOggetto)

Ora otterremo tutti i valori dell'oggetto runner.

console.log(Object.values(runner));
//Risultato: [ 'Jessica', 20, 40, 'marathon' ]

Abbiamo fatto un sacco di strada. Ecco i concetti fondamentali che abbiamo affrontato:

Oggetti:

  • Puoi usare gli oggetti per archiviare dati come proprietà (coppie chiave-valore).
  • I nomi delle chiavi possono essere stringhe, simboli o numeri.
  • I valori possono essere di qualsiasi tipo.

Accedere alle proprietà di un oggetto:

  • Notazione con punto: nomeOggetto.nomeChiave
  • Notazione con parentesi: nomeOggetto[“nomeChiave”]

Eliminare una proprietà:

  • delete nomeOggetto.nomeChiave

Ci sono un sacco di cose che puoi fare con gli oggetti. E adesso hai alcune delle basi per poter trarre vantaggio di questo utile tipo di dato JavaScript.

Scrivo riguardo allo studio della programmazione e dei modi migliori per affrontarlo su amymhaddad.com. Condivido anche tweet sulla programmazione, l'apprendimento e la produttività: @amymhaddad.