Forem: Martín Aguirre

Fundamentos de JavaScript - Variables: La Base de Cualquier Programa

Martín Aguirre — Wed, 01 Oct 2025 21:37:21 +0000

Introducción

Como concepto fundamental en todo lenguaje de programación, las variables son la base de cualquier programa. Nos permiten almacenar y manipular datos que luego serán utilizados en nuestro programa. Como recurso útil, las variables son ubicaciones abstractas de almacenamiento, identificadas por un nombre asociado que contiene un valor.

Declarando Variables: const, let & var

Para crear una variable en JavaScript, debemos declararla, lo cual es el término apropiado para esta acción. JavaScript nos proporciona tres palabras clave para declarar variables: var, let y const.

Declaration of a Variable with var

Declaración de una Variable con var

La palabra var se usa para declarar variables con alcance de función o de alcance global, opcionalmente con un valor inicializado.

Principales características de var:

Agregada durante la creación de JavaScript en 1995.
Tiene alcance o ámbito de función (no de bloque).
Puede redeclararse en el mismo ámbito sin errores.
Se eleva al principio de su ámbito (hoisting) y se inicializa con undefined.

Ejemplo simple:

var car = "Mercedes";

var car = "Volkswagen"; // La redeclaración funciona
console.log(car) // Imprime: Volkswagen

Nevertheless, this sort of generous flexibility may lead to bugs or glitches in larger programs or systems. The use of this approach is not advised, unless you have a very good reason to do so.

Sin embargo, esta suerte de flexibilidad generosa puede provocar errores o fallos en programas o sistemas más grandes. No se recomienda usar este enfoque, a menos que exista una buena razón para hacerlo.

Declaración de una Variable con let

La palabra let se utiliza para declarar una variable reasignable y de alcance o ámbito local de bloque, opcionalmente inicializada con un valor.

Principales características de let:

Agregada en ES6 (2015).
Tiene ámbito de bloque (más seguro que var).
No se puede redeclarar en el mismo ámbito.
Se puede reasignar.

Un ejemplo simple de cómo declarar una variable sin valor, o al menos no todavía:

let varName;

En un sentido técnico, esta variable varName es undefined (indefinida), por lo que le asignaremos un valor:

varName = "Casa";

Como ya ha sido declarada, no volvemos a utilizar la palabra clave let; solo queremos asignarle un valor, así que escribimos el nombre de la variable, agregamos el operador de asignación (=), y asignamos el valor "Casa" que es de tipo string en este caso.

Sin embargo, esto resulta poco práctico. Una forma más sencilla de realizar el trabajo sería la siguiente:

let varName = "Casa";

Utilización de la palabra clave let, nombre de la variable o "identificador", y el valor que se desea asignar.

Siendo más claro y conciso:

let color = "azul";

// let color = "rojo"; Error: Ya ha sido declarada

color = "rojo"; // La reasignación funciona
console.log(color); // Imprime: "rojo"

Ejemplos adicionales de variables con la palabra clave let:

let myDog = "Pipo";
console.log(myDog) // Imprime: "Pipo"

let streetNum = 477
console.log(streetNum) // Imprime: 477

let isFalse = false
console.log(isFalse) // Imprime: false

Como habrás notado, existe una forma estándar de escribir los nombres que asignamos a nuestras variables. En JavaScript, este método se conoce como camelCase. Esta convención tipográfica permite escribir frases sin espacios, donde la primera letra de cada palabra se escribe en mayúscula, excepto la primera letra del compuesto completo. Nos beneficiamos de ella facilitando así la lectura de elementos como variables y funciones.

Declaration de una Variable con const

La palabra const se utiliza para declarar una variable local con alcance de bloque. El valor de una constante debe asignarse cuando se la inicializa y no puede modificarse mediante reasignación con el operador de asignación. Sin embargo, si dicha constante es un objeto, su propiedad puede añadirse, actualizarse o eliminarse.

Se recomienda declarar una variable con const cuando se sabe con certeza que su valor no cambiará.

Características principales de const:

También agregada en ES6 (2015).
Tiene alcance de bloque.
No se puede redeclarar ni reasignar.
Debe inicializarse en el momento de la declaración.

const pi = 3.1416;

// pi = 3.14; ✖️ Error: reasignación no permitida
console.log(pi); // Imprime: 3.1416

Nota: const hace que la vinculación de la variable sea inmutable, NO el valor en sí mismo.
Si el valor es un objeto o una matriz (array), su contenido puede cambiar:

const myArr = [1, 2, 3];

myArr.push(4); // ✔️ Permitido - Se modifica el contenido
console.log(myArr); // Imprime: [1, 2, 3, 4]

myArr = [5, 6, 7]; // ✖️ error: Reasignación a una constante

Si bien podemos modificar el contenido de la matriz (agregar, eliminar o cambiar elementos), no podemos reasignar la matriz completa a un nuevo valor.

Ámbito de las Variables (Scope)

Un ámbito es la región de código donde una variable es accesible. Pensemos en esto como el contexto actual de ejecución donde los valores y las expresiones son visibles o se puede hacer referencia a ellos.

Ámbito Global (Global Scope)

Las variables declaradas globalmente, es decir, aquellas variables declaradas por fuera de cualquier bloque o función, tienen algo llamado ámbito global (O, global scope). Estas variables globales pueden ser accedidas desde cualquier lugar en un programa en JavaScript.

Las variables declaradas con var, let o const comparten ciertas similitudes cuando se declaran por fuera de un bloque. Todas tienen un ámbito global:

var myName = "Martin"; // Ámbito global

let currentYear = 2025 // Ámbito global

const isDeveloper = true // Ámbito global

Ejemplo Adicional

Esta variable declarada fuera de la función, se convierte en global:

