Il linguaggio JavaScript è di facile apprendimento per qualsiasi neofita della programmazione informatica. Per un aspirante web developer, imparare JavaScript è uno dei primi requisiti fondamentali, così da poter avere dimestichezza nello sviluppare applicazioni web.
Cos è JavaScript?
Javascript è un linguaggio di programmazione che i web developers utilizzano per realizzare pagine web responsive. Serve ad animare la pagina web e renderla interattiva per l’utente. È il linguaggio universale per lo sviluppo web ed è uno dei tre linguaggi fondamentali per diventare sviluppatore web, insieme al linguaggio HTML e al linguaggio CSS (a cui puoi dare una prima occhiata leggendo la nostra guida html e css in italiano!)
Programmare in JavaScript può sembrare semplice, ma è un linguaggio pieno di insidie. L’apprendimento del linguaggio JavaScript è graduale, a partire dalla sintassi JavaScript, ma spesso è facile commettere errori senza esserne consapevoli, oppure incappare in quelli che in gergo vengono chiamati “bad habit”.
È cruciale per diventare uno sviluppatore web efficiente curare tutti questi dettagli, che possono influenzare anche il funzionamento del codice. Per un programmatore alle prime armi è molto comune commettere errori di cui, magari, non si conoscono le fattezze.
Andiamo, quindi, a scoprire insieme quali sono i 5 peggiori errori che uno sviluppatore JavaScript può commettere.
- Usare la keyword var: A meno che non si stia lavorando su un motore JavaScript grossolanamente obsoleto e non più supportato, non ci sono scuse per utilizzare var.
Il buon vecchio var aveva solo due scope: funzionale o globale.Significa che qualunque cosa venga definita con esso, all'interno di una funzione Javascript, è accessibile all'intera funzione, indipendentemente da dove viene dichiarata.
L'altro comportamento interessante di var è che non genererebbe un errore se venisse ridichiarata una variabile esistente, il che potrebbe, potenzialmente, portare a una logica confusa se si dichiara la stessa variabile due volte all'interno della stessa funzione facendo cose diverse con entrambe le versioni. L'alternativa più raffinata è usare let o const , avendo la seconda opzione usata per valori immutabili (cioè costanti).
Il vantaggio principale di let rispetto a var è che il primo vanta un ambito lessicale, il che significa che sarà accessibile solo all'interno del blocco di codice in cui viene dichiarato. Considerando che un blocco di codice è qualsiasi cosa tu scriva tra le parentesi graffe, puoi dichiarare variabili che vivono solo all'interno del corpo di un'istruzione if, o, per esempio, all'interno del codice di un ciclo for Javascript. Potresti, addirittura, sempre usare lo stesso nome senza timore di avere qualche problema con valori contrastanti.
Il vantaggio di utilizzare let piuttosto che var è dare allo sviluppatore JavaScript, un controllo più granulare sulle variabili che vengono definite nel codice. Usare var non è considerato un errore. Il codice JavaScript funzionerà. A patto che non vengano ripetuti i nomi o dichiari involontariamente qualcosa di globale e poi si fa riferimento alla stessa variabile da qualche altra parte senza prima dichiararlo. Ma, ad oggi, con il linguaggio JavaScript costantemente aggiornato, è diventata una soluzione obsoleta e quindi un bad habit anche per la manutenzione del codice.
- Utilizzare la Mutation con gli array: Mutation è un concetto interessante in JavaScript. In generale si verifica quando chiami una funzione su una variabile che poi modifica in qualche modo la variabile stessa. Ad esempio, quando si chiama la funzione sort su un array, l'array stesso viene modificato. Tuttavia, se si richiama la funzione map su un array, l'array originale rimane intatto. Non muta.
const names = ["Claudio", "Antonio", "Piero", "Dominga"];
const copiedNames = [...names];
const sortedNames = names.sort();
console.log(names); //["James", "Jess", "Lily", "Sevi"]
console.log(copiedNames); //["Jess", "James", "Sevi", "Lily"]
console.log(sortedNames); //["James", "Jess", "Lily", "Sevi"]
In questo esempio, la chiamata a names.sort() modificherà l'array dei nomi originale, il che significa che i nomi e gli array sortedNames avranno lo stesso output. Tuttavia, l'array copiedNames non è chiamato in causa poiché era una vera copia dell'array originale.
Tuttavia, se dovessi chiamare la funzione map() sull'array, l'array dei nomi originale non verrebbe influenzato.
Questo concetto è facilmente trascurabile per uno sviluppatore JavaScript alle prime armi.
- Non capire l’effettiva funzionalità della keyword this: La parola chiave this non è specifica del codice all'interno di una definizione di classe. Puoi usarlo ovunque, inclusi i corpi delle funzioni. Puoi persino usarlo all'esterno nell'ambito globale e otterrai risultati interessanti. La parola chiave this fa riferimento al contesto di esecuzione corrente della funzione da cui la stai chiamando. Le regole per cui è un “good habit” utilizzare this sono:
- Se lo stai usando all'interno di una normale funzione, sarà il contesto di esecuzione di quella funzione. Ora che l'ereditarietà del prototipo non è più il modo migliore per gestire gli oggetti, questo non è un caso d'uso molto comune.
- Se lo stai usando all'interno di una funzione arrow, farà riferimento al contesto di esecuzione della funzione genitore. Cioè, se stai chiamando questa funzione arrow all'interno di una funzione normale, quest'ultima fungerà da funzione genitore. Se stai utilizzando la funzione arrow al livello superiore, stai accedendo all'ambito globale tramite questo file.
- Se lo stai usando all'interno di un metodo, stai facendo riferimento al contesto di esecuzione di quel metodo, che include anche tutte le proprietà definite come parte della classe di quell'oggetto.
Dalle regole è possibile comprendere che il valore di questo this nel linguaggio JavaScript può essere sovrascritto.
class Person {
constructor(first_name, last_name) {
this.f_name = first_name;
this.l_name = last_name; }
}
function greetPerson() {
console.log("Hello there ", this.f_name, this.l_name);
}
let oPerson1 = new Person("Fernando", "Doglio");
let oPerson2 = new Person("John", "Doe");
greetPerson.call(oPerson1);
greetPerson.call(oPerson2);
La funzione non accetta argomenti, ma fa direttamente riferimento a 2 proprietà all'interno del suo contesto di esecuzione. Però le proprietà non sono mai state definite nel particolare contesto della funzione. Fanno parte della classe.
Quindi, usando il metodo call che ha ogni funzione, puoi chiamarlo sovrascrivendo il suo contesto. Permettendo così a questa funzione esterna di agire come un metodo della classe Person.
Usando questo metodo di context override, puoi creare codice che funziona con oggetti dall'esterno, senza dover modificare la loro implementazione. Questa tecnica si avvicina molto alla meta-programmazione e si tratta di una delle pratiche migliori che si possano eseguire; quindi, è una differenza considerevole da inquadrare.
- Riassegnare nel codice la variabile const: Questo è un errore molto comune che capita quando si programma in JavaScript. A partire da ES6 (versione JavaScript rilasciata nel 2015), esistono due modi principali per dichiarare le variabili: const e let. Questi due hanno, per la maggior parte, sostituito l'uso di var nel moderno JavaScript, come abbiamo già affermato in precedenza. La differenza tra questi due è che non puoi riassegnare variabili const mentre puoi farlo con let. Ecco un esempio:
const count = 0;
for (let i = 0; i < 10; i++) {
count = count + i;
}
console.log(count);
In questo caso verrà stampato un errore: Assegnazione a variabile costante. Se hai bisogno di riassegnare una variabile, assicurati di usare let, non const.
- Mantenere lunghi script HTML all’interno di JavaScript: vediamo subito un esempio
var widgetStructure = ‘<div id=’ + widgetID + ‘>’ +
‘<h2 id=”’ + widgetTitleID + ‘“>’ + widgetTitle + ‘</h2>’ +
‘<div id=”’ + widgetContentID + ‘“ style=”’ + widgetContentStyles + ‘“>’ +
(function() {
var paras = ‘’;
for (var i = 0; i < paraItems.length; ++i) {
paras += ‘<p>’ + paraItems[i] + ‘</p>’;
}
return paras;
})() +
‘</div>’ +
‘</div>’;
L’esempio è brutto, di difficile comprensione e anche poco avvezzo ad una manutenzione prolungata del codice. Conviene usare DOM o inserire l’HTML altrove, ad esempio in un file modello o in un nodo di un commento, o, ancora meglio, in un elemento nascosto. Utilizzare tanto codice HTML all’interno di JS può essere controproducente e rendere il codice confusionario anche per chi lo scrive.
Uno sviluppatore alle prime armi è facile che cada in questo errore più volte, per mancata esperienza.
Molti di questi errori, non è corretto definirli tali, ma sono accortezze che aiutano a comprendere la programmazione JavaScript in maniera più ampia. Sbagliare quando si è all’inizio del proprio percorso è normale. Per questo è importante prendere consapevolezza di quello che si sta scrivendo e della qualità del codice che si sta generando.
Per imparare il linguaggio JavaScript affidati ai nostri corsi! Vuoi diventare sviluppatore web? Non ti resta che iscriverti alle nostre hackademy!
