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

Repaso: funciones

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?

  • Avatar duskpin ultimate style para el usuario edgar
    Tengo una consulta y espero que no sea tan tonta como creo.
    Si la variable global puede ser utilizada por cualquier función.. por que utilizar variables locales que tienen su uso restringido a una sola función?
    (56 votos)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar piceratops tree style para el usuario Gustavo Panchi Salazar
      Me parece una buena pregunta y espero explicarte de la mejor forma posible; considero que existen dos aspectos:
      - Uso de Recursos: independientemente si es local o global una variable usa un segmento de memoria RAM, si tienes un codigo super grande y si todas las variables fueran globales usarían muchos recursos de forma innecesaria, una variable global es creada para almacenar datos de uso comun entre varias funciones en cambio una variable local es creada para usos específicos y una vez que la función local finaliza se liveran los recursos asignados.
      - Complejidad: cuando un programa es extenso la gestión de variables se complica incrementalmente, una variable local es creada para una actividad específica que no afecta a otras partes del programa, en cambio una variable global te sirve para tareas comunes o valores que necesitas en todo el sistema.
      Saludos
      (193 votos)
  • Avatar mr pink red style para el usuario valentina lopez
    Hola
    tengo una pregunta, ¿cual es la diferencia entre las variables y las funciones?
    (10 votos)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar hopper jumping style para el usuario Cobol Bemol
      Las variables de JavaScript se crean de la misma forma (Mediante la palabra reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar (Números, textos, etc.)
      Una función es un fragmento de código que puede ser invocado para realizar tareas o devolver un resultado.
      (21 votos)
  • Avatar ohnoes default style para el usuario santossalvador99
    Buena explicacion y repaso :)
    (9 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar blobby green style para el usuario franciscojose.martinezortiz
    Que programa me recomienda instalar para practicar.
    (4 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar piceratops ultimate style para el usuario Edgar Marcelino Zamora Cruz
    Este Java Script no es el mismo que se usa para páginas web o si? en caso de que no, que versión es? o porque no nos enseñan el que se utiliza de manera más frecuente.
    (3 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar aqualine ultimate style para el usuario Jimmy Cali
    Terminé aquí por el desafío Carita Sonriente, necesito que alguien me ayude para poder completar el ya mencionado. Gracias :)
    (0 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar starky tree style para el usuario Santiago Castro
    Hola amigos, como están, tengo una pequeña duda espero por favor poder recibir su ayuda, no ha sido dificil para mi comprender como hacer funciones especiales y funciones personalizadas como esta: var XD =function (){
    };
    y luego llamar a ejecutar
    XD ();
    pero no entendí como hacer llamadas personalizadas para ejecutar una función, es decir que cada XD (); tenga parámetros diferentes en cada ejecución
    (4 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar piceratops sapling style para el usuario victor aaron  de los rios rodriguez
    porque las variables locales tienen restriccion
    (2 votos)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar piceratops tree style para el usuario Gustavo Panchi Salazar
      Es una muy buena pregunta Victor, espero ser lo mas claro posible: cuando un programa se ejecuta cada línea de codigo de almacena en la memoria y de la misma forma las variables, ahora bien cuando un programa es extenso, sería una muy mala idea poner todo el programa en la memoria, por esta razón el interprete, compilador o como se le quiera llamar carga los segmentos de codigo y variables según la ejecución del programa... por esta razón existen variables globales que son accesibles sin importar el segmento (por asi decirlo) y las variables locales que por las razones que te cuento estan activas unicamente cuando se las necesita para que otros programas puedan ejecutarse simultaneamente en tu computadora =)
      (4 votos)
  • Avatar blobby green style para el usuario Hary Alexander Perez
    considero que son fundamentales para la practica de un buen código
    (3 votos)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar purple pi teal style para el usuario Daryl McCarthy
    Hola
    Tengo unas preguntas, en el repaso usa este ejemplo

    var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));

    Cual seria el resultado? Cómo se interpreta?
    (3 votos)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar blobby green style para el usuario Andre Michelle
      creo haber encontrado la respuesta: analiza este código. tien los tres ejemplos de uso de return... return simple: return como parte de una expresión matemática (fórmula). y una llamada a la llamada. (parece ser que en la HugeSum, no escribieron todo el código sino que le faltaba una parte ara que sea realmente una enorme suma: ) // 1- aqui tenemos una función qu3 devuelve el resutado de una suma

      background(0); textSize(30);

      var sumarNumeros = function(n1, n2) {
      var result = n1 + n2;
      return result;
      };

      var suma = sumarNumeros(5, 2);
      text("La suma da: " + suma, 80, 100);



      // 2-Las funciones que regresan valores también se pueden combinar en expresiones

      var granSuma = sumarNumeros(2, 5) + sumarNumeros(9, 7);
      text("La granSuma da: " + granSuma, 80, 150);



      // 3-Podemos llamar funciones dentro de la llamadas de una función, aunque a veces eso puede ser difícil de leer (call de una call):

      var hiperSuma = sumarNumeros(sumarNumeros(5, 2), sumarNumeros(9, 7)) + sumarNumeros(sumarNumeros(1, 4), sumarNumeros(2, 5)) ;

      text("La hiperSuma da: " + hiperSuma, 80, 200);
      (1 voto)
¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.