let treeName = "Ceibo";
// La variable treeName puede ser usada aquí sin problemas

function printTreeName() {
  // La variable treeName puede ser usada aquí también!
}

// La variable treeName puede ser usada incluso después de la función

Las Variables Globales Tienen Ámbito Global:

Todos los scripts y funciones de la misma página web pueden acceder a una variable con alcance global.
En los navegadores, las variables globales declaradas con var se convierten automáticamente en propiedades del objeto window (o globalThis en JavaScript moderno).
Las variables globales declaradas con let o const no se adjuntan a window, pero siguen siendo accesibles en cualquier parte del script.
Demasiadas variables globales pueden provocar conflictos de nombres (dos scripts que usan el mismo nombre de variable se sobrescriben accidentalmente).
Depender de variables globales dificulta la depuración y el mantenimiento del código, ya que cualquier parte del programa puede modificarlas inesperadamente.
Práctica recomendada: limite las variables globales utilizando funciones, módulos o el alcance de bloque.

Ámbito de Función (`var`)

Las variables declaradas con var son visibles en toda la función donde están definidas, incluso fuera de los bloques.

Ejemplo rápido:

function testVar() {
  if (true) {
    var message = "Hola desde var!";
  }
  console.log(message); // ✔️ Funciona (Ámbito de función)
}

testVar(); // Imprime: Hola desde var

Sin embargo, las variables definidas dentro de una función no son accesibles (visibles) desde fuera de ella. Esto incluye var, let y const. Todas tienen ámbito de función.

function myDogName() {
  var dogName = "Fido"; // Ámbito, o alcance, de función
  console.log(dogName);
}

function myAgeNumber() {
  var myAge = 25; // Ámbito, o alcance, de función
  console.log(myAge);
}

function isFunctionScoped() {
  var functionScoped = true; // Ámbito, o alcance, de función
  console.log(functionScoped);
}

Con esto, podemos afirmar claramente que las variables declaradas dentro de una función de JavaScript son locales a la función en términos de alcance.

// La variable carColor no puede usarse aquí

function getCarProps() {
  let carColor = "grey";

  // La variable carColor puede usarse aquí sin problemas
}

// La variable carColor no puede usarse aquí

Las Variables Locales Tienen Ámbito de Función

Se puede acceder a ellas únicamente desde dentro de la función.
Ningún script ni función externa a la función puede acceder a ellas.
Las variables con el mismo nombre se pueden usar fuera de la función.
Las variables con el mismo nombre se pueden usar en diferentes funciones.
Las variables locales se crean al iniciar una función.
Las variables locales se eliminan al finalizar la función.
Los argumentos (parámetros) funcionan como variables locales dentro de las funciones.

Ámbito de Bloque, o Block Scope (`let` & `const`)

Las variables declaradas con let o const solo son accesibles dentro del bloque ({ ... }) donde están definidas. Este enfoque proporciona una organización y estructuración del código mucho mejor, evitando así sobrescrituras no deseadas de variables y errores inesperados.

function testLetAndConst() {
  if (true) {
    let msg1 = "Hola desde let";
    const msg2 = "Hola desde const";
    console.log(msg1); // ✔️ Funciona
    console.log(msg2); // ✔️ Funciona
  }
  // console.log(msg1); ✖️ Error: msg1 no está definido
  // console.log(msg2); ✖️ Error: msg2 no está definido
}

testLetAndConst();

Notas

Las variables declaradas con la palabra clave var no pueden tener alcance de bloque.
Las variables declaradas con la palabra clave var, dentro de un bloque { ... }, son accesibles desde fuera del bloque.

Sintetizada

var tiene la particularidad de ignorar los límites de bloque. Sin embargo, está limitado por funciones.
let y const respetan los límites de bloque. Por lo tanto, son un enfoque más seguro y predecible.

Una tabla fácil de seguir para comprender mejor estos conceptos relacionados con el ámbito o alcance:

Palabra	Ámbito	Redeclaración	Elevación (Hoisting)	Notas
`var`	Función	✔️ Sí	✔️ Con `undefined`	Código 'legacy', evitar en lo posible
`let`	Bloque	✖️ No	✔️ Sin inicialización (TDZ)	Utilizar para valores mutables
`const`	Bloque	✖️ No	✔️ Sin inicialización (TDZ)	Utilizar por defecto

Hoisting, o 'Elevación'

La Elevación, o Hoisting es un comportamiento predeterminado de JavaScript que consiste en el proceso mediante el cual el intérprete mueve la declaración de funciones, variables, clases o importaciones a la parte superior de su ámbito, antes de la ejecución del código.

Las Declaraciones de Variables se Elevan

En JavaScript, podemos declarar una variable después de usarla; es decir, una variable puede usarse antes de ser declarada.

Los dos ejemplos siguientes darán el mismo resultado.

Ejemplo 1:

animal = "perro"; // Asignando "perro" a animal

console.log(animal); // Imprime: "perro"

var animal; // Declaración

Ejemplo 2:

var animal; // Declaración

animal = "dog"; // Asignando "perro" a animal

console.log(animal); // Imprime: "perro"

Las variables declaradas con var se elevarán, lo que significa que se puede hacer referencia a ellas desde cualquier lugar dentro de su ámbito respectivo. Sin embargo, si se intenta acceder a una variable antes de que se haya declarado, su valor predeterminado siempre será undefined. Teniendo esto en cuenta, podemos afirmar que solo su declaración e inicialización predeterminada se elevarán, pero no su valor mediante asignación.

console.log(tree); // undefined, o indefinido

var tree = "Pino";

function printColor() {
  console.log(color); // undefined, o indefinido
  var color = "Carmesí";
}

printColor();

Como ejemplo adicional:

var tree;

console.log(tree); // undefined, o indefinido

tree = "Pino";

