DEV Community

Tu codigo cotidiano
Tu codigo cotidiano

Posted on

Entendiendo var, let y const en JavaScript de una vez por todas

#javascript #beginners #webdev #tutorial

¡Hola, comunidad de DEV! 👋

Uno de los primeros temas que aprendemos en JavaScript, y uno que puede generar confusión incluso en devs con experiencia, es la declaración de variables. Las diferencias entre var, let y const son cruciales para escribir código moderno y predecible.

En esta guía, vamos a desmitificar cada una de ellas.

El Clásico: var (La Forma Original)

Durante muchos años, var fue la única manera de declarar variables. Aunque hoy su uso se desaconseja, es vital entender cómo funciona para comprender código antiguo o ciertos comportamientos de JS.

Sus dos características principales son su ámbito de función (function scope) y el hoisting.

1. Ámbito de Función (Function Scope)

Una variable declarada con var no respeta bloques {} como un if o un bucle for, solo es local a la función donde se creó. Esto puede causar reescrituras inesperadas.

function miFuncion() {
  var saludo = "Hola";
  if (true) {
    var saludo = "Hola de nuevo"; // ¡Esta línea REESCRIBE la variable anterior!
    console.log(saludo); // Imprime "Hola de nuevo"
  }
  console.log(saludo); // Imprime "Hola de nuevo", ¡inesperado!
}

miFuncion();
Enter fullscreen mode Exit fullscreen mode
  1. Hoisting (Elevación)

El hoisting hace que las declaraciones con var sean "movidas" invisiblemente al inicio de su ámbito. Solo se eleva la declaración, no la asignación (=), resultando en un valor undefined si intentas acceder a ella antes de tiempo.


console.log(miVariable); // Imprime "undefined", no da error

var miVariable = "Soy un valor";

console.log(miVariable); // Imprime "Soy un valor"

/*
Lo que JS interpreta realmente es esto:

var miVariable;
console.log(miVariable);
miVariable = "Soy un valor";
*/
Enter fullscreen mode Exit fullscreen mode

Los Sucesores Modernos: let y const

Para solucionar los problemas de var, ES6 introdujo let y const. Ambas tienen ámbito de bloque (block scope), lo que significa que solo existen dentro del bloque {...} más cercano donde fueron declaradas.

let: Para variables que cambian

Usa let cuando sepas que el valor de tu "caja" necesitará ser actualizado o reasignado más adelante. A diferencia de var, respeta el bloque:


function miFuncionConLet() {
  let saludo = "Hola";
  if (true) {
    let saludo = "Hola de nuevo"; // Esta es una variable NUEVA, solo para el if
    console.log(saludo); // Imprime "Hola de nuevo"
  }
  console.log(saludo); // Imprime "Hola", ¡mucho más predecible!
}
Enter fullscreen mode Exit fullscreen mode

🔥 ¿Y qué hay de const? ¿Cuáles son las reglas de oro?

¡Gracias por llegar hasta aquí! Has cubierto la parte más confusa de var y la solución que trae let.

En la guía completa, que puedes encontrar en mi blog TuCodigoCotidiano, profundizo en:

Cómo funciona const y por qué es la opción preferida por defecto.

La diferencia clave entre reasignar y mutar un valor en const.

Las "Reglas de Oro": Unas reglas sencillas y claras para que nunca más dudes sobre cuál de las tres usar.
Enter fullscreen mode Exit fullscreen mode

👉 https://tucodigocotidiano.yarumaltech.com/leer_guias/guia/27/

¡Únete a la membresía para acceder a esta y muchas otras guías, tutoriales y recursos exclusivos para llevar tu carrera de desarrollador al siguiente nivel!

¡Espero que te sea de gran utilidad!

Top comments (0)