Entendiendo el uso de las variables en Javascript

blog-image.jpg
Solucionex
10
Mar 22

Entendiendo el uso de las variables en Javascript

Javascript es uno de los lenguajes de programación que más ha evolucionado y que más de moda está en los últimos 10~15 años; La evolución que ha sufrido desde ECMAScript 5 hasta las revisiones anuales que lleva recibiendo desde 2016, ha propiciado que sea uno de los lenguajes de programación más usados en el sector. Además, a esto se suma la aparición de varios frameworks: Electron, para hacer apps nativas de escritorio; React native o Ionic, para crear apps para dispositivos móviles; AlpineJS, React (NextJS), vue.js, (y un largo etcétera) para desarrollar aplicaciones web; express / NestJS para cubrir la parte del lado del servidor…

Son muchas las herramientas y frameworks que nos encontramos, pero ¿por dónde empezar? Bien, en mi opinión no hay que empezar por ninguno de estos frameworks, sino por lo más importante de todo: Javascript vanilla. A Javascript se le da el apellido de Vanilla cuando lo estamos usando totalmente puro. El por qué es simple, es la base de cualquier framework, por lo que todo lo que aprendamos sobre él nos va a servir a tener una buena estructura y un código mucho más limpio y legible para nuestros proyectos.

Pues bien, si vamos a empezar por lo básico también tendremos que empezar a dar algunos tips sobre las variables.

 

El ámbito de las variables

Vale, puede ser que me haya ido un poco a lo básico, pero es muy importante saber cuándo usar cada instrucción a la hora de declarar una variable. Las tres instrucciones que tenemos son var, let y const.

 La diferencia entre var y let / const es el ámbito al que pertenece la variable de ésta. El ámbito de var es el ámbito local actual, esto quiere decir que estas variables son pasadas por referencia a funciones descendientes. Además, si es declarada fuera de una función, tendrá un ámbito global.

function printNumbers() {
  var x = 'primerValor'
  if(x === 'primerValor') {
    var x = 'segundoValor'
    console.log(x) // imprime segundo valor
  }
  console.log(x) // imprime segundo valor
}

printNumbers()

Aparte de todo eso, las variables declaradas con var presentan Hoisting.

console.log(x) // undefined
var x = 15
console.log(x) // 15

En cambio, si la variable es declarada con las instrucciones let / const, el ámbito de la variable pertenece al bloque, por lo tanto, el valor de cada variable depende del bloque en el que se declare.

function printNumbers() {
  let x = 'primerValor'
  if(x === 'primerValor') {
    let x = 'segundoValor'
    console.log(x) // segundoValor
  }
  console.log(x) // primerValor
}

printNumbers()

A tener en cuenta que si una variable es declarada con let / const en un ámbito global o una función, tendrá un comportamiento similar a var aunque no presentará hoisting.

console.log(x) // Uncaught ReferenceError: Cannot access 'x' before initialization"
let x = 15
console.log(x) // 15

En resumen, en el estándar de Javascript se ha dejado de usar var por los problemas que esto presenta, y al final todas las variables son declaradas con let y const. ¿Pero cuál es su diferencia?

 

La instrucción const

La instrucción const sirve para declarar constantes, es decir, las variables declaradas con la instrucción const pierden su capacidad para ser reasignada.

let apellido = 'Gómez'
const nombre = 'Rafa'

apellido = 'Martínez' // Se aplica el cambio.
nombre = 'Manuel' // Uncaught TypeError: Assignment to constant variable.

Pero esto no quiere decir que las variables declaradas con const sean inmutables, pues es todo lo contrario. Los objetos o los array pueden ser mutados aún siendo declarados con esta instrucción.

const persona = {
  nombre: 'Rafa',
  edad: 16
}

console.log(persona)

persona.nombre = 'José'
persona.edad = 24

console.log(persona)


const animales = ['caballo', 'perro', 'gato', 'pollo']
console.log(animales)

animales.push('cerdo')
console.log(animales)

 

Cómo validar las variables

Para no tener ningún problema con el dato que estamos trabajando, lo mejor es validar que el dato es correcto. El problema es que en Javascript comprobar todos los posibles estados no deseados que nos puede dar una variable es un poco tedioso. Pero no hay de qué preocuparse, ya que hoy en día es muy fácil validar objetos y variables en Javascript.

Comprobar que es una variable válida

let nombre = 'Rafa'
if (nombre.length > 0 && nombre != undefined && nombre != null && nombre != 0 && nombre != '' && nombre != false)
  console.log(nombre)

Pero, ¿qué pasa con los objetos? Hay veces que tenemos objetos anidados y comprobarlo todo puede ser tedioso: para ello podemos usar el optional chaining.

let vehiculo = {
  nombre: 'coche',
  num_ruedas: {
    delanteras: 2,
    traseras: 2
  }
}
// esto es la manera larga 
if (vehiculo && vehiculo.num_ruedas && vehiculo.num_ruedas.delanteras)
  console.log(vehiculo)
// optional chaining
if (vehiculo?.num_ruedas?.delanteras)
  console.log(vehiculo)


Asignación Null-ish

Esta es muy rápida, si queremos asignar un valor por defecto a una variable que puede retornar null, podemos usar el siguiente operador:

function determinarEdad (edad) {
  let personaEdad = edad ?? 18
}

 

Tipado en Javascript

Javascript es un lenguaje de tipado dinámico, por lo el intérprete asigna a las variables un tipo durante el tiempo de ejecución basado en su valor en ese momento.

  • String: para cadena de caracteres. Se puede declarar con los diferentes tipos de comillas ("", '', ``).
  • Boolean: este tipo de dato guarda un true o false.
  • Number: se usa para guardar números, tanto enteros como decimales.
  • BigInt: es un tipo numérico especial que provee soporte a enteros de tamaño arbitrario. Se le agrega una n al final del literal entero o llamando a la función BigInt.
  • Null: cuando la referencia de la variable es inválida o inexistente.
  • Undefined: variables que han sido definidas pero no se les ha asignado un valor.
  • Object: es cualquier instancia de objeto construido que también se utiliza como estructuras de datos. (new Array, new Map, new Object, etc.)
  • Symbol: es un tipo de dato primitivo en cuyos casos son únicos e inmutables.
  • Function: bloque de código que puede ser invocado por otras funciones (o sí mismo) y ser asignada a variables. Acepta argumentos de entrada y puede devolver un valor. Una función es un también un objeto.

Hay que entender que las variables en JS son de tipado débil; si quisiéramos variables con tipado fuerte tendríamos que entrar a utilizar el superset Typescript.

Enlaces interesantes