function printColor() {
  var color;
  console.log(color); // undefined, o indefinido
  var color = "Carmesí";
}

printColor();

El Comportamiento de Elevación, o Hoisting, en `let` y `const`

A diferencia de var, las palabras clave let y const tienen su propio mecanismo de elevación: Se elevan al principio del bloque (lo que significa que JavaScript sabe que existen), pero permanecen sin inicializar hasta que la ejecución del código llega a su línea de declaración. Esto difiere de var, que se eleva y se inicializa automáticamente con undefined.

Intentar utilizar una variable let antes de su declaración adecuada dará como resultado un ReferenceError (error de referenciación).

Hasta que se procese la declaración, la variable permanecerá en una "zona muerta temporal". Esta Zona Muerta Temporal es el período entre la entrada en el ámbito donde se declara la variable y la declaración real. Durante este tiempo, la variable técnicamente existe en memoria, pero no se puede acceder a ella, lo que genera un error de referencia (ReferenceError) si se intenta usar.

console.log(dog); // ReferenceError
let dog = "Mastín";

console.log(cat); // ReferenceError
let cat = "Persa";

Veamos otro ejemplo:

console.log(year);

displayYear();

function displayYear() {
  console.log("El año es ", year);
}

let year = 2025;

Salida:

Uncaught ReferenceError: year is not defined

A diferencia de las declaraciones con var, que se inicializan durante su creación con undefined como valor predeterminado, year no tiene referencia a su valor en memoria. Debido a este pequeño detalle, se genera un error de referencia, como se ve en el ejemplo.

Ahora, volviendo al concepto de "zona muerta temporal", lo examinaremos con más detalle:

Zona muerta temporal en cuestión:

  console.log(year);

  displayYear();

  function displayYear() {
    console.log("El año es ", year);
  }

Fin de la zona muerta temporal:

  let year = 2025;

Forma correcta de utilizar la metodología let:

let year = 2025;
console.log(year);

function displayYear() {
  console.log("El año es ", year);
}

displayYear();

Además, también podemos ver que la zona muerta temporal puede proporcionarnos un claro beneficio a la hora de evitar sobrescrituras accidentales:

let fruit = "Manzana";

if (true) {
  // Aquí comienza la zona muerta temporal para la variable fruta en ámbito de bloque
  console.log(fruit); // ReferenceError
  let fruit = "Banana";
}

Por otro lado, tenemos la palabra clave const:

const horseName;
console.log(horseName)

Salida:

Uncaught SyntaxError: Missing initializer in const declaration

Dado que una constante no puede cambiar su valor mediante asignación ni redeclararse mientras el programa se está ejecutando, debe inicializarse con un valor.

Uso correcto de const:

const horseName = "Duque";
console.log(horseName);

Salida:

Duque

Sombreado de Variables (Shadowing)

Lo llamamos así cuando una variable de ámbito interno oculta o anula una variable externa dentro del ámbito local.

let name = "Alicia";

function printName() {
  let name = "Roberto"; 
  console.log(name); // Imprime: Roberto
}

printName();
console.log(name); // Imprime: Alicia

Dos puntos clave a tener en cuenta:

var permite la redeclaración, lo que puede generar errores y resultados inesperados.
let y const generarán errores si se intenta redeclarar.

var x = 25.4;
var x = 32.7; // Ningún error, simplemente se sobrescribe

let y = 18.3;
let y = 49.7; // SyntaxError: El identificador 'y' ya ha sido declarado

Teniendo en cuenta que el sombreado de variables puede hacernos perder el acceso a la variable original, esta práctica puede generar errores no deseados y resultados inesperados que dificultarán la depuración, ya que no comprenderemos el origen del problema. Siempre es recomendable declarar las variables con un nombre lo más explicativo posible, de modo que describa su propósito por sí mismo y para sí mismo. También se recomienda declarar las variables organizadamente en grupos donde estén cerca unas de otras para que sea más fácil detectar nombres repetidos, en lugar de dispersarlas sin sentido por el código.

Bonus: Buenas Prácticas En Cuanto a Variables

Preferir usar const por defecto y luego let cuando se requiera reasignación. Evitar var tanto como sea posible, ya que puede provocar problemas de hoisting, o elevación y comportamientos inesperados. El desarrollo moderno con JavaScript se basa principalmente en let y const.
Mantener el alcance de las variables lo más limitado posible (ámbito de bloque > ámbito de función > global).
Evitar el shadowing, o sombreado, a menos que sea intencional, obvio y, en última instancia, útil.
Minimizar el uso de variables globales. Estas son accesibles desde cualquier lugar, lo que puede causar conflictos de nombres, errores difíciles de encontrar y diferentes tipos de sorpresas desagradables. Desarrollar un gusto por las declaraciones con alcance local.
Inicializar las variables al declararlas para mayor claridad. Esto evita que tengan un valor undefined, o indefinido, lo que podría provocar posibles errores.
Use nombres descriptivos que resalten el propósito de la variable o los datos que contiene; ya sea global o local, la legibilidad es más importante de lo que cree.
Tender a agrupar variables relacionadas. Al conectarlas de forma lógica y sensata, se mejora la legibilidad y se reduce el riesgo de sombreado, o shadowing.

Gracias por tu tiempo.

Si te interesa apoyar mis escritos, podés comprarme un café aquí: PayPal.me/martinxcvi ☕

Foto de portada por Desmond Marshall en Unsplash 📸

JavaScript Fundamentals - Variables: The Foundation of Any Program

Martín Aguirre — Tue, 30 Sep 2025 19:39:20 +0000

Introduction

As a fundamental concept in every programming language, variables are the foundation of any program. They let us store and manipulate data that we will use later in our program. As a useful resource, variables are abstract storage locations, identified by an associated name, which contains a value.

