Gli Array in JavaScript

Quando scrissi l'articolo sulle primitive, scrissi: "JavaScript suddivide i valori in 7 differenti gruppi, chiamati primitive, e in oggetti". L'Array è un oggetto. Gli oggetti più in generale li affronteremo nel prossimo articolo, ma per ora vi basti sapere che l'Array in JavaScript sono un oggetto globale. Se vi state chiedendo perché sto scrivendo Array con la "A" maiuscola è perché faccio riferimento all'oggetto che ci permette di creare gli array (con la a minuscola). Wait... What?

Gli array (con la a minuscola)

Gli array sono un termine come un altro per intendere una lista.

1const frutta = ["mela", "banana", "pera", "uva"];

Quello dell'esempio è un array (una lista) di stringhe (fate attenzione alle virgolette).

Da notare che è un array racchiudere elementi, i quali possono essere di vario tipo, come ad esempio: numeri, stringhe, booleani, ecc., ma anche oggetti o altri array (in questo caso parliamo di array multidimensionali o matrici).

Gli elementi dell'array sono racchiusi tra una coppia di parentesi quadre. Esse delimitano l'array.

Gli elementi all'interno di un array possiedono un indice che viene assegnato automaticamente e ci permette di accedere ai singoli elementi dell'array stesso. Ad esempio partendo dall'esempio precedente per poter "accedere" all'elemento "pera" dobbiamo scrivere:

1console.log(frutta[2]); // "pera"

Perché 2 e non 3? Perché in JavaScript gli array partono da 0.

A differenza ti altri linguaggi, come PHP, JavaScript non permette la creazione di stringhe come indici (array associativi). Si possono usare solo numeri interi. Se si tenta di accedere agli elementi dell'array attraverso l'uso della bracket notation o dot notation, JavaScript tenterà di accedere alla proprietà dell'oggetto Array.

Array (con la A maiuscola)

Una volta comprese questi array, a cosa serve esattamente l'oggetto Array? Come oggetto ha dei metodi e delle proprietà che possono tornarci utili per compiere azioni di scorrimento e mutazione. Vediamo alcuni esempi:

Capire quanto è lungo un array

Sempre tenendo in considerazione il nostro array di frutta, per poter sapere quanti elementi ci sono all'interno possiamo usare la proprietà length (th non ht, mi raccomando).

1console.log(frutta.length); // 4

Attenzione che length non parte a contare da 0, ma da 1, come i comuni mortali. Questa informazione può tornarci utile qualora volessimo, ad esempio, accedere all'ultimo elemento di un array.

1console.log(frutta[frutta.length - 1]); // "uva"

Sottraggo uno alla lunghezza dell'array perché l'indice parte da 0.

Aggiungere un elemento alla fine dell'array

Per aggiungere un elemento alla fine di un array si può usare il metodo push() e si può scrivere quanto segue:

1frutta.push("fragola");

In questo modo il nuovo array sarà così composto:

1console.log(frutta); // ["mela", "banana", "pera", "uva", "fragola"]

Rimuovere l'ultimo elemento di un array

Per rimuovere l'ultimo elemento in un array si può usare il metodo pop().

1frutta.pop();

La fragola aggiunta nell'esempio precedente è stata rimossa.

Rimuovere un elemento in base al suo indice

Se conosciamo la posizione dell'elemento da eliminare possiamo usare il metodo splice() indicando l'indice e quanti elementi da quella posizione vogliamo eliminare.

1const indice = 2;
2frutta.splice(indice, 1);
3console.log(frutta); // ["mela", "banana", "uva"]

Per dare un'occhiata agli altri metodi disponibili consiglio di buttare un occhio alla reference completa su MDN.

Copiare un array

Quando si cerca di copiare un oggetto non è mai così semplice come sembra. Prendiamo come esempio questo snippet:

1let a = 1;
2let b = a;
3b = 2;
4console.log(a); // 1
5console.log(b); // 2

Niente di strano fin qui. Creo la variabile a assegnandole il valore 1. La variabile b ha lo stesso valore di a e cioè 1. In seguito riassegno b con 2. I due console.log mostreranno i rispettivi valori. Questo però non funziona allo stesso modo con gli array (e gli oggetti in generale).

Prendiamo questo nuovo snippet in considerazione:

1let array1 = [1, 2, 3];
2let array1_copia = array1;
3array1[1] = 4;
4console.log(array1_copia); // [1, 4, 3]

Ma come? Perché anche array1_copia è cambiata? L'assegnazione let array1_copia = array1 non crea una copia. Invece di una variabile viene assegnata una referenza all'oggetto originale (array1). Se viene modificato l'array originale, il cambio si rifletterà sul nuovo array.

Per poter creare la copia superficiale di un array, e risolvere i problemi visti poco fa, ci sono diversi modi, ma il mio preferito è quello con lo spread operator.

1let array1_copia_superficiale = [...array1];

Perché però la chiamo "copia superficiale"? In inglese si chiama "shallow copy" e indica che solo gli elementi top-level vengono effettivamente copiati, mentre per eventuali array o oggetti annidati vengono passate le reference e quindi si ripresenta il problema di prima. Esiste comunque un modo per copiare in tutto e per tutto un'array, creando quindi una deep copy.

1let array1_deep_copy = JSON.parse(JSON.stringify(array1));

JSON.stringify() trasforma l'intero array in stringa, mentre JSON.parse() la trasforma in un oggetto, ripristinando l'array originale, ma copiando ogni possibile annidamento e rimuovendo ogni reference. In questo modo otteniamo una copia completa di un array.

Qualora non fossero presenti annidamenti di oggetti o altri array, lo spread operator visto in precedenza è più che sufficiente.