S05L02 - Variables y Bloques de código

html

Entendiendo Variables y Bloques de Código en JavaScript
Tabla de Contenidos

Introducción - Página 1
Variables en JavaScript - Página 3

let, const y var - Página 4
Reasignando Variables - Página 6


Bloques de Código y Ámbito - Página 8

Ámbito Global vs. Local - Página 9
Entendiendo la Cadena de Ámbito - Página 11


Mejores Prácticas - Página 13
Conclusión - Página 15


Introducción
Bienvenido a esta guía completa sobre Variables y Bloques de Código en JavaScript. Ya seas un principiante que ingresa al mundo de JavaScript o un desarrollador que repasa los fundamentos, este eBook está diseñado para mejorar tu comprensión de cómo operan las variables y los bloques de código dentro del lenguaje.
En esta guía, exploraremos:

Los diferentes tipos de declaraciones de variables: let, const y var.
Cómo funciona la reasignación de variables.
La importancia de los bloques de código y cómo definen el ámbito de las variables.
Mejores prácticas para escribir código JavaScript limpio y eficiente.

Entender estos conceptos fundamentales es crucial para escribir código efectivo y libre de errores, haciendo que tu proceso de desarrollo sea más fluido y eficiente.

Variables en JavaScript
let, const y var
JavaScript ofrece tres formas principales de declarar variables: let, const y var. Cada una cumple un propósito distinto y se comporta de manera diferente dentro del ámbito de tu código.
Usando let
La palabra clave let te permite declarar variables que pueden ser reasignadas posteriormente. Tiene un ámbito de bloque, lo que significa que respeta los límites de los bloques de código definidos por llaves { }.




		
		
			
			
Java
			
			
let year = 2000;
console.log(year); // Output: 2000

year = 2001;
console.log(year); // Output: 2001

			
				
					
				
					1
2
3
4
5
6
7
				
						 
let year = 2000;
console.log(year); // Output: 2000
 
year = 2001;
console.log(year); // Output: 2001
 
					
				
			
		


Usando const
La palabra clave const se utiliza para declarar variables que no pueden ser reasignadas después de su asignación inicial. Al igual que let, const también tiene un ámbito de bloque.




		
		
			
			
Java
			
			
const year = 2000;
console.log(year); // Output: 2000

// Intentar reasignar causará un error
year = 2001; // Error: Assignment to constant variable.

			
				
					
				
					1
2
3
4
5
6
7
				
						 
const year = 2000;
console.log(year); // Output: 2000
 
// Intentar reasignar causará un error
year = 2001; // Error: Assignment to constant variable.
 
					
				
			
		


Usando var
La palabra clave var tiene un ámbito de función y permite tanto la declaración como la reasignación de variables. Sin embargo, su ámbito no es tan predecible como el de let y const, lo que puede llevar a problemas en bases de código más grandes.




		
		
			
			
Java
			
			
var year = 2000;
console.log(year); // Output: 2000

year = 2001;
console.log(year); // Output: 2001

			
				
					
				
					1
2
3
4
5
6
7
				
						 
var year = 2000;
console.log(year); // Output: 2000
 
year = 2001;
console.log(year); // Output: 2001
 
					
				
			
		


Tabla Comparativa: let vs. const vs. var


Característica
let
const
var


Ámbito
Ámbito de bloque
Ámbito de bloque
Ámbito de función


Reasignación
Permitida
No permitida
Permitida


Hoisting
No inicializado antes del hoisting
No inicializado antes del hoisting
Inicializado como undefined antes del hoisting


Redeclaración
No permitida en el mismo ámbito
No permitida en el mismo ámbito
Permitida en diferentes contextos


Reasignando Variables
Reasignar variables es sencillo con let y var. Sin embargo, como se ve con const, intentar reasignar un valor resultará en un error.
Ejemplo con let




		
		
			
			
Java
			
			
let year = 2023;
console.log(year); // Output: 2023

year = 2024;
console.log(year); // Output: 2024

			
				
					
				
					1
2
3
4
5
6
7
				
						 
let year = 2023;
console.log(year); // Output: 2023
 
year = 2024;
console.log(year); // Output: 2024
 
					
				
			
		


Ejemplo con var




		
		
			
			
Java
			
			
var year = 2023;
console.log(year); // Output: 2023

year = 2024;
console.log(year); // Output: 2024

			
				
					
				
					1
2
3
4
5
6
7
				
						 
var year = 2023;
console.log(year); // Output: 2023
 
year = 2024;
console.log(year); // Output: 2024
 
					
				
			
		


Intentando Reasignación con const




		
		
			
			
Java
			
			
const year = 2023;
console.log(year); // Output: 2023

year = 2024; // Error: Assignment to constant variable.

			
				
					
				
					1
2
3
4
5
6
				
						 
const year = 2023;
console.log(year); // Output: 2023
 
year = 2024; // Error: Assignment to constant variable.
 
					
				
			
		