Declaring Variables: const, let and var

In order to create a variable in JavaScript, we must declare it, which is the proper term for this action. JavaScript gives us three keywords to declare variables: var, let, and const.

Declaration of a Variable with var

The var statement is used to declare a function-scoped, or globally-scoped variables, optionally with an initialized value.

Main characteristics of var:

Introduced when JavaScript was first created in 1995.
Has function scope (not block scope).
Can be redeclared in the same scope without error.
Hoisted to the top of its scope and initialized with undefined.

Simple example:

var car = "Mercedes";

var car = "Volkswagen"; // redeclaration works
console.log(car) // "Volkswagen" gets printed

Nevertheless, this sort of generous flexibility may lead to bugs or glitches in larger programs or systems. The use of this approach is not advised, unless you have a very good reason to do so.

Declaration of a Variable with let

The letstatement is used to declare a re-assignable, block-scoped local variable, optionally with an initialized value.

Main characteristics of let:

Introduced in ES6 (2015).
Has block scope (safer than var).
Cannot be redeclared in the same scope.
Can be reassigned.

A simple example of how to declare a variable with no value, or at least not yet:

let varName;

In a technical sense, this varName variable is undefined, so we'll assign it a value:

varName = "House";

Since it has already been declared, we do not use the let keyword again; we just want to assign a value to it, so we write the variable's name, add the assignment operator (=), and assign the "House" value which is of type string in this case.

Nonetheless, this is somewhat unpractical. A more straightforward way of completing the job would be as follows:

let varName = "House";

Use of the let keyword, variable name or "identifier", and the value that needs to be assigned.

Being more clear and concise:

let color = "blue";

// let color = "red"; Error: It's already declared

color = "red"; // reassignment works
console.log(color); // "red" gets printed

Additional examples of variables with the let keyword:

let myDog = "Pipo";
console.log(myDog) // "Pipo" gets printed

let streetNum = 477
console.log(streetNum) // 477 gets printed

let isFalse = false
console.log(isFalse) // false gets printed

As you may notice, there's a standard way of writing the names we assign to our variables. In JavaScript, this method is known as camelCase. This typographical convention is a way of writing phrases without spaces, where the first letter of each word is capitalized, except for the first letter of the entire compound. We benefit from it by making things like variables and functions easier to read

Declaration of a Variable with const

The const statement is used to declare a block-scoped local variable. The value of a constant must be assigned when initialized and it cannot be changed through reassignment using the assignment operator. However, if such constant is an object, its property can either be added, updated or removed.

It is advised to declare a variable with const when you certainly know that the value will not change.

Main characteristics of const:

Also introduced in ES6 (2015).
Has block scope.
Cannot be redeclared or reassigned.
Must be initialized at the moment of declaration.

const pi = 3.1416;

// pi = 3.14; ✖️ Error: reassignment not allowed
console.log(pi); // 3.1416 gets printed

Note: const makes the variable binding immutable, NOT the value itself.
If the value is an object or array, its contents can still change:

const myArr = [1, 2, 3];

myArr.push(4); // ✔️ allowed - modifying contents
console.log(myArr); // [1, 2, 3, 4] gets printed

myArr = [5, 6, 7]; // ✖️ error: Assignment to constant variable

While we can modify the array's contents (adding, removing, or changing elements), we cannot reassign the entire array to a new value.

Variables Scope

A scope is the region of code where a variable is accessible. Let's think of it as the current context of execution in which values and expressions are "visible" or can be referenced.

Global Scope

Variables declared Globally, that is to say, variables declared outside any block or function, have something called Global Scope. This Global variables can be accessed from anywhere in a JavaScript program.

Variables declared with either var, let or const share certain similarities when declared outside a block. They all have Global scope:

var myName = "Martin"; //Global scope

let currentYear = 2025 // Global scope

const isDeveloper = true // Global scope

Additional Example

This variable declared outside the function, becomes Global:

let treeName = "Ceibo";
// treeName variable can seamlessly be used here

function printTreeName() {
  // treeName variable can be used here too!
}

// treeName variable can evenly be used after the function

Global Variables have Global Scope:

All scripts and functions in the same web page can access a variable with global scope.
In browsers, global variables declared with var automatically become properties of the window object (or globalThis in modern JavaScript).
Globals declared with let or const do not attach to window, but they’re still accessible everywhere in the script.
Too many global variables can lead to naming conflicts (two scripts using the same variable name accidentally overwrite each other).
Relying on globals makes code harder to debug and maintain, since any part of the program can modify them unexpectedly.
Best practice: limit global variables by using functions, modules, or block scope instead.

Function Scope (`var`)

Variables declared with var are visible throughout the entire function where they are defined — even outside blocks.

Quick example:

function testVar() {
  if (true) {
    var message = "Hello from var!";
  }
  console.log(message); // ✔️ Works (function scoped)
}

testVar(); // "Hello from var" gets printed

However, variables defined inside a function are not accessible (visible) from outside the function. That includes var, let and const. They all have function scope.

function myDogName() {
  var dogName = "Fido"; // Function scope
  console.log(dogName);
}

function myAgeNumber() {
  var myAge = 25; // Function scope
  console.log(myAge);
}

function isFunctionScoped() {
  var functionScoped = true; // Function scope
  console.log(functionScoped);
}

With this, we can clearly state that variables declared within a JavaScript function, are local to the function in terms of scope.

// Variable carColor cannot be used here

function getCarProps() {
  let carColor = "grey";

  // Variable carColor can seamlessly be used here
}

// Variable carColor cannot be used here

Local Variables Have Function Scope

They can only be accessed from within the function.
No scripts or functions outside the function can access them.
Variables with the same name can be used outside the function.
Variables with the same name can be used in different functions.
Local variables are created when a function starts.
Local variables are deleted when the function is completed.
Arguments (parameters) work as local variables inside functions.

