• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 6/12/20

Crea tus propias funciones

Log in or subscribe for free to enjoy all this course has to offer!

 

Introducción: el rol de las funciones

En este capítulo vas a descubrir las funciones. Una función es un bloque de código que realiza una tarea específica. Durante el curso ya has utilizado algunas funciones preincorporadas a JavaScript como  Number()  para convertir cadenas de texto en números enteros, o  prompt() para pedir al usuario la entrada de datos.

Para comprender la utilidad de las funciones veamos el algoritmo de preparación de un plato de pasta que llevamos a cabo en el primer capítulo:

Comienzo
    Añadir agua en una cacerola
    Añadir sal
    Poner la cacerola en el fuego
    Mientas que el agua no hierva
      Esperar
    Añadir la pasta a la cacerola
    Mientas que la pasta no esté hecha
      Esperar
    Escurrir la pasta con un coladero
    Servir la pasta en un plato
    Probar
    Mientras que la pasta esté sosa, 
      Añadir sal
      Probar
    Si queremos preferimos el tomate al queso
      Añadir el tomate
    Si no
      Añadir el queso
Fin

Echa un ojo al mismo algoritmo pero modularizado en funciones: 

Comienzo
    Hacer hervir el agua
    Hervir la pasta en el agua
    Servir la pasta
    Condimentar la pasta
Fin

La primera versión detalla todas las acciones individuales a realizar. La segunda descompone la receta en cuatro etapas, reagrupando varias acciones individuales en cada una. Esta versión es mas concisa y más fácil de interpretar, sin embargo introduce determinados conceptos como hervir o condimentar. Si otro día necesitamos cocinar arroz, podremos reutilizar esos conceptos para el mismo fin.

Hasta ahora, hemos realizado nuestros programas siguiendo el modelo del primer algoritmo: acciones individuales encadenadas. Con las funciones, aprenderás a modularizar tu código en diferentes partes reutilizables.

 Descubriendo las funciones

He aquí un ejemplo de una función muy simple en la que se muestra por consola la palabra "Hola".

function decirHola() {
  console.log("Hola");
}

console.log("inicio del programa");
decirHola();
console.log("fin del programa");

Crea una carpeta  y escribe este ejemplo en el fichero js/script.js. Añade el archivo JavaScript a tu fichero curso.html, abre el fichero en el navegador y observa el resultado en la consola.

 

Salida de la función decirHola();
Salida de la función decirHola()

Con ello, has creado tu primera función. Ahora veamos la sintaxis y cómo se usa.

 

Declaración de una función

A la operación de creación de una función se le llama declaración.

function decirHola() {
  console.log("Hola");
}

La primera parte del programa anterior es la declaración de la función. Se utiliza la palabra clave  function y se le asigna un nombre:  decirHola() . Una vez hecho esto, añadimos entre las llaves  { }  el conjunto de instrucciones que deseamos que la función ejecute cuando sea llamada.

Llamada de una función

Cuando queremos que el código que contiene una función se ejecute, se dice que se "llama" a la función.

decirHola();

Para llamar a la función, simplemente escribimos el nombre de la función seguido de un par de paréntesis  ( ) .

La llamada de una función desencadena la ejecución de las instrucciones que contiene entre las llaves:  { console.log("Hola") } . Después la ejecución del programa continúa en el lugar donde la función ha sido llamada.

Ventajas del uso de las funciones

Cuando intentamos resolver un problema complejo, es más fácil resolverlo descomponiéndolo en partes más pequeñas.

Las funciones permiten aplicar este principio a la creación de programas: descomponer el programa en subunidades de funciones, cada una dedicada a un objetivo particular. El programa irá llamando a las funciones necesarias a medida que avanza la ejecución 

Al escribir el programa como una combinación de funciones, será mas fácil de entender y de desarrollar que un programa escrito como un único bloque de secuencias ejecutadas una tras otra. Además, ciertas funciones pueden ser reutilizadas en otros programas.

