Renato Daniel Carvajal Bustos
¿Que paso con el curso javascript desde cero?
Christopher Andrés Guano Valencia
Está siendo actualizado, para abarcar más temas y con mejores explicaciones y con un diseño mejor.
¡Nunca pares de aprender! 🚀🚀
Imagina que estás en pleno Black Friday, rodeado de ofertas, con decenas de prendas en la mano y sin saber cuánto pagarás realmente por cada una. Esa situación cotidiana es perfecta para entender por qué las funciones en JavaScript son una de las herramientas más poderosas que puedes aprender. Una función es un fragmento de código reutilizable, como una pieza de Lego que puedes ensamblar una y otra vez para construir lo que necesites.
¿Qué es una función y por qué se compara con piezas de Lego?
Las funciones son bloques de código genéricos que encapsulan una tarea específica para ejecutarla cuantas veces sea necesario sin reescribir la lógica [0:10]. Así como con un set de Lego puedes armar edificios, carros o casas usando las mismas fichas, con una función defines la lógica una vez y la aplicas a distintos datos.
En el ejemplo del Black Friday, cada prenda tiene un precio original y un porcentaje de descuento, pero no tienes el precio final. Hacer ese cálculo manualmente con cada artículo consume tiempo. Una función resuelve eso: le entregas el precio y el porcentaje, y ella te devuelve el valor que debes pagar [1:05].
Antes de escribir código, conviene identificar dos elementos esenciales:
¿Cuál es la anatomía de una función en JavaScript?
Cada función tiene partes bien definidas que conviene reconocer [2:50]:
function: indica al intérprete que estás declarando una función.{}: delimitan el cuerpo de la función, es decir, el bloque donde vive toda la lógica.return: devuelve un valor al exterior. También es opcional; una función puede ejecutar código sin retornar nada.¿Cuál es la diferencia entre parámetros y argumentos?
Los parámetros son las variables genéricas declaradas en la definición de la función. Los argumentos son los valores concretos que pasas al momento de invocarla. Por ejemplo, si la función suma recibe a y b como parámetros, al llamarla con suma(3, 5) los números 3 y 5 son los argumentos [4:10].
¿Cómo crear una función para calcular precios con descuento?
Con la teoría clara, el paso siguiente es escribir el código. La función calculateDiscountedPrice recibe dos parámetros: price y discountPercentage [4:45].
javascript function calculateDiscountedPrice (price, discountPercentage) { const discount = (price * discountPercentage) / 100; const priceWithDiscount = price - discount; return priceWithDiscount; }
La fórmula es directa: se multiplica el precio por el porcentaje y se divide entre cien para obtener el monto del descuento. Luego se resta al precio original y se retorna el resultado.
¿Cómo se invoca y se verifica el resultado?
Para ejecutar la función basta con asignar valores a las variables de entrada y llamarla con esos argumentos [6:15]:
javascript const originalPrice = 100; const discountPercentage = 20; const finalPrice = calculateDiscountedPrice(originalPrice, discountPercentage);
console.log("Original price: " + originalPrice); console.log("Discount: " + discountPercentage); console.log("Price with discount: " + finalPrice);
Al correr el programa con node, la consola muestra:
Si cambias originalPrice a otro valor y discountPercentage a 15, el programa recalcula automáticamente sin modificar la función [7:30]. Esa es la esencia de la reutilización: un mismo bloque de código sirve para todas las prendas que quieras evaluar.
Ahora que sabes construir funciones reutilizables, prueba a extender este ejemplo: agrega un tercer parámetro para el impuesto o crea una función que compare dos precios con descuento y te diga cuál es la mejor oferta. Comparte tu solución en los comentarios.
Una función es un conjunto de instrucciones tareas que realiza una tarea o asigna un valor, también se puede definir como un conjunto de instrucciones que realiza una tarea o calcula un valor
Una definición de función (también denominada declaración de función o expresión de función) consta de la palabra clave function, seguida de:
{ ... }.function calculateDiscountedPrice (price, discountPercentage){ //Se declaran las operaciones const discount = (price * discountPercentage) / 100; const priceWithDiscount = price - discount; return priceWithDiscount; } // Se asigna un valor const originalPrice = 100; const discountPercentage = 20; const finalPrice = calculateDiscountedPrice(originalPrice,discountPercentage); // Se mandan a imprimir los valores console.log (`Precio original de la prenda: ${originalPrice}`); console.log(`Descuento de la prenda: ${discountPercentage} `); console.log(`Precio en rebaja: ${finalPrice}`);
Hola,
const prendasEnDescuento = { camiseta: 20, pantalon: 100, } function descuento(price, discount){ return (price * (100 - discount)) / 100 } console.log(descuento(prendasEnDescuento.pantalon, 20))
en la función que realizamos en clase, lo único que modifique para que el precio y el descuento fuera dinámico, fue pedir el precio original y el descuento con un prompt.
Renato Daniel Carvajal Bustos
¿Que paso con el curso javascript desde cero?
Christopher Andrés Guano Valencia
Está siendo actualizado, para abarcar más temas y con mejores explicaciones y con un diseño mejor.
¡Nunca pares de aprender! 🚀🚀
Cristian Alejandro Pereira Rodriguez
Basándome en lo aprendido según la ruta de aprendizaje, hice esto.
Jonathan Lozano Alcalá
👉Se nota mucho el cambio con respecto al anterior (profeTypo), Estefany explica con mas detalle y lo mas importante, no se equivoca al escribir. 🙄
Fernando Emilio Díaz López
La neta si, duran mas las clases, pero queda bien claro todo...
Red Robles
Estoy absolutamente en desacuedo con lo que dices, Diego es uno de los mejores profesores de Platzi, el no tiene la culpa de que hayan extraido partes de una curso antiguo para incertarla aquí, él explica detalladamente y con lujo de detalles cada cosa, ademas vi que estabas trabado en temas de HTML y CSS, cosas que se supones que debiste tomar antes de llegar aquí, Estafany es buena, pero Diego es genial!
ALEJANDRO OLGUIN
Les comparto como implemente la funcion para calcular los descuentos de un objeto.
ropa = { camisa: 50, pantalon: 80, zapatos: 120, chaqueta: 150, vestido: 100, falda: 70, sombrero: 40, bufanda: 30, guantes: 25, abrigo: 200 } const descuento = 10; // 10% de descuento function calculoDescuento(precio, descuento) { precio = precio - (precio * (descuento / 100)); return precio; } for (let prenda in ropa) { let precioConDescuento = calculoDescuento(ropa[prenda], descuento); console.log(`El precio de ${prenda} con descuento es: ${precioConDescuento} dólares`); }
José Antonio De La Paz Fonseca
Recuerdan que los métodos son funciones adentro de un objeto?, bueno, resulta que el método prompt, alert o confirm son funciones que se encuentran dentro del objeto global window de los navegadores web, y entornos como Node.js no lo tienen disponible sin la instalación de una librería.
Juan Diego Bedoya Gutierrez
Demasiada información y una función muy compleja para las personas que apenas iniciamos,
Calvin Rafael Bobadilla Fernandez
NOTAS: (O apuntes qsy lo mismo)
Elvis Milan
functions
David Rangel
Les comparto el código con Typescript:
// para correr codigo ts-node function.ts // FUNCIONES function calculatedDiscountedPrice(price: number, discountPercentage: number) { const discount = (price * discountPercentage) / 100; const priceDiscount = price - discount; return priceDiscount; } const origingalPrice: number = 120; const discountPercentage: number = 14; const finalPrice: number = calculatedDiscountedPrice( origingalPrice, discountPercentage ); console.log('Oiriginal Price: $', origingalPrice); console.log('Dicsount (%): ', discountPercentage); console.log('Price with discount: $', finalPrice);
Juan Pablo Campuzano Monsalve
Los parámetros son las variables que se definen en la declaración de una función. Son los placeholders para los valores que se pasarán cuando se llame a la función. Por otro lado, los argumentos son los valores reales que se pasan a la función cuando esta es invocada.
Por ejemplo, en la función function calcular(precio, descuento), precio y descuento son parámetros. Si llamas a la función con calcular(100, 20), 100 y 20 son los argumentos.
pedro albenis parrado vargas
NOOOO este ejemplo me volvio miercoles!!!
humberto viveros
Sí, es posible pasar una función como argumento a otra función en JavaScript y que esta función tenga sus propios argumentos. Al hacerlo, la función que recibe la función como argumento puede llamarla y pasarle los parámetros que necesite. Esto se conoce comúnmente como "callback".
Por ejemplo:
function saludar(nombre) { console.log(`Hola, ${nombre}`); } function ejecutarCallback(callback, nombre) { callback(nombre); } ejecutarCallback(saludar, "Juan");
En este caso, saludar es la función pasada como argumento y recibe el parámetro nombre.
Samir Vargas
function calculateDiscounted(Price, Discount) { return Discount * Price / 100 } price = prompt('Ingrese el precio de su producto') discount = prompt('Ingrese el descuento del prodcuto') console.log(getNewProduct(price, discount)) ```function calculateDiscounted(Price, Discount) { return Discount \* Price / 100} price = prompt('Ingrese el precio de su producto')discount = prompt('Ingrese el descuento del prodcuto')console.log(getNewProduct(price, discount))
Danelia Sanchez Sanchez
Javascript Function and Function Expressions
Jose Maldonado
Los parámetros son variables que se definen en la declaración de una función, mientras que los argumentos son los valores que se pasan a la función cuando se llama. Por ejemplo, en la función calculateDiscountedPrice(price, discount), price y discount son parámetros, y cuando llamas a la función con calculateDiscountedPrice(100, 20), los valores 100 y 20 son los argumentos. Esta distinción es fundamental para entender cómo funcionan las funciones en JavaScript.
theyank019
Algo más corto
function calculateDiscountedPrice (price, discountPercentage){ return price*((100-discountPercentage)/100)}console.log(`el valor Total es de ${calculateDiscountedPrice(100,20)} pesos`)
Yamid Horacio Rodríguez
¡Interesante analogía!
Luis Angel Frias Herrera
Les comparto mi versión de esta clase