If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Programación de computadoras

Curso: Programación de computadoras > Unidad 1

Lección 9: Funciones
Computación
Programación de computadoras
Introducción a JS: dibujo y animación
Funciones
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies

Repaso: funciones

Google Classroom
Este es un repaso de lo que cubrimos en esta lección sobre funciones.
A menudo queremos poder volver a ejecutar bloques de código cuando estamos escribiendo programas, sin tener que volver a escribir todo el bloque de código. Necesitamos una forma de agrupar el código y darle un nombre, de manera que podamos llamarlo con ese nombre posteriormente, y a eso es a lo que llamamos una función.
Para crear una función, primero debemos declararla y darle un nombre, de la misma forma en la que crearíamos cualquier variable, seguida de una definición de función:
var sayHello = function() {
};
Podríamos poner cualquier código dentro de la función: una proposición, múltiples proposiciones. Depende de lo que queramos hacer. En esta función, podríamos simplemente escribir en la pantalla un mensaje en una ubicación aleatoria:
var sayHello = function() {
   text("¡Hooooooola!", random(200), random(200));
};
Ahora, si lo único que hacemos es declarar la función, no pasará nada. Para que el programa ejecute el código que está dentro de la función, tenemos que "llamar" la función, al escribir su nombre seguido de paréntesis vacíos:
sayHello();
¡Y después podemos llamarla cuando queramos, las veces que queramos!
sayHello();
sayHello();
sayHello();
Muchas veces queremos personalizar las funciones para decirle al programa: "Bueno, ejecuta todo este código pero cambia algunos detalles de cómo lo haces". De esa forma tenemos código que es reutilizable y flexible, lo mejor de ambos mundos. Podemos lograr esto al especificar "argumentos" para una función, luego usar estos argumentos para cambiar el funcionamiento de la función y pasarlos cuando llamemos la función.
Por ejemplo, ¿qué pasa si quisiéramos decir exactamente dónde queremos que aparezca el mensaje, de la misma forma en que podemos decir exactamente donde dibujar rect()s y ellipse()s? Podríamos imaginar llamarla así, para poner el mensaje en dos coordenadas precisas:
sayHello(50, 100);
sayHello(150, 200);
Para que esto funcione, tenemos que cambiar nuestra definición de la función sayHello para que sepa que recibirá 2 argumentos, y luego los use:
var sayHello = function(xPos, yPos) {
   text("¡Hooooooola!", xPos, yPos);
};
Los argumentos que le pasamos básicamente se convierten en variables dentro de tu definición de función, y los nombres dependen de como los llames en los paréntesis. Fácilmente podríamos ponerles un nombre más corto:
var sayHello = function(x, y) {
   text("¡Hooooooola!", x, y);
};
Nuestras funciones pueden aceptar cualquier número de argumentos: cero, uno, dos o más. También podríamos haber decidido que queríamos cambiar nuestra función para aceptar el nombre de una persona a la cual queremos saludar:
var sayHello = function(name) {
   text("Hooooooola, " + name, random(200), random(200));
};
Y entonces la habríamos llamado así:
sayHello("Winston");
sayHello("Pamela");
Podríamos combinar ambas ideas y hacer que acepte tres argumentos, para el nombre y la posición:
var sayHello = function(name, x, y) {
   text("Hooooooola " + name, x, y);
};
Y luego llamarla así:
sayHello("Winston", 10, 100);
Realmente depende de lo que quieras que hagan tus funciones y qué tanto deseas personalizar lo que pueden hacer. Siempre puedes empezar sin argumentos, y luego agregar más conforme te des cuenta que los necesitas.
De hecho, has estado llamando funciones todo este tiempo (así es como has estado haciendo dibujos y animaciones) con rect, ellipse, triangle, etc. Todas esas funciones están en la biblioteca ProcessingJS y las cargamos en cada programa que haces aquí, de modo que siempre puedas usarlas. Hemos definido esas funciones para ti, porque creímos que serían útiles. Ahora depende de ti decidir qué funciones personalizadas quieres usar en tus propios programas. Por ejemplo, proporcionamos la función ellipse, pero no una función gato. Si tu programa involucra muchos gatos distintos en diferentes ubicaciones, ¡tal vez deberías crear tu propia función gato!
Hay otra cosa poderosa que podemos hacer con funciones: podemos usarlas para que acepten valores, calculen algo y regresen un nuevo valor. Piensa en todas las cosas que puedes hacer con una calculadora: sumar, restar, sacar raíz cuadrada, multiplicar, etc. Todas esas se harían con funciones que tomarían un valor de entrada y regresarían el resultado. Las funciones tomarían el valor de entrada como argumento y regresarían el resultado al usar una declaración return. Aquí hay una función que suma dos números y regresa el resultado:
var addNumbers = function(num1, num2) {
  var result = num1 + num2;
  return result;
};

var sum = addNumbers(5, 2);
text(sum, 200, 200); // Despliega "7"
La declaración return hace dos cosas: le regresa un valor a quien la haya llamado (razón por la cual podemos guardarla en la variable sum) e inmediatamente sale de la función. Eso significa que sería tonto tener algo así, porque la última línea nunca se ejecutaría:
var addNumbers = function(num1, num2) {
  var result = num1 + num2;
  return result;
  result = result * 2; // ¡Tonto!
};
Las funciones que regresan valores son muy útiles para manipular datos en los programas, y también se pueden combinar en expresiones:
var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);
Incluso puedes llamar funciones dentro de la llamadas de una función, aunque a veces eso puede ser difícil de leer:
var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));
Ahora que sabes cómo crear funciones que encierran bloques de código, tenemos que hablar de un concepto importante: variables locales frente a variables globales.
Cuando declaramos una nueva variable dentro de una función, decimos que es local para esa función. Eso es porque solo esa función puede ver esa variable. El resto del programa fuera de la función no puede. Una vez que estamos fuera de esa función, es como si ya no existiera. En la siguiente función, localResult es una variable local:
var addNumbers = function(num1, num2) {
  var localResult = num1 + num2;
  println("El resultado local es: " + localResult);
  return localResult;
};
addNumbers(5, 7);
println(localResult); // ¡oh, no!
Cuando ejecutemos ese código, obtendremos un error en la última línea: "localResult is not defined". La variable solo está definida dentro de la función, porque es donde la declaramos con la línea var localResult = y no está definida fuera de ella.
Cuando declaramos una variable fuera de nuestras funciones, decimos que es una variable global. Esto es porque todas las funciones pueden acceder a ella y hacer lo que quieran con ella.
var globalResult;

var addNumbers = function(num1, num2) {
  globalResult = num1 + num2;
  println("El resultado global es: " + globalResult);
};
addNumbers(5, 7);
println(globalResult);
Cuando ejecutemos el código de arriba, no obtendremos ningún error, porque declaramos globalResult fuera de la función, así que podemos acceder a ella cuando queramos.
⚠️ Puedes estar tentado a usar variables globales para todo, ya que nunca obtendrás un error de que no están definidas. Pero en realidad, las variables globales son una fuente común de errores difíciles de encontrar. En programas más grandes o en programas colaborativos, es fácil perder dl rastro de dónde y cómo tú (¡o alguien más!) utilizaste esas variables globales. Cuando sea posible, utiliza variables locales.
Cada lenguaje de programación es diferente, pero para JavaScript, es importante saber que las variables tienen un "ámbito de la función": una función puede ver las variables locales que fueron declaradas dentro de ella y las variables globales que fueron declaradas fuera de ella, pero no puede ver las variables locales dentro de otras funciones.

¿Quieres unirte a la conversación?

Inicia sesión
¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.