VALORI PRIMITIVI E OGGETTI

JS

In javascript esistono diversi tipi di valori che si suddividono in primitivi e oggetti.

Tipi di dato

Definizione: Un oggetto è una struttura dati che consente la memorizzazione di una serie di informazioni. Vedremo uno ad uno i dati primitivi. Andiamo in Visual Studio Code.

Console
Copy to Clipboard

OGGETTI JAVASCRIPT

NB: Questa è solo una panoramica. Approfondiremo la trattazione degli oggetti javascript in post successivi.

In Javascript ci sono otto tipi di dati. Sette di loro sono chiamati “primitivi”, perché i loro valori contengono sempre un singolo elemento (una stringa, un numero, un booleano etc.). Gli oggetti, invece, vengono utilizzati per catalogare vari tipi di dati ed altri elementi più complessi. In Javascript, essi permeano ogni aspetto del linguaggio. Dobbiamo perciò comprenderli bene prima di procedere nello studio approfondito di un qualsiasi altro argomento.

OGGETTI JAVASCRIPT, LA CREAZIONE DI UN OGGETTO

Un oggetto può essere creato tramite le parentesi graffe {…}, con un’opzionale lista di proprietà. Una proprietà è una coppia “chiave: valore”, dove “chiave” è una stringa (detta anche “nome di proprietà”), mentre “valore” può essere qualsiasi cosa. Possiamo immaginare un oggetto come un archivio con dei documenti catalogati. Ogni dato viene archiviato utilizzando una specifica chiave. È facile trovare un documento quando se ne conosce il nome, oppure aggiungerne di nuovi o rimuovere quelli vecchi.

SINTASSI PER CREARE OGGETTI

Un oggetto vuoto (“archivio vuoto”) può essere creato utilizzando una delle due sintassi:

let user = new Object(); // sintassi “costruttore oggetto”

let user = {};  // sintassi “oggetto letterale”

object-user-empty

LE PROPRIETA’ DEI LITERAL

Possiamo inserire subito delle proprietà in {…} come una coppia “key: value”:

let user = {     // un oggetto

  name: “John“,  // una chiave “name” memorizza il valore “John”

  age: 30        // una chiave “age” memorizza 30

};

Una proprietà ha una chiave (conosciuta anche come “nome” o “identificatore”) prima dei due punti “:”, ed un valore alla sua destra. Nell’oggetto user ci sono due proprietà:

  1. La prima proprietà ha come nome “name” e come valore “John”.
  2. La seconda ha come nome “age” e come valore 30.
object-user

Possiamo aggiungere, rimuovere o leggere un valore in qualsiasi momento. I valori delle proprietà sono accessibili utilizzando la notazione puntata:

// ritorna i campi dell’oggetto:

alert( user.name ); // John

alert( user.age ); // 30

Il valore può essere di qualsiasi tipo. Aggiungiamo un booleano:

user.isAdmin = true;

object-user-isadmin

RIMOZIONE DI UNA PROPRIETA’

Per rimuovere una proprietà, possiamo utilizzare l’operatore delete:

delete user.age;

Possiamo anche utilizzare nomi di proprietà composti da più parole (“multi-parola”), ma devono essere racchiusi tra virgolette:

let user = {

  name: “John“,

  age: 30,

  “likes birds“: true  // un nome di proprietà composto da più parole deve essere racchiuso tra virgolette

};

L’ultima proprietà in lista può terminare con una virgola

let user = {

  name: “John“,

  age: 30,

}

Rende più facile l’aggiunta/rimozione/spostamento delle proprietà, poiché tutte le righe hanno una virgola.

PARENTESI QUADRE

Per le proprietà con nomi “multi-parola” l’accesso con la notazione puntata non funziona, Questo perché il punto richiede che la chiave che segue sia un identificatore valido. Un identificatore non deve avere spazi (oltre a seguire le altre limitazioni già studiate). Per aggirare questo vincolo esiste una “notazione con parentesi quadre”:

let user = {};

// set

user[“likes birds“] = true;

// get

alert(user[“likes birds“]); // true

// delete

delete user[“likes birds“];

Ora funziona. Da notare che la stringa all’interno delle parentesi va comunque messa tra virgolette (singole o doppie). Nella vita reale, un’auto è un oggetto. Un’auto ha proprietà come peso e colore e metodi come start e stop:

car

