Esmeralda Gutiérrez Ramírez
Si tienes que copiar y pegar el mismo código eso merece ser una función
Alex Botello Pérez
a
Juan Camilo Maldonado Perez
¿Proximo tatuaje? 🤯
Cuando aprendes a programar, uno de los momentos más importantes es entender que repetir código es una señal de que algo se puede mejorar. En JavaScript, las funciones son la herramienta que te permite encapsular lógica, reutilizarla y mantener tu programa limpio. A través de una analogía cotidiana y un ejemplo práctico con el juego de piedra, papel o tijera, se explica paso a paso cómo crear, declarar y ejecutar funciones.
¿Qué son las funciones y por qué evitan copiar y pegar código?
Imagina que tienes hambre y vas a la tienda por un sándwich [0:03]. Esa secuencia de acciones —identificar la necesidad, ir al lugar, traer el objeto— la repites sin pensarlo, igual que andar en bicicleta. Tu cerebro crea caminos neuronales que automatizan esas tareas.
En programación ocurre algo muy parecido. Las funciones son pedacitos de código que, escritos de forma general, puedes reutilizar muchas veces [1:08]. La regla es clara: si tienes que copiar y pegar el mismo código, eso merece ser una función. En lugar de duplicar, simplemente la invocas cuando la necesitas.
Por ejemplo, una función llamada traer podría recibir dos parámetros: qué traer y de dónde traerlo [1:30]. Así de flexible:
javascript traer("sándwich", "tienda"); traer("ropa", "armario"); traer("papel", "baño");
Los parámetros se colocan entre paréntesis y permiten que una sola función sirva para múltiples propósitos.
¿Qué diferencia hay entre funciones que retornan y funciones que no retornan?
Algunas funciones devuelven un valor mediante la palabra clave return [2:25]. El resultado se puede almacenar en una variable, como cuando la función traer devuelve el sándwich y lo guardas en comida. Otras funciones, como alert, ejecutan una acción —mostrar una alerta en pantalla— pero no retornan nada [2:50].
¿Cómo se declara una función correctamente en JavaScript?
Al construir la función elección para el juego de piedra, papel o tijera, se aplican varias reglas fundamentales [4:05]:
function siempre va en minúscula.function delante.{} delimitan el bloque de código que pertenece a la función.javascript function eleccion(jugada) { let resultado = ""; if (jugada == 1) { resultado = "piedra"; } else if (jugada == 2) { resultado = "papel"; } else if (jugada == 3) { resultado = "tijera"; } else { resultado = "mal elegido"; } return resultado; }
¿Por qué es buena práctica declarar las funciones antes de usarlas?
Aunque JavaScript es permisivo y permite usar una función antes de declararla gracias al hoisting, en lenguajes más estrictos como C, C++, Java o Python eso no funciona [4:30]. Es una buena práctica acostumbrarse a definir primero y usar después.
¿Qué es el alcance de las variables dentro de una función?
Las variables declaradas dentro de una función solo existen ahí. Si necesitas un dato externo, debes pasarlo por parámetro [7:30]. JavaScript permite acceder a variables externas, pero no deberías hacerlo porque en lenguajes más estrictos eso no está permitido. Ser disciplinado desde el inicio te prepara para cualquier lenguaje.
¿Cómo se aplica la función al juego de piedra, papel o tijera?
Antes de crear la función, el código repetía bloques casi idénticos para el jugador y para el PC [3:30]. La única diferencia era la palabra "elegiste" o "elige". Con la función eleccion, todo ese código duplicado se reemplaza por dos líneas simples [9:50]:
javascript alert("PC elige: " + eleccion(pc)); alert("Tú eliges: " + eleccion(jugador));
La indentación con Tab dentro de las llaves es otra buena práctica que hace visible la estructura del código [6:45]. Un código mal indentado, con esa "escalerita" confusa, delata a un programador novato. Equivocarse es parte del proceso: paréntesis sobrantes, comillas perdidas y comas olvidadas son errores que nunca desaparecen por completo, incluso después de más de veinte años programando [8:20].
Ahora que dominas los fundamentos de las funciones, ¿qué bloques de código repetido podrías convertir en funciones dentro de tus propios proyectos? Comparte tu experiencia en los comentarios.
Esmeralda Gutiérrez Ramírez
Si tienes que copiar y pegar el mismo código eso merece ser una función
Alex Botello Pérez
a
Juan Camilo Maldonado Perez
¿Proximo tatuaje? 🤯
Camila Esmeralda Molina Pineda
++MIS APUNTES CON MUCHO 💚 FOR ALL OF YOU++
Natacha Podruzny
Hola Cami! Muchas gracias por compartir! Una duda...la funciones pueden O NO, tener parámetros, no? Como la función math.random(), que tiene paréntesis para invocar la función, pero no tiene un parámetro asignado? Soy muuuy nueva en esto! jajaj! Gracias de nuevo! N :)
Luis Fernando Callisaya Surco
gracias
Carolina González
Buena tardes, Quiero compartir mi código, estoy muy contenta con el curso, nunca había estudiado nada al respecto, mi profesión no tiene nada que ver con la programación. Gracias por la excelente forma de enseñar :)
Shay Fernando Guzman Vara
Hola, me gustó tu código, ¡está genial! Aunque hay una mejora que creo que el código se vea mucho mejor: Separar las condicionales en una nueva línea de código ya que al leerlo puede llegar a ser complicado de entender.
Claudia Beatriz Carril
Muy buena compresión!!! !
David Prada
Me ha costado entenderlo, pero sé que es cuestión de seguir aprendiendo y practicando :green_heart:
Ari Torres
¡Buen trabajo!
Yhon Armas
Hola amigo, ¿puede decirme cual es la extensión que usas para que el "==" se vea unido como lo tienes tu?. Gracias de antemano.
Luz Ladrón de Guevara
esto es lo que programé que dijera :)
Gustavo Azpurua
xd
Diego Montealegre
es XD, no xd, para que la cara funcione.
👉👈
🤙
Luis Alejandro Minichelli
{ } llaves [ ] corchetes ( ) paréntesis
por lo menos así los conozco yo.
Juan Francisco
Yo tambien los conosco asi tanto en matematicas como en gramatica. No se porque se inventan cosas cuando las instrucciones ya estan escritas
Ruben Andres Gonzàlez Murias
{}corchetes, []paréntesis rectos y () paréntesis
Samuel Steven Bernal Martínez
Para recordar:
Si tienes que copiar y pegar el mismo código muchas veces, entonces debería ser una función
Anyilo José Rangel Arias
Hoisting, buena explicación aquí La cocina del código, muy buen canal..
Olga Berenice Hernández Cruz
Definitivamente, con este video logré entender Hoisting. Muchas gracias Anyilo.
Eluizer Amadeus De León de Leon
hola, gracias. Excelente explicación
Julian Ernesto Lopez Solarte
Hola, me encanta la forma en la que explicas sin embargo como sugerencia, me parece que este video es muy importante y se hace muy rápido teniendo en cuenta que somos novatos jeje.
Pasar de una linea de código "obvia" a convertirlo a una FUNCIÓN, merece hacerse un poco mas explicado... siguiendo tus pasos obvio lo logro, pero el día de mañana que me toque hacer una función a mi solito, no creo poder porque no entendí, solo seguí tus pasos (No se si sea al único que le paso eso jeje)
Ronald Rodríguez Q
x2, me toco ver videos en youtube para tratar de entender
valeria cortes
estoy igual, y siguiendolo tambien se me hizo super complicado
Emanuel Kapp
Yo: no entendi un pomo Freddy: subamosle el nivel Otra vez yo : 😒😢
Genesis Brito
yoooooooooo
Juana Barreto
recomiendo ir programando mientras Freddy lo hace
Alejandro Ibarra
Me funciona más ver la clase, entender, repetir el video y si algo me falla ya voy viendo en la segunda vuelta qué fue. Pero buena recomendación, creo que hay que ir buscando la manera más efectiva de comprender la programación, personalmente, odiaría terminar el curso sólo copiando y no entendiendo nada . Nunca pares de aprender (Y).
William Alfredo Bermudez Leal
Funciones o también llamados Métodos, son básicamente fragmentos de código o rutinas que puedes reutilizar una y otra vez, y las veces que quieras, sin tener que copiar y pegar el mismo código cada vez que lo vayas a usar. . Si tienes que copiar y pegar el mismo código en al menos dos lugares, es un indicio de que debes usar una función. . Por ahora no se tienen que preocupar de esto pero tengan en cuenta que una Clase esta compuesta por un conjunto de varias funciones y variables. 👍
Euge Oller
Se le llama Método cuándo está dentro de una Clase y Función cuándo está fuera de una Clase
Juan David Soler Castellanos
Me pueden explicar cual es la función de "return" dentro de las funciones, gracias
Derlis Cuba
David Antonio Morales Barrera
En pocas palabras return genera el valor pero no lo muestra, sino que lo guarda dentro de la función. Cuando la función es invocada el resultado será lo que se guardo con return
Ameth Ordoñez Erazo
LES DEJO UN POCO DE DEFINICIÓN DE CONCEPTOS:
Al definir una función, lo que va entre los paréntesis se llaman PARÁMETROS, y son los valores que la función espera recibir para poder funcionar adecuadamente. Una función puede o no tener parámetros, tal cómo lo menciona Freddy.
Cuando invocamos la función, esos valores que le enviamos se llaman ARGUMENTOS, y son los valores que le pasamos a la función en sus ++parámetros++ para que pueda funcionar adecuadamente.
Victor Hugo Candela Macareo
Gracias por su aporte bacán.
Santiago Garzón
Ejemplo del programa que explica Freddy
Hola, creé un programa con el ejemplo animado que explica el profesor en el 1:29 :D sobre todo lo hice para darme claridad con el uso de return ya que me costó entenderlo. Espero que pueda ayudar a alguien. Recuerden que return sirve para guardar el proceso que ocurre en la función y ejecutarlo en otro lado, como lo hago al final del código para que muestre una oración con los dos argumentos 😁
<html> <head> <meta charset="utf-8" /> <title>Elección de comida</title> <script> function traer(comida, lugar) { let decision = "El alimento deseado es: " + comida + ". El lugar para recogerlo es: " + lugar return decision } let alimento = prompt("Seleccione el alimento que desea tener") let origen = prompt("Seleccione el lugar para recoger su alimento") alert(traer(alimento, origen)) </script> </head> <body> </body> </html>
Lisandro Gastón Ranz
Excelente aporte! Muchas gracias!
Claudia Álvarez
FUNCIONES: Grupos de acciones que se repiten varias veces. En programación, son pedacitos de código que se escriben con el propósito general de reusarlos varias veces.
Cuando la función lleva la palabra function se está: DECLARANDO (Creando)
Cuando la función No lleva la palabra función se esta: INVOCANDO (Ejecutando)
Giancarlos Guedez
Luego de horas buscando por que no me funcionaba el código y revisando desde github, el vídeo y el código que está en la parte inferior de temario no lo encontraba, solo pude verlo gracias a los colores de mi tema, me di cuenta que no tenía bien escrito la function, me faltaba la c, estuve horas leyendo y buscando jajaja. por si a alguien le ocurre, los colores ayudan
Luciana Loose
Me pasó lo mismo 🤭
Allan Diaz Hernandez
Muy until, casi que no encuentro el problema de mi código 😂👌🏻
Luz Ladrón de Guevara
Honestamente, así tenía organizado mi código porque pensé que se veía más estético (lol) ya lo cambié a como debe ser
Margarita Velásquez
Yo también jajaja
Miguel Angel Perez Cardona
No es tanto de estetica si no de facilidad de leer. Si trabajas sola en un proyecto, no importa con tal que entiendas, pero si trabajas en equipo, entonces debes facilitarle la lectura del codigo
Dámaris Dall’Orto
Voy a llorar porque recien entendi Hoisting :'))) gracias a todos por los aportes
Diego Alejandro Moreno Pedroza
Excelente!!! Esa es la idea de siempre estar aprendiendo!
Por ejemplo, si tienes una funcion de sumar:
function suma(num1,num2) { return num1 + num2; }
Esa funcion RETORNA ese valor, eso significa que ese valor puedes asignarlos a una variable
Ejemplo:
let resultado = suma(10,5)
Resultado valdra 15