Dominando las Variables en JavaScript: Tipos, Nomenclatura y Ámbitos

Un buen código debe leerse como si fuera un libro, por ello es importante elegir con criterio tanto el nombre como el tipo de declaración de las variables.

Se podría decir que tenemos 3 tipos de variables en JavaScript: “var”, “let” y “const”. Las dos últimas fueron introducidas a partir de la versión ES6, las cuales nos permiten declarar variables en ámbito de bloque, siendo asi preferibles de usar por delante de la declaración “var” ya que no tiene esta característica.

La principal diferencia entre “let” y “const” es básicamente que “let” se puede reasignar y “const” no, esta última solo podría mutarse en el caso de ser un objeto.

let name = "Samuel"
console.log(name) //Samuel
name = "Paco"
console.log(name) //Paco

{
   console.log(name) // Error ya que 
}

const age = 27
console.log(age) //27
age = 28 //Error: Cannot assign to "age" because it is a constant

const person = {
  name: "Samuel",
  age: 27
}
console.log(person.age) //27
person.age = 28
console.log(person.age) //28

En este ejemplo vemos como en el caso de una variable de tipo “const” solo puede ser mutada si es un objeto, cambiando alguna de sus propiedades.

Buenas prácticas para nombrar variables:

• Preferible usar inglés.
• Pronunciables y descriptivas.

const x = "Samuel" // Mal
const name = "Samuel" // Bien

• Lenguaje ubicuo: establecer un lenguaje común entre programadores y stakeholders ya que nos va a permitir mejorar la comunicación y además podremos escoger mejor los nombres de las variables, funciones, clases …. Por ejemplo, imagina que tienes una aplicación que gestiona usuarios que a su vez son empleados de la empresa que necesita gestionar dichos datos. Si no definimos bien el lenguaje para referirnos a ellos puede haber confusiones a la hora de nombrarlos en el código, en el caso de necesitar una función que obtenga los datos de los empleados podríamos llamarla en algún sitio del código de la aplicación como “getUserInfo” y en otro lugar “getEmployeeData”. Sin embargo si desde un principio dejamos claro que siempre nos vamos a referir a los usuarios como empleados entonces nos va a quedar más claro que la mejor forma de nombrar esta función sería “getEmployee”.
• Arrays: lista iterable de elementos. Es aconsejable nombrar estas variables en plural y dejar claro que contiene dicho array.

const pet = ["Luffy", "Pancho", "Carey"] // Mal
const pets = ["Luffy", "Pancho", "Carey"] // Regular
const petNames = ["Luffy", "Pancho", "Carey"] // Bien

• Booleanos: verdadero o falso. Tenemos tres prefijos que nos ayudan a definir mejor este tipo de variables.

const exist = true // Mal
const isExist = true // Bien

const read = true // Mal
const canRead = true // Bien

const pet = true // Mal
const hasPet = true // Bien

• Funciones: deben describir la acción que realizan, por esto es bueno usar el verbo de dicha acción seguido de un sustantivo, además deben tener nombres descriptivos y concisos.

// Tenemos una aplicación de menús
getMenus() // Función para obtener menús
setMenu() // Función para modificar un menú
isValidMenu() // Función para comprobar si un menú es válido o no

// Como ves en este ejemplo siempre usamos el verbo de la acción y el 
// sustantivo del elemento que vamos a manipular.

• Clases: deben usarse nombres formados por sustantivos (“User”, “Client”, “Shop”, “PetShop”…), evitando nombres genéricos como “Data” o “Info” ya que de esta manera tendremos que generar clases con múltiples responsabilidades.

Ámbito de las variables

Esta característica es muy importante de comprender. Tenemos 3 ámbitos:

• Global: cualquier variable que no este dentro de una función, es decir, en la raíz de tu código.
• Local: variables definidas dentro de una función.
• Bloque: introducido en la versión ES6, son las variables limitadas a un bloque de código definido por llaves {}, dentro de un if o un for por ejemplo.

const petNames = [] // Variable global, disponible en todo el código

function createPetName(newPetName) {
  // Variable local, se podrá utilizar unicamente dentro de esta función.
  const isExistPetName = petNames.find((petName) => petName === newPetName)

  if (isExistPetName) {
    // Variable de scope, vamos a poder usarlo unicamente dentro de este if.
    const message = 'Este nombre de mascota ya existe'
    console.log(`Error ${message}`)
  } else {
    petNames.push(newPetName)
  }
}

Hoisting

En JavaScript las declaraciones de variables y funciones se asignan en memoria en tiempo de compilación, por decirlo de una forma mas sencilla, buscan las declaraciones y las ejecutan primero.

test();

function test() {
  console.log("Esto es un test")
}

// Aquí aunque llamemos a la función antes de declararla en orden de código,
// no tendríamos problema, ya que primero busca la declaración.

Con las variables hay que tener cuidado ya que solo aplica a la declaración y no a su asignación.

var petName = 'Luffy'
function helloPet() {
  console.log(`Hello ${petName}!`) // Hello undefined!
  var petName = 'Pancho'
  console.log(`Hello ${petName}!`) // Hello Pancho!
}

// Traducción del proceso de ejecución de la función
var petName = 'Luffy'
function helloPet() {
  var petName
  console.log(`Hello ${petName}!`) // Hello undefined!
  petName = 'Pancho'
  console.log(`Hello ${petName}!`) // Hello Pancho!
}

En resumen, la correcta declaración y denominación de variables, funciones y clases en JavaScript no solo mejora la legibilidad del código, sino que también facilita la comunicación entre desarrolladores y partes interesadas. Al adoptar estas pequeñas prácticas, se logra un impacto significativo en la claridad y la eficiencia del código, allanando el camino para un desarrollo más efectivo en el tiempo.

He obtenido gran parte de la información del libro Clean Javascript de Miguel A. Gomez