Block Scope (`let` and `const`)

Variables declared with let or const are only accessible inside the block ({ ... }) where they are defined. This approach provides a much better code organization and structuring, thus preventing unintended variables overwrites and unexpectedly undesired errors .

function testLetAndConst() {
  if (true) {
    let msg1 = "Hello from let";
    const msg2 = "Hello from const";
    console.log(msg1); // ✔️ Works
    console.log(msg2); // ✔️ Works
  }
  // console.log(msg1); ✖️ Error: msg1 is not defined
  // console.log(msg2); ✖️ Error: msg2 is not defined
}

testLetAndConst();

Notes

Variables declared with the var keyword cannot have block scope.
Variables declared with the var keyword, inside a { ... } block can be accessed from outside the block.

Synthesized

var has the particularity that it ignores block boundaries. Nonetheless, it is indeed limited by functions.
let and const respect block boundaries. Thus, they are a safer, and more predictable approach.

An easy-to-follow table to grasp these scope-related concepts better:

Keyword	Scope Type	Redeclaration	Hoisted	Notes
`var`	Function	✔️ Yes	✔️ With `undefined`	Legacy, avoid if possible
`let`	Block	✖️ No	✔️ But uninitialized (TDZ)	Use for mutable values
`const`	Block	✖️ No	✔️ But uninitialized (TDZ)	Use by default

Hoisting

Hoisting is a default behaviour of JavaScript consisting of the process whereby the interpreter moves the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code.

Variables Declarations Are Hoisted

In JavaScript we can declare a variable after it has been used; id est, a variable can be used before it has been declared.

Both of the following examples below will provide the same result.

Example 1:

animal = "dog"; // Assigning "dog" to animal

console.log(animal); // Printing "dog" in the console

var animal; // Declaration

Example 2:

var animal; // Declaration

animal = "dog"; // Assigning "dog" to animal

console.log(animal); // Printing "dog" in the console

Variables declared with var will be hoisted, this means they can be referenced from anywhere in their respective scope. Nonetheless, if you try to access a variable before it has been declared, its value will eventually always default to undefined. With this in mind, we can state that only its declaration and default initialization will get hoisted, but not its value through assignment.

console.log(tree); // undefined

var tree = "Pine";

function printColor() {
  console.log(color); // undefined
  var color = "Crimson";
}

printColor();

As an additional example:

var tree;

console.log(tree); // undefined

tree = "Pine";

function printColor() {
  var color;
  console.log(color); // undefined
  var color = "Crimson";
}

printColor();

The `let` & `const` Hoisting Behaviour

Differently from var, the let and const keywords have their unique hoisting mechanism: They are hoisted to the top of the block (meaning JavaScript knows they exist), but they remain uninitialized until the code execution reaches their declaration line. This is different from var, which is hoisted and automatically initialized with undefined.

Attempting to use a let variable before its proper declaration will result in a ReferenceError.

Until the declaration is processed, the variable will remain in a "temporal dead zone". The Temporal Dead Zone is the period between entering the scope where the variable is declared and the actual declaration statement. During this time, the variable technically exists in memory but cannot be accessed, resulting in a ReferenceError if you try to use it.

console.log(dog); // ReferenceError
let dog = "Mastiff";

console.log(cat); // ReferenceError
let cat = "Persian";

Let's see an additional example:

console.log(year);

displayYear();

function displayYear() {
  console.log("The year is ", year);
}

let year = 2025;

Output:

Uncaught ReferenceError: year is not defined

Unlike var declarations which are initialized during its creation phase with undefined as the default value, year has no reference to its value in the memory. Due to this fine detail, a reference error is thrown as seen in the example.

Now, going back to the "temporal dead zone" concept, we will examine it a little bit better:

Temporal dead zone in question:

  console.log(year);

  displayYear();

  function displayYear() {
    console.log("The year is ", year);
  }

End of the temporal dead zone:

  let year = 2025;

Proper way for the let methodology:

let year = 2025;
console.log(year);

function displayYear() {
  console.log("The year is ", year);
}

displayYear();

In addition, we can also see that the temporal dead zone can provide us a clear benefits when it comes to avoiding accidental overwritings:

let fruit = "Apple";

if (true) {
  // Temporal dead zone for block-scoped fruit starts here
  console.log(fruit); // ReferenceError
  let fruit = "Banana";
}

On the other hand, we have the const keyword:

const horseName;
console.log(horseName)

Output:

Uncaught SyntaxError: Missing initializer in const declaration

Since a constant cannot change its value through assignment or be re-declared while the program is running, it must be initialized with a value

Proper use of const:

const horseName = "Duke";
console.log(horseName);

Output:

Duke

Variable Shadowing

We call it as such when an inner-scope variable hides or overrides an outer variable within the local scope

let name = "Alice";

function printName() {
  let name = "Bob"; 
  console.log(name); // Bob
}

printName();
console.log(name); // Alice

Two key points to keep carefully in mind:

var allows redeclaration, something which can lead to bugs and unexpected outcomes.
let and const will throw errors if you attempt to redeclare.

var x = 25.4;
var x = 32.7; // No errors, it simply gets overwritten

let y = 18.3;
let y = 49.7; // SyntaxError: Identifier 'y' has already been declared

Considering that variable shadowing can make us lose access to the original variable, such practice can lead to unwanted bugs and unexpected results that will make it difficult to debug since the origin of the issue won't be clear to us. It is always a good idea to declare variables with a name as properly explanatory as possible, so it describes its purpose by itself and for itself. It is also recommended to declare your variables organizedly in groups where they are all near one another in order to make it easy to spot if there are repeated names, instead of senselessly spreading them across the codebase.

