Gli oggetti in Javascript sono strutture dati che consentono di raggruppare dati e funzionalità in un’unica entità. Gli oggetti sono costituiti da coppie chiave-valore, dove la chiave è una stringa e il valore può essere di qualsiasi tipo di dato.
Per creare un oggetto in Javascript, possiamo utilizzare la sintassi letterale {} o la parola chiave new seguita dal costruttore Object().
Ad esempio:
// Creazione di un oggetto con la sintassi letterale
let person = {
name: 'John',
age: 30,
};
// Creazione di un oggetto con la parola chiave new
let car = new Object();
car.make = 'Toyota';
car.model = 'Corolla';
In questo esempio, abbiamo creato due oggetti: person e car. L’oggetto person ha due proprietà name e age, mentre l’oggetto car ha due proprietà make e model.
Per accedere alle proprietà di un oggetto in Javascript, possiamo utilizzare la notazione a punto . o la notazione a parentesi quadre [].
Ad esempio:
let person = {
name: 'John',
age: 30,
};
console.log(person.name); // Output: John
console.log(person['age']); // Output: 30
In questo esempio, stiamo accedendo alle proprietà name e age dell’oggetto person utilizzando entrambe le notazioni.
Per modificare le proprietà di un oggetto in Javascript, possiamo semplicemente assegnare un nuovo valore alla proprietà.
Ad esempio:
let person = {
name: 'John',
age: 30,
};
person.age = 35;
console.log(person.age); // Output: 35
In questo esempio, stiamo modificando la proprietà age dell’oggetto person da 30 a 35.
Per aggiungere nuove proprietà a un oggetto in Javascript, possiamo semplicemente assegnare un valore a una nuova chiave.
Ad esempio:
let person = {
name: 'John',
age: 30,
};
person.city = 'New York';
console.log(person.city); // Output: New York
In questo esempio, stiamo aggiungendo una nuova proprietà city all’oggetto person con il valore 'New York'.
Per eliminare una proprietà da un oggetto in Javascript, possiamo utilizzare l’operatore delete.
Ad esempio:
let person = {
name: 'John',
age: 30,
};
delete person.age;
console.log(person.age); // Output: undefined
In questo esempio, stiamo eliminando la proprietà age dall’oggetto person.
Per iterare sulle proprietà di un oggetto in Javascript, possiamo utilizzare il ciclo for...in.
Ad esempio:
let person = {
name: 'John',
age: 30,
};
for (let key in person) {
console.log(key + ': ' + person[key]);
}
In questo esempio, stiamo iterando sulle proprietà dell’oggetto person e stampando la chiave e il valore di ciascuna proprietà.
Gli oggetti in Javascript possono contenere altri oggetti come proprietà. Questo è noto come oggetti annidati.
Ad esempio:
let person = {
name: 'John',
age: 30,
address: {
street: '123 Main St',
city: 'New York',
zip: '10001',
},
};
console.log(person.address.city); // Output: New York
In questo esempio, l’oggetto person ha una proprietà address che è a sua volta un oggetto con le proprietà street, city e zip.
Gli oggetti in Javascript possono essere passati come parametri di funzioni.
Ad esempio:
function printPerson(person) {
console.log('Name: ' + person.name);
console.log('Age: ' + person.age);
}
let person = {
name: 'John',
age: 30,
};
printPerson(person);
In questo esempio, stiamo definendo una funzione printPerson che accetta un oggetto person come parametro e stampa il nome e l’età della persona.
Le funzioni in Javascript possono restituire oggetti come valori di ritorno.
Ad esempio:
function createPerson(name, age) {
return {
name: name,
age: age,
};
}
let person = createPerson('John', 30);
console.log(person.name); // Output: John
console.log(person.age); // Output: 30
In questo esempio, stiamo definendo una funzione createPerson che restituisce un oggetto con le proprietà name e age in base ai parametri passati alla funzione.
In Javascript, possiamo utilizzare la parola chiave function per creare costruttori di oggetti. I costruttori di oggetti possono essere utilizzati per creare nuovi oggetti con le stesse proprietà e metodi.
Ad esempio:
function Person(name, age) {
this.name = name;
this.age = age;
}
let person1 = new Person('John', 30);
let person2 = new Person('Jane', 25);
console.log(person1.name); // Output: John
console.log(person2.name); // Output: Jane
In questo esempio, stiamo definendo un costruttore di oggetti Person che accetta i parametri name e age e crea un nuovo oggetto con le proprietà name e age. Possiamo quindi utilizzare il costruttore per creare nuovi oggetti person1 e person2.
In Javascript, gli oggetti possono avere un prototipo che definisce le proprietà e i metodi condivisi tra tutti gli oggetti di un determinato tipo.
Ad esempio:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log('Hello, my name is ' + this.name);
};
let person = new Person('John', 30);
person.greet(); // Output: Hello, my name is John
In questo esempio, stiamo definendo un costruttore di oggetti Person con una proprietà name e age e un metodo greet. Il metodo greet è definito sul prototipo dell’oggetto Person e può essere condiviso tra tutti gli oggetti Person.
Per controllare se una proprietà esiste in un oggetto in Javascript, possiamo utilizzare l’operatore in.
Ad esempio:
let person = {
name: 'John',
age: 30,
};
console.log('name' in person); // Output: true
console.log('city' in person); // Output: false
In questo esempio, stiamo utilizzando l’operatore in per controllare se le proprietà name e city esistono nell’oggetto person.
Per controllare se due oggetti sono uguali in Javascript, possiamo utilizzare l’operatore ==.
Ad esempio:
let person1 = {
name: 'John',
age: 30,
};
let person2 = {
name: 'John',
age: 30,
};
console.log(person1 == person2); // Output: false
In questo esempio, stiamo confrontando due oggetti person1 e person2 utilizzando l’operatore ==. Poiché gli oggetti sono due entità separate, il risultato sarà false.
Per controllare se due oggetti sono uguali in Javascript, possiamo utilizzare l’operatore ===.
Ad esempio:
let person1 = {
name: 'John',
age: 30,
};
let person2 = person1;
console.log(person1 === person2); // Output: true
In questo esempio, stiamo confrontando due oggetti person1 e person2 utilizzando l’operatore ===. Poiché person2 fa riferimento allo stesso oggetto di person1, il risultato sarà true.
Per clonare un oggetto in Javascript, possiamo utilizzare l’operatore di assegnazione = o il metodo Object.assign().
Ad esempio:
let person1 = {
name: 'John',
age: 30,
};
let person2 = person1;
person2.name = 'Jane';
console.log(person1.name); // Output: Jane
let person3 = Object.assign({}, person2);
person3.age = 25;
console.log(person3.age); // Output: 25
In questo esempio, stiamo clonando l’oggetto person1 in person2 utilizzando l’operatore di assegnazione = e in person3 utilizzando il metodo Object.assign().
In Javascript, gli oggetti possono essere convertiti in stringhe JSON utilizzando il metodo JSON.stringify() e viceversa utilizzando il metodo JSON.parse().
Ad esempio:
let person = {
name: 'John',
age: 30,
};
let json = JSON.stringify(person);
console.log(json); // Output: {"name":"John","age":30}
let person2 = JSON.parse(json);
console.log(person2.name); // Output: John
In questo esempio, stiamo convertendo l’oggetto person in una stringa JSON utilizzando il metodo JSON.stringify() e viceversa utilizzando il metodo JSON.parse().
In Javascript, gli oggetti globali sono oggetti predefiniti che sono disponibili in tutto il codice. Alcuni degli oggetti globali più comuni in Javascript includono Object, Array, String, Number, Boolean, Date, Math, RegExp, Error, JSON, console, document, window, ecc.
Ad esempio:
let array = [1, 2, 3, 4, 5];
console.log(Array.isArray(array)); // Output: true
let date = new Date();
console.log(date.getFullYear()); // Output: 2021
In questo esempio, stiamo utilizzando gli oggetti globali Array e Date per verificare se un oggetto è un array e ottenere l’anno corrente.
In Javascript, ci sono molti oggetti built-in che forniscono funzionalità utili per lavorare con dati e interagire con l’ambiente di esecuzione. Alcuni degli oggetti built-in più comuni in Javascript includono Object, Array, String, Number, Boolean, Date, Math, RegExp, Error, JSON, console, document, window, ecc.
Ad esempio:
let array = [1, 2, 3, 4, 5];
console.log(array.length); // Output: 5
let string = 'Hello, World!';
console.log(string.toUpperCase()); // Output: HELLO, WORLD!
In questo esempio, stiamo utilizzando gli oggetti built-in Array e String per ottenere la lunghezza di un array e convertire una stringa in maiuscolo.
In Javascript, possiamo creare oggetti personalizzati utilizzando costruttori di oggetti, prototipi e metodi.
Ad esempio:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log('Hello, my name is ' + this.name);
};
let person = new Person('John', 30);
person.greet(); // Output: Hello, my name is John
In questo esempio, stiamo creando un oggetto personalizzato Person utilizzando un costruttore di oggetti e un prototipo con un metodo greet.
In Javascript, il riferimento this all’interno di un metodo di un oggetto si riferisce all’oggetto stesso.
Ad esempio:
let person = {
name: 'John',
age: 30,
greet: function() {
console.log('Hello, my name is ' + this.name);
},
};
person.greet(); // Output: Hello, my name is John
In questo esempio, stiamo definendo un metodo greet sull’oggetto person che utilizza il riferimento this per accedere alla proprietà name dell’oggetto stesso.
In Javascript, l’operatore di concatenamento opzionale ?. può essere utilizzato per accedere alle proprietà di un oggetto in modo sicuro, evitando errori se l’oggetto o la proprietà non esistono.
Ad esempio:
let person = {
name: 'John',
age: 30,
};
console.log(person?.name); // Output: John
console.log(person?.city); // Output: undefined
In questo esempio, stiamo utilizzando l’operatore di concatenamento opzionale ?. per accedere alle proprietà name e city dell’oggetto person.
Come detto in precedenza, il costrutto ?. interrompe immediatamente (manda in “corto circuito”) la valutazione se la proprietà a destra non esiste.
Quindi, nel caso ci siano ulteriori chiamate a funzione o side-effects, questi non verranno eseguiti.
Ad esempio:
let user = null;
let x = 0;
user?.sayHi(x++); // non esiste "sayHi", quindi l'esecuzione non raggiungerà x++
alert(x); // 0, valore non incrementato
In questo esempio, l’operazione x++ non viene eseguita perché l’operatore di concatenamento opzionale ?. interrompe la valutazione se la proprietà sayHi non esiste.
?.(), ?.[]La concatenazione opzionale ?. non è un operatore, ma uno speciale costrutto sintattico, che funziona anche con le funzioni e le parentesi quadre.
Ad esempio, ?.() viene utilizzato per invocare una funzione che potrebbe non esistere.
Nel codice sotto, alcuni dei nostri utenti possiedono il metodo admin, mentre altri no:
let userAdmin = {
admin() {
alert("I am admin");
}
};
let userGuest = {};
userAdmin.admin?.(); // I am admin
userGuest.admin?.(); // niente (il metodo non esiste)
Qui, in entrambe le righe, come prima cosa abbiamo utilizzato il punto (user1.admin) per ottenere la proprietà admin, poiché l’oggetto user deve necessariamente esistere, quindi l’accesso è sicuro.
Successivamente ?.() controlla la parte sinistra: se la funzione admin esiste, allora viene eseguita (ciò che accade con user1). Altrimenti (con user2) la valutazione si interrompe senza errori.
La sintassi ?. funziona anche con le parentesi [] (invece del punto .). Come nei casi precedenti, possiamo accedere con sicurezza alla proprietà di un oggetto che potrebbe non esistere.
Ad esempio:
let key = "firstName";
let user1 = {
firstName: "John"
};
let user2 = null;
alert( user1?.[key] ); // John
alert( user2?.[key] ); // undefined
Possiamo anche utilizzare ?. con delete:
delete user?.name; // cancella user.name se l'utente esiste
Gli oggetti in Javascript sono una parte fondamentale del linguaggio e ci consentono di raggruppare dati e funzionalità in un’unica entità. Possiamo creare, accedere, modificare, aggiungere e eliminare proprietà di un oggetto utilizzando le varie tecniche descritte in questo articolo.
| HOMEPAGE | LEZIONE SUCCESSIVA |