Bloques de Código y Ámbito
Entender los bloques de código y el ámbito de las variables es esencial para escribir código JavaScript modular y libre de errores.
Ámbito Global vs. Local
Las variables declaradas fuera de cualquier función o bloque están en el ámbito global y son accesibles en cualquier parte del código. Por el contrario, las variables declaradas dentro de un bloque { } están en el ámbito local y son accesibles solo dentro de ese bloque.
Ejemplo de Ámbito Global




		
		
			
			
Java
			
			
let year = 2000;

if (true) {
    console.log(year); // Output: 2000
}

console.log(year); // Output: 2000

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
let year = 2000;
 
if (true) {
    console.log(year); // Output: 2000
}
 
console.log(year); // Output: 2000
 
					
				
			
		


Ejemplo de Ámbito Local




		
		
			
			
Java
			
			
let year = 2000;

if (true) {
    let year = 2001; // Variable local
    console.log(year); // Output: 2001
}

console.log(year); // Output: 2000

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						 
let year = 2000;
 
if (true) {
    let year = 2001; // Variable local
    console.log(year); // Output: 2001
}
 
console.log(year); // Output: 2000
 
					
				
			
		


Entendiendo la Cadena de Ámbito
JavaScript sigue una cadena de ámbito para resolver identificadores de variables. Cuando se accede a una variable, JavaScript busca desde el ámbito más interno hacia afuera hasta encontrar una coincidencia.
Ejemplo con Ámbitos Anidados




		
		
			
			
Java
			
			
let year = 2000;

if (true) {
    let year = 2001;

    if (true) {
        let year = 2002;
        console.log(year); // Output: 2002
    }

    console.log(year); // Output: 2001
}

console.log(year); // Output: 2000

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						 
let year = 2000;
 
if (true) {
    let year = 2001;
 
    if (true) {
        let year = 2002;
        console.log(year); // Output: 2002
    }
 
    console.log(year); // Output: 2001
}
 
console.log(year); // Output: 2000
 
					
				
			
		


En este ejemplo, cada bloque anidado crea una nueva variable local year, ocultando las variables externas.

Mejores Prácticas
Para escribir código JavaScript limpio y mantenible, adhiérete a las siguientes mejores prácticas:

Prefiere const sobre let y var: Usa const para variables que no deben ser reasignadas. Esto reduce las posibilidades de mutaciones accidentales.




		
		
			
			
Java
			
			
const PI = 3.14;

			
				
					
				
					1
2
3
				
						 
const PI = 3.14;
 
					
				
			
		


Limita el Uso de var: Debido a su comportamiento de ámbito de función y problemas de hoisting, prefiere let y const sobre var.
Usa Nombres de Variables Descriptivos: Elige nombres significativos que transmitan el propósito de la variable.




		
		
			
			
Java
			
			
let currentYear = 2023;

			
				
					
				
					1
2
3
				
						 
let currentYear = 2023;
 
					
				
			
		


Inicializa las Variables al Declararlas: Esto ayuda a prevenir variables undefined y hace que el código sea más predecible.




		
		
			
			
Java
			
			
const userName = "John Doe";

			
				
					
				
					1
2
3
				
						 
const userName = "John Doe";
 
					
				
			
		


Evita Variables Globales: El uso excesivo de variables globales puede llevar a conflictos y un código más difícil de mantener. Encapsula las variables dentro de funciones o bloques.
Utiliza Efectivamente el Ámbito de Bloque: Aprovecha el ámbito de bloque de let y const para manejar la vida útil de las variables y prevenir comportamientos inesperados.


Conclusión
Dominar las variables y bloques de código en JavaScript es fundamental para convertirse en un desarrollador competente. Al comprender las diferencias entre let, const y var, y captar las sutilezas del ámbito y los bloques de código, puedes escribir código más predecible y mantenible. Siempre prefiere const y let sobre var para aprovechar el ámbito de bloque y reducir posibles errores. Adherirse a las mejores prácticas asegura que tu código permanezca limpio, eficiente y fácil de gestionar a medida que tus proyectos crecen.
Palabras Clave: JavaScript variables, let vs const vs var, bloques de código, ámbito de variables, cadena de ámbito en JavaScript, reasignando variables, ámbito de bloque, ámbito global, ámbito local, mejores prácticas de JavaScript, declaración de variables, fundamentos de programación, JavaScript para principiantes, guía para desarrolladores, consejos de codificación en JavaScript
Nota: Este artículo es generado por IA.
Característica	let	const	var
Ámbito	Ámbito de bloque	Ámbito de bloque	Ámbito de función
Reasignación	Permitida	No permitida	Permitida
Hoisting	No inicializado antes del hoisting	No inicializado antes del hoisting	Inicializado como undefined antes del hoisting
Redeclaración	No permitida en el mismo ámbito	No permitida en el mismo ámbito	Permitida en diferentes contextos