cabecera javascript para novatos

Las funciones | JavaScript para novatos #11º

Vamos a ver cómo las funciones nos ayudan a reutilizar código para evitar tener que crearlo una y otra vez.

Índice general del «Curso de JavaScript»:

  1. Introducción
  2. Las variables
  3. Tipos de datos
  4. Los operadores
  5. Declaraciones if y else
  6. Condiciones complejas y anidadas
  7. Estructuras Else, if y switch
  8. Bucles while y do while
  9. Bucle for
  10. Integrando JavaScript
  11. Las funciones
  12. Alcance de las variables
  13. Funciones predefinidas
  14. Programación orientada a objetos I
  15. Programación orientada a objetos II
  16. Herencia y prototipos
  17. Closure
  18. Los array I
  19. Los array II
  20. El DOM
  21. Acceso a los nodos del DOM
  22. Crear nuevos nodos en el DOM
  23. Eliminar nodos del DOM
  24. Modificar contenido de los nodos
  25. Modificar atributo style (DOM)
  26. Modificar atributo class (DOM)
  27. Programación basada en eventos I

Las funciones

Introducción

Las funciones, no son mas que un bloque de código creado para desarrollar una tarea en concreto. Lo útil de estas estructuras es que una vez creadas podemos llamarlas (invocarlas) cuando las necesitemos sin tener que volver a escribir todo el código.

Además de poder utilizarlas tantas veces como queramos, nos sirven para mantener el código bien estructurado pudiendo separar unas tareas de otras.

Sintaxis:

Sintaxis funcion
10.1 sintaxis funcion

Practiquemos con un ejemplo similar.

function saludar () {
      alert("Hola");
}

saludar();   //Se llama a la función

En el código de arriba hemos comenzado con la palabra clave «function» y hemos escrito el nombre que queremos que tenga la función, «saludar».

A continuación hemos colocado dos paréntesis sin contenido «( )», ya veremos un poco más adelante para que se utilizan.

Para finalizar, hemos introducido entre las llaves “{ }” la tarea que queremos que ejecute. En concreto, con el método «alert» haremos que se muestre en pantalla una ventana de alerta con el texto «Hola».

De este modo ya tenemos una función preparada para poder usarla en cualquier momento. Para ello solo tenemos que llamarla (invocarla), que es lo que hemos hecho en la última línea de código escribiendo su nombre y los dos paréntesis.

Nota de interés:

Las nomenclaturas de las funciones siguen las mismas reglas que las variables.

Una buena práctica para diferenciar fácilmente una variable de una función por el nombre, es utilizar verbos para las funciones, por ejemplo «saludar» en vez de «saludo».

Parámetros

Las funciones más sencillas como la del ejemplo anterior no necesitan que les proporcionemos información a la hora de llamarlas para que realicen su tarea. Pero a la mayoría de las funciones deberemos facilitarles valores para que puedan operar con ellos. Estos valores se los pasaremos a la función a través de los «parámetros».

En el ejercicio anterior hemos visto como al definir la función colocábamos dos paréntesis vacios «( )». Entre estos paréntesis es precisamente donde podemos colocar los parámetros.

Sintaxis función con parámetros
10.2 sintaxis función con parámetros

En el ejemplo de arriba hemos creado un parámetro llamado “textoSaludo”, hay que pensar en este parámetro como en una variable a la que posteriormente le vamos a dar un valor.

En el interior de la función hemos colocado un «alert» que mostrará el valor que le demos al parámetro “textoSaludo” cuando llamemos a la función.

En la última línea de código llamamos (invocamos) a la función saludar y le pasamos un valor al parámetro, concretamente el texto «Hasta luego». Con lo que mostrará un «alert» con dicho texto.

Nota de interés:

El término parámetro se utiliza al darles nombre cuando se define la función.

Los argumentos son los valores que se les da a los parámetros al llamar a la función.

Practiquemos con un pequeño ejercicio:

var miSuma;

function sumar (numero1, numero2) {
      miSuma = (numero1 + numero2);
      alert (miSuma);
}

sumar(25, 150);   //Se llama a la función

En el ejercicio, primero hemos declarado una variable que utilizamos dentro de la función, después hemos definido la función con dos parámetros llamados numero1 y numero2 separados por una coma.

Dentro de la función hemos asignado a la variable miSuma el valor de sumar numero1 y numero2, y a continuación hemos colocado un alert que mostrará el valor de «miSuma».

Finalmente hemos llamado a la función pasándole dos argumentos (25, 150), con lo que se deberá mostrar una alerta con la cifra «175».

Nota de interés:

Los parámetros no pueden tener el mismo nombre que las variables que utilicemos dentro de la función.

Declaración return

Pero las funciones no solo pueden recibir valores, como acabamos de ver con los parámetros, también pueden devolvernos los valores resultantes de las operaciones que ejecuten.

Para recuperar el resultado del bloque de código de una función, Javascript nos proporciona la palabra clave «return».

Veamos un ejemplo:

function sumar (numero1, numero2) {
      return (numero1 + numero2);
}

valorRetornado = sumar(25,150);   //La función retornará un valor al ser llamada y lo guardamos en "valorRetornado"

alert (valorRetornado);

Dentro de la función hemos escrito la palabra clave «return» seguida de la operación de la cual queremos obtener el resultado.

Posteriormente utilizamos la variable “valorRetornado” para almacenar el valor que retornará la función «sumar(25, 100)» al ser invocada.

La prueba de que “return” nos ha dado el valor resultante de la operación la podemos ver en el texto mostrado por el “alert”.

Nota de interés:

En el momento que se ejecuta la declaración «return» se sale automáticamente de la función. El resto de código que hubiera debajo del “return” hasta el final de la función se omitiría.

Ahora que ya hemos visto cómo crear funciones y cómo pasarle valores u obtenerlos, vamos a hacer un pequeño paréntesis para conocer algo más sobre las variables. Pero eso lo dejamos para el próximo capítulo de este tutorial de Javascript.


Ir a Javascript para novatos 12ª parte

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *