In questa lezione parleremo di object assign, un metodo di JavaScript che copia tutte le proprietà enumerabili da uno o più oggetti di origine in un oggetto di destinazione.
Questo metodo consente di unire dunque due oggetti, clonare un oggetto esistente ed in definitiva può rappresentare anche un altro modo per creare oggetti in JavaScript partendo da altri oggetti esistenti o creati sul momento.
La sintassi di questo metodo è dunque questa:
Object.assign(target, ...sources)
Dove target è l’oggetto di destinazione, mentre sources sono gli oggetti di origine.
Esempio object assign
In questo primo esempio definiamo un oggetto auto dove impostiamo la proprietà marca. Questo stesso oggetto rappresenta il target, cioè l’oggetto di destinazione.
Dopo utilizzando il metodo object.assign aggiungiamo il modello e l’anno attraverso un oggetto di origine (source) che definiamo sul momento.
var auto = {
marca: "Fiat"
};
Object.assign(auto, {
modello: "500",
anno: 2020
});
console.log(auto);
Lo stesso esempio si poteva scrivere anche in questo modo:
var auto = {
marca: "Fiat"
};
var caratteristiche = {
modello: "500",
anno: 2020
}
Object.assign(auto, caratteristiche);
Esempio object assign
Object assign si può utilizzare anche per unire due oggetti di origine in un oggetto target inizialmente vuoto, come nell’esempio seguente.
var coordinataX = { x: 10 };
var coordinataY = { y: 20 };
var coordinate = Object.assign({}, coordinataX , coordinataY);
console.log(coordinate);
In definitiva stiamo unendo due oggetti in uno solo.
In questa lezione abbiamo parlato di object assign e di come può essere utilizzato per costruire oggetti. Nella prossima lezione vedremo come utilizzare le classi in JavaScript, caratteristica presente nella versione ES6.
In questa lezione studieremo il metodo object defineproperties e lo utilizzeremo anche assieme al metodo object create in qualche esempio.
Object defineproperties – sintassi
La sintassi è la seguente
Object.defineProperties(object, prop)
Dove object rappresenta l’oggetto su cui definire nuove proprietà o modificare quelle precedenti.
Mentre prop è un oggetto che contiene delle proprietà. Ad ogni proprietà è assegnato un descrittore che regola alcune caratteristiche, come quelle mostrate nei paragrafi successivi.
value
Il primo descrittore associato al metodo Object defineproperties che studieremo è value.Value rappresenta il valore associato alla proprietà che si sta definendo. Di default è undefined ma è possibile specificare un valore numerico, una stringa, un oggetto, una funzione, ecc.
Facciamo un semplice esempio d’utilizzo, creando un prototipo auto su cui definiamo la proprietà tipo a cui assegniamo il valore benzina.
var auto = {};
Object.defineProperty(auto, 'tipo', {
value: 'benzina',
});
console.log(auto.tipo);
writable
Un altro descrittore di Object defineproperties è writable. Questo valore di default è uguale a false, si imposta a true se si vuole cambiare il valore associato per quella proprietà.
Facciamo un esempio in cui definiamo un oggetto vuoto. Dopo definiamo la proprietà tipo a cui daremo il valore benzina e poi impostiamo writable a true.
In questo modo il primo console.log darà come risultato benzina, mentre il secondo diesel.
var auto = {};
Object.defineProperty(auto, 'tipo', {
value: 'benzina',
writable: true
});
console.log(auto.tipo);
auto.tipo = 'diesel';
console.log(auto.tipo);
Diversamente se lasciamo writable al suo valore di default, false, il secondo console.log darà sempre il valore benzina, perché non è possibile modificare tale valore.
configurable
Anche questo descrittore di default è uguale a false, si imposta uguale a true se si vuole che la proprietà può essere cambiata o anche cancellata.
Seguendo l’esempio di prima, aggiungiamo il descrittore configurable con il valore true.
Dopo aver fatto il delete, cioè dopo aver eliminato la proprietà tipo, il secondo console log restituisce undefined.
Diversamente se configurable viene lasciato al valore di default false.
In questo caso l’operazione di delete non è consentita ed il secondo console.log mi restituisce lo stesso valore del primo.
var auto = {};
Object.defineProperty(auto, 'tipo', {
value: 'benzina',
writable: true,
configurable: true
});
console.log(auto.tipo);
delete auto.tipo;
console.log(auto.tipo);
enumerable
Il descrittore enumerable del metodo Object defineproperties ha il valore di default uguale a false, ma si può impostare a true se la proprietà deve essere visualizzata durante una enumerazione. Come ad esempio nel caso del for in.
Nell’esempio sotto definiamo le proprietà tipo e anno con il descrittore enumerable a true, mentre definiamo marca uguale a false.
Dopo con un for in generiamo degli alert delle proprietà con valore enumerable uguale a true.
Il seguente codice farà dunque vedere a video degli alert delle proprietà tipo ed anno ma non della marca.
Object create è un metodo utilizzato per creare degli oggetti in JavaScript. Quello che vi presento è dunque un’alternativa ai metodi già visti nelle precedenti lezioni, utili alla creazione di oggetti in JavaScript.
Ricordiamo comunque che l’utilizzo degli oggetti letterali è tutt’oggi la pratica più comune e diffusa, grazie alla sua semplicità d’uso.
Sintassi object create
Object create consente di creare un nuovo oggetto partendo dall’oggetto prototipo e permette anche di specificare le proprietà dell’oggetto creato.
Dunque segue questa sintassi:
Object.create(prototypeObject, propertiesObject)
Dove prototypeObject rappresenta l’oggetto prototipo, mentre propertiesObject rappresenta le proprietà del nuovo oggetto creato. Queste proprietà possono anche essere dei metodi.
Se prototypeObject è uguale a null, si genera un oggetto vuoto, cioè senza una struttura. Dunque scrivere:
var mioOggetto = Object.create(null);
Equivale a scrivere semplicemente questo codice:
var mioOggetto = {};
Invece se propertiesObject è uguale a null, si genera un’eccezione di tipo TypeError.
Dunque questo codice:
var mioOggetto = Object.create(null, null);
produrrà questa eccezione: Uncaught TypeError: can’t convert null to object.
Il parametro propertiesObject può dunque essere opzionale oppure se presente specifica i descrittori di proprietà secondo il metodo Object.defineProperties(). Questo metodo, che affronteremo nella prossima lezione, serve a definire nuove proprietà oppure a modificare quelle esistenti.
Esempio object create
Facciamo adesso un semplice esempio creando un oggetto auto1 partendo dal prototipo auto che è stato costruito con due sole proprietà. La proprietà tipo che rappresenta il tipo di alimentazione della nostra macchina. Mentre la proprietà display è una funzione che visualizza nella console il tipo di alimentazione.
var auto = {
tipo: 'benzina',
display: function() {
console.log(this.tipo);
}
};
var auto1 = Object.create(auto);
auto1.display();
Notiamo che in questo esempio il parametro propertiesObject non è definito, come abbiamo spiegato prima, infatti è opzionale.
Dopo su auto1 richiamiamo il metodo che abbiamo creato, display().
Modifichiamo adesso l’esempio aggiungendo una seconda auto a cui modificheremo il valore della proprietà tipo, in questo modo:
var auto2 = Object.create(auto);
auto2.tipo = 'diesel';
auto2.display();
In questa lezione abbiamo semplicemente mostrato come creare un oggetto utilizzando il metodo object.create. Nella prossima lezione utilizzeremo ancora questo metodo utilizzando anche il metodo Object.defineProperties().
Object JavaScript – Per creare un oggetto in JavaScript possiamo utilizzare anche altri metodi rispetto a quanto visto nelle lezioni precedenti. In particolare possiamo utilizzare il costruttore object.
In questa lezione quindi faremo vedere come utilizzare l’oggetto object.
Esempi di utilizzo di object in JavaScript
Realizziamo un esempio in cui, per creare un oggetto, utilizziamo la parola chiave new assieme al costruttore object().
let persona = new Object();
persona.nome = "Coding";
persona.cognome = "Creativo";
persona.eta = 30;
Dopo aver creato l’istanza dell’oggetto possiamo definire le varie proprietà utilizzando sempre la dot notation, a cui assegneremo dei valori.
In seguito possiamo visualizzarli semplicemente richiamando ciascuna proprietà in questo modo:
Si possono anche definire dei metodi, così come abbiamo visto nelle lezioni precedenti, assegnando una funzione ad una proprietà dell’oggetto.
Nel nostro caso assegniamo alla proprietà saluto una funzione che ha il compito di visualizzare un alert quando richiamata.
let persona = new Object();
persona.nome="Coding";
persona.cognome="Creativo";
persona.eta=30;
persona.saluto = function (){
alert('ciao ' + persona.nome);
}
persona.saluto();
Quindi richiamando il metodo saluto() sul nostro oggetto persona comparirà l’alert con il saluto opportuno. Chiaramente il metodo saluto può essere richiamato anche su un’altra istanza.
Object JavaScript – costruire un oggetto a partire da un dato primitivo
In JavaScript è possibile costruire un oggetto a partire da un tipo di dato primitivo, come ad esempio un numero oppure una stringa.
let numero = new Object(5.67895);
let stringa = new Object('Coding Creativo');
Quello che si ottiene quindi è un oggetto stringa o numero.
Infatti, se proviamo a fare il console log, vedremo degli oggetti nella nostra console.
console.log(numero);
console.log(stringa);
Ecco dunque il risultato ottenuto nella nostra console:
Si può vedere che è un oggetto anche semplicemente eseguendo il typeof su number o su string:
console.log(typeof(numero));
Quindi possiamo ad esempio utilizzare il metodo toFixed() sull’oggetto numero.
Aggiungiamo dunque questa riga di codice:
numero = numero.toFixed(2);
E poi facciamo il console.log:
console.log(numero);
In questa lezione abbiamo visto come utilizzare il costruttore object in JavaScript, nella prossima lezione affronteremo ancora la programmazione ad oggetti.
In questa lezione impareremo a creare un oggetto in JavaScript e anche ad utilizzare proprietà e metodi.
Innanzitutto è fondamentale precisare che quando si crea un oggetto si crea un riferimento all’oggetto. Il riferimento all’oggetto si può anche memorizzare in una variabile. Grazie a questo riferimento è poi possibile utilizzare l’oggetto all’interno del nostro programma.
Si dice anche che una variabile punta ad un oggetto.
Come creare un oggetto in JavaScript utilizzando new
Per creare un oggetto in JavaScript si può utilizzare la parola chiave new, seguendo questa sintassi:
var nomeOggetto = new oggetto();
La variabile nomeOggetto contiene il riferimento all’istanza oggetto appena creato.
È anche possibile specificare i parametri del costruttore seguendo questa sintassi:
var nomeOggetto = new oggetto(parametriCostruttore);
Esempio 1 – creare un oggetto in JavaScript
Utilizziamo, in questo esempio, l’oggetto Date(), che è integrato nelle API (librerie) del linguaggio JavaScript e consente di gestire facilmente le date.
var dataCorrente = new Date();
var annoCorrente = dataCorrente.getFullYear();
console.log(annoCorrente);
La variabile dataCorrente contiene il riferimento all’istanza Date(), quindi la possiamo utilizzare all’interno del nostro programma con i metodi propri dell’oggetto Date.
Nel nostro esempio utilizziamo il metodo getFullYear() per ottenere l’anno corrente.
Notiamo anche che al costruttore Date non stiamo passando nessun valore, e quindi verrà creato un oggetto Date che contiene la data e l’ora corrente.
Facciamo adesso un altro esempio dove al costruttore passiamo una stringa che indica una determinata data.
var data = new Date('2020,07,31');
console.log(data);
Esempio 2 – creare un oggetto in JavaScript
Creiamo un oggetto stringa come nell’esempio sotto:
var stringa = new String('Ciao a tutti da Coding Creativo');
console.log(stringa);
console.log(stringa.length);
La variabile stringa contiene il riferimento all’istanza String(), dove passiamo come parametro una stringa qualunque.
L’oggetto String ha la proprietà length che restituisce il numero di caratteri contenuti in una stringa.
Adesso utilizziamo il metodo toUpperCase() della classe String() per trasformare il testo in maiuscolo.
Come creare un oggetto in JavaScript utilizzando gli Oggetti letterali
A partire dalla versione JavaScript 1.2, c’è un altro modo per creare oggetti. In particolare si possono creare oggetti anche solo elencando le proprietà con i rispettivi valori, mediante una sequenza di coppie nome:valoreseparate da virgole racchiuse tra parentesi graffe.
Creiamo dunque un oggetto, che memorizziamo in una variabile di nome persona, utilizzando questa notazione.
Esempio 3
var persona = {
nome:'Coding',
cognome:'Creativo',
anni:30
};
Dopo aver creato l’oggetto possiamo accedere alle sue proprietà utilizzando la notazione puntata (dot notation). Tutte le proprietà di un oggetto sono pubbliche e accessibili.
Ad esempio se voglio utilizzare la proprietà nome posso scrivere:
console.log(persona.nome);
Oppure si può usare la notazione con le parentesi quadre:
console.log(persona['nome']);
Quest’ultima notazione è utile quando dobbiamo utilizzare il ciclo for in, come vedremo nelle prossime lezioni, in quanto possiamo utilizzare al posto del nome della proprietà anche una variabile.
Adesso definiamo anche un metodo da poter utilizzare sull’oggetto persona, aggiungendo una proprietà saluto a cui assegneremo una funzione.
In definitiva possiamo dire che un metodo è una funzione memorizzata come proprietà.
Esempio 4 – Creare un oggetto in JavaScript
var persona = {
nome:'Coding',
cognome:'Creativo',
anni:30,
saluto: function (){
alert ('ciao sono ' + this.nome + ' ' this.cognome);
}
};
persona.saluto();
Quindi quando richiamiamo il metodo saluto sull’istanza persona, comparirà la finestra di alert con il saluto specificato.
Esempio 5
Si possono anche passare dei parametri, come nell’esempio sotto:
var persona = {
nome:'Coding',
cognome:'Creativo',
anni:30,
saluto: function (){
alert ('ciao sono ' + this.nome + ' ' + this.cognome);
},
calcolaAnno: function (anno){
return anno - this.anni;
},
};
persona.saluto();
console.log('sei nato nel ', persona.calcolaAnno(2020));
Alla funzione calcolaAnno abbiamo passato l’anno corrente per poi calcolare l’anno di nascita dell’utente.
Quindi richiamiamo il metodo calcolaAnno sulla nostra persona.
Chiaramente questo è un banalissimo esempio, non consente infatti di calcolare con esattezza l’anno di nascita se ad esempio l’utente non ha ancora compiuto gli anni.
Come creare un oggetto in JavaScript utilizzando una funzione costruttore
Utilizziamo una funzione a cui diamo un nome, ad esempio person e a cui passiamo 3 parametri che rappresentano il nome, il cognome e l’età.
Dopo in una variabile di nome amico memorizziamo il riferimento all’oggetto person a cui passeremo i nostri valori.
Successivamente per poter visualizzare ad esempio l’età utilizzo la notazione puntata come nel caso precedente.
Esempio 6
var amico = new person('Coding','Creativo',30);
console.log(amico.eta);
function person (n,c,e){
this.nome = n;
this.cognome = c;
this.eta = e;
}
La parola chiave this, in questo caso, rappresenta un determinato oggetto e fa riferimento a person.
Nel caso in cui abbiamo bisogno di una funzione che opera su un oggetto si può inserire anche come proprietà.
Dopo richiamiamo il metodo saluto sulla variabile che contiene il riferimento all’oggetto person.
var amico = new person('Coding','Creativo',30);
function person (n,c,e){
this.nome = n;
this.cognome = c;
this.eta = e;
this.saluto = function() {
alert ('ciao sono ' + this.nome);
}
}
//richiamiamo il metodo saluto sulla variabile che contiene il riferimento all'oggetto person
amico.saluto();
Se abbiamo più istanze si può ad esempio scegliere su quale istanza richiamare il metodo:
var amico = new person('Mario','Rossi',30);
var amico2 = new person('Coding','Creativo',30);
console.log(amico.eta);
function person (n,c,e){
this.nome = n;
this.cognome = c;
this.eta = e;
this.saluto = function() {
alert ('ciao sono ' + this.nome);
}
}
amico2.saluto();
Si può anche utilizzare la proprietà superioreprototype in questo modo:
var amico = new person('Mario','Rossi',30);
var amico2 = new person('Coding','Creativo',30);
console.log(amico.eta);
function person (n,c,e){
this.nome = n;
this.cognome = c;
this.eta = e;
}
person.prototype.saluto = function (){
alert ('ciao sono ' + this.nome);
}
amico2.saluto();
In questa lezione abbiamo visto come creare un oggetto in JavaScript, nella prossima lezione approfondiremo ancora il concetto di oggetto.
