Introducción a las funciones en Javascript: Conceptos y Métodos

En este artículo, aprenderás un poco más sobre el concepto de funciones en el lenguaje Javascript y también conocerás las principales funciones utilizadas en el desarrollo web.

Javascript

Javascript es un lenguaje de programación muy utilizado para el desarrollo de aplicaciones web, ya que permite la creación de componentes dinámicos e interactivos, lo que hace que las páginas sean intuitivas y muy atractivas para los usuarios.

Curiosidad

Una prueba interesante para visualizar directamente los efectos de Javascript en un sitio web es desactivarlo. Esto se puede hacer en el navegador Chrome siguiendo estos pasos: inserta en tu navegador Chrome://settings/content/javascript. Selecciona la opción "No permitir que los sitios usen Javascript". Accede a un sitio (una sugerencia: google.com) y observa los efectos de la página sin la aplicación de Javascript. En Google, fíjate especialmente en la barra de opciones donde se encuentran los ítems "Imágenes", "Videos", etc.

Un detalle importante: al hacer esta prueba, solo deshabilitas la visualización para ti y es posible revertir el cambio siguiendo los mismos pasos y seleccionando nuevamente la opción de permitir el uso de Javascript. Las páginas no se ven afectadas, ya que este cambio solo se refleja en tu navegador.

Funciones

“Una función es un bloque de código JavaScript definido una vez, pero que puede ejecutarse (o llamarse) cualquier número de veces”. Esta definición fue dada por David Flanagan en el famoso libro JavaScript: La Guía Definitiva y resume muy bien lo que son las funciones en el lenguaje. Son estructuras extremadamente útiles en la rutina de los desarrolladores, ya que permiten la creación de códigos más limpios, con fragmentos que se pueden reutilizar. Además, al utilizar funciones se minimiza la posibilidad de errores en la manipulación de esos fragmentos, ya que al modificar una función, esta repercutirá en todos los lugares donde se utilice. Una característica importantísima de las funciones es que tienen parámetros que funcionan como variables locales. Los valores de estos parámetros se pasan cuando se llama a las funciones.

Definiciones

Declaración de funciones (function declaration): la declaración de una función se realiza a partir del uso de la palabra function seguida por los símbolos (), dentro de los cuales se insertan los parámetros, y por las llaves {}, que engloban las instrucciones de la función. Mira el ejemplo:

En el ejemplo anterior, la función multiplicarNumero recibe a y b como parámetros y devuelve el valor de la operación de multiplicación de los dos valores. Observa que no pasamos los valores en sí, ya que debemos insertarlos al llamar a la función, como en el siguiente código:

Expresión de función (functions expression): las funciones también se pueden crear a través de una expresión y son útiles especialmente cuando el objetivo es pasar una función como argumento para otra función. Pueden ser anónimas o recibir un nombre, como en los ejemplos a continuación:

Arrow Functions (función flecha): este tipo de sintaxis sirve para escribir funciones de forma reducida, pero con el mismo propósito y resultado que las funciones normales. El objetivo es simplificar y hacer que el código sea más limpio. Mira un ejemplo de función flecha:

En las funciones flecha no se utiliza la palabra function sino el símbolo =>, que hace referencia justamente al nombre de este tipo de función.

Funciones constructoras (functions constructor): estas funciones se definen de manera similar a las otras declaraciones o expresiones. Sin embargo, hay algunas diferencias importantes. Generalmente, estas funciones se nombran con palabras que tienen la primera letra en mayúscula y, al invocarlas, requieren el uso de la palabra new. Observa el siguiente ejemplo:

En la constante user, estamos creando un nuevo usuario al invocar la función Usuario, pasando el nombre Luiza como parámetro.

Funciones generadoras (generator functions): las funciones generadoras tienen el símbolo * después de la palabra function y pueden pausarse y reanudarse durante su ejecución. Mira el ejemplo que detallaremos a continuación:

Observa que dentro de la función usamos la palabra yield que tiene el propósito de pausar la ejecución y devolver un valor. Cuando utilizamos gerador.next(), la función se ejecuta hasta encontrar la siguiente instrucción, es decir, el siguiente yield o hasta finalizar. Observe en nuestro ejemplo que agregamos cuatro console.log(generator.next()). Hasta ejecutar la cuarta vez, el valor se devolvía como se esperaba en la función y el hecho, que representaría el cierre de la función, era falso. Cuando llegamos al final, el valor regresa como indefinido y hecho como verdadero, lo que indica que la función se ha completado.

Métodos

Los métodos son funciones predefinidas que se utilizan para realizar operaciones específicas en varios tipos de datos, como strings, objetos o arrays. A continuación se presentan algunos ejemplos, junto con sus conceptos y ejemplos:

En este artículo, has conocido un poco más sobre las funciones, sus conceptos y definiciones en el lenguaje JavaScript.

¡Buena suerte!