Bonus: Variables General Best Practices

Have the preference of using const by default, then let when reassignment is required. Avoid var as much as possible, since it can lead to hoisting issues and unexpected behaviours. Modern JavaScript development relies primarily on let and const.
Keep variables scoped as tightly as possible (block scope > function scope > global).
Avoid shadowing unless it’s intentional, obvious and, ultimately, useful.
Minimize the use of global variables. These are accessible everywhere, which can cause name collisions, hard-to-find bugs, and different sort of ungrateful surprises. Developed a liking for locally scoped declarations.
Initialize variables when declared for clarity. This prevents them to have an undefined value which could lead to potential errors.
Use descriptive names that highlight the variable's purpose or data that it holds — be it global or local, readability matters more than you think.
Tend to group related variables together. When they are connected logically and sensically, this improves readability and reduces shadowing risk.

Thank you for your time!

If you’d like to support my writing, you can buy me a coffee here: PayPal.me/martinxcvi ☕

Cover photo by Desmond Marshall on Unsplash 📸

Introducción a JavaScript: Conceptos básicos del Navegador y Node.js

Martín Aguirre — Fri, 12 Sep 2025 20:20:02 +0000

Introducción

JavaScript es un lenguaje de programación orientado a objetos, de tipado dinámico, principalmente eficaz para el desarrollo de proyectos web interactivos. Puede manipular poderosamente la estructura de las páginas web y ofrece una amplia gama de funciones y flexibilidades. Por otro lado, con la ayuda de Node.js, también puede funcionar elegantemente en el servidor como una alternativa de desarrollo backend a otros lenguajes, destacando por su velocidad, asincronismo y modularidad.

Navegador vs Node.js

JavaScript se creó originalmente para ejecutarse en el navegador, donde da vida a los sitios web mediante interactividad, animaciones y comportamiento dinámico. Todos los navegadores modernos actuales cuentan con un motor JavaScript integrado que lo hace posible.

Pero JavaScript no se limita solo al navegador. Gracias a Node.js, también puede ejecutarse directamente en tu computadora, fuera de una página web. Esto abrió la puerta a su uso en el backend, potenciando servidores, gestionando archivos y creando aplicaciones que van mucho más allá del navegador.

En este artículo, exploraremos ambos enfoques. Comenzaremos con el navegador, el entorno tradicional de JavaScript, y luego pasaremos a Node.js para ver cómo se puede usar el mismo lenguaje en un entorno completamente diferente.

JavaScript en el Navegador

La manera tradicional:

Crear una carpeta o directorio
Abrirlo usando un editor de texto (Visual Studio Code, como recomendación principal)
Crear un archivo HTML denominado index.html
Crear un archivo JavaScript denominado script.js
Agregar tu código dentro de script.js y conectarlo al archivo HTML

Código HTML mínimo para copiar y pegar en tu archivo index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Primera Práctica en JavaScript</title>
</head>
<body>
  <!-- JavaScript se cargará al final -->
  <script src="script.js"></script>
</body>
</html>

Tenemos una estructura HTML básica, con una etiqueta script donde se inyecta el código JavaScript con la ayuda del atributo src donde referenciamos la ubicación de nuestro archivo script.js, que en este caso está en la misma carpeta que index.html.

Código JavaScript mínimo para copiar y pegar en tu archivo script.js:

console.log('Hola Mundo Desde Script.js')

Ahora, abrí el archivo index.html en tu navegador.

Para ver el resultado, abrí la consola en herramientas para desarrolladores:

En Windows/Linux: presionar F12 o Ctrl + Shift + I
En macOS: presionar Cmd + Option + I

En este punto, deberías ver "Hola Mundo Desde Script.js" impreso en la consola de tu navegador.

Por ejemplo:

Un Poco Más de Interacción

Imprimir en la consola es un recurso muy útil en JavaScript, pero ahora modifiquemos algo en la página. Actualizá el 'cuerpo' (body) de tu HTML así:

<body>
  <h1 id="title">¡Bienvenido!</h1>
  <button onclick="changeText()">Clickeame</button>
  <script src="script.js"></script>
</body>

Y dentro de script.js:

function changeText() {
  const title = document.getElementById("title")
  title.textContent = "¡Hiciste click en el botón!"
}

Ahora, cuando abras la página y hagas click en el botón, el texto en el <h1> se actualizará.

¡Felicitaciones! — Acabás de aprender un poco sobre la manipulación del DOM y sobre eventos, dos de las ideas más importantes en JavaScript ejecutado en el navegador.

Otras Maneras de Mostrar Mensajes

Aparte de console.log, JavaScript también proporciona ventanas emergentes:

alert("¡Hola Mundo!")         // Muestra un 'alert' en el navegador
prompt("¿Cuál es tu nombre?") // Solicita al usuario que ingrese un valor

Estas son bastante buenas para experimentar, pero en proyectos reales, los desarrolladores generalmente prefieren actualizar o modificar la página, o usar la consola.

Consejo Sobre Herramientas Para Desarrolladores

La consola del navegador no solo sirve para registrar mensajes; también es donde aparecen errores y advertencias.
Si algo no funciona, revisá primero la consola. Es tu mejor aliada para la depuración.

En este punto, ya entendés cómo:

Ejecutar JavaScript en el navegador
Registrar mensajes y errores
Interactuar con la página (manipulación del DOM)
Gestionar eventos simples de usuario

Esto ya sienta unas bases sólidas. A continuación, veamos cómo se puede ejecutar JavaScript fuera del navegador con Node.js.

JavaScript en Node.js

Hasta ahora, hemos visto cómo se ejecuta JavaScript dentro del navegador. Pero JavaScript también puede ejecutarse fuera del navegador gracias a Node.js.

