10 convenciones de nomenclatura de JavaScript esenciales que todo desarrollador debe conocer

Es esencial mantener la simplicidad, la legibilidad y la facilidad de mantenimiento en su código para administrar proyectos JavaScript complejos. La adhesión constante a las convenciones de nomenclatura es la clave para lograr este objetivo.

Variables, booleanos, funciones, constantes, clases, componentes, métodos, funciones privadas, variables globales y archivos se encuentran entre los elementos de JavaScript que requieren convenciones de nomenclatura coherentes. Puede mejorar la organización y comprensión del código implementando convenciones de nomenclatura estandarizadas en todos estos componentes, lo que ahorra tiempo y esfuerzo a largo plazo.

1. Nombrando Variables

En JavaScript, los datos se almacenan en variables. Es esencial elegir nombres descriptivos para las variables que reflejen con precisión su función. Podrías, por ejemplo, sustituir nombre de usuario o precio total para el nombre de una variable en lugar de X.

Una buena manera de nombrar variables es la siguiente:

dejar precio total = 100;
dejar nombre de usuario = "John";

Se puede lograr una mejor legibilidad del código mediante el uso de nombres de variables descriptivos

2. Nomenclatura booleana

Variables que pueden tener solo dos valores, es decir, verdadero o FALSO, se conocen como booleanos. Es crucial elegir nombres apropiados para las variables booleanas que expresen su propósito.

Para ilustrar, en lugar de optar por un nombre de variable como es verdad, deberías preferir ir con es válida o tiene valor.

Considere esta instancia:

dejar es válido = verdadero;
dejar tieneValor = FALSO;

En este ejemplo, los nombres de variables booleanas descriptivas aclaran lo que representan.

3. Funciones de nomenclatura

Una función en JavaScript se refiere a una unidad de código independiente que está destinada a realizar una tarea en particular. Es un bloque de código que puede ser llamado o invocado por otras partes del código y opera como una entidad independiente.

Para nombrar funciones de manera efectiva, use nombres descriptivos que transmitan su propósito. Por ejemplo, en lugar de creando una funciónFoo, opta por nombres más ilustrativos como validar entrada de usuario o calcularPrecioTotal.

Por ejemplo:

funcióncalcularPrecioTotal(precio, cantidad) {
devolver precio * cantidad;
}
funciónvalidar entrada de usuario(aporte) {
devolver entrada! == indefinido && entrada !== nulo;
}

4. Constantes de nomenclatura

Las constantes son variables que no se pueden reasignar. Al nombrar constantes, es importante usar todas las letras mayúsculas y guiones bajos para separar las palabras.

Por ejemplo:

constante PRECIO_MAX = 1000;
constante PRECIO_MIN = 0;

En este ejemplo, todas las letras mayúsculas y guiones bajos se han utilizado para separar palabras en los nombres constantes.

5. Clases de nombres

En JavaScript, los objetos se pueden crear usando planos llamados clases.. Para lograr prácticas de nomenclatura inmaculadas, es de suma importancia ejecutar PascalCase, una convención de nomenclatura que exige el uso de mayúsculas en la primera letra de cada palabra.

Tomemos, por ejemplo:

claseCarro de la compra{
constructor(Haz un modelo) {
este.hacer = hacer;
este.modelo = modelo;
 }
}

En este ejemplo, la clase Carro de la compra ha sido nombrada usando PascalCase, lo que significa que la primera letra de cada palabra en el nombre de la clase ha sido en mayúscula, y no hay espacios ni guiones bajos entre las palabras.

6. Componentes de nomenclatura

Los componentes son bloques de construcción esenciales en el desarrollo de software moderno, particularmente en marcos como React, que enfatizan el código reutilizable.

Al dividir una aplicación o interfaz de usuario compleja en partes más pequeñas y manejables, puede crear componentes que se pueden reutilizar en diferentes proyectos, lo que reduce el tiempo de desarrollo y aumenta el código eficiencia.

