Las variables en JavaScript son espacios de memoria donde guardas valores que tu programa necesita usar y modificar. Aquí entenderás las tres formas de declararlas, cuándo usar cada una y por qué var quedó en desuso. Es una base obligatoria si estás dando tus primeros pasos en este lenguaje.
¿Qué es una variable en JavaScript?
Piensa en una caja de Lego. La caja es la variable, la etiqueta que le pegas encima es su nombre, y las piezas que metes adentro son el valor. Si guardas piezas dos por dos, esa caja tiene un tipo de dato distinto al de otra que contiene piezas tres por dos.
Esa misma lógica aplica al código: cada variable tiene un nombre que la identifica y un valor que puedes consultar o modificar según lo necesites.
¿Qué es una variable en programación? Es un espacio de memoria con un nombre asignado donde guardas un valor. Puedes leerlo o cambiarlo durante la ejecución del programa.
¿Cómo preparo mi entorno para practicar JavaScript?
Antes de escribir código, necesitas un espacio de trabajo ordenado. Desde la terminal puedes crear una carpeta dedicada al curso y dejar todo listo para tus ejercicios.
Crea la carpeta con mkdir curso-fundamentos-de-javascript.
Entra a la carpeta y abre tu editor con code . (en Visual Studio Code).
Inicializa el control de versiones con git init.
Genera el archivo de configuración con npm init --yes.
Crea una subcarpeta src y dentro un archivo 01-vars.js.
La extensión .js le indica al intérprete que ese archivo contiene código JavaScript ejecutable [02:30].
¿Cuáles son las tres formas de declarar variables en JavaScript?
JavaScript te ofrece tres palabras reservadas para declarar variables: var, let y const. Cada una tiene reglas distintas sobre reasignación y redeclaración.
¿Por qué debo evitar var?
var es la forma más antigua y la más permisiva. Te deja redeclarar la misma variable sin avisarte, lo que abre la puerta a errores difíciles de detectar [03:30].
javascript
var bloquesRojos = true;
var bloquesRojos = 5;
console.log(bloquesRojos); // 5
Aquí el valor original true se sobrescribe sin ninguna alerta. En proyectos grandes, ese comportamiento silencioso se vuelve un problema serio.
¿Cuándo uso let y cuándo const?
En 2015, ECMAScript introdujo let y const para resolver los problemas de var [04:45]. Ambas son la forma moderna y recomendada de declarar variables.
let: úsala cuando el valor va a cambiar en algún momento. Permite reasignación pero no redeclaración.
const: úsala cuando el valor no debe cambiar. No permite reasignación ni redeclaración.
javascript
let contador = 0;
contador = 5; // válido
const pi = 3.14159;
pi = 4; // error
La regla práctica es simple: declara todo como const por defecto, y solo cambia a let cuando sepas que necesitas modificar el valor más adelante.
¿Cuál es la diferencia entre let y const?let permite reasignar el valor; const lo bloquea. Ninguna de las dos permite redeclarar la misma variable en el mismo ámbito.
¿Qué es el hoisting y por qué afecta a var?
El hoisting es la forma en que el motor de JavaScript eleva las declaraciones de variables al inicio de su ámbito antes de ejecutar el código. Con var, esto produce resultados confusos [06:30].
javascript
console.log(nombre); // undefined
var nombre = "Óscar";
Lo que esperarías es un error o el valor "Óscar", pero recibes undefined. ¿Por qué? Porque internamente JavaScript reordena el código así:
javascript
var nombre; // declarada arriba como undefined
console.log(nombre);
nombre = "Óscar";
La declaración sube, pero la asignación se queda donde la escribiste. Si imprimes la variable antes de asignarla, obtienes undefined sin ningún aviso de error.
¿Qué es el hoisting en JavaScript? Es el comportamiento del motor que mueve las declaraciones de variables al inicio del ámbito. Con var produce valores undefined inesperados; con let y const lanza un error claro.
Esta es otra razón fuerte para preferir let y const: ambas evitan el hoisting silencioso y te obligan a declarar antes de usar, lo que hace tu código más predecible y legible.
¿Cómo aplico esto en mi código diario?
La recomendación general al escribir JavaScript moderno se reduce a tres puntos:
Declara con const siempre que el valor no vaya a cambiar.
Usa let solo cuando necesites reasignar el valor.
Evita var en código nuevo, aunque lo encontrarás en proyectos antiguos.
Seguir esta jerarquía te ahorra bugs por reasignaciones accidentales y te alinea con el estándar que usa la comunidad desde 2015.
¿Ya tienes claro cuándo usarás const y cuándo let en tu próximo ejercicio? Déjame en los comentarios tu solución al reto y nos vemos en la siguiente práctica.
Que molestas son las interrupciones que le agregaron a los videos
Repositorios del curso 💻
Ejemplos y fundamentos:
Proyecto:
Retos de las clases:
Vengo del futuro, los retos ayudan bastante.
Este es el comando que aplique: npx vitest src/challenge -> nombre del js sin extensión
Así se ve la consola, cuando aplican test:
✓ src/challenge.test.js(19 tests) 5ms
✓ Reto01-Var,Let y Const>Reto1: obtenerPI > debe retornar el valor 3.14159 1ms
✓ Reto01-Var,Let y Const>Reto1: obtenerPI > debe retornar un número 0ms
✓ Reto01-Var,Let y Const>Reto2: obtenerContador > debe retornar 5 después de reasignar 0ms
✓ Reto01-Var,Let y Const>Reto2: obtenerContador > debe retornar un número 0ms
✓ Reto01-Var,Let y Const>Reto3: obtenerNombreCurso > debe retornar "Fundamentos de JavaScript" 0ms
✓ Reto01-Var,Let y Const>Reto3: obtenerNombreCurso > debe retornar un string 0ms
✓ Reto01-Var,Let y Const>Reto4: reasignarMensaje > debe retornar un objeto con inicial y final 0ms
✓ Reto01-Var,Let y Const>Reto4: reasignarMensaje > el valor inicial debe ser "hola" 0ms
✓ Reto01-Var,Let y Const>Reto4: reasignarMensaje > el valor final debe ser "adiós" 0ms
✓ Reto01-Var,Let y Const>Reto5: calcularTotal > debe retornar un objeto con precioBase, descuento y total 0ms
✓ Reto01-Var,Let y Const>Reto5: calcularTotal > precioBase debe ser 100 0ms
✓ Reto01-Var,Let y Const>Reto5: calcularTotal > descuento debe ser 25(reasignado) 0ms
✓ Reto01-Var,Let y Const>Reto5: calcularTotal > total debe ser 75 0ms
✓ Reto01-Var,Let y Const>Reto6: identificarTipos > debe identificar el tipo de edad como number 0ms
✓ Reto01-Var,Let y Const>Reto6: identificarTipos > debe identificar el tipo de nombre como string 0ms
✓ Reto01-Var,Let y Const>Reto6: identificarTipos > debe identificar el tipo de activo como boolean 0ms
✓ Reto01-Var,Let y Const>Reto7: demostrarHoisting > debe retornar un objeto con antes y despues 0ms
✓ Reto01-Var,Let y Const>Reto7: demostrarHoisting > antes debe ser undefined(hoisting) 0ms
✓ Reto01-Var,Let y Const>Reto7: demostrarHoisting > despues debe ser "Oscar" 0ms
TestFiles1passed(1)Tests19passed(19)Start at 08:54:35Duration302ms(transform 24ms, setup 0ms, collect 20ms, tests 5ms, environment 0ms, prepare 62ms)PASSWaitingfor file changes... press h to show help, press q to quit
por fin pude hacer mi primer ejercicio de código sin ayuda (bueno solo una consultica pequeña que me confindió pero me siento muy orgulloso de mi)
/============================================// Reto: Var, Let y Const en JavaScript// ============================================// Completa cada función según las instrucciones.// Ejecuta los tests con: npx vitest src/01-var-let-const// ============================================// --- Reto 1: Declarar una constante ---// Declara una constante llamada PI con el valor 3.14159// y retórnala.functionobtenerPI(){constPI=3.14159;returnPI;}console.log(obtenerPI());// --- Reto 2: Reasignación con let ---// Declara una variable con let llamada "contador" e inicialízala en 0.// Luego reasígnala a 5.// Retorna el valor final de contador.functionobtenerContador(){let contador =0; contador =5return contador
}console.log(obtenerContador());// --- Reto 3: Constante de texto ---// Declara una constante llamada NOMBRE_CURSO con el valor// "Fundamentos de JavaScript" y retórnala.functionobtenerNombreCurso(){constNOMBRE_CURSO="Fundamentos de JavaScript";returnNOMBRE_CURSO;}console.log(obtenerNombreCurso());// --- Reto 4: Reasignación de strings ---// Declara una variable con let llamada "mensaje" e inicialízala con "hola".// Luego reasígnala a "adiós".// Retorna un objeto con las propiedades:// { inicial: "hola", final: "adiós" }// Pista: guarda el valor inicial antes de reasignar.functionreasignarMensaje(){let mensaje ="hola";const original = mensaje; mensaje ="adios"return{inicial:"hola",final:"adios"}}console.log(reasignarMensaje());// --- Reto 5: Cálculo con const y let ---// Declara una constante precioBase con valor 100.// Declara una variable descuento con let e inicialízala en 10.// Reasigna descuento a 25.// Calcula el total como: precioBase - descuento.// Retorna un objeto: { precioBase, descuento, total }functioncalcularTotal(){const precioBase =100;let descuento =25;let total = precioBase-descuento
return{precioBase,descuento,total}}console.log(calcularTotal());// --- Reto 6: Identificar tipos de dato ---// Dentro de la función ya están declaradas tres variables.// Completa el return usando typeof para cada una.functionidentificarTipos(){const edad =25;const nombre ="JavaScript";const activo =true;return{ tipoEdad:typeof(edad),// Reemplaza undefined por typeof de edad tipoNombre:typeof(nombre),// Reemplaza undefined por typeof de nombre tipoActivo:typeof(activo),// Reemplaza undefined por typeof de activo};}console.log(identificarTipos());// --- Reto 7: Hoisting ---// Esta función simula el comportamiento del hoisting con var.// Sin modificar el orden de las líneas, haz que la función// retorne un objeto con:// { antes: undefined, despues: "Oscar" }// Pista: declara "nombre" con var después del primer acceso.functiondemostrarHoisting(){let antes ="nombre";var nombre ="Fabián";let despues = nombre
return{antes,despues}// Paso 1: guarda el valor de "nombre" en una variable "antes"// Paso 2: declara var nombre = "Oscar"// Paso 3: guarda el valor de "nombre" en una variable "despues"// Paso 4: retorna { antes, despues }}console.log(demostrarHoisting());
/ ============================================
// Reto: Var, Let y Const en JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: npx vitest src/01-var-let-const
// ============================================
// --- Reto 1: Declarar una constante ---
// Declara una constante llamada PI con el valor 3.14159
// y retórnala.
function obtenerPI() {
const PI = 3.14159;
return PI;
}
console.log (obtenerPI());
// --- Reto 2: Reasignación con let ---
// Declara una variable con let llamada "contador" e inicialízala en 0.
// Luego reasígnala a 5.
// Retorna el valor final de contador.
function obtenerContador() {
let contador = 0;
contador = 5
return contador
}
console.log(obtenerContador());
// --- Reto 3: Constante de texto ---
// Declara una constante llamada NOMBRE_CURSO con el valor
// "Fundamentos de JavaScript" y retórnala.
function obtenerNombreCurso() {
const NOMBRE_CURSO = "Fundamentos de JavaScript";
return NOMBRE_CURSO;
}
console.log(obtenerNombreCurso());
// --- Reto 4: Reasignación de strings ---
// Declara una variable con let llamada "mensaje" e inicialízala con "hola".
// Luego reasígnala a "adiós".
// Retorna un objeto con las propiedades:
// { inicial: "hola", final: "adiós" }
// Pista: guarda el valor inicial antes de reasignar.
function reasignarMensaje() {
let mensaje = "hola";
const original = mensaje;
mensaje = "adios"
return {inicial: "hola", final:"adios"}
}
console.log(reasignarMensaje());
// --- Reto 5: Cálculo con const y let ---
// Declara una constante precioBase con valor 100.
// Declara una variable descuento con let e inicialízala en 10.
// Reasigna descuento a 25.
// Calcula el total como: precioBase - descuento.
// Retorna un objeto: { precioBase, descuento, total }
function calcularTotal(){
const precioBase = 100;
let descuento = 25;
let total = precioBase-descuento
return{precioBase,descuento,total}
}
console.log(calcularTotal());
// --- Reto 6: Identificar tipos de dato ---
// Dentro de la función ya están declaradas tres variables.
// Completa el return usando typeof para cada una.
function identificarTipos() {
const edad = 25;
const nombre = "JavaScript";
const activo = true;
return {
tipoEdad: typeof(edad), // Reemplaza undefined por typeof de edad
tipoNombre: typeof(nombre), // Reemplaza undefined por typeof de nombre
tipoActivo: typeof(activo), // Reemplaza undefined por typeof de activo
};
}
console.log(identificarTipos());
// --- Reto 7: Hoisting ---
// Esta función simula el comportamiento del hoisting con var.
// Sin modificar el orden de las líneas, haz que la función
// retorne un objeto con:
// { antes: undefined, despues: "Oscar" }
// Pista: declara "nombre" con var después del primer acceso.
function demostrarHoisting() {
let antes = "nombre";
var nombre = "Fabián";
let despues = nombre
return{antes,despues}
// Paso 1: guarda el valor de "nombre" en una variable "antes"
// Paso 2: declara var nombre = "Oscar"
// Paso 3: guarda el valor de "nombre" en una variable "despues"
// Paso 4: retorna { antes, despues }
}
console.log(demostrarHoisting());
Comparto mi código de los retos propuestos. Cualquier recomendación es bienvenida.
// ============================================// Reto: Var, Let y Const en JavaScript// ============================================// Completa cada función según las instrucciones.// Ejecuta los tests con: npx vitest src/01-var-let-const// ============================================// --- Reto 1: Declarar una constante ---// Declara una constante llamada PI con el valor 3.14159// y retórnala.functionobtenerPI(){// Tu código aquíconstPI=3.14159;returnPI;}console.log(obtenerPI());// --- Reto 2: Reasignación con let ---// Declara una variable con let llamada "contador" e inicialízala en 0.// Luego reasígnala a 5.// Retorna el valor final de contador.functionobtenerContador(){// Tu código aquílet contador=0; contador=5;return contador;}console.log(obtenerContador());// --- Reto 3: Constante de texto ---// Declara una constante llamada NOMBRE_CURSO con el valor// "Fundamentos de JavaScript" y retórnala.functionobtenerNombreCurso(){// Tu código aquíconstNOMBRE_CURSO="Fundamentos de JavaScript";returnNOMBRE_CURSO;}console.log(obtenerNombreCurso());// --- Reto 4: Reasignación de strings ---// Declara una variable con let llamada "mensaje" e inicialízala con "hola".// Luego reasígnala a "adiós".// Retorna un objeto con las propiedades:// { inicial: "hola", final: "adiós" }// Pista: guarda el valor inicial antes de reasignar.functionreasignarMensaje(){// Tu código aquílet mensaje="hola";let inicial=mensaje; mensaje="adiós";let final=mensaje;return{ inicial: inicial, final: final
};}console.log(reasignarMensaje());// --- Reto 5: Cálculo con const y let ---// Declara una constante precioBase con valor 100.// Declara una variable descuento con let e inicialízala en 10.// Reasigna descuento a 25.// Calcula el total como: precioBase - descuento.// Retorna un objeto: { precioBase, descuento, total }functioncalcularTotal(){// Tu código aquíconst precioBase=100;let descuento=10; descuento=25;let total= precioBase-descuento;return{ precioBase: precioBase, descuento: descuento, total: total
};}console.log(calcularTotal());// --- Reto 6: Identificar tipos de dato ---// Dentro de la función ya están declaradas tres variables.// Completa el return usando typeof para cada una.functionidentificarTipos(){const edad =25;const nombre ="JavaScript";const activo =true;return{ tipoEdad:typeof(edad),// Reemplaza undefined por typeof de edad tipoNombre:typeof(nombre),// Reemplaza undefined por typeof de nombre tipoActivo:typeof(activo),// Reemplaza undefined por typeof de activo};}console.log(identificarTipos());// --- Reto 7: Hoisting ---// Esta función simula el comportamiento del hoisting con var.// Sin modificar el orden de las líneas, haz que la función// retorne un objeto con:// { antes: undefined, despues: "Oscar" }// Pista: declara "nombre" con var después del primer acceso.functiondemostrarHoisting(){// Tu código aquí// Paso 1: guarda el valor de "nombre" en una variable "antes"var antes=nombre;// Paso 2: declara var nombre = "Oscar"var nombre="Oscar";// Paso 3: guarda el valor de "nombre" en una variable "despues"var despues=nombre;// Paso 4: retorna { antes, despues }return{ antes: antes, despues: despues
};}console.log(demostrarHoisting());module.exports={ obtenerPI, obtenerContador, obtenerNombreCurso, reasignarMensaje, calcularTotal, identificarTipos, demostrarHoisting,};
// ============================================
// Reto: Var, Let y Const en JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: npx vitest src/01-var-let-const
// ============================================
// --- Reto 1: Declarar una constante ---
// Declara una constante llamada PI con el valor 3.14159
// y retórnala.
function obtenerPI() {
// Tu código aquí
const PI=3.14159;
return PI;
}
console.log(obtenerPI());
// --- Reto 2: Reasignación con let ---
// Declara una variable con let llamada "contador" e inicialízala en 0.
// Luego reasígnala a 5.
// Retorna el valor final de contador.
function obtenerContador() {
// Tu código aquí
let contador=0;
contador=5;
return contador;
}
console.log(obtenerContador());
// --- Reto 3: Constante de texto ---
// Declara una constante llamada NOMBRE_CURSO con el valor
// "Fundamentos de JavaScript" y retórnala.
function obtenerNombreCurso() {
// Tu código aquí
const NOMBRE_CURSO="Fundamentos de JavaScript";
return NOMBRE_CURSO;
}
console.log(obtenerNombreCurso());
// --- Reto 4: Reasignación de strings ---
// Declara una variable con let llamada "mensaje" e inicialízala con "hola".
// Luego reasígnala a "adiós".
// Retorna un objeto con las propiedades:
// { inicial: "hola", final: "adiós" }
// Pista: guarda el valor inicial antes de reasignar.
function reasignarMensaje() {
// Tu código aquí
let mensaje="hola";
let inicial=mensaje;
mensaje="adiós";
let final=mensaje;
return {
inicial: inicial,
final: final
};
}
console.log(reasignarMensaje());
// --- Reto 5: Cálculo con const y let ---
// Declara una constante precioBase con valor 100.
// Declara una variable descuento con let e inicialízala en 10.
// Reasigna descuento a 25.
// Calcula el total como: precioBase - descuento.
// Retorna un objeto: { precioBase, descuento, total }
function calcularTotal() {
// Tu código aquí
const precioBase=100;
let descuento=10;
descuento= 25;
let total= precioBase-descuento;
return{
precioBase: precioBase,
descuento: descuento,
total: total
};
}
console.log(calcularTotal());
// --- Reto 6: Identificar tipos de dato ---
// Dentro de la función ya están declaradas tres variables.
// Completa el return usando typeof para cada una.
function identificarTipos() {
const edad = 25;
const nombre = "JavaScript";
const activo = true;
return {
tipoEdad: typeof(edad), // Reemplaza undefined por typeof de edad
tipoNombre: typeof(nombre), // Reemplaza undefined por typeof de nombre
tipoActivo: typeof(activo), // Reemplaza undefined por typeof de activo
};
}
console.log(identificarTipos());
// --- Reto 7: Hoisting ---
// Esta función simula el comportamiento del hoisting con var.
// Sin modificar el orden de las líneas, haz que la función
// retorne un objeto con:
// { antes: undefined, despues: "Oscar" }
// Pista: declara "nombre" con var después del primer acceso.
function demostrarHoisting() {
// Tu código aquí
// Paso 1: guarda el valor de "nombre" en una variable "antes"
var antes=nombre;
// Paso 2: declara var nombre = "Oscar"
var nombre="Oscar";
// Paso 3: guarda el valor de "nombre" en una variable "despues"
var despues=nombre;
// Paso 4: retorna { antes, despues }
return{
antes: antes,
despues: despues
};
}
console.log(demostrarHoisting());
module.exports = {
obtenerPI,
obtenerContador,
obtenerNombreCurso,
reasignarMensaje,
calcularTotal,
identificarTipos,
demostrarHoisting,
};
me consto, pero pase el primer challenge ajaja.
Una cosas más al parecer ahora el export es asi. Saludos!
// Ejecuta los tests con: npx vitest src/01-var-let-const
// ============================================
// --- Reto 1: Declarar una constante ---
// Declara una constante llamada PI con el valor 3.14159
// y retórnala.
function obtenerPI() {
const PI = 3.14159;
return PI;
}
// --- Reto 2: Reasignación con let ---
// Declara una variable con let llamada "contador" e inicialízala en 0.
// Luego reasígnala a 5.
// Retorna el valor final de contador.
function obtenerContador() {
let contador = 0;
contador = 5;
return contador;
}
// --- Reto 3: Constante de texto ---
// Declara una constante llamada NOMBRE_CURSO con el valor
// "Fundamentos de JavaScript" y retórnala.
function obtenerNombreCurso() {
const NOMBRE_CURSO = "Fundamentos de JavaScript";
return NOMBRE_CURSO;
}
// --- Reto 4: Reasignación de strings ---
// Declara una variable con let llamada "mensaje" e inicialízala con "hola".
// Luego reasígnala a "adiós".
// Retorna un objeto con las propiedades:
// { inicial: "hola", final: "adiós" }
// Pista: guarda el valor inicial antes de reasignar.
function reasignarMensaje() {
let mensaje ="hola";
let inicial = mensaje;
mensaje= "adiós";
let final = mensaje;
return { inicial: "hola", final: "adiós" };
//return { inicial, final }; //es igual al de arriba porque las variables se llaman igual que las propiedades del objeto
}
// --- Reto 5: Cálculo con const y let ---
// Declara una constante precioBase con valor 100.
// Declara una variable descuento con let e inicialízala en 10.
// Reasigna descuento a 25.
// Calcula el total como: precioBase - descuento.
// Retorna un objeto: { precioBase, descuento, total }
function calcularTotal() {
const precioBase = 100;
let descuento = 10;
descuento = 25;
const total = precioBase - descuento;
return { precioBase, descuento, total };
}
// --- Reto 6: Identificar tipos de dato ---
// Dentro de la función ya están declaradas tres variables.
// Completa el return usando typeof para cada una.
function identificarTipos() {
const edad = 25;
const nombre = "JavaScript";
const activo = true;
return {
tipoEdad: typeof edad,
tipoNombre: typeof nombre,
tipoActivo: typeof activo
};
}
// --- Reto 7: Hoisting ---
// Esta función simula el comportamiento del hoisting con var.
// Sin modificar el orden de las líneas, haz que la función
// retorne un objeto con:
// { antes: undefined, despues: "Oscar" }
// Pista: declara "nombre" con var después del primer acceso.
function demostrarHoisting() {
// Tu código aquí
// Paso 1: guarda el valor de "nombre" en una variable "antes"
var antes = nombre;
// Paso 2: declara var nombre = "Oscar"
var nombre = "Oscar";
// Paso 3: guarda el valor de "nombre" en una variable "despues"
var despues = nombre;
// Paso 4: retorna { antes, despues }
return { antes, despues };
}
console.log(demostrarHoisting());
module.exports = {
obtenerPI,
obtenerContador,
obtenerNombreCurso,
reasignarMensaje,
calcularTotal,
identificarTipos,
demostrarHoisting,
};
// ============================================// Reto: Var, Let y Const en JavaScript// ============================================// Completa cada función según las instrucciones.// Ejecuta los tests con: npx vitest src/01-var-let-const// ============================================// --- Reto 1: Declarar una constante ---// Declara una constante llamada PI con el valor .141593// y retórnala.functionobtenerPI(){constPI=3.14159;// Tu código aquíreturnPI;}// --- Reto 2: Reasignación con let ---// Declara una variable con let llamada "contador" e inicialízala en 0.// Luego reasígnala a 5.// Retorna el valor final de contador.functionobtenerContador(){let contador =0;// Tu código aquí contador =5;return contador;}// --- Reto 3: Constante de texto ---// Declara una constante llamada NOMBRE_CURSO con el valor// "Fundamentos de JavaScript" y retórnala.functionobtenerNombreCurso(){constNOMBRE_CURSO="Fundamentos de JavaScript";returnNOMBRE_CURSO;// Tu código aquí}// --- Reto 4: Reasignación de strings ---// Declara una variable con let llamada "mensaje" e inicialízala con "hola".// Luego reasígnala a "adiós".// Retorna un objeto con las propiedades:// { inicial: "hola", final: "adiós" }// Pista: guarda el valor inicial antes de reasignar.functionreasignarMensaje(){letMensaje="hola";let inicial =Mensaje;Mensaje="adiós";return{inicial: inicial,final:Mensaje};// Tu código aquí}// --- Reto 5: Cálculo con const y let ---// Declara una constante precioBase con valor 100.// Declara una variable descuento con let e inicialízala en 10.// Reasigna descuento a 25.// Calcula el total como: precioBase - descuento.// Retorna un objeto: { precioBase, descuento, total }functioncalcularTotal(){const precioBase =100;let descuento =10; descuento =25;const total = precioBase - descuento;return{ precioBase, descuento, total };// Tu código aquí}// --- Reto 6: Identificar tipos de dato ---// Dentro de la función ya están declaradas tres variables.// Completa el return usando typeof para cada una.functionidentificarTipos(){const edad =25;const nombre ="JavaScript";const activo =true;return{tipoEdad:typeof edad,// Reemplaza undefined por typeof de edadtipoNombre:typeof nombre,// Reemplaza undefined por typeof de nombretipoActivo:typeof activo,// Reemplaza undefined por typeof de activo};}// --- Reto 7: Hoisting ---// Esta función simula el comportamiento del hoisting con var.// Sin modificar el orden de las líneas, haz que la función// retorne un objeto con:// { antes: undefined, despues: "Oscar" }// Pista: declara "nombre" con var después del primer acceso.functiondemostrarHoisting(){// Tu código aquívarAntes= nombre // Paso 1: guarda el valor de "nombre" en una variable "antes"var nombre ="Oscar";// Paso 2: declara var nombre = "Oscar"var despues = nombre;// Paso 3: guarda el valor de "nombre" en una variable "despues"return{antes:undefined,despues:"Oscar"};// Paso 4: retorna { antes, despues }}module.exports={ obtenerPI, obtenerContador, obtenerNombreCurso, reasignarMensaje, calcularTotal, identificarTipos, demostrarHoisting,};
Aquí esta el reto
// ******* R E T O D E V A R I A B L E S *******// --- Reto 1: Declarar una constante ---functionobtenerPI(){constPI=3.1416;returnPI;}// --- Reto 2: Reasignación con let ---functionobtenerContador(){let contador =0; contador =5;return contador;}// --- Reto 3: Constante de texto ---functionobtenerNombreCurso(){constNOMBRE_CURSO='Fundamentos de JavaScript';returnNOMBRE_CURSO;}// --- Reto 4: Reasignación de strings ---functionreasignarMensaje(){let mensaje ='Hola';const inicial = mensaje; mensaje ='Adiós';return{inicial: inicial,final: mensaje };}// --- Reto 5: Cálculo con const y let ---functioncalcularTotal(){const precioBase =100;let descuento =10; descuento =25;const total = precioBase - descuento;return{precioBase: precioBase,descuento: descuento,total: total };}// --- Reto 6: Identificar tipos de dato ---functionidentificarTipos(){const edad =25;const nombre ="JavaScript";const activo =true;return{tipoEdad:typeof edad,tipoNombre:typeof nombre,tipoActivo:typeof activo
}}// --- Reto 7: Hoisting ---functiondemostrarHoisting(){let antes = nombre;var nombre ="Oscar";let despues = nombre;return{antes: antes,despues: despues
}}module.exports={ obtenerPI, obtenerContador, obtenerNombreCurso, reasignarMensaje, calcularTotal, identificarTipos, demostrarHoisting
};
functionobtenerPI(){const pi=3.14159;return pi;}functionobtenerContador(){let contador =0; contador =5;return contador;}functionobtenerNombreCurso(){constNOMBRE_CURSO="Fundamentos de JavaScript";returnNOMBRE_CURSO;}functionreasignarMensaje(){let mensaje ="hola";const inicial = mensaje; mensaje ="adiós"return{inicial: inicial,final:mensaje}}functioncalcularTotal(){const precioBase =100;let descuento =10; descuento =25;let total = precioBase - descuento;return{precioBase:precioBase,descuento: descuento,total:total}}functionidentificarTipos(){const edad =25;const nombre ="JavaScript";const activo =true;return{tipoEdad:typeof edad,// Reemplaza undefined por typeof de edadtipoNombre:typeof nombre,// Reemplaza undefined por typeof de nombretipoActivo:typeof activo,// Reemplaza undefined por typeof de activo};}functiondemostrarHoisting(){let antes = nombre;var nombre ="Oscar";let despues = nombre
return{antes,despues}}module.exports={ obtenerPI, obtenerContador, obtenerNombreCurso, reasignarMensaje, calcularTotal, identificarTipos, demostrarHoisting,};
npx vitest --watch src/01-var-let-const
no entiendo nada esto.. eh creado todo en visual estudio code despues abri la ventana del terminal y esscribi eso y luedo que tengo que hacer?
no entiendo nadaaa porque usan return? y function? eh comprendido bien las variables pero los ejercicios no los enteiendo nada
Para quienes estan teniendo este error al correr los tests de los challenges:
FAIL src/01-var-let-const/challenge.test.js[ src/01-var-let-const/challenge.test.js]ReferenceError: module is not defined inES module scope
This file is being treated as an ES module because it has a '.js' file extension and '.../platzi/retos-javascript-fundamentos/package.json' contains "type":"module".To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Simplemente debemos reemplazar unas lineas de código en los siguientes archivos:
challenge.js: al final del archivo cuando se exportan las funciones, debe quedar asi:
El problema ocurre porque el proyecto esta establecido para trabajar con ESM (ECMAScript Modules), esto se sabe viendo en la linea "type": "module" del archivo package.json que indica que vamos a usar ESM, pero en el código del challenge y el test se usa sintaxis de CJS (CommonJS), por lo cual sale el error, no se pueden mezclar estas sintaxis. Hoy en día de preferencia se esta usando como standard ESM, para todos los proyectos nuevos, y CJS se usa en proyectos o librerías legacy que aun lo usan, el buen Manz tiene este post donde se explica un poco mas
Desconozco porque el proyecto de Challenges está así, y no se porque al parecer algunos compañeros si les funcionó tal cual, pero si te ocurrió como a mi, entonces esta es la explicación. ✅
Los retos dejados en la clase:
// --- Reto 1: Declarar una constante ---// Declara una constante llamada PI con el valor 3.14159// y retórnala.functionobtenerPI(){constPI=3.14159returnPI}console.log(obtenerPI())// --- Reto 2: Reasignación con let ---// Declara una variable con let llamada "contador" e inicialízala en 0.// Luego reasígnala a 5.// Retorna el valor final de contador.functionobtenerContador(){let contador =0 contador =5return contador
}console.log(obtenerContador())// --- Reto 3: Constante de texto ---// Declara una constante llamada NOMBRE_CURSO con el valor// "Fundamentos de JavaScript" y retórnala.functionobtenerNombreCurso(){constNOMBRE_CURSO="Fundamentos de JavaScript"returnNOMBRE_CURSO}console.log(obtenerNombreCurso())// --- Reto 4: Reasignación de strings ---// Declara una variable con let llamada "mensaje" e inicialízala con "hola".// Luego reasígnala a "adiós".// Retorna un objeto con las propiedades:// { inicial: "hola", final: "adiós" }// Pista: guarda el valor inicial antes de reasignar.functionreasignarMensaje(){let mensaje ="hola";const saludo = mensaje; mensaje ="adiós"return{inicial: saludo,final: mensaje
}}console.log(reasignarMensaje())// --- Reto 5: Cálculo con const y let ---// Declara una constante precioBase con valor 100.// Declara una variable descuento con let e inicialízala en 10.// Reasigna descuento a 25.// Calcula el total como: precioBase - descuento.// Retorna un objeto: { precioBase, descuento, total }functioncalcularTotal(){const precioBase =100let descuento =10 descuento =25let total = precioBase-descuento
return{ precioBase, descuento, total
}}console.log(calcularTotal())// --- Reto 6: Identificar tipos de dato ---// Dentro de la función ya están declaradas tres variables.// Completa el return usando typeof para cada una.functionidentificarTipos(){const edad =25;const nombre ="JavaScript";const activo =true;return{tipoEdad:typeof(edad),// Reemplaza undefined por typeof de edadtipoNombre:typeof(nombre),// Reemplaza undefined por typeof de nombretipoActivo:typeof(activo),// Reemplaza undefined por typeof de activo};}console.log(identificarTipos())// --- Reto 7: Hoisting ---// Esta función simula el comportamiento del hoisting con var.// Sin modificar el orden de las líneas, haz que la función// retorne un objeto con:// { antes: undefined, despues: "Oscar" }// Pista: declara "nombre" con var después del primer acceso.functiondemostrarHoisting(){// Tu código aquí// Paso 1: guarda el valor de "nombre" en una variable "antes"var antes ="nombre"// Paso 2: declara var nombre = "Oscar"var nombre ="Oscar"// Paso 3: guarda el valor de "nombre" en una variable "despues"var despues = nombre
// Paso 4: retorna { antes, despues }return{ antes, despues
}}console.log(demostrarHoisting())
// --- Reto 1: Declarar una constante ---
// Declara una constante llamada PI con el valor 3.14159
// y retórnala.
function obtenerPI() {
const PI = 3.14159
return PI
}
console.log(obtenerPI())
// --- Reto 2: Reasignación con let ---
// Declara una variable con let llamada "contador" e inicialízala en 0.
// Luego reasígnala a 5.
// Retorna el valor final de contador.
function obtenerContador() {
let contador = 0
contador =5
return contador
}
console.log(obtenerContador())
// --- Reto 3: Constante de texto ---
// Declara una constante llamada NOMBRE_CURSO con el valor
// "Fundamentos de JavaScript" y retórnala.
function obtenerNombreCurso() {
const NOMBRE_CURSO = "Fundamentos de JavaScript"
return NOMBRE_CURSO
}
console.log(obtenerNombreCurso())
// --- Reto 4: Reasignación de strings ---
// Declara una variable con let llamada "mensaje" e inicialízala con "hola".
// Luego reasígnala a "adiós".
// Retorna un objeto con las propiedades:
// { inicial: "hola", final: "adiós" }
// Pista: guarda el valor inicial antes de reasignar.
function reasignarMensaje() {
let mensaje = "hola";
const saludo = mensaje;
mensaje = "adiós"
return{
inicial: saludo,
final: mensaje
}
}
console.log(reasignarMensaje())
// --- Reto 5: Cálculo con const y let ---
// Declara una constante precioBase con valor 100.
// Declara una variable descuento con let e inicialízala en 10.
// Reasigna descuento a 25.
// Calcula el total como: precioBase - descuento.
// Retorna un objeto: { precioBase, descuento, total }
function calcularTotal() {
const precioBase = 100
let descuento = 10
descuento = 25
let total = precioBase-descuento
return{
precioBase,
descuento,
total
}
}
console.log(calcularTotal())
// --- Reto 6: Identificar tipos de dato ---
// Dentro de la función ya están declaradas tres variables.
// Completa el return usando typeof para cada una.
function identificarTipos() {
const edad = 25;
const nombre = "JavaScript";
const activo = true;
return {
tipoEdad: typeof(edad), // Reemplaza undefined por typeof de edad
tipoNombre: typeof(nombre), // Reemplaza undefined por typeof de nombre
tipoActivo: typeof(activo), // Reemplaza undefined por typeof de activo
};
}
console.log(identificarTipos())
// --- Reto 7: Hoisting ---
// Esta función simula el comportamiento del hoisting con var.
// Sin modificar el orden de las líneas, haz que la función
// retorne un objeto con:
// { antes: undefined, despues: "Oscar" }
// Pista: declara "nombre" con var después del primer acceso.
function demostrarHoisting() {
// Tu código aquí
// Paso 1: guarda el valor de "nombre" en una variable "antes"
var antes = "nombre"
// Paso 2: declara var nombre = "Oscar"
var nombre = "Oscar"
// Paso 3: guarda el valor de "nombre" en una variable "despues"
var despues = nombre
// Paso 4: retorna { antes, despues }
return{
antes,
despues
}
}
console.log(demostrarHoisting())
Para verificar si se realizó el ejercicio correctamente se debe ejecutar el siguiente comando:
npx vitest challenge.test
Y si no se tiene instalado vitest se lo instala de la siguiente manera:
npm install -D vitest
npm init crea un package.json que centraliza la configuración del proyecto: nombre, versión, dependencias y scripts de automatización.
El package.json es importante porque:
Dependencias — registra qué librerías necesita tu proyecto. Cuando alguien clona tu repo solo corre npm install y se instala todo automáticamente, sin que tú le digas qué instalar manualmente.
Scripts — defines comandos cortos como npm start, npm test, npm run build en lugar de escribir comandos largos cada vez.
Versión y metadata — identifica tu proyecto si lo publicas en npm o lo compartes en equipo.
// --- Reto 1: Declarar una constante ---// Declara una constante llamada PI con el valor 3.14159// y retórnala.constPI=3.14159;functionobtenerPI(){returnPI;}// --- Reto 2: Reasignación con let ---// Declara una variable con let llamada "contador" e inicialízala en 0.// Luego reasígnala a 5.// Retorna el valor final de contador.functionobtenerContador(){let contador =0; contador =5;return contador;}// --- Reto 3: Constante de texto ---// Declara una constante llamada NOMBRE_CURSO con el valor// "Fundamentos de JavaScript" y retórnala.functionobtenerNombreCurso(){constNOMBRE_CURSO="Fundamentos de JavaScript";returnNOMBRE_CURSO;}// --- Reto 4: Reasignación de strings ---// Declara una variable con let llamada "mensaje" e inicialízala con "hola".// Luego reasígnala a "adiós".// Retorna un objeto con las propiedades:// { inicial: "hola", final: "adiós" }// Pista: guarda el valor inicial antes de reasignar.functionreasignarMensaje(){let mensaje ='hola';let mensajeInicial = mensaje; mensaje ='adiós';return{inicial: mensajeInicial,final: mensaje,}}// --- Reto 5: Cálculo con const y let ---// Declara una constante precioBase con valor 100.// Declara una variable descuento con let e inicialízala en 10.// Reasigna descuento a 25.// Calcula el total como: precioBase - descuento.// Retorna un objeto: { precioBase, descuento, total }functioncalcularTotal(){const precioBase =100;let descuento =10; descuento =25;let total = precioBase - descuento;return{precioBase: precioBase,descuento: descuento,total: total,}}// --- Reto 6: Identificar tipos de dato ---// Dentro de la función ya están declaradas tres variables.// Completa el return usando typeof para cada una.functionidentificarTipos(){const edad =25;const nombre ="JavaScript";const activo =true;return{tipoEdad:typeof edad,// Reemplaza undefined por typeof de edadtipoNombre:typeof nombre,// Reemplaza undefined por typeof de nombretipoActivo:typeof activo,// Reemplaza undefined por typeof de activo};}// --- Reto 7: Hoisting ---// Esta función simula el comportamiento del hoisting con var.// Sin modificar el orden de las líneas, haz que la función// retorne un objeto con:// { antes: undefined, despues: "Oscar" }// Pista: declara "nombre" con var después del primer acceso.functiondemostrarHoisting(){// Paso 1: guarda el valor de "nombre" en una variable "antes"let antes = nombre;// Paso 2: declara var nombre = "Oscar"var nombre ="Oscar";// Paso 3: guarda el valor de "nombre" en una variable "despues"let despues = nombre;// Paso 4: retorna { antes, despues }return{antes: antes,despues: despues,}}module.exports={ obtenerPI, obtenerContador, obtenerNombreCurso, reasignarMensaje, calcularTotal, identificarTipos, demostrarHoisting,};
// ============================================
// Reto: Var, Let y Const en JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: npx vitest src/01-var-let-const
// ============================================
// --- Reto 1: Declarar una constante ---
// Declara una constante llamada PI con el valor 3.14159
// y retórnala.
function obtenerPI() {
// Tu código aquí
const PI = 3.14159;
return PI;
}
// --- Reto 2: Reasignación con let ---
// Declara una variable con let llamada "contador" e inicialízala en 0.
// Luego reasígnala a 5.
// Retorna el valor final de contador.
function obtenerContador() {
// Tu código aquí
let contador=0;
contador=5;
return contador;
}
// --- Reto 3: Constante de texto ---
// Declara una constante llamada NOMBRE_CURSO con el valor
// "Fundamentos de JavaScript" y retórnala.
function obtenerNombreCurso() {
// Tu código aquí
const NOMBRE_CURSO="Fundamentos de JavaScript";
return NOMBRE_CURSO;
}
// --- Reto 4: Reasignación de strings ---
// Declara una variable con let llamada "mensaje" e inicialízala con "hola".
// Luego reasígnala a "adiós".
// Retorna un objeto con las propiedades:
// { inicial: "hola", final: "adiós" }
// Pista: guarda el valor inicial antes de reasignar.
function reasignarMensaje() {
// Tu código aquí
let mensaje="Hola";
let mensajeInicial=mensaje;
mensaje="Adios";
return {inicial: mensajeInicial, final: mensaje};
}
// --- Reto 5: Cálculo con const y let ---
// Declara una constante precioBase con valor 100.
// Declara una variable descuento con let e inicialízala en 10.
// Reasigna descuento a 25.
// Calcula el total como: precioBase - descuento.
// Retorna un objeto: { precioBase, descuento, total }
function calcularTotal() {
// Tu código aquí
const precioBase = 100;
let descuento = 10;
descuento = 25;
const total = precioBase - descuento;
return { precioBase, descuento, total };
}
function identificarTipos() {
const edad = 25;
const nombre = "JavaScript";
const activo = true;
return {
tipoEdad: typeof edad, // Reemplaza undefined por typeof de edad
tipoNombre: typeof nombre, // Reemplaza undefined por typeof de nombre
tipoActivo: typeof activo, // Reemplaza undefined por typeof de activo
};
}
// --- Reto 7: Hoisting ---
// Esta función simula el comportamiento del hoisting con var.
// Sin modificar el orden de las líneas, haz que la función
// retorne un objeto con:
// { antes: undefined, despues: "Oscar" }
// Pista: declara "nombre" con var después del primer acceso.
function demostrarHoisting() {
// Tu código aquí
// Paso 1: guarda el valor de "nombre" en una variable "antes"
// Paso 2: declara var nombre = "Oscar"
// Paso 3: guarda el valor de "nombre" en una variable "despues"
// Paso 4: retorna { antes, despues }
var nombre;
const antes = nombre; // Antes de declarar "nombre", su valor es undefined