Node.js es un entorno de ejecución que te permite ejecutar JavaScript directamente en tu computadora. Esto es extremadamente potente, ya que te permite crear servidores backend, APIs, herramientas de procesamiento de archivos y muchas más funciones espectaculares que el navegador por sí solo no puede hacer.

Instalar Node.js

Ir a https://nodejs.org
Descargar la versión Long-Term Support, o LTS. (recomendada para la mayoría de los usuarios)
Instalar todo siguiendo el asistente de configuración (la configuración predeterminada está bien)
Verificar la instalación abriendo la terminal (o símbolo del sistema) y escribiendo:

node -v

Si todo salió bien, debería imprimirse el número de versión instalada (por ejemplo: v20.0.0).

Tu Primer Script en Node.js

Creamos una nueva carpeta y un archivo llamado app.js:

// app.js
console.log("Hola Mundo Desde Node.js")

Ahora, abrí la terminal y ejecutá el siguiente comando:

node app.js

El resultado que deberías ver:

Hola Mundo Desde Node.js

¡Felicitaciones! — Acabas de ejecutar JavaScript fuera del navegador con Node.js.

¿Cuál Es La Diferencia?

En el navegador, JavaScript tiene acceso al DOM (estructura de la página web), eventos como onclick y APIs específicas del navegador como alert o prompt.

En Node.js, esos recursos no existen. En cambio, Node te da acceso a cosas como:

El sistema de archivos (lectura/escritura de archivos)
La información del sistema operativo de su computadora
Redes (creación de servidores, gestión de solicitudes HTTP)

Un Ejemplo Simple de Servidor HTTP

Una de las cosas más comunes que se hacen con Node.js es crear un servidor web simple. Acá tenés el ejemplo más pequeño usando el módulo http integrado de Node:

// server.js
const http = require("http")

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" })
  res.end("Hola Mundo Desde Mi Servidor En Node.js!")
})

server.listen(3000, () => {
  console.log("Servidor corriendo en http://localhost:3000")
})

Ejecutá el servidor con:

node server.js

Luego, abrí el navegador y visitá http://localhost:3000
Deberías ver lo siguiente:

Hola Mundo Desde Mi Servidor En Node.js!

Por ejemplo:

Finalmente, presioná Ctrl + C para detener el servidor y liberar el puerto.

En este punto, ya tenés una comprensión básica de:

Cómo instalar y ejecutar Node.js
La diferencia entre ejecutar JavaScript en el navegador y en Node.js
Cómo crear y ejecutar tu primer servidor web sencillo en Node.js

Conclusión

En este artículo, aprendiste a ejecutar JavaScript en dos entornos diferentes:

Dentro del navegador, donde puede interactuar con páginas web, gestionar eventos de usuario y actualizar el DOM.
Dentro de Node.js, donde se ejecuta directamente en tu computadora y puede trabajar con archivos, redes y servidores.

Es importante comprender ambos aspectos, ya que JavaScript es uno de los pocos lenguajes que pueden impulsar todo el stack web, desde la interfaz de usuario hasta la lógica del servidor que se ejecuta detrás del telón.

Gracias por tu tiempo.

Si te interesa apoyar mis escritos, podés comprarme un café aquí: PayPal.me/martinxcvi ☕

Foto de portada por Growtika en Unsplash

Getting Started with JavaScript: Browser and Node.js Basics

Martín Aguirre — Mon, 08 Sep 2025 02:50:01 +0000

Introduction

JavaScript is an object-oriented programming language, dynamically typed, and primarily effective for the development of interactive web projects. It can powerfully manipulate the structure of web pages and provides a wide range of features and flexibility. On the other hand, with the help of Node.js, it can also perform elegantly on the server as a backend development alternative to other languages, and excels at speed, asynchronism and modularity.

Browser vs Node.js

JavaScript was originally created to run in the browser, where it brings websites to life with interactivity, animations, and dynamic behavior. Every modern browser today has a built-in JavaScript engine that makes this possible.

But JavaScript is not limited to the browser. Thanks to Node.js, it can also run directly on your computer, outside of any web page. This opened the door for JavaScript to be used on the backend, powering servers, handling files, and building applications that go far beyond the browser.

In this article, we’ll explore both approaches. We’ll start with the browser, the traditional home of JavaScript, and then move on to Node.js to see how the same language can be used in a completely different environment.

JavaScript in The Browser

The traditional way:

Create a folder
Open it using a text editor (Visual Studio Code, as a main recommendation)
Create an HTML file named index.html
Create a JavaScript file named script.js
Add your code inside script.js and connect it to the HTML file

Minimum boilerplate HTML code to copy and paste on your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First JavaScript Practice</title>
</head>
<body>
  <!-- JavaScript will be loaded at the bottom -->
  <script src="script.js"></script>
</body>
</html>

We have a basic HTML structure, with a script tag where the JavaScript code is injected with the help of the src attribute where we reference the location of our script.js file, which in this case is in the same folder as index.html.

Minimum boilerplate JavaScript code to copy and paste in your script.js file:

console.log('Hello World from script.js')

Now open the index.html file in your browser.

To see the result, open the Developer Tools console:

On Windows/Linux: press F12 or Ctrl + Shift + I
On macOS: press Cmd + Option + I

At this point, you should see "Hello World from script.js" printed in your browser's console.

For example:

A Little More Interaction

Printing to the console is a highly useful resource in JavaScript, but let’s actually change something on the page. Update your HTML's body like this:

<body>
  <h1 id="title">Welcome!</h1>
  <button onclick="changeText()">Click Me</button>
  <script src="script.js"></script>
</body>

And inside script.js:

function changeText() {
  const title = document.getElementById("title")
  title.textContent = "You clicked the button!"
}

Now, when you open the page and click the button, the <h1> text gets updated.