Tutte le auto hanno le stesse proprietà, ma i valori delle proprietà differiscono da auto ad auto. Tutte le auto hanno gli stessi metodi, ma i metodi vengono eseguiti in momenti diversi. Hai già appreso che le variabili JavaScript sono puntatori a valori. Questo codice assegna un valore semplice (Fiat) ad una variabile denominata car:

let car = “Fiat“;

Anche gli oggetti sono variabili. Ma gli oggetti possono contenere molti valori. Questo codice assegna molti valori (Fiat, 500, white) ad una variabile denominata car:

const car = {type:”Fiat“, model:”500“, color:”white“};

I valori vengono scritti come coppie nome:valore (nome e valore separati da due punti). È pratica comune dichiarare oggetti con la parola chiave const.

DEFINIZIONE DI OGGETTO LETTERALE

Definisci (e crei) un oggetto JavaScript con un oggetto letterale:

const person = {firstName:”John“, lastName:”Doe“, age:50, eyeColor:”blue“};

Gli spazi e le interruzioni di riga non sono importanti. Una definizione di oggetto può estendersi su più righe:

const person = {
  firstName: “John“,
  lastName: “Doe“,
  age50,
  eyeColor: “blue
};

PROPRIETA’ DEGLI OGGETTI

Le coppie nome:valori negli oggetti JavaScript sono chiamate proprietà:

ACCEDERE ALLE PROPRIETA’ DI UN OGGETTO

È possibile accedere alle proprietà dell’oggetto in due modi:

  1. objectName.propertyName
  2. objectName[“propertyName”]

Gli oggetti JavaScript sono contenitori per valori chiamati proprietà.

METODI DI UN OGGETTO

Gli oggetti possono avere metodi. I metodi sono azioni che possono essere eseguite sugli oggetti. Essi sono memorizzati nelle proprietà come definizioni di funzione.

Metodi

Un metodo è una funzione archiviata come proprietà.

const person = {
  firstName: “John“,
  lastName : “Doe“,
  id      5566,
  fullNamefunction() {
    return this.firstName + ” ” + this.lastName;
  }
};

Nell’esempio sopra, this si riferisce all’oggetto person, this.firstName indica la proprietà firstName di person, this.lastName indica la proprietà lastName di person.

LA KEYWORD THIS

In JavaScript, la parola chiave this si riferisce a un oggetto. Quale oggetto dipende da come viene invocato (usato o chiamato). La parola chiave this si riferisce a oggetti diversi a seconda di come viene utilizzata:

this

Nell’esempio sopra, this è l’oggetto person che “possiede” la funzione fullName.

ACCEDERE AI METODI DELL’OGGETTO

Si accede a un metodo oggetto con la seguente sintassi:

objectName.methodName()

name = person.fullName();

Se accedi a un metodo senza le parentesi (), restituirà la definizione della funzione:

name = person.fullName;

APPROFONDIMENTO AI

In JavaScript, i valori primitivi e gli oggetti sono i due principali tipi di dati. Sebbene abbiano diverse proprietà e comportamenti, insieme formano la base della manipolazione dei dati in questo linguaggio.

Valori Primitivi

I valori primitivi sono tipi di dati immutabili (non modificabili) e vengono gestiti in modo più semplice rispetto agli oggetti. In JavaScript, ci sono 7 tipi primitivi:

1. String: rappresenta una sequenza di caratteri.

•Esempio: ‘hello’, “world”.

2. Number: rappresenta i numeri sia interi che a virgola mobile.

•Esempio: 42, 3.14.

3. Boolean: rappresenta un valore logico, che può essere true o false.

•Esempio: true, false.

4. Undefined: rappresenta l’assenza di un valore. Una variabile dichiarata ma non inizializzata ha automaticamente il valore undefined.

•Esempio: let x; (il valore di x sarà undefined).

5. Null: rappresenta l’assenza intenzionale di un oggetto o valore.

•Esempio: let x = null; (qui, x è esplicitamente impostato su null).

6. Symbol: rappresenta un valore unico e immutabile, introdotto in ES6. Viene utilizzato principalmente come identificatore univoco per le proprietà degli oggetti.

• Esempio: let sym = Symbol(‘description’);.

7. BigInt: rappresenta numeri interi più grandi di Number.MAX_SAFE_INTEGER (cioè 2^53 – 1), introdotto in ES11.

• Esempio: let big = 1234567890123456789012345678901234567890n;.

Caratteristiche dei Valori Primitivi