Una vez más, recomendamos encarecidamente utilizar la convención de nomenclatura de PascalCase para nombrar componentes. Esto significa poner en mayúscula la primera letra de cada palabra en el nombre del componente.

Tal convención lo ayuda a distinguir los componentes de otros segmentos de código, lo que simplifica la identificación y la manipulación.

funciónBotón(accesorios) {
devolver<botón>{props.etiqueta}botón>;
}

En este ejemplo, se ha utilizado la convención de nomenclatura de PascalCase para nombrar el componente Botón.

7. Métodos de nomenclatura

Al nombrar métodos, es crucial usar nombres descriptivos que comuniquen con éxito lo que logra el método, ya que los métodos son funciones que pertenecen a un objeto.

Por ejemplo:

claseAuto{
constructor(Haz un modelo) {
este.hacer = hacer;
este.modelo = modelo;
 }
 arrancar el motor() {
// código para arrancar el motor 
 } 
 detenerMotor() { 
// código para detener el motor 
 }
 }
}

Nombres descriptivos (arrancar el motor, paradaMotor) se utilizan para los métodos de este ejemplo, lo que garantiza que su propósito previsto se comprenda fácilmente.

8. Nombrar funciones privadas

Las funciones definidas como privadas están restringidas para acceder solo dentro del objeto donde están definidas. Es crucial agregar un guión bajo (_) para indicar que las funciones son privadas.

Aquí hay un ejemplo:

claseAuto{
constructor(Haz un modelo) {
este.hacer = hacer;
este.modelo = modelo;
 }
 _arrancar el motor() {
// código para arrancar el motor
 }
 _pararMotor() {
// código para detener el motor
 }
}

Al usar un guión bajo inicial en este ejemplo, se indica que las funciones son privadas.

9. Nombrar variables globales

Se puede acceder a las variables clasificadas como globales desde cualquier parte del código base. Al nombrar tales variables globales, es crucial usar nombres claros y descriptivos que transmitan efectivamente su propósito previsto.

Por ejemplo:

constante PRECIO_MAX = 1000;
constante PRECIO_MIN = 0;
funciónconsultar precio(precio) {
si (precio > PRECIO_MAX) {
// código para manejar precios altos
 } demássi (precio < PRECIO_MIN) {
// código para manejar precios bajos
 }
}

10. Nombrar archivos

La organización eficiente de archivos es un aspecto crucial de la gestión exitosa de proyectos de JavaScript. Para garantizar convenciones de nomenclatura coherentes y optimizadas, es esencial separar las palabras dentro de los nombres de los archivos usando letras minúsculas y guiones.

Se prefieren las letras minúsculas porque JavaScript es un lenguaje que distingue entre mayúsculas y minúsculas, lo que significa que el lenguaje trata las letras minúsculas y mayúsculas de manera diferente. El uso de letras minúsculas para los nombres de archivo garantiza la coherencia y evita confusiones al hacer referencia a archivos en el código.

Los guiones se utilizan para separar palabras en nombres de archivos porque no se permiten espacios en los nombres de archivos. También se pueden usar otras alternativas, como guiones bajos o camelCase, pero generalmente se prefieren los guiones por su legibilidad.

El uso de guiones también hace que los nombres de los archivos sean más accesibles para los usuarios con lectores de pantalla u otras tecnologías de asistencia.

mi-aplicacion/
├── origen/
 ├── componentes/
 ├── botón.js
 ├── campo de entrada.js
├── útiles/
 ├── string-utils.js
 ├── fecha-utils.js
├── aplicación.js
├── index.js

En este ejemplo, se utilizan letras minúsculas y guiones para separar palabras en los nombres de archivo.

Importancia de seguir las convenciones de nomenclatura en JavaScript

Seguir buenas convenciones de nomenclatura es un aspecto esencial para escribir código limpio y fácil de mantener en JavaScript. Al seguir estas convenciones, puede hacer que su código sea más legible y fácil de mantener, especialmente en algunos Frameworks de JavaScript en los que debe manejar código voluminoso, lo que puede ahorrarle tiempo y esfuerzo en el largo plazo.