Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Aprende Ciencias Computacionales con JavaScript: Parte 4, Funciones

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Learn Computer Science with JavaScript.
Learn Computer Science With JavaScript: Part 2, Conditionals
Learn Computer Science With JavaScript: Part 3, Loops

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Introducción

Supongamos que tienes un archivo de 82 líneas de longitud y que está compuesto solamente por una serie de sentencias (espero que esto no sea verdad, pero todo es posible). ¿Cómo podrías comprender lo que hace el programa? ¿cómo podrías modificarlo o usarlo? sería algo difícil hacer cualquier cosa con este código, ya que no tiene ninguna estructura.

Para resolver este problema podrías usar funciones. Una función es un grupo de sentencias que ejecutan una tarea específica. Las funciones nos permiten dividir un programa en programas más pequeños, permitiendo que nuestro código sea más legible, reutilizable y más fácil de probar.

Contenido

  • Funciones de tipo void (nulo)
  • Funciones que devuelven un valor
  • Ámbito
  • Parámetros
  • Módulos

Funciones de tipo void (nulo)

Este tipo de función enumera los pasos que el programa debe llevar a cabo. Supongamos que estamos escribiendo un programa para que un usuario inicie sesión en un sitio web. El programa puede estar compuesto por las siguientes tareas:

  • Obtener el nombre de usuario
  • Obtener la contraseña
  • Verificar si el nombre de usuario y la contraseña existen
  • Redirigir al usuario a su dashboard (tablero de mandos)

Cada uno de estos pasos puede estar contenido en una función para iniciar sesión. Esta es una función de ejemplo:

Este es el formato general de una función:

Para ejecutar la función (esta acción también es conocida como llamar o invocar a la función) debes escribir una sentencia que la llame.

Los paréntesis () se usan para enviar valores de entrada a la función. Al definir una función, el valor de entrada se conoce como parámetro. Cuando invocamos a la función, el valor de entrada es el valor real y es conocido como argumento. Ejemplo:

Con JavaScript ES6 puedes definir funciones usando la sintaxis flecha. A continuación se muestra nuestra función greet (saludo) definida mediante el uso de la sintaxis flecha.

Una función con un parámetro:

Una función con más de un parámetro:

Una función con múltiples sentencias:

Dado que una función flecha es una función anónima, le podemos proporcionar un nombre al asignarla a una variable. Las funciones flecha pueden ser útiles cuando el cuerpo de la función solamente tiene una sentencia.

Funciones que devuelven un valor

Este tipo de función devuelve un valor. La función debe terminar con una instrucción return. Este ejemplo devuelve la suma de dos números.

Este es el formato general para la definición de una función que devuelve un valor:

El valor de expression (expresión) es lo que la función devuelve como resultado. Este tipo de función es útil cuando se almacena en una variable.

Ámbito

El ámbito de una variable es la parte del programa en el que se puede acceder a una variable. Una variable puede ser local o global. El ámbito de una variable local se encuentra dentro de la función en la que dicha variable fue creada. Ningún código externo a la función puede acceder a sus variables locales.

Además, cuando usas let o const para declarar una variable, ésta tiene un ámbito de bloque. Un bloque es un conjunto de sentencias que pertenecen a un grupo en común. Un bloque puede ser tan simple como un código delimitado por llaves:

La variable a es local para el bloque en el que se encuentra incluida. Un bloque también puede ser un bucle o una instrucción if. Ejemplo:

Dado que nuestra instrucción console se encuentra en el mismo ámbito que nuestra variable a, dicha instrucción muestra el valor de la variable, que es 1. Sin embargo no tiene acceso a las variables que se encuentran dentro del bloque if. Ahora considera este ejemplo:

En este caso se mostrará el valor 2, esto se debe a que el ámbito de las variables a las que tiene acceso nuestra instrucción console se encuentra dentro del bloque if. Los parámetros de una función también son variables locales y solamente se puede acceder a ellos a través del código que se encuentra dentro de la función. Por otro lado, las variables globales pueden ser accedidas por todas las instrucciones del archivo de un programa. Ejemplo:

En este ejemplo a es una variable global y tenemos acceso a ella dentro de la función foo. La primera instrucción console mostrará el valor 1. Después de llamar a foo el valor de a se establece en 2, lo que ocasiona que la segunda instrucción console muestre un valor de 2.

Las variables globales deben usarse muy poco, o idealmente nunca. Dado que cualquier parte de un programa tiene acceso a las variables globales, existe el riesgo de que sus valores sean cambiados de maneras impredecibles. Esto ocasiona que un programa grande con miles de líneas de código sea más difícil de comprender, ya que no puedes ver con facilidad de qué manera se está usando la variable. Es mejor crear y usar variables locales.

Sin embargo es aceptable emplear una constante global si necesitas usar una variable en diferentes lugares de tu programa. Declarar una variable con la palabra clave const evita que sea modificada, lo que la vuelve más segura de usar. Solamente necesitas preocuparte por actualizar el valor de la constante en el lugar en el que fue declarada.

Parámetros

Recuerda que un parámetro es una variable usada por una función para aceptar datos. El parámetro recibe el valor de los argumentos de una función cuando ésta es invocada. A partir de ES6, los parámetros también pueden recibir valores predeterminados con el formato parameterName=value. En este caso puedes llamar a una función sin argumentos y ésta usará los valores predeterminados. Ejemplo:

El operador spread/rest es nuevo en ES6 y puede ser usado ya sea para expandir un arreglo o un objeto en valores individuales, o bien para condensar los parámetros de una función dentro de un arreglo. Este es un ejemplo del uso de un parámetro rest:

Módulos

Ahora supongamos que tienes un archivo de 1,082 líneas (he visto esto y debes huir si te encuentras con algo así). El archivo se encuentra organizado en funciones pero es difícil ver la manera en la que se relacionan entre sí.

Para agrupar un comportamiento relacionado debemos poner nuestro código en módulos. Un módulo en ES6 es un archivo que contiene funciones y variables relacionadas. Los módulos nos permiten ocultar propiedades privadas y exponer propiedades públicas que queramos usar en otros archivos. El nombre del archivo corresponde al nombre del módulo. Los módulos también tienen sus propios ámbitos. Para usar variables fuera del ámbito del módulo éstas deben ser exportadas. Las variables que no sean exportadas serán privadas y solamente puede accederse a ellas dentro del módulo.

Las propiedades individuales pueden exportarse de esta forma:

De forma alternativa, todas las propiedades pueden exportarse con una instrucción export:

Para usar las variables de un módulo debes importarlo al archivo. Puedes especificar qué elementos del módulo quieres importar de esta manera:

También puedes renombrar tu importación:

O puedes importar todas las propiedades del módulo:

Resumen

Las funciones nos permiten dividir nuestros programas en programas más pequeños que podemos administrar fácilmente. Esta práctica se conoce como modularización. Existen dos tipos de funciones: las funciones de tipo void (nulas) y las funciones que devuelven valores. Una función de tipo void ejecuta las instrucciones que se encuentran dentro de ella. Una función que devuelve valores nos da un valor como resultado.

El ámbito es la parte del programa en la que es posible acceder a una variable. Las variables declaradas dentro de una función, incluyendo a los parámetros de la misma, son locales. Los bloques también tienen ámbito, y es posible crear variables locales dentro de ellos.

Las variables que no estén contenidas en un bloque ni en un módulo son globales. Si necesitas una variable global es aceptable tener una constante global. De lo contrario intenta agrupar tu código en módulos, ya que éstos tienen su propio ámbito. Y aún mejor, los módulos le proporcionan estructura y organización a tu código.

Recursos

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.