Para concluir, el uso de funciones permite evitar la duplicación de código. En lugar de duplicar código, escribe una función que resuelva un problema determinado, para más tarde llamar a la función ahí donde sea necesario.

Argumentos y retorno de una función

Valor de retorno

Aquí tienes una variante del ejemplo anterior.

function decirHola() {
  return "Hola";
}
// la variable hola contendrá la cadena de texto "Hola" 
var hola = decirHola();
console.log(hola);

 En este ejemplo, el cuerpo de la función decirHola() ha sido modificado: la instrucción  console.log("Hola");  ha sido reemplazada por la línea  return "Hola"; .

La utilización de la palabra clave  return en una función permite dar un valor de retorno. Al llamar a la función, se obtiene el valor correspondiente que retorna la función. Este resultado puede ser recuperado, por ejemplo guardando el valor en una variable. En el ejemplo de arriba, la función  decirHola() retorna el valor  "Hola" , este valor es guardado en una variable que es ser más adelante mostrado por consola.

 

// Declaración de una función llamada miFuncion()
function miFuncion() {
    // Procesamiento de la información
    // ...
    return valorDeRetorno;
}

// Recuperación del valor de retorno de miFuncion
var valor = miFuncion();
// ...

El valor de retorno puede ser de cualquier tipo (número, cadena de texto , etc). Una función puede retornar un único valor.

function miFuncion() {
    // Ninguna instrucción de retorno
}

var resultado = miFuncion();

console.log(resultado); // Muestra undefined

No es obligatorio que una función retorne un valor, pero es importante entender que todas las funciones retornan un valor, incluso si no hacemos uso de la instrucción  return . Si intentamos recuperar un valor de retorno de una función que no incluye la instrucción return , obtenemos el valor  undefined  (no definido).

Podemos simplificar un poco el código del ejemplo, mostrando directamente la llamada a la función decirHola() sin utilizar una variable.

function decirHola() {
    return "Hola";
}

console.log(decirHola()); // Muestra "Hola"

 

Parámetros

A veces, las funciones necesitan cierta información para ejecutar su código. Los valores requeridos por la función se llaman parámetros, y se definen entre paréntesis justo detrás del nombre de la función. Estos valores pueden ser utilizados en el cuerpo de la función.

Modifiquemos el ejemplo de la función  decirHola() para que al llamarla salude a la persona que queramos saludar, pasándole su nombre.

function decirHola(nombre) {
    var mensaje = "Hola, " + nombre;
    return mensaje;
}

console.log(decirHola("Carlos"));
console.log(decirHola("Miguel"));

Modifions notre exemple pour construire un message de bienvenue personnalisé.

Función decirHola pasándole el parámetro nombre
Salida de la función decirHola pasándole el parámetro nombre

 

Cuando se llama a una función que acepta varios parámetros, el número y orden parámetros debe ser respetada. Veamos otro ejemplo.

 

function presentacion(nombre, edad) {
    console.log("Me llamo " + nombre + " y tengo " + edad + " años");
}

presentacion("Manuel", 17); // OK
presentacion(22, "María"); // Argumentos invertidos
presentacion(19); // falta 1 argumento

 

Hay que respetar el orden y número de parámetros
Hay que respetar el orden y número de parámetros

La primera llamada a la función se realiza correctamente, se respeta el orden y número de parámetros. En la segunda llamada a la función se invierten los argumentos. En la tercera llamada a la función vemos que falta un argumento. Por ello se asigna la edad al parámetro nombre y undefined  al segundo parámetro.  Undefined  es un valor especial de JavaScript que indica que nada ha sido asignado a esa variable.

 

Ámbito de una variable

El ámbito o alcance de una variable, es la disponibilidad de dicha variable dentro del código. 

Cualquier variable declarada fuera de una función estará disponible para cualquier código de JavaScript en esa página. A esto se le conoce como ámbito global. 

var cantidad = 20;
// función que calcula tu sueldo por jornada laboral
function calcularSueldo(horas) {
    return cantidad * horas;
}
// salida de la llamada calcularSueldo(8) -> 160
console.log(calcularSueldo(8));

