Domina las funciones en JavaScript con ejemplos claros y buenas prácticas de nombrado. Aprende a reutilizar código, diferenciar parámetros y argumentos, y usar arrow functions con valores por defecto para escribir programas más legibles y mantenibles.
¿Qué es una función en JavaScript y cómo reutilizar código?
Una función es un bloque reutilizable que recibe datos, ejecuta una tarea específica y retorna un resultado. Solo se ejecuta cuando es llamada. Su anatomía incluye la palabra reservada function, un nombre descriptivo, parámetros, un bloque de código y return.
Usa nombres claros que expliquen la tarea que realizan.
Retorna un valor para poder reutilizar el resultado.
Emplea template literals para componer cadenas.
¿Cómo declarar y retornar un saludo?
functionsaludar(nombre){return`Hola, ${nombre}`;}
¿Cómo invocar y ver resultados en consola?
const mensaje =saludar('Óscar');console.log(mensaje);// Hola, Óscarconst mensajeDos =saludar('Felipe');console.log(mensajeDos);// Hola, Felipe
¿Cómo se diferencian parámetros y argumentos en funciones?
Los parámetros son las variables definidas en la función. Los argumentos son los valores reales que pasas al llamar la función. Nombrar bien las funciones y mantenerlas enfocadas en una sola tarea facilita leer el código, depurar y probar.
Parámetros: variables internas que la función espera recibir.
Argumentos: valores que se envían al invocar la función.
Retorno: objeto o valor que la función entrega para su uso posterior.
¿Qué son las arrow functions y cómo usar valores por defecto?
Una arrow function se asigna a una constante y permite una sintaxis concisa. Puede ser de una sola línea con retorno implícito o incluir un bloque. También puedes definir parámetros por defecto para valores opcionales.
Arrow function: sintaxis corta con => para funciones expresadas.
Parámetros por defecto: asignan un valor si no se pasa argumento.
Fecha de creación: usa Date.now() para obtener Unix time.
¿Cómo se define una arrow function simple?
constmultiplicar=(a, b)=> a * b;console.log(multiplicar(4,5));// 20
¿Cómo aplicar parámetros por defecto y fecha de creación?
const crearNota =(contenido, titulo ='sin título')=>{return{ titulo, contenido,creado:Date.now(),// *timestamp* en milisegundos};};const notaUno =crearNota('Mi contenido');const notaDos =crearNota('Otro contenido','Mi nota');console.log(notaUno);console.log(notaDos);
titulo: se usa el valor recibido o el texto por defecto.
contenido: almacena el texto pasado como argumento.
creado: número en milisegundos que representa el Unix time actual.
¿Tienes dudas o un ejemplo propio para practicar funciones, parámetros por defecto o arrow functions? Compártelo en comentarios y enriquece la conversación con tu solución.
// ============================================// Reto: Anatomía de funciones en JavaScript// ============================================// Practica funciones declaradas, parámetros y argumentos,// arrow functions y parámetros por defecto.// Ejecuta los tests con: npx vitest src/13-anatomia-funciones// ============================================// --- Reto 1: Función que retorna un saludo ---// Recibe "nombre" (string). Retorna un string con template literal: "Hola, {nombre}".// Ejemplo: saludar('Óscar') → "Hola, Óscar"functionsaludar(nombre){// Tu código aquíreturn`Hola, ${nombre}`;}console.log(saludar('Lizeth'));// --- Reto 2: Función que crea un objeto usuario (parámetros y retorno) ---// Recibe "nombre" (string) y "edad" (número). Retorna un objeto { nombre, edad }.// Los parámetros son las variables; los argumentos son los valores al invocar.// Ejemplo: crearUsuario('Ana', 25) → { nombre: 'Ana', edad: 25 }functioncrearUsuario(nombre, edad){// Tu código aquíreturn{nombre: nombre,edad: edad
};}console.log(crearUsuario('Lizeth',20));// --- Reto 3: Arrow function con retorno implícito ---// Recibe "a" y "b" (números). Retorna a * b (equivalente a una arrow de una línea: (a, b) => a * b).// Ejemplo: multiplicar(4, 5) → 20functionmultiplicar(a, b){// Tu código aquí}constfuncion=(a,b)=> a*b;//al ser solo una línea no necesita 'return', ya que está implícito.console.log(funcion(2,6));// --- Reto 4: Arrow function con parámetro por defecto y Date.now() ---// Recibe "contenido" (string) y "titulo" (string, opcional, por defecto 'sin título').// Retorna un objeto { titulo, contenido, creado } donde creado = Date.now() (número en ms).// Ejemplo: crearNota('Mi contenido') → { titulo: 'sin título', contenido: 'Mi contenido', creado: 1234567890123 }//function crearNota(contenido, titulo) {// Tu código aquí//}const crearNota =(contenido, titulo ='sin título')=>({titulo: titulo,contenido: contenido,fecha:Date.now()});console.log(crearNota('nota'));module.exports={ saludar, crearUsuario, multiplicar, crearNota,};
Las funciones flecha (arrow functions) son una forma más concisa de escribir funciones en JavaScript.
Se definen usando const, el nombre de la función, paréntesis para los parámetros, y luego => seguido del cuerpo de la función.
Un uso común es para funciones cortas de una sola línea, como en el ejemplo de multiplicar(a, b) => a * b;. También se pueden usar para funciones que manejan parámetros con valores por defecto, como crearNota(contenido, titulo = 'Sin título').
De la siguiente manera podemos tener la salida de la fecha con el siguiente output dia/mes/year hora
const nota1 = crearNota('Estudiar ciclos en JavaScript', 'Pendientes');
guardarNota(nota1);
const nota2 = crearNota('Configurar el servidor de Node', 'Hecho');
guardarNota(nota2);
mostrarNotasEnConsola();
// ============================================// Reto: Anatomía de funciones en JavaScript// ============================================// Practica funciones declaradas, parámetros y argumentos,// arrow functions y parámetros por defecto.// Ejecuta los tests con: npx vitest src/13-anatomia-funciones// ============================================// --- Reto 1: Función que retorna un saludo ---// Recibe "nombre" (string). Retorna un string con template literal: "Hola, {nombre}".// Ejemplo: saludar('Óscar') → "Hola, Óscar"functionsaludar(nombre){return`Hola ${nombre}`;}const saludo =saludar('Oscar');console.log(saludo);// --- Reto 2: Función que crea un objeto usuario (parámetros y retorno) ---// Recibe "nombre" (string) y "edad" (número). Retorna un objeto { nombre, edad }.// Los parámetros son las variables; los argumentos son los valores al invocar.// Ejemplo: crearUsuario('Ana', 25) → { nombre: 'Ana', edad: 25 }functioncrearUsuario(nombre, edad){return{ nombre, edad };}const usuario1 =crearUsuario('Ana',25);console.log(usuario1);// --- Reto 3: Arrow function con retorno implícito ---// Recibe "a" y "b" (números). Retorna a * b (equivalente a una arrow de una línea: (a, b) => a * b).// Ejemplo: multiplicar(4, 5) → 20constmultiplicar=(a, b)=> a * b;const multiplicacion1 =multiplicar(4,5);console.log(multiplicacion1);// --- Reto 4: Arrow function con parámetro por defecto y Date.now() ---// Recibe "contenido" (string) y "titulo" (string, opcional, por defecto 'sin título').// Retorna un objeto { titulo, contenido, creado } donde creado = Date.now() (número en ms).// Ejemplo: crearNota('Mi contenido') → { titulo: 'sin título', contenido: 'Mi contenido', creado: 1234567890123 }const crearNota =(contenido, titulo ='sin titulo')=>({ titulo, contenido,creado:Date().toLocalestring()});const nota1 =crearNota('Mi contenido');console.log(nota1);module.exports={ saludar, crearUsuario, multiplicar, crearNota,};
// ============================================
// Reto: Anatomía de funciones en JavaScript
// ============================================
// Practica funciones declaradas, parámetros y argumentos,
// arrow functions y parámetros por defecto.
// Ejecuta los tests con: npx vitest src/13-anatomia-funciones
// ============================================
// --- Reto 1: Función que retorna un saludo ---
// Recibe "nombre" (string). Retorna un string con template literal: "Hola, {nombre}".
// Ejemplo: saludar('Óscar') → "Hola, Óscar"
function saludar(nombre) {
return Hola ${nombre};
}
const saludo = saludar('Oscar');
console.log(saludo);
// --- Reto 2: Función que crea un objeto usuario (parámetros y retorno) ---
// Recibe "nombre" (string) y "edad" (número). Retorna un objeto { nombre, edad }.
// Los parámetros son las variables; los argumentos son los valores al invocar.
const crearNota = (contenido, titulo = 'sin titulo') =>
({
titulo,
contenido,
creado: Date().toLocalestring()
});
const nota1 = crearNota('Mi contenido');
console.log(nota1);
module.exports = {
saludar,
crearUsuario,
multiplicar,
crearNota,
};
// 1functionsaludar(nombre){return`Hola, ${nombre}`;}// 2functioncrearUsuario(nombre, edad){return{nombre,edad};}// 3functionmultiplicar(a, b){return a * b;}// 4functioncrearNota(contenido, titulo ="sin título"){return{ titulo , contenido,"creado":Date.now()}}
// ============================================// Reto: Anatomía de funciones en JavaScript// ============================================// Practica funciones declaradas, parámetros y argumentos,// arrow functions y parámetros por defecto.// Ejecuta los tests con: npx vitest src/13-anatomia-funciones// ============================================// --- Reto 1: Función que retorna un saludo ---// Recibe "nombre" (string). Retorna un string con template literal: "Hola, {nombre}".// Ejemplo: saludar('Óscar') → "Hola, Óscar"functionsaludar(nombre){// Tu código aquíreturn`Hola, ${nombre}`;}// --- Reto 2: Función que crea un objeto usuario (parámetros y retorno) ---// Recibe "nombre" (string) y "edad" (número). Retorna un objeto { nombre, edad }.// Los parámetros son las variables; los argumentos son los valores al invocar.// Ejemplo: crearUsuario('Ana', 25) → { nombre: 'Ana', edad: 25 }functioncrearUsuario(nombre, edad){// Tu código aquílet usuario ={ nombre, edad
};return usuario;}// --- Reto 3: Arrow function con retorno implícito ---// Recibe "a" y "b" (números). Retorna a * b (equivalente a una arrow de una línea: (a, b) => a * b).// Ejemplo: multiplicar(4, 5) → 20functionmultiplicar(a, b){// Tu código aquíconstmultiplicarParametros=(c, d)=> c * d;returnmultiplicarParametros(a, b);}// --- Reto 4: Arrow function con parámetro por defecto y Date.now() ---// Recibe "contenido" (string) y "titulo" (string, opcional, por defecto 'sin título').// Retorna un objeto { titulo, contenido, creado } donde creado = Date.now() (número en ms).// Ejemplo: crearNota('Mi contenido') → { titulo: 'sin título', contenido: 'Mi contenido', creado: 1234567890123 }functioncrearNota(contenido, titulo ='sin título'){// Tu código aquíconstcreaNotaArrow=(contenido, titulo)=>{const objeto ={titulo: titulo ||'sin título', contenido,creado:Date.now()};return objeto;}returncreaNotaArrow(contenido, titulo);}module.exports={ saludar, crearUsuario, multiplicar, crearNota,};