DEV Community

Cover image for Nombre de variables y funciones para JavaScript
Juan Valdebenito
Juan Valdebenito

Posted on

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);
Enter fullscreen mode Exit fullscreen mode

Bueno:

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

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

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);
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

Bien:

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

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

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)
}
Enter fullscreen mode Exit fullscreen mode

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.`;
});


Enter fullscreen mode Exit fullscreen mode

Top comments (0)