Tu primera función
Clase 1 de 75 min de lectura
¿Te imaginas tener que copiar y pegar las mismas líneas de código cada vez que las necesitas? Para no vivir así existen las funciones, uno de los conceptos más importantes de JavaScript y de casi cualquier lenguaje de programación.
Una función es un bloque de código que realiza una tarea específica cuando se llama. Piensa en un microondas: le das algo para cocinar, le indicas el tiempo y la potencia, hace su trabajo y te devuelve el resultado. Y lo mejor es que puedes usarlo tantas veces como quieras.
En JavaScript hay varias maneras de definir funciones, pero la más común y básica usa la palabra clave function. Esta es tu primera función:
function saludar() { console.log('Hola Miguel')}Son solo tres líneas, pero cada pieza tiene su papel:
- La palabra reservada
function. Avisa de que estamos definiendo una función. - El nombre, en este caso
saludar. Normalmente usamos verbos, porque las funciones son acciones. - Un par de paréntesis
()después del nombre. Dentro pueden ir parámetros; aquí todavía no tenemos ninguno. - Un bloque de código entre llaves
{}. Aquí hay una sola línea, pero podrían ser muchas más.
Ojo, que con esto solo la hemos definido: todavía no ha pasado nada. Para que su código se ejecute hay que llamarla, y eso se hace escribiendo su nombre seguido de paréntesis:
saludar() // -> Hola Miguelsaludar() // -> Hola Miguelsaludar() // -> Hola MiguelDevolviendo un resultado#
Mostrar cosas en la consola está bien, pero lo habitual es que una función te entregue un valor con el que seguir trabajando. Para eso usamos la palabra reservada return, seguida del valor que queremos devolver:
function sumar() { return 1 + 1}Ahora, cada vez que llamemos a sumar, la llamada se convierte en el resultado de la suma.:
// podemos guardar el resultado en una variableconst resultado = sumar()// o ver en consola directamente el resultadoconsole.log(sumar()) // -> 2function sumar() { return 1 + 1} const resultado = sumar()console.log(resultado)return, la función hace su trabajo pero devuelve undefined.Vale, pero una función que siempre suma 1 + 1 no parece gran cosa. En la siguiente clase verás cómo pasar parámetros a una función para hacerla mucho más interesante y reutilizable.
Una función realmente útil#
saludar y sumar no van a cambiarte la vida, pero con lo poco que sabemos ya podemos hacer algo más productivo. Por ejemplo, crear una función que nos devuelva un número aleatorio del 1 al 10.
Para ello vamos a descubrir Math, un objeto incorporado en JavaScript con propiedades y métodos para constantes y funciones matemáticas. Nos interesan dos de sus métodos:
Math.random(): devuelve un número aleatorio entre 0 y 1, con decimales.Math.floor(): redondea un número hacia abajo.
Math.random se parece a console.log en que los dos son métodos que JavaScript trae de serie, así que puedes usarlos en cualquier punto de tu programa.
Con estas dos piezas ya podemos montar una función que nos devuelva un número aleatorio del 1 al 10. Sigue los comentarios paso a paso para ver cómo se transforma el número:
function getRandomNumber() { // recuperamos un número aleatorio entre 0 y 1 const random = Math.random() // por ejemplo: 0.6803487380457318 // lo multiplicamos por 10 para que esté entre 0 y 10 const multiplied = random * 10 // -> 6.803487380457318 // redondeamos hacia abajo para que esté entre 0 y 9 const rounded = Math.floor(multiplied) // -> 6 // le sumamos uno para que esté entre 1 y 10 const result = rounded + 1 // -> 7 // devolvemos el resultado return result}Mira cuántas cosas has puesto en práctica en muy pocas líneas: constantes, operadores, comentarios... ¡y todo dentro de una función!
¿Sabes lo mejor? Que esa función va a acompañarte durante toda tu carrera. Necesitar un número aleatorio es de lo más habitual en un programa, así que viene muy bien tener una función que lo haga por nosotros.
En resumen
- Una función es un bloque de código que realiza una tarea y que puedes reutilizar tantas veces como quieras.
- Se declara con
function, un nombre (mejor un verbo), paréntesis()y un bloque entre llaves{}. - Definirla no la ejecuta: hay que llamarla con su nombre y paréntesis, como
saludar(). - Con
returnla función devuelve un valor; si no lo usas, devuelveundefined.