Nivel 1 JS

Propiedades

Funciones JavaScript

Las funciones se tratan de bloques de código a los que se les puede asignar un nombre como si de una variable se tratara, con el propósito de vincular la funcionalidad de todo el bloque a este nombre, en otras palabras, una función permite el ejecutar toda una funcionalidad múltiples veces simplemente con definirla una única vez, y realizar el llamado de esta utilizando su nombre cada vez que sea necesario ejecutar el código, de este modo ahorrando trabajo y simplificando el script de la página.

Formas de Crear Funciones y llamarlas

Para definir una función es necesario utilizar la palabra clave "function" seguida del nombre que se le asignará, unos paréntesis ( ) y por último unas llaves ( { } ) las cuales contendrán el bloque de código a convocar por el nombre, la palabra clave "function" está reservada para indicar que el bloque de código contenido dentro de esta se ejecutará cada vez que se realice el llamado de esta por el nombre asignado a esta.

Ejemplo

En este ejemplo se evidencia un bloque de código que realiza dos preguntas al usuario y lanza un "alert" en base a la respuesta de este, todo esto dentro de una función definida con el nombre de "saludar".

Llamado de una función

De este modo cada vez que se realice el llamado de esta a través de su nombre el bloque de código estructurado dentro de esta se ejecutará.

Existe una segunda forma de declarar una función, la cual es definir el nombre de esta e indicar con un signo igual (=) la palabra clave "function" seguida de los paréntesis ( ) y de las llaves que contendrán el bloque de código, de la siguiente forma:

Esta segunda forma de definir funciones tiene el mismo efecto que la primera, simplemente se trata de una alternativa a la hora de definirlas, la única diferencia con la forma tradicional es que esta forma permite encapsularla dentro de una variable.

Nota: El declarar una función no significa que esta se ejecutará, simplemente se está definiendo, es decir como: "esta función existe" pero en ningún momento se está indicando que se ejecuta, para esto es necesario realizar el respectivo llamado de esta.

Nota: Del mismo modo una función debe tener un uso concreto, no deben de tener múltiples funcionalidades, lo mejor es que cada función tenga una funcionalidad.

Return

Las funciones desarrollan una funcionalidad, sin embargo en cuanto a datos se refiere por sí solas no brindan ninguno, lo que es un problema a la hora de generar funciones que tengan el objetivo de generarlos o manipularlos, para estos casos existe la palabra clave "Return", se trata de una sentencia de culminación, es decir en el punto en el que esta sea ejecutada la función culminará y JavaScript continuará con la ejecución de otro bloque de código, pero al hacer "return" enviará un dato al exterior de la función, de ese modo se obtendrá un dato al ejecutarse una función.

En otras palabras "return" no solo indica la culminación de la función, sino que también permite definir si uno o más datos se enviarán al exterior de la función para que puedan ser manipulados por otros bloques de código.

Ejemplo

Resultado

En este ejemplo se aprecia una función que lanza una alerta al usuario, sin embargo luego se ejecuta un "return" el cual tiene indicado un dato de tipo cadena que será enviado al exterior de la función, el dato cadena es un resultado de ejecutar la función por ello a la vez que se realiza el llamado de esta se almacena el dato enviado dentro de la variable "saludo", por último se indica que se imprima en pantalla el valor de "saludo" (dato enviado por la función).

De este modo se puede usar "return" para enviar al exterior de la función cualquier dato, ya sea uno generado por esta como el resultado de una operación o un valor previamente definido.

Parámetros de una función

En una función es posible el enviarle uno o más datos en particular para que esta los pueda emplear en su proceso, para hacerlo se emplean los paréntesis que forman parte de la estructura de las funciones, dentro de estos se definirá una variable local de la función por cada dato que esta necesite para operar.

De este modo al realizar el llamado de la función se ingresará los datos dentro de los paréntesis que acompañan al nombre de esta, los cuales serán almacenados por las variables declaradas en la formulación de la función de esta forma:

Ejemplo

En este ejemplo se puede apreciar el cómo los paréntesis de la estructura de una función se definen dos variables "num1" y "num2" las cuales recibirán los datos proveídos para la ejecución de la función, a la vez que estas variables son operadas por el código dentro de esta.

Ejecución

Resultado

En este segundo ejemplo se llama la función "suma" a la vez que se asigna a una variable llamada "resultado" para poder guardar los datos retornados por esta, se puede apreciar el cómo al realizar el llamado de la función se envían dos datos dentro de los paréntesis de esta (20 y 25), los cuales serán recibidos por las variables de la imagen anterior y operados por la función, de ese modo resultando en el valor 45 el cual es retornado hasta la variable "resultado".

De este modo una función puede ser utilizada cada vez que sea necesario ya que en cada caso con enviar los datos pertinentes se obtendrá un resultado en base a estos.

Nota: En el caso de que la función no requiera de ningún parámetro simplemente se incorporan los paréntesis a la estructura de function dejándolos vacíos, ya que estos forman parte de la sintaxis de estas.

Nota: Las funciones tienen un alcance Global, eso quiere decir que están disponibles para utilizarse en todo el documento JS, por otro lado las variables definidas dentro de estas solo deben tener un alcance regional, esto es lo mejor para evitar cualquier tipo de conflicto o error en el sistema. Por ello es importante definir las variables como "let", ya que de no especificarse JavaScript por defecto definirá las variables como "var" lo que les dará un alcance global generando dichos conflictos.

Funciones Flecha

Se trata de otra manera de definir funciones, sin embargo en esta ocasión este método sí presenta diferencias significativas con respecto a las formas mostradas con anterioridad.

Las funciones flecha se caracterizan por simplificar la estructura de las funciones, la cual consiste en el nombre de la función seguido por el símbolo igual (=), seguido por paréntesis ( ) con los respectivos parámetros (si son necesarios) dentro de estos luego se encuentra otro símbolo igual (=) junto con el signo mayor que (>) culminando con las llaves ( { } ) las cuales contienen el bloque de código de la función.

Como se puede apreciar en este caso la estructura de la función se encuentra un poco más simplificada, por ejemplo la palabra función es reemplazada por los símbolos igual y mayor que (=>) los cuales forman la tan llamada "flecha" y se ubican entre los paréntesis () y las llaves ( { } ).

Aun así las funciones flecha no terminan allí, ya que pueden llegar a simplificar aún más su estructura, ya que en estas en el caso de que solo se emplee un único parámetro se puede elegir omitir el uso de los paréntesis ().

Como se puede ver en este segundo ejemplo si se da el caso de que la función sea reducida y únicamente posea una línea de código como su bloque, incluso se puede llegar a omitir el uso de las llaves ( { } ).

Por lo tanto una de las ventajas de las funciones flecha es que son más simples de estructurar que las funciones tradicionales, y que mientras más reducida es la función en sí más simple puede ser su estructura.

Nota: Las funciones flecha únicamente retornan datos cuando están compuestas por una sola expresión de una línea (funciones simples de una línea).