Imparare Javascript applicando 4 trucchi poco conosciuti
Javascript è il linguaggio del web. In questa guida ti mostrerò 4 trucchi che devi conoscere per imparare javascript e utilizzarlo al meglio.
di Antonio Lamorgese
Con l’avvento dello sviluppo web, gli sviluppatori, si sono trovati di fronte un ambiente ben diverso da quello che utilizzavano fino a qualche tempo prima. Cioè l’ambiente di esecuzione di software eseguibile su macchine stand-alone, o meglio, non di tipologia server. Come ti dicevo prima, con l’avvento delle tecnologie per lo sviluppo web, si è dovuto fare i conti con un ambiente senza stato. Il passaggio da una pagina web all’altra provocava la perdita di tutti gli oggetti gestiti dalla pagina precedente. Cosa che non avveniva e non avviene tuttora con software eseguibile nativo. Grazie al linguaggio Javascript molte di queste problematiche sono state risolte, e oggi, gli sviluppatori, possono contare su una grande varietà di librerie, del linguaggio Javascript, che sono di enorme ausilio allo sviluppo web. In questa guida ti mostrerò 4 trucchi che devi conoscere per imparare javascript e utilizzarlo al meglio.
Il linguaggio Javascript, di per sé, non è un linguaggio ostico o complicato da imparare. Anzi, è un linguaggio stile “C LIKE” e, di conseguenza, molto comprensibile anche per un principiante. L’approccio a Javascript, in genere, avviene senza grosse problematiche. In ogni caso, come per tutti i linguaggi, ci sono dei consigli e dei trucchetti che agevolano notevolmente lo sviluppo rendendone più semplice e immediato l’utilizzo.
Per imparare javascript e provare il codice descritto in questa guida, non sarà necessario creare alcuna pagina web. Potrai semplicemente sfruttare l’interprete di linguaggi online “W3Schools”. Ora, cliccando su questo semplice link, non dovrai fare altro che copiare e incollare, di volta in volta, il codice proposto più avanti nella guida. Una volta caricata la pagina, relativa all’editor online di Javascript, non devi fare altro che cliccare sul pulsante “Try it Yourself” per accedere direttamente all’editor Javascript. Come primo passo capirai come ridimensionare un array in Javascript.
Indice del Post...
1. Come ridimensionare un array
Come ben sai, gli array non sono ridimensionabili. Questo non vale solo per Javascript ma per tutti i linguaggi di programmazione. Infatti, un array, è una struttura dati statica e omogenea. Questo significa che, durante l’esecuzione del codice, non può essere né ridimensionato né può contenere oggetti di natura diversa. Un Array può contenere solo dati dello stesso tipo. Ad esempio, può contenere solo stringhe, numeri e altri oggetti, ma non stringhe e numeri, o qualcos’altro ancora.
Pertanto un array di 5 elementi in Javascript come questo:
const names = [‘Mary’, ‘John’, ‘Mark’, ‘Philip’, ‘George’];
non può essere ridimensionato, cioè non si possono eliminare né si possono aggiungere altri nomi. Esiste però un trucchetto, grazie al quale, è possibile accorciare un array di questo tipo. Infatti impostando la proprietà “length” di un array ad un numero di elementi minore, rispetto a quello che ne contiene, è possibile ridimensionarlo. Ad esempio, con il seguente codice:
names.length = 2;
l’array “names” non conterrà più 5 elementi bensì 2. Quindi se stampassimo il contenuto dell’array “names”, con questa istruzione: “console.log(names);”, il contenuto dell’array “names” ora sarà: [‘Mary’, ‘John’].
Leggi anche: “Generare QR Code con Javascript”
2. Prelevare solo parte di un oggetto Javascript
In Javascript se volessimo creare un oggetto contenente delle proprietà, dovremmo utilizzare una sintassi del tipo:
const names = {name: ‘Steve’, surname: ‘Jobs’};Normalmente per accedere alle proprietà “name” e “surname” dell’oggetto “names” bisognerebbe utilizzare una sintassi come questa:
names.name;
qualche volta, però è necessario accedere solo ad una sola proprietà di un oggetto. Quindi, se volessimo creare una semplice variabile che contenga solo il contenuto della proprietà “name” dell’oggetto “names” dovremmo scrivere una riga di codice come questa:
const {name} = names;A questo punto, volendo verificare il contenuto, della variabile “name”, possiamo digitare questa semplice istruzione “document.write(name);” che stamperà a video il valore “Steve”. Questa operazione, molto utile, prende il nome di “Destructuring assignment“ o, destrutturazione di variabili.
3. Come eliminare i valori duplicati da un array
In Javascript, per eliminare i valori duplicati da un array, è possibile utilizzare l’oggetto “Set”. I “Set” sono oggetti Javascript che non possono contenere al loro interno valori duplicati. Quindi, per eliminare i duplicati dall’array “names” è possibile utilizzare il comando “Set” come di seguito:
Come vedi, con una semplice istruzione, potrai eliminare i duplicati di qualsiasi array senza impelagarti in complicate routine di pulizia di array Javascript. Spesso fonte di innumerevoli bugs, fastidiosi da scovare e risolvere.
4. Come eseguire espressioni in una stringa
Non è raro, specialmente quando si tratta di formattare stringhe, eseguire espressioni direttamente al loro interno. Mi spiego meglio. Come ben sai, anche le stringhe sono tipi di dati che non possono essere modificate se non, creando un’altra stringa frutto di un’elaborazione effettuata sulla stringa madre. Sì, lo so. Forse non ci hai mai fatto caso. Ma le stringhe che ottieni, durante l’elaborazione del codice, sono tutte stringhe ottenute da altre. Ma la stringa principale, cioè quella su cui hai effettuato una elaborazione, non è mai cambiata. Per cui ogni volta che stai per formattare o creare una stringa, contenente valori, a runtime, sono stringhe create concatenando, e convertendo questi valori in stringa, ad altre stringhe fino a formare quella finale da stampare a video. Non ti nego che, un’operazione di questo tipo, è molto noiosa e problematica. Inoltre, tutta l’operazione va eseguita al runtime con un enorme spreco di risorse di CPU e RAM.
In Javascript è possibile, formattare stringhe, facendo valorizzare i contenuti direttamente al suo interno, risparmiando tempo e ottenendo codice più pulito privo. Tra l’altro, privo di errori. Diciamo subito che un’operazione del genere:
const name = “Steve Jobs“; document.write(‘Welcome ’+name);
può essere trasformata in un’operazione più semplice e compatta come questa:
const name = “Steve Jobs“;
document.write(`Welcome ${name}`);Da notare che la stringa, in questo caso deve essere racchiusa tra virgolette singole codice ASCII 96. E non le convenzionali virgolette singole codice ASCII 39.
Come vedi non c’è nessuna operazione di concatenazione e casting di dati. La stringa è unica e, la variabile “name” viene inizializzata direttamente all’interno della stringa.
Leggi anche: “WordPress non funziona e il tuo sito web è bloccato?”
Desideri acquisire nuove competenze?
l'opportunità di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online
