The Ultimate Guide to JavaScript Naming Conventions

Quando molti membri lavorano su un progetto, è necessario avere un certo standard da seguire per il bene della scalabilità.

Oggi parleremo dello standard più basilare, le convenzioni di denominazione: cosa dovremmo fare e cosa no.

Entriamo nel merito.

// Don’t
function fetchData() {}// Do
function fetchUsers() {}

Sappiamo che fetchData() chiamerebbe un’API e tirerebbe i dati dal server, ma quali dati? È meglio dargli un nome più specifico, giusto? Più specifico è, meno tempo impiegherete per pensare a cosa sono i nomi senza alcun commento.

Evitare i nomi di una lettera

Fatta eccezione per i nomi comuni come i per index nelle dichiarazioni di loop, dovreste evitare i nomi di una lettera perché vi confonderanno in seguito.

// Don’t
let n = 0;// Do
let number = 0;

Usa nomi lunghi se necessario

Quasi spesso, puntiamo a nomi brevi. In alcuni casi, tuttavia, per essere più chiari e descrittivi, un nome lungo non dovrebbe essere un problema.

// Don’t
function findBooks() {}// Do
function findBooksByAuthor() {}

Variabili

Scrivere un commento solo per la definizione di una variabile è probabilmente ridondante. Il nome di una variabile dovrebbe essere descrittivo in modo che quando la si guarda si sappia esattamente a cosa serve.

// Don’t
let d = ‘01/01/2021’;
let number = 28;// Do
let date = ‘01/01/2021’;
let age = 28;

Ci sono molti stili di denominazione, tuttavia, si dovrebbe usare camelCase per coerenza.

// Don’t
let book_title = ‘JavaScript’;
let BOOKTITLE = ‘JavaScript’;
let booktitle = ‘JavaScript’;// Do
let bookTitle = ‘JavaScript’;

Costanti

Le costanti in JavaScript non possono essere cambiate. Per separarle dalle altre variabili, tutte le lettere in una costante dovrebbero essere in MAIUSCOLO.

// Don’t
const pi = 3.14;// Do
const PI = 3.14;

Booleani

Un booleano è come una domanda sì/no:

• Si legge?
• Lo hai fatto?
• Sono uguali?

Quindi il modo di nominare una variabile booleana dovrebbe essere simile a queste domande.

// Don’t
let decoration = true;
let red = true;
let visible = false;// Do
let hasDecoration = true;
let isRed = true;
let isVisible = false;

Funzioni

Chiamate una funzione quando volete eseguire un’azione. Quindi, il nome di una funzione dovrebbe essere iniziato da un verbo.

// Don’t
function data() {}// Do
function fetchData() {}

Si dovrebbero preferire verbi coerenti piuttosto che essere creativi per lo stesso concetto.

// Don’t
function getUsers() {}
function fetchBooks() {}
function retriveAuthors() {}// Do
function fetchUsers() {}
function fetchBooks() {}
function fetchAuthors() {}

Classi

Come negli altri linguaggi di programmazione, il nome di una classe dovrebbe seguire il PascalCase e un nome di classe dovrebbe essere un sostantivo.

// Don’t
class mobileDevice {}// Do
class MobileDevice {}

File

Per i file JavaScript, abbiamo due stili comuni di denominazione: kebab-case e PascalCase.

kebab-case:

-components/
--product/
---product-details.js
---product-list.js

PascalCase:

-components/
--product/
---ProductDetails.js
---ProductList.js

Si possono usare entrambi. Per me, opto per kebab-case.

Componenti (React)

Questo è specifico per React. Dovremmo usare PascalCase per i nomi dei componenti.

// Don’t
class profilePicture extends React.Component {
render() {
return <h1>Profile Picture</h1>;
}
}// Do
class ProfilePicture extends React.Component {
render() {
return <h1>Profile Picture</h1>;
}
}

Conclusione

Questo è tutto quello che dovete sapere sulle convenzioni di denominazione in JavaScript. Puoi mettere questo utile elenco nei preferiti e consultarlo in seguito, se necessario.

Spero che questo articolo ti sia piaciuto.