Congratulations! — You have just learned a little about DOM manipulation and events, two of the most important ideas in browser-based JavaScript.

Other Ways to Show Messages

Besides console.log, JavaScript also provides quick pop-ups:

alert("Hello World!")        // Shows a browser alert
prompt("What is your name?") // Asks for user input

These are quite good for experimenting, but in real projects, developers usually prefer updating the page or using the console.

Developer Tools Tip

The browser console isn’t just for logging messages; it’s also where errors and warnings will appear.
If something doesn’t work, go and check the console first. It’s like your best friend when it comes to debugging.

At this point, you know how to:

Run JavaScript inside the browser
Log messages and errors
Interact with the page (DOM manipulation)
Handle simple user events

This sets a decent foundation. Next, let’s see how JavaScript can run outside the browser with Node.js.

JavaScript with Node.js

So far, we’ve seen how JavaScript runs inside the browser. But JavaScript can also run outside of the browser thanks to Node.js.

Node.js is a runtime environment that allows you to execute JavaScript directly on your computer. This is extremely powerful because it enables you to build backend servers, APIs, file-processing tools, and much more incredible things that the browser alone cannot do.

Installing Node.js

Go to https://nodejs.org
Download the Long-Term Support version, or LTS. (Recommended for most users)
Install it following the setup wizard (Default settings are fine)
Verify installation by opening your terminal (or command prompt), and typing:

node -v

If everything went as expected, it should print the installed version number (for example: v20.0.0).

Your First Node.js Script

Let’s create a new folder and a file named app.js:

// app.js
console.log("Hello World from Node.js")

Now, open the terminal and run the following command:

node app.js

The output you should see:

Hello World from Node.js

Congratulations! — You’ve just run JavaScript outside of the browser with Node.js.

What’s the Difference?

In the browser, JavaScript has access to the DOM (web page structure), events like onclick, and browser-specific APIs like alert or prompt.

In Node.js, those resources do not exist. Instead, Node gives you access to things like:

The file system (read/write files)
Your computer’s operating system info
Networking (create servers, handle HTTP requests)

A Simple HTTP Server Example

One of the most common things to do with Node.js is create a simple web server. Here’s the smallest example using Node’s built-in http module:

// server.js
const http = require("http")

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" })
  res.end("Hello World from my Node.js server!")
})

server.listen(3000, () => {
  console.log("Server is running at http://localhost:3000")
})

Run the server with:

node server.js

Then open your browser and visit http://localhost:3000
You should see the following:

Hello World from my Node.js server!

For example:

Finally, press Ctrl + C to stop the server and free the port.

At this point, you now have an elementary understanding of:

How to install and run Node.js
The difference between running JavaScript in the browser vs in Node.js
How to create and run your first simple Node.js web server

Conclusion

In this article, you’ve learned how to run JavaScript in two different environments:

Inside the browser, where it can interact with web pages, handle user events, and update the DOM.
Inside Node.js, where it runs directly on your computer and can work with files, networks, and servers.

Understanding both sides is important, because JavaScript is one of the few languages that can power the entire web stack — from the user's interface, to the server logic running in the background.

Thank you for your time!

If you’d like to support my writing, you can buy me a coffee here: PayPal.me/martinxcvi ☕

Cover photo by Growtika on Unsplash

Forem: Martín Aguirre

Fundamentos de JavaScript - Variables: La Base de Cualquier Programa

Introducción

Declarando Variables: const, let & var

Declaration of a Variable with var

Declaración de una Variable con var

Declaración de una Variable con let

Declaration de una Variable con const

Ámbito de las Variables (Scope)

Ámbito Global (Global Scope)

Ejemplo Adicional

Las Variables Globales Tienen Ámbito Global:

Ámbito de Función (var)

Las Variables Locales Tienen Ámbito de Función

Ámbito de Bloque, o Block Scope (let & const)

Notas

Sintetizada

Hoisting, o 'Elevación'

Las Declaraciones de Variables se Elevan

El Comportamiento de Elevación, o Hoisting, en let y const

Sombreado de Variables (Shadowing)

Bonus: Buenas Prácticas En Cuanto a Variables

JavaScript Fundamentals - Variables: The Foundation of Any Program

Introduction

Declaring Variables: const, let and var

Declaration of a Variable with var

Declaration of a Variable with let

Declaration of a Variable with const

Variables Scope

Global Scope

Additional Example

Global Variables have Global Scope:

Function Scope (var)

Local Variables Have Function Scope

Block Scope (let and const)

Notes

Synthesized

Hoisting

Variables Declarations Are Hoisted

The let & const Hoisting Behaviour

Variable Shadowing

Bonus: Variables General Best Practices

Introducción a JavaScript: Conceptos básicos del Navegador y Node.js

Introducción

Navegador vs Node.js

JavaScript en el Navegador

Un Poco Más de Interacción

Otras Maneras de Mostrar Mensajes

Consejo Sobre Herramientas Para Desarrolladores

JavaScript en Node.js

Instalar Node.js

Tu Primer Script en Node.js

¿Cuál Es La Diferencia?

Un Ejemplo Simple de Servidor HTTP

Conclusión

Getting Started with JavaScript: Browser and Node.js Basics

Introduction

Browser vs Node.js

JavaScript in The Browser

A Little More Interaction

Other Ways to Show Messages

Developer Tools Tip

JavaScript with Node.js

Installing Node.js

Your First Node.js Script

What’s the Difference?

A Simple HTTP Server Example

Conclusion

Ámbito de Función (`var`)

Ámbito de Bloque, o Block Scope (`let` & `const`)

El Comportamiento de Elevación, o Hoisting, en `let` y `const`

Function Scope (`var`)

Block Scope (`let` and `const`)

The `let` & `const` Hoisting Behaviour