En el ejemplo anterior, definimos una variable global (cantidad = 20 ) porque está creada fuera de la función  multiplicar . La función  calcularSueldo()  hace uso de la variable global para calcular el sueldo.

Por lo tanto, la función puede también modificar el valor de la variable global y dicho cambio no sólo tendrá lugar dentro del ámbito de la función sino de forma global.

var cantidad = 20;
// función que calcula tu sueldo por jornada laboral
function calcularSueldo(horas) {
    cantidad = 10;
    return cantidad * horas;
}
// salida de la llamada calcularSueldo(8) -> 80
console.log(calcularSueldo(8));
// valor de la variable cantidad -> 10
console.log(cantidad);

Dentro de la función se asigna a la variable un nuevo valor. Una vez se llama a la función, este cambio afecta a cualquier lugar en el que la variable sea usada.

// función que calcula tu sueldo por jornada laboral
function calcularSueldo(horas) {
    var cantidad = 10;
    return cantidad * horas;
}
// salida de la llamada calcularSueldo(8) -> 80
console.log(calcularSueldo(8));
// Error: la variable cantidad no existe fuera de la funcion
console.log(cantidad);

La variable cantidad  es una variable local, se define dentro dela función  calcularSueldo() . Por lo tanto, sólo puede ser utilizada dentro de la función en la que se ha definido.

 

Programar bien las funciones

Crea funciones minimalistas

Dentro de una función se pueden utilizar todos los elementos que hemos visto: variables, condiciones, bucles, etc. Una función puede llamar también a otra función, lo que nos abre enormes posibilidades a la hora de construir nuestros programas.

Intenta que cada función se concentre en resolver un único problema. Es conveniente hacer funciones concisas y fácil de leer, y minimizar las interdepencias entre las funciones. Cuando veas que una función empieza a crecer demasiado, trata de dividir dicha función en dos más pequeñas. 

Nombra bien tus funciones y parámetros

Como con las variables, la asignación del nombre de las funciones juega un papel importante en la legibilidad del programa. Elige siempre nombres sencillos y representativos.

 

Practica tú mismo 

Programa saludo mejorado

Completa el programa hola.js para que el usuario introduzca su nombre y apellido y estos datos se guarden en dos variables. Después, llama a la función utilizando como argumentos el nombre y apellido dado por el usuario.‌ 

// Retorna un mensaje de bienvenida
function decirHola(nombre, apellido) {
    var mensaje = "Hola, " + nombre + " " + apellido;
    return mensaje;
}


// Añade aquí el código que pida el nombre y apellido del usuario
// llama a la función decirHola() con los argumentos nombre y apellido

 

Cuadrado de un número

Completa el programa cuadrado.js para que la función  cuadrado() retorne el cuadrado del número pasado como argumento.

// Retorna el cuadrado de un número
function cuadrado(x) {
// completa el código de la función
}

console.log(cuadrado(0)); // Salida: 0
console.log(cuadrado(2)); // Salida: 4
console.log(cuadrado(5)); // Salida: 25

 

Mínimo de dos números 

Completa el programa minimo.js en el que la función  min() retorna el más pequeño de los dos parámetros pasados.

// Escribe la función min()

console.log(min(4.5, 5)); // Salida: 4.5
console.log(min(19, 9)); // Salida: 9
console.log(min(1, 1)); // Salida: 1

 

Perímetro y área de un círculo

Escribe el programa circulo.js que contenga dos funciones,  perimetro()  y  area() que calculen respectivamente el perímetro y área de un círculo a partir de su radio. Llama a las funciones con un radio elegido por el usuario.

Busca las fórmulas del perímetro y área si las recuerdas.

 

Solución de los ejercicios

Intenta primero resolver los ejercicios propuestos por ti mismo. Si ves que te bloqueas, suele venir bien cambiar de actividad y volver a intentarlo más adelante. Si no lo consigues, puedes consultar las soluciones aquí

Example of certificate of achievement
Example of certificate of achievement