Anatomía del código: Funciones en JavaScript

En este post veremos todo sobre funciones en programación, ¿Qué son? ¿Cómo definimos una función? ¿Cuáles son las partes de las funciones? Y algunos términos que te ayudarán a entender y a tener siempre a la mano estos conceptos.

¿Qué son las funciones?

Una función es un bloque de código que se ejecutará solo cuando ha sido llamada, o mejor dicho, cuando la ejecutamos. Estas nos ayudan cuando queremos evitar escribir el mismo código que podríamos utilizar en múltiples lugares en nuestras aplicaciones.

Veamos un ejemplo.

Esta es una función en el lenguaje JavaScript, y es una función que suma a dos números, a y b respectivamente, esto por supuesto es un ejemplo muy sencillo, pero nos va a ayudar a explicar cuáles son las partes de una función:

function sum (a, b) {

  const c = a + b
  
  return c
  
}

¿Cuales son las partes de una función?

Te vamos a dejar una imagen por aquí con las partes de la función y vamos a explicar a continuación cada uno de estos:

1.- Palabra reservada: En el caso de JavaScript la palabra reservada es function, esta es una palabra reservada por el lenguaje, y se refiere a que no podremos utilizarla para nombrar a otras instrucciones en nuestro código, ya que el lenguaje en su programación, sabe que si esta palabra se está usando, es que seguirá la sintaxis y se interpretará como una función.

Otra forma de verlo, es que con esta palabra reservada le diremos al lenguaje que lo siguiente que haremos es definir una función.

2.- Nombre de la función: Es el nombre que nosotros le asignamos a nuestra función, y como mencionamos en el punto anterior, esta no deberá usar las palabras reservadas por el lenguaje. Con este nombre es que llamaremos a nuestra función en cualquier parte de nuestro código, y OJO, podremos llamar a una función con este nombre solo 1 vez, ya que si el código encontrara dos funciones con el mismo nombre nos arrojara un error. Esto lo podemos evitar usando módulos, solo hay que tener mucho cuidado con esto.

3.- Parámetros: Son los valores que requerimos en nuestra función para que esta pueda ejecutarse, como dijimos al principio, las funciones nos evitan escribir código repetitivo, en el caso de nuestra función ejemplo sum, necesitamos de dos parámetros a y b, los colocaremos entre paréntesis y separados cada uno separados por una coma.

Estos pueden llamarse de la manera que queramos, y es mejor que sean lo más descriptivo para que otros desarrolladores no tengan problema en entender y utilizar nuestro código.

4.- Lógica: Nos referimos con lógica, a todo lo que colocamos en el bloque de código, es decir, toda la sucesión de instrucciones que le indiquemos dentro de este, podremos definir variables, ejecutar otras funciones o modificar valores de variables ya existentes, todo lo que necesitemos para que funcione nuestra app.

Aqui encontramos un tema sumamente interesante, pero, ¿qué es el bloque de código?, en JavaScript, el bloque de código en una función está delimitado por las llaves { }

Veamos otra imagen para entenderlo:

Entonces todo lo que se encuentre dentro este bloque de código se ejecutará cuando llamamos a la función.

5.- Retorno de la Función: Ya comentamos en el punto anterior que el bloque de código se ejecutará cuando llamemos a la función, pero si necesitamos reutilizar algun valor generado dentro de este bloque de código necesitamos hacer algo más, por ejemplo, la función sumará a + b, y ahora, supongamos que los valores son 1 + 2, el resultado sería 3, y aquí está la clave, la función si nos dará como resultado 3, pero nunca podremos utilizarlo si no hacemos un retorno, esto se hace con la palabra reservada return.

Entonces podremos reutilizar en otro momento todo lo que pongamos delante de return en una función, por ejemplo, podríamos guardar el resultado en cualquier otra variable y reutilizarla en nuestro código cuando lo necesitemos. Este error lo he visto mucho cuando vamos iniciando, ya que en algunas ocasiones no entendemos porque si la función se ejecuta correctamente nunca obtenemos el valor que necesitamos,. Así que no te olvides de colocar el return cuando lo necesites.

Un detalle más sobre esto es que todas las líneas que estén debajo de return no se ejecutarán, entonces esta palabra reservada también nos sirve para terminar la ejecución de la función.

Y recuerda, colocar a return es opcional, ya que no todas las funciones o no todo lo que escribamos en el bloque de código, deberá reutilizarse o retornarse, sino que solamente necesitaremos que ejecute el bloque de código , a estas se les llama funciones void, y son muy comunes y necesarias para construir nuestras aplicaciones.

¿Cómo llamamos a las funciones?

Ya que hemos definido a nuestras funciones y conocemos las partes que las componen, debemos saber cómo hacemos el llamado, o bien, la ejecución de esta función:

sum(1, 2)

Vamos a explicar de nuevo las partes que componen al llamado de las funciones:

1.- Nombre de la función: Comenzaremos por utilizar el nombre de la función que queremos llamar, seguido de los argumentos:

2.- Argumentos: Este es el valor o valores que definimos en nuestra función, y los cuales seran utilizados por estos para ejecutar la lógica de su bloque de código, los enviaremos a la función dentro de un parentesis ( ) y cada uno de estos los separaremos por una coma.

Un detalle, es que si no colocamos los paréntesis no estaremos llamando a la función, sino que solo estaremos colocando su definición, así que no olvides colocarlos si necesitas que esta función se ejecute.

Espera espera espera!!! Ahora tal vez te hemos generado una duda o has visto estos 2 términos en diferentes lugares, «argumentos» y «parámetros», pero ¿cómo diferencio o a qué nos referimos con estos?

¿Cuál es la diferencia entre parametros y argumentos?

Verás, la diferencia es sencilla, y está en qué momento nos referimos a estos, ya que con ambos nos referimos a lo que le pasamos a las funciones para que funcionen, pero si estamos hablando de la definición de la función, los llamamos parámetros, pero cuando hagamos el llamado a las funciones se dice que le estamos pasando argumentos a la función, es decir los valores reales para que se ejecute la función.

Entonces, para nuestro ejemplo, la función sum necesita de 2 parámetros para funcionar, los cuales son a y b. Pero cuando la llamemos le estamos pasando como argumentos a 1 y 2.

Aprende a programar en JavaScript

A lo largo de este post hemos hablado de uno de los lenguajes más utilizados, y esta es una introducción a las funciones como uno de los ejes más importantes cuando aprendemos a programar, pero si quieres ver su uso, te invitamos a la Academia Hola Mundo donde con el curso: Aprende Javascript, HTML5, CSS3 podras introducirte a este lenguaje y poder construir tus propias aplicaciones web.

Igualmente, si quieres explorar las partes de una función, pero de otro lenguaje como lo es

• Python, te dejamos el post: Anatomía del código: Funciones en Python, y
• de un lenguaje basado en JavaScript para escribir contratos inteligentes para la Web 3, te dejamos el postAnatomía del código: Funciones en Solidity

Y esto ha sido todo de este post, si te han ayudado estos conceptos, ¡golpea al botón de me gusta!, déjanos un comentario sobre qué otro tema deberíamos abordar como este post.

Y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter e Instagram, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify y en Apple Music

¡Hasta la próxima!, y chao mundo