Funciones

Una función es un trozo de código que genera algo específico y que queremos reutilizar.

Por ejemplo una función que dibuje un círculo y un rectángulo.

background(10); //Constante Inicial

/Crear funciones nos ahorra mucha escritura de código.

// estamos usando la función que hemos creado y reutilizandola

// La posición de dibujo es mediante coordenadas aleatorias cada vez que se llama a la función que dibuja.

//Comienzo de la animación

var dibujarmiFunción = function() {

var fX = random(50, 350);

var fY = random(50,350);

fill(199, 149, 149);

ellipse(fX + 5, fY + -3, 120, 123);

fill(204, 204, 26);

rect(fX -42, fY - 12, 89, 44);

};

dibujarmiFunción();

dibujarmiFunción();

dibujarmiFunción();

dibujarmiFunción();

Ver el ejemplo funcionando

Ahora veremos cómo pasar parámetros a la función:

Si queremos pasar parámetros

// Aquí "declaramos" los parámetros de la función y los "pasamos" luego cada vez que utilizamos la función.

var dibujarmiFunción = function(fX,fY) {

fill(199, 149, 149);

ellipse(fX + 5, fY + -3, 120, 123);

fill(204, 204, 26);

rect(fX -42, fY - 12, 51, 48);

};

dibujarmiFunción(50, 50);

dibujarmiFunción(150,150);

dibujarmiFunción(250,250);

Ver Ejemplo Online

Valores de retorno de una Función

Return: sirve para regresar valores de funciones, especialmente útiles al hacer cálculos.

Se pueden utilizar funciones predefinidas y funciones personalizadas.

Repaso de funciones

A menudo queremos poder volver a ejecutar "bloques de código" cuando hacemos programas, sin tener que reescribir todo el bloque nuevamente. Función, un agrupamiento de código al que le asignamos nombre propio, para poder usarlo luego (llamarlo por ese nombre para que actúe) es lo que llamamos una .

Para crear una función primero debemos:

1-Declararla

2-Darle nombre.

3-Luego, va seguida de una definición de función:

var sayHello = function() { };

Podemos poner cualquier código dentro de esa función: una declaración o muchas. Solo depende de lo que queramos hacer.

En esta función, podríamos simplemente escribir un mensaje de salida en una ubicación aleatoria:

var decirSaludo = function() { text("¡Hola!", 100, 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:

decirSaludo();

¡Podemos llamarla cuando queramos, tantas veces como queramos!

decirSaludo();

decirSaludo();

Muchas veces queremos personalizar las funciones, para decirle al programa: "haz este código pero cambia algunos detalles de cómo lo haces".

De esa forma tenemos código que es reutilizable y flexible. Podemos lograr eso al especificar argumentos para una función, usar esos argumentos para cambiar cómo trabaja la función y "pasarlos"(enviarlos a) cuando llamemos la función.

Por ejemplo, ¿qué pasa si qusiéramos designar exactamente dónde queremos que se despliegue el mensaje, justo como podemos designar exactamente dónde queremos dibujar rect()rect()s y ellipse()ellipse()s?

Podríamos imaginar llamarla así, para poner el mensaje en dos coordenadas precisas:

decirSaludo(50, 100); decirSaludo(150, 200);

Para hacer que eso funcione, necesitamos cambiar nuestra definición de la función sayHellodecirSaludo para que sepa que va a recibir dos argumentos, y que deben ser usados dentro:

var decirSaludo = function(xPos, yPos) { text("¡Hola!", 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.

Podríamos ponerles un nombre mas simple:

var decirSaludo = function(x, y) { text("¡Hola!", x, y); };

Nuestras funciones pueden aceptar cualquier número de argumentos: cero, uno, dos, o más.

También podríamos decidir que queremos cambiar nuestra función para que acepte un nombre:

var decirSaludo = function(name) { text("Hola, " + name, random(200), random(200)); };

Y entonces la habríamos llamado así:

decirSaludo("Juan"); decirSaludo("María");

Podríamos combinar estas ideas, y tener que la función acepte tres argumentos: name y posición:

var decirSaludo = function(name, x, y) { text("Hola " + name, x, y); };

Y luego llamarla así:

decirSaludo("Juan", 10, 100);

Depende de lo que quieres que haga tu función, y qué tanto deseas personalizar lo que puede hacer.

Siempre puedes empezar sin argumentos, y luego agregar más conforme te des cuenta que los necesitas.

En realidad has estado llamando funciones cuando has estado haciendo dibujos y animaciones al usar rectrect, ellipseellipse, triangletriangle, etc. de la biblioteca de ProcessingJS, y las cargamos en cada programa, de antemano, para poder usarlas.

Depende de depende de ti decidir cuáles funciones personalizadas quieres utilizar en tus propios programas.

Por ejemplo, proporcionamos la función ellipse ellipse, pero no proporcionamos una función cat cat.

Si tu programa involucra muchos diferentes gatos en diferentes ubicaciones, ¡tal vez deberías crear tu propia función para crear gatos!

---------------------------------------------------------------

Hay otra cosa poderosa que podemos hacer con funciones: podemos usarlas para que acepten valores, calculen algo y regresen un nuevo valor. Piensa acerca de todas las cosas que puedes hacer con una calculadora: sumar, restar, sacar raíz cuadrada, multiplicar, etc. Todos esos cálculos se pueden hacer con funciones que toman una entrada y regresan un resultado a la salida. Las funciones tomarían el valor de entrada como argumento y regresarían el resultado usando 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 da un valor de regreso a quien la haya llamado, que es por lo cual la pudimos almacenar en la variable sumsum, e inmediatamente se sale de la función. Esto 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 avariables 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, localResultlocalResult 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); // ¡ay caray!

Cuando ejecutamos este código, obtendremos un error en la última línea: "localResultlocalResult no está definida". La variable solo está definida dentro de la función porque ahí es donde la declaramos con la línea var localResultvarlocalResult=. No está definida fuera de la función.

Cuando declaramos una variable fuera de nuestras funciones, decimos que es una variable global. Eso 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 ejecutamos el código de arriba, no tendremos errores porque declaramos globalResultglobalResult fuera de la función, así que podemos acceder a ella donde queramos.

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.