Skip to content

T5.1 Variables y constantes

Variables y constantes🔗

ℹ️ Fuente original: repo de Brayan Diaz C

Las variables son elementos esenciales en cualquier lenguaje de programación. En JavaScript, las variables se utilizan para almacenar valores y hacer referencia a ellos en nuestro código.

Declaración de variables🔗

En JavaScript, podemos declarar variables usando las palabras clave var, let, o const. La diferencia entre estas tres es cómo manejan el alcance y la asignación de valores.

var🔗

La palabra clave var se utiliza para declarar variables globales o locales en una función sin importar el bloque en el que se declare.

var myVar = "Hola mundo";

En el ejemplo anterior, la variable miVariable es declarada en el ámbito global. Esto significa que la variable miVariable puede ser accedida desde cualquier parte del código. También es posible declarar variables e inicializarlas o asignarle valores más adelante.

// Declaración de variables
var name;

// Asignación de valores
name = "Juan";

// Declaración de variables
var age, program, idNumber;

// Asignación de valores
age = 30;
program = true;
idNumber = 123456789;

Nota: Sólo emplearemos var cuando no sea posible utiliar let ya que es la recomendación oficial, más cuando estamos aprendiendo.

let🔗

La palabra clave let se utiliza para declarar variables locales en un bloque, declaración o expresión, y solo está disponible dentro del bloque en el que se declara.

let myLocalVar = "Hola mundo";

const🔗

La palabra clave const se utiliza para declarar variables de solo lectura que no pueden ser reasignadas. El valor de una variable const no puede cambiar a lo largo de la ejecución del programa.

const MY_CONSTANT = "Hola mundo";

Nota: Aunque las reglas para nombrar las constantes son iguales a las de cualquier variable, la convención de nombres a utilzar en esta unidad será SIEMPRE poner las constantes en mayúsculas y snake_case.

Ejemplo🔗

Cuando usar var, let o const?

Depende de la situación. Si deseas declarar una variable global, usa var. Si deseas declarar una variable local, usa let. Si deseas declarar una variable de solo lectura, usa const.

// Declaración de variables
var name = "Juan";
let countryOfResidence = "España";
const AGE = 30;
var program = true;
const ID_NUMBER = 123456789;
let favouritesBands = ["The Beatles", "Led Zeppelin", "Queen"];

Buenas prácticas🔗

  1. Utiliza nombres descriptivos para tus variables. Por ejemplo, nombre es mejor que n.
  2. Utiliza nombres que sean cortos y concisos.
  3. Utiliza nombres que sean fáciles de escribir, leer, pronunciar, recordar y fáciles de buscar en el código.
  4. Utiliza nombres en inglés en lo posible.
  5. Las variables no deben contener espacios y no pueden contener caracteres especiales.
  6. Las variables no deben contener palabras reservadas de JavaScript.
  7. Las variables no deben contener nombres de funciones, métodos, clases, objetos, etc.
  8. Las variables no deben iniciar con números, pero pueden contenerlos.
  9. Los nombres de las variables deben ser en minúsculas, a menos que sean constantes.
  10. Las constantes deben ser en mayúsculas y snake_case.
  11. Los tipos de escritura de las variables deben ser camelCase o snake_case.
  12. No podemos mezclar una nomenclatura con otra.

En clase utilizaremos SIEMPRE camelCase para variables y SNAKE_CASE en mayúsculas para constantes.

Siempre que podamos programaremos en inglés, al menos para el nombre de las variables y constantes.

Clean code🔗

Utiliza nombres significativos y pronunciables para las variables🔗

Mal hecho: 

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

Bien hecho:

const actualDate = moment().format('YYYY/MM/DD');

Utiliza el vocabulario igual para las variables del mismo tipo🔗

Mal hecho:

getUserInfo();
getClientData();
getSupplierRecord();

Bien hecho:

getUser();
getClient();
getSupplier();

Utiliza nombres buscables🔗

Nosotros leemos mucho más código que jamás escribiremos. Es importante que el código que escribimos sea legible y buscable. Cuando faltamos nombrar a las variables de manera buscable y legible, acabamos confundiendo a nuestros lectores. Echa un vistazo a las herramientas para ayudarte: buddy.js y ESLint

Mal hecho:

// Para qué rayos sirve 86400000? 
setTimeout(functionToExecute, 86400000);

Bien hecho:

// Decláralos como variables globales de 'const'.
const MILLISECONDS_IN_A_DAY = 8640000; // = 24 * 60 * 60 * 1000

setTimeout(functionToExecute, MILLISECONDS_IN_A_DAY);

Utiliza variables explicativas🔗

Mal hecho:

const direction = 'One Infinite Loop, Cupertino 95014';
const postalCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
    direction.match(postalCodeRegex)[1],
    direction.match(postalCodeRegex)[2]
);

Bien hecho:

const direction = 'One Infinite Loop, Cupertino 95014';
const postalCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, postalCode] = direction.match(postalCodeRegex) || [];
savePostalCode(city, postalCode);

Evitar el mapeo mental🔗

El explícito es mejor que el implícito.

Mal hecho:

const locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((u) => {
  doOneThing();
  doOtherThing();
  // ...
  // ...
  // ...
  // Espera, para qué existe la 'u'?
  doThing(u);
});

Bien hecho:

const locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((location) => {
  doOneThing();
  doOtherThing();
  // ...
  // ...
  // ...
  doThing(location);
});

Fuente: Clean-code @andersontr15.