Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Clase 20 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Qué es una función en JavaScript?

Las funciones en JavaScript son bloques de código reutilizables que permiten realizar tareas específicas una y otra vez. Imagina que son como piezas de Lego: puedes utilizarlas para crear múltiples objetos con las mismas piezas. Son una herramienta poderosa que, una vez definida, puede utilizarse repetidamente con distintos conjuntos de datos, al igual que usarías un cálculo una y otra vez durante un evento de Black Friday para aplicar descuentos automáticamente a los precios de ropa. Gracias a las funciones, evitamos duplicar código, ahorramos tiempo y minimizamos errores.

¿Cómo se estructura una función?

Una función en JavaScript tiene una estructura clara, conocida como su "anatomía". Cada parte cumple un papel crucial en su funcionamiento:

Definición de la función:
- Comienza con la palabra clave function.
- Sigue el nombre de la función, que debe estar en camelCase (la primera letra minúscula y las iniciales de palabras subsiguientes en mayúsculas).
Parámetros:
- Los parámetros son variables que la función utiliza internamente para procesar datos. Son opcionales y permiten que la función sea más flexible.
Cuerpo de la función:
- Se encierra entre llaves {}.
- Es donde se escribe el código que la función ejecutará. Puede incluir un return para devolver un valor al finalizar la ejecución, aunque esto también es opcional.
Llamado de función:
- Para ejecutar una función, se utiliza su nombre seguido de paréntesis que, opcionalmente, contienen argumentos; estos son los valores reales que reemplazan a los parámetros.

¿Cómo crear funciones para calcular descuentos?

Veamos la creación paso a paso de una función que calcule el precio después de aplicar un descuento, algo útil para eventos como el Black Friday.

function calculateDiscountedPrice(price, discountPercentage) {
    const discount = (price * discountPercentage) / 100;
    const priceWithDiscount = price - discount;
    return priceWithDiscount;
}

¿Cómo se usa esta función?

Definir Variables:

Primero, define las variables para el precio original y el porcentaje de descuento.

const originalPrice = 100; // Precio de la prenda
const discountPercentage = 20; // Descuento del 20%

Calcular el Precio Final:
- Utiliza la función con estos valores para obtener el precio con descuento.
```
const finalPrice = calculateDiscountedPrice(originalPrice, discountPercentage);
```

Salida de Resultados:

Puedes usar un console.log para mostrar los resultados en consola.

console.log("Precio Original: " + originalPrice);
console.log("Descuento: " + discountPercentage + "%");
console.log("Precio con Descuento: " + finalPrice);

Al ejecutar este programa, verás en la consola cuánto deberías pagar en base al descuento especificado. Y lo mejor de todo: puedes cambiar los valores de entrada y calcular precios para diferentes prendas en cuestión de milisegundos.

¿Por qué es útil este enfoque?

Crear funciones como calculateDiscountedPrice permite tener un código claro, comprensible, y flexible, que se adapta a diferentes situaciones con facilidad. Esta técnica es especialmente valiosa en el desarrollo de software, donde la eficiencia y la reusabilidad del código son esenciales. Además, al generar un código más genérico, como el cálculo de precios con descuentos, puedes personalizar la misma función para múltiples necesidades con simples cambios de parámetros.

¡Así que sigue practicando y experimentando con funciones! Con el tiempo, crearás aplicaciones más sofisticadas y confiables. ¡El cielo es el límite!

Jafeth Jesús Sánchez Sánchez

student•

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:

El nombre de la función.
Una lista de parámetros de la función, entre paréntesis y separados por comas.
Las declaraciones de JavaScript que definen la función, encerradas entre llaves, { ... }.

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}`);

Miguel Acosta

student•

Hola,

const prendasEnDescuento = {
    camiseta: 20,
    pantalon: 100,
}

function descuento(price, discount){
    return (price * (100 - discount)) / 100 
}

console.log(descuento(prendasEnDescuento.pantalon, 20))

Alexander Bonilla Garcia

student•

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

student•

¿Que paso con el curso javascript desde cero?

Christopher Andrés Guano Valencia

student•

Está siendo actualizado, para abarcar más temas y con mejores explicaciones y con un diseño mejor.

¡Nunca pares de aprender! 🚀🚀

Jonathan Lozano Alcalá

student•

👉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

student•

La neta si, duran mas las clases, pero queda bien claro todo...

Red Robles

student•

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!

José Antonio De La Paz Fonseca

student•

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.

Calvin Rafael Bobadilla Fernandez

student•

NOTAS: (O apuntes qsy lo mismo)

Elvis Milan

student•

functions

ALEJANDRO OLGUIN

student•

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`);
}

Juan Diego Bedoya Gutierrez

student•

Demasiada información y una función muy compleja para las personas que apenas iniciamos,

humberto viveros

student•

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

student•

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

student•

Javascript Function and Function Expressions

Jose Maldonado

student•

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

student•

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

student•

¡Interesante analogía!

Ramón Eduardo Valdez Arámburo

student•

Excelente Explicación!!

David Rangel

student•

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);

Victor R Vele

student••

Están los result, más simplificado y es igual, pero me gustaria saber cual es la ventaja con lo que la profe nos enseña...!

Roxana Solano Lumbi

student•

Juan Pablo Campuzano Monsalve

student•

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.