La guía definitiva de las convenciones de nomenclatura de JavaScript

Cuando hay muchos miembros trabajando en un proyecto, es necesario tener un cierto estándar a seguir por el bien de la escalabilidad.

Hoy hablaremos del estándar más básico, las convenciones de nomenclatura: qué debemos hacer y qué no.

Entremos en materia.

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

Sabemos que fetchData() llamaría a una API y sacaría los datos del servidor, pero ¿qué datos? Es mejor ponerle un nombre más específico, ¿no? Cuanto más específico sea, menos tiempo gastarás en pensar de qué tratan los nombres sin ningún comentario.

Evita los nombres de una sola letra

A excepción de los nombres comunes como i para index en las sentencias de los bucles, debes evitar los nombres de una sola letra porque te confundirán después.

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

Usa nombres largos si es necesario

Muy a menudo, buscamos nombres cortos. Sin embargo, en algunos casos, para ser más claros y descriptivos, un nombre largo no debería ser un problema.

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

Variables

Escribir un comentario sólo para la definición de una variable es más bien redundante. El nombre de una variable debe ser descriptivo para que cuando la veas sepas exactamente para qué se usa.

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

Hay muchos estilos de nomenclatura, sin embargo, debes usar camelCase por consistencia.

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

Constantes

Las constantes en JavaScript no se pueden cambiar. Para separarlas de otras variables, todas las letras de una constante deben ir en MAYÚSCULA.

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

Booleans

Un booleano es como una pregunta de sí/no:

• ¿Se lee?
• ¿Se ha hecho?
• ¿Son iguales?

De ahí que la forma de nombrar una variable booleana deba ser similar a esas preguntas.

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

Funciones

Llamas a una función cuando quieres realizar una acción. Por lo tanto, el nombre de una función debe comenzar con un verbo.

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

Debes favorecer los verbos consistentes en lugar de ser creativo para el mismo concepto.

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

Clases

Al igual que otros lenguajes de programación, el nombre de una clase debe seguir PascalCase y el nombre de una clase debe ser un sustantivo.

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

Archivos

Para los archivos de JavaScript, tenemos dos estilos comunes de nombrar: kebab-case y PascalCase.

kebab-case:

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

PascalCase:

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

Puedes usar cualquiera de los dos. En mi caso, opto por kebab-case.

Componentes (React)

Esto es específico de React. Debemos usar PascalCase para los nombres de los componentes.

// 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>;
}
}

Conclusión

Eso es todo lo que necesitas saber sobre las convenciones de nombres en JavaScript. Puedes marcar esta útil lista y consultarla más adelante si es necesario.

Espero que disfrutes de este artículo.