Immutabili: una volta creato un valore primitivo, non può essere modificato. Se sembra che un primitivo venga “modificato”, in realtà si sta creando un nuovo valore.

Confronto per valore: quando si confrontano due valori primitivi, si confrontano i loro valori reali. Ad esempio, 42 === 42 restituisce true.

Passaggio per valore: quando si passa un primitivo a una funzione, viene passato il valore del primitivo, non il riferimento. Ciò significa che una copia del valore viene trasferita, non l’originale.

Oggetti

Gli oggetti in JavaScript sono collezioni dinamiche di proprietà. Una proprietà è una coppia chiave-valore, dove la chiave è una stringa (o Symbol) e il valore può essere di qualsiasi tipo (inclusi altri oggetti o funzioni). Gli oggetti possono essere visti come contenitori complessi di dati e comportamenti.

Esempi di oggetti includono:

1. Oggetti standard: creati direttamente con la notazione letterale {} o con new Object().

•Esempio:

let person = {
      name: ‘John‘,
      age: 30,
      greet: function() {
         console.log(‘Hello!‘);
      }
};

2. Array: in JavaScript, gli array sono oggetti speciali che consentono di memorizzare più valori in un’unica variabile.

• Esempio: let arr = [1, 2, 3];.

3. Funzioni: in JavaScript, le funzioni sono trattate come oggetti di prima classe. Possono essere assegnate a variabili, passate come argomenti e restituite da altre funzioni.

•Esempio:

function greet() {
     returnHello!‘;
}

4. Date: la classe Date rappresenta date e orari.

• Esempio: let now = new Date();.

5. Oggetti personalizzati: definiti dall’utente utilizzando funzioni costruttore o classi ES6.

•Esempio:

class Car {
     constructor(make, model) {
        this.make = make;
        this.model = model;
     }
}
let myCar = new Car(‘Toyota‘, ‘Corolla‘);

Caratteristiche degli Oggetti

Mutabili: a differenza dei primitivi, gli oggetti sono mutabili. Ciò significa che le proprietà di un oggetto possono essere modificate anche dopo che l’oggetto è stato creato.

•Esempio:

let person = { name: ‘John‘, age: 30 };
person.age = 31; // Modifica della proprietà age

Confronto per riferimento: quando si confrontano due oggetti, non si confrontano i loro valori, ma i loro riferimenti in memoria. Anche se due oggetti hanno le stesse proprietà e valori, sono considerati diversi se non condividono lo stesso riferimento.

•Esempio:

let obj1 = { a: 1 };
let obj2 = { a: 1 };
console.log(obj1 === obj2); // false

Passaggio per riferimento: quando si passa un oggetto a una funzione, viene passato il riferimento all’oggetto, non una copia. Questo significa che qualsiasi modifica all’oggetto all’interno della funzione avrà effetto all’esterno.

•Esempio:

let obj = { value: 10 };
function modify(o) {
o.value = 20;
}
modify(obj);
console.log(obj.value); // 20

Differenze tra Valori Primitivi e Oggetti

1. Mutabilità:

•I valori primitivi sono immutabili.

•Gli oggetti sono mutabili.

2. Confronto:

•I valori primitivi sono confrontati per valore.

•Gli oggetti sono confrontati per riferimento.

3. Passaggio nei parametri:

•I valori primitivi vengono passati per valore.

•Gli oggetti vengono passati per riferimento.

4. Memoria:

•I primitivi vengono memorizzati direttamente nella stack memory (pila).

•Gli oggetti vengono memorizzati nella heap memory e il loro riferimento è nella stack.

Conversione tra Primitivi e Oggetti

In JavaScript, i primitivi possono essere temporaneamente convertiti in oggetti quando si accede alle loro proprietà o metodi. Questo avviene automaticamente attraverso la wrapping (incapsulamento) in oggetti wrapper come String, Number, o Boolean.

let str = ‘hello‘;
console.log(str.length); // 5

Riepilogo

•I valori primitivi sono tipi di dati semplici, immutabili, come numeri, stringhe, booleani, ecc.

•Gli oggetti sono strutture dati complesse, mutabili e dinamiche, che possono contenere altre variabili (compresi primitivi o altri oggetti).

•Gli oggetti vengono trattati per riferimento, mentre i primitivi vengono trattati per valore.

Questi concetti sono fondamentali per comprendere il funzionamento interno di JavaScript e per scrivere codice efficace e efficiente.

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB