Nombre de variables y funciones para JavaScript

Seguramente te ha pasado, al igual que a mí y a muchos desarrolladores, cuando estamos iniciando en el mundo del desarrollo, que al tratar de dar nombres correctos a nuestras variables intentamos asignarles nombres que no son del todo adecuados o no las definimos correctamente para que funcionen de manera más eficiente. Esto nos hace invertir más tiempo en buscar un nombre coherente que en el propio código que estamos desarrollando.

La verdad es que es un tema que no se suele tratar mucho, pero que afecta a la mayoría de los nuevos desarrolladores. Para abordar esta situación, se han creado ciertos estándares que se pueden encontrar en la web, los cuales hablan de mejores prácticas, formas de tener un código más limpio y maneras de abordar un problema utilizando patrones de diseño, entre otros.

En esta ocasión, veremos cómo asignar nombres a nuestras variables y funciones de la mejor manera. Esta información fue recolectada de varios sitios web y espero que les sea de mucha utilidad.

PD: Ojo que esto es solo una recomendación, nada esta escrito en piedra, sin nada más que mencionar aquí les dejo la información reunida.

Como NO nombrarlas

Para nombrar variables en JavaScript hay que tener en consideración ciertos puntos que pueden ocasionar errores incluso antes de ejecutar el código.

1.- Evitar usar números al nombrarlos.

let variable1 //funciona pero no es buena práctica utilizarlo❌

let 1variable //genera error de sintaxis ❌

2.- Evitar usar palabras reservadas del lenguaje.

let function // palabras reservadas del lenguaje❌

let const // otro ejemplo de palabra reservada❌

3.- Evitar usar letras como variables.❌

let i // palabra que no se sabe bien para que es❌

let NU // lo mismo suceden este ejemplo❌

Como SI nombrarlas

1.- Nombres auto-descriptivos

let name //nombre de quién? ❌

let personName //hace referencia al nombre de la persona ✅

2.- Nombres Cortos

let longNameToWriteParallelepiped //texto muy largo ❌

let shortName //debe ser una cadena de texto no muy larga ✅

Use nombres de variables significativos y pronunciables

const yyyymmdstr = moment().format("YYYY/MM/DD");❌

const currentDate = moment().format("YYYY/MM/DD");✅

Nombres para booleanos

let active = true // Activado que? ❌

let disabled = false //Desactivado que cosa? ❌

let isMenuActive = true // activo el menú ✅

let isMenuDisabled = false //desactivo el menú ✅

Nombres para variables de tipo numérico

let max = 5 // máximo de que? ❌

let maximumImageSize = 5 //se entiende que 5 es para el ancho de la imagen ✅

Nombres para los Array

supongamos que tenemos una lista de números

let list = [1,2,3,4,5] // lista de que? ❌

let number = [1,2,3,4,5] // números para qué? ❌

let arrayNumberList= [1,2,3,4,5] // ya sabemos que es un array al asignarle su valor ❌

let numberList= [1,2,3,4,5] // esto es lo correcto ✅

Nombres para los Objetos

la mayoría de las veces lo encontraremos en PascalCase, eso para distinguirlos en cierta manera de las variables comunes

let movie= {...} // esto no ❌

let Movie= {...} // esto es lo correcto ✅

Nombres para las Funciones Generales

supongamos que queremos una función que active o desactive una alarma (para las funciones es buena práctica utilizar verbos)

1.- si quiero enviar el valor:

let alarmIsActive // esto no ❌

let setAlarmIsActive // esto es correcto ✅

2.- si quiero recibir el valor

let alarmIsActive // esto no ❌

let getAlarmIsActive // esto es correcto ✅

Argumentos de función (2 o menos idealmente)

Limitar la cantidad de parámetros de función es increíblemente importante porque facilita la prueba de su función. Tener más de tres conduce a una explosión combinatoria en la que tienes que probar toneladas de casos diferentes con cada argumento por separado.

Malo:

function createMenu(title, body, buttonText, cancellable) {
  // ...
}

createMenu("Foo", "Bar", "Baz", true);

Bueno:

function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

Las funciones deben hacer una cosa

Esta es, con mucho, la regla más importante en la ingeniería de software. Cuando las funciones hacen más de una cosa, son más difíciles de componer, probar y razonar. Cuando puede aislar una función en una sola acción, se puede refactorizar fácilmente y su código se leerá mucho más limpio. Si no saca nada más de esta guía aparte de esto, estará por delante de muchos desarrolladores.

Malo:

function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}

Bien:

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

Nombres para las Funciones Handler

Esto en practica aplica a los elemntos visuales del Dom

supongamos que queremos cambiar el elemento titulo de un formulario, entonces:

let setTitleForm // esto no ❌

let handlerTitleForm // esto es correcto ✅

cambiar el color de un boton :

let buttonColor // esto no ❌

let handlerbuttonColor // esto es correcto ✅

PD: He visto distintas formas de agregar la palabra handler, también es valido de esta manera buttonColorHandler, lo dejo a su criterio.

Nombres para parametros en funciones

supongamos que estamos pasando los suiguentes parametros a las funciones

let name = "juan"
function greet(name)

con el signo de _ podemos respetar el mismo nombre para manejarlo dentro de las funciones

function greet(_name){
    console.log("Hola",_name)
}

Nombres para metodos each,foreach,map etc. de forma correcta

Debemos siempre nombrar de forma singular la lista de objetos que estemos recorriendo.

let personList = [
  { name: "Juan", age: 25 },
  { name: "María", age: 30 },
  { name: "Pedro", age: 28 }
];

let greetingPerson = personList.map((person) => {
  return `Hola, soy ${person.name} y tengo ${person.age} años.`;
});