JavaScript è uno dei linguaggi di programmazione più utilizzati e popolari al mondo. Negli ultimi anni abbiamo assistito all’aggiunta di numerose librerie e framework basati su JavaScript, strumenti di grafica e animazione e persino piattaforme lato server. Sarebbe difficile immaginare il web senza JavaScript oggi.
È JavaScript, in molti modi, che rende il web così vivace, stimolante e interattivo. Inizialmente, JavaScript sembra essere facile da capire per i principianti e anche per gli sviluppatori esperti. In effetti, l’implementazione della funzionalità in JavaScript è abbastanza semplice. Tuttavia, poiché JavaScript continua a crescere e ad aggiungere funzionalità, il linguaggio sta diventando più complesso e potente di quanto si credesse inizialmente.
Anche gli sviluppatori JavaScript di grande esperienza commettono errori. Questi errori a volte portano a risultati indesiderati o talvolta sono responsabili della mancata esecuzione di un sito Web o di un’app. Con questo in mente, qui discuteremo alcuni degli errori più comuni commessi dagli sviluppatori JavaScript e daremo un’occhiata a come evitare questi errori JavaScript.
Errori di sintassi in JavaScript
Gli errori basati sulla sintassi vengono generati quando l’interprete JavaScript esegue il codice e trova qualcosa di sintatticamente errato. Quando ciò accade, significa che l’interprete JavaScript segnala l’errore se trova dei token che non corrispondono alla sintassi standard del linguaggio di programmazione. Esempi di tali errori possono includere parentesi mancanti o se uno sviluppatore non passa l’argomento a una funzione. Considera il seguente codice JavaScript che dimostra un errore di sintassi comune:
if((a >= b) && (b > 0) {
// some code
}
Per correggere questo codice, cambieresti la sintassi in modo che corrisponda a quanto segue:
if((a >= b) && (b > 0)) {
// some code
}
Ecco un altro esempio di errore di sintassi JavaScript:
Function addItemToBasket(usedId, itemToInsert){
//code
}
addItemToBasket(item);
Il codice precedente produrrebbe errori di sintassi perché la funzione addItemToBasket si aspetta due argomenti, ma ne riceve solo uno.
Gli errori di sintassi possono essere evitati imparando le regole grammaticali di JavaScript (questo pensiero vale anche per altri linguaggi di programmazione). Più pratichi la programmazione, più diventi bravo a evitare errori grammaticali in qualsiasi linguaggio di programmazione e a rendere il codice consegnato privo di errori grammaticali.
Errori di distinzione tra maiuscole e minuscole in JavaScript
JavaScript è un linguaggio con distinzione tra maiuscole e minuscole. Per esempio, ruolo e Ruolo vengono trattate come due variabili diverse. A volte gli sviluppatori commettono errori relativi alla distinzione tra maiuscole e minuscole e questi tipi di errori sono facili da perdere. Quindi, se metti in maiuscolo un nome di variabile o funzione, allora dovrebbero essere usati allo stesso modo ovunque nel tuo programma. Le parole dovrebbero essere messe correttamente in maiuscolo per evitare di introdurre bug nel tuo programma. In effetti, assicurati di seguire le migliori pratiche per le convenzioni di denominazione in qualsiasi linguaggio di programmazione in cui codifichi. Ecco alcune convenzioni di denominazione per variabili e funzioni JavaScript:
- Le variabili in JavaScript fanno distinzione tra maiuscole e minuscole
- Usa nomi descrittivi che descrivono (semplicemente) a cosa serve una variabile
- Usa LowerCamelCase per nomi di variabili che consistono in più di una parola
- I nomi delle funzioni dovrebbero essere denominati anche con LowerCamelCase e dovrebbero anche descrivere a cosa serve la funzione
Errori di manipolazione DOM inefficienti in JavaScript
In una pagina web, la manipolazione del DOM si riferisce all’aggiunta, alla rimozione o alla modifica di elementi nel DOM. JavaScript offre vari metodi per manipolare il DOM, ma la cosa importante da ricordare è che la manipolazione del DOM dovrebbe essere efficiente ed efficace. Facciamo un esempio per capirlo meglio.
Se aggiungiamo più elementi consecutivamente al DOM, questa operazione potrebbe essere conveniente e anche aggiungendo più elementi consecutivamente potrebbe non funzionare bene. Quindi cosa si può fare per superare un problema del genere? Possiamo gestirlo nei seguenti modi:
var myDiv = document.getElementsById("example_div");
var fragment = document.createDocumentFragment();
for (var e = 0; e < elements.length; e++) { // elements that were previously set to a list
fragment.appendChild(elements[e]);
}
myDiv.appendChild(fragment.cloneNode(true));
Come abbiamo discusso, la creazione di elementi allegati al DOM può essere costosa, quindi ciò che abbiamo fatto qui è stato prima staccare gli elementi e poi collegarli al DOM utilizzando frammenti di documento. Questo può aiutare a migliorare le prestazioni e rendere efficiente la manipolazione del DOM.
Utilizzo improprio di errori non definiti o nulli in JavaScript
A volte gli sviluppatori JavaScript trovano difficile lavorare con non definito e nullo. A volte l’output indesiderato causa un problema a causa dell’uso errato di nullo e non definito. Per prima cosa, parliamo di nullo.
nullo è un valore di assegnazione utilizzato per indicare che qualcosa non esiste. Sorprendentemente, nullo è anche un oggetto in JavaScript. Il codice seguente illustra come nullo può essere assegnato a una variabile e il tipo di tale variabile è un oggetto.
const example = null;
console.log(example);
//output is null
console.log(typeof example);
//output is object
D’altra parte, non definito è usato per implicare che il valore non è ancora assegnato a una proprietà dichiarata; può anche indicare che non viene dichiarato nulla. Il codice seguente illustra come non definito lavori:
var example;
console.log(example);
//output is undefined
console.log(typeof example);
//output is undefined
È interessante notare che se si confrontano entrambi utilizzando il uguaglianza operatore e identità operatore si osserverebbe qualcosa di simile al seguente:
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Capire come usare correttamente nullo e non definito può aiutare gli sviluppatori JavaScript a evitare errori nei loro programmi.
Errori di metodo non definiti in JavaScript
Un’altra causa comune di errori riscontrati nei programmi Javascript è la chiamata di un metodo non definito. In parole semplici, si verifica un errore quando una funzione viene chiamata prima che venga definita. Diamo un’occhiata a un esempio di codice che causa un errore di metodo non definito in JavaScript:
userProfile = {
name: "Peter",
age: 27,
printMyName() {
console.log(this.name);
}
};
userProfile.printMyAge();
Questo codice, quando eseguito, produce il seguente errore, come puoi vedere nella console per sviluppatori di Chrome:
Uncaught TypeError: userProfile.printMyAge is not a function at script.js:8
Questo errore è causato dal fatto che la funzione printMyAge() non è definito da nessuna parte, anche se è chiamato.
Utilizzo improprio degli errori di ritorno in JavaScript
Restituzione viene utilizzato per arrestare l’esecuzione di una funzione e restituire il valore che deve essere restituito alla funzione chiamante. Se Restituzione viene utilizzato in modo inappropriato nel programma, può causare problemi di prestazioni nell’applicazione. Alcuni sviluppatori non usano correttamente l’istruzione return nel loro codice. Considera il seguente esempio:
function doMultiplication(a, b) {
var result;
return;
result = a* b;
}
console.log(doMultiplication(10, 4));
Nel codice sopra, Restituzione viene posto prima che venga eseguito il risultato della moltiplicazione dei due numeri. Il modo corretto di codificarlo per utilizzarlo dopo l’esecuzione dell’operazione di moltiplicazione, in cui il risultato deve essere restituito con il valore calcolato. Quindi, se esegui il codice sopra nel tuo editor di codice, vedresti non definito nella consolle.
Errori di nome variabile errato in JavaScript
Uno degli errori più comuni che i programmatori JavaScript commettono spesso è utilizzare parole riservate come nomi di variabili. JavaScript ha oltre 60 parole riservate che non puoi utilizzare come nome di variabile in nessun punto del tuo programma.
Per esempio, nuovo è una delle parole riservate in JavaScript, quindi se stai pensando di nominare una variabile non usare il nome riservato nuovo. Utilizzare invece un nome più descrittivo come nuovovalore o nuovovalorecalcolato per evitare ambiguità con le parole riservate.
Fare riferimento a DOM prima che venga caricato Errore in JavaScript
DOM svolge un ruolo fondamentale nella creazione di interfacce utente sul web. DOM è responsabile dello stile e della strutturazione delle pagine web. L’obiettivo alla base della creazione di JavaScript era anche quello di rendere interattive le pagine web e manipolare efficacemente il DOM.
Si pensa che la maggior parte delle cause comuni di errori in JavaScript siano legate al DOM. Gli errori relativi al DOM possono introdurre errori nelle applicazioni JavaScript. Fare riferimento al DOM prima che venga caricato è un errore comune che spesso gli sviluppatori fanno.
Per comprendere meglio questo tipo di errori, considera il seguente codice:
<!DOCTYPE html> <html> <body> <script> document.getElementById("myDiv").innerHTML = "Discussing about commons JS errors"; </script> <div id="myDiv"></div> </body> </html>
Se il codice sopra viene eseguito, produrrà il seguente errore:
Uncaught TypeError: Cannot set property 'innerHTML' of null at index.html:8
Questo codice genera errori perché JavaScript esegue il codice nell’ordine in cui appare su un documento. Quando JavaScript esegue questo codice, non riconosce il div con l’id ‘mioDiv’, che è apparso più avanti nel codice.
Esistono vari metodi per affrontare tali scenari, tra cui:
- Posizionamento del codice JavaScript nella parte inferiore dell’HTML
- Inserisci il codice JavaScript in una funzione e chiama quella funzione con il caricare evento.
Utilizzando il primo metodo, il nostro problema è stato risolto: basta posizionare il JavaScript in basso.
<!DOCTYPE html> <html> <body> <div id="myDiv"></div> <script> document.getElementById("myDiv").innerHTML = "Discussing about commons JS errors"; </script> </body> </html>
Correzione degli errori JavaScript
Familiarizzare con le sfumature di un linguaggio di programmazione può essere una buona strategia per migliorare le prestazioni delle tue applicazioni, oltre a portare produttività alla tua applicazione. In effetti, ti sarebbe d’aiuto sapere come funziona un linguaggio di programmazione. Al contrario, la mancanza di comprensione dei concetti di un linguaggio di programmazione è la ragione alla base di molti errori in qualsiasi applicazione web.