Aprende Ciencias de la Computación con JavaScript Parte 4, Funciones

Introducción

Supongamos que tiene un archivo que tiene 82 líneas de largo y consiste solo en una serie de declaraciones. (Espero que esto no sea cierto, pero todo es posible). ¿Cómo entendería lo que hace el programa? ¿Cómo lo modificarías o usarías? Sería un poco difícil hacer algo con este código porque no hay una estructura para ello.  

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

Contenido

  • Funciones nulas
  • Función de retorno de valor
  • Alcance
  • Parámetros
  • Módulos

Funciones del vacío

Este tipo de función enumera los pasos que debe realizar el programa. Considere que estamos escribiendo un programa para registrar a un usuario en un sitio web. El programa podría consistir en las siguientes tareas:

  • Obtener el nombre de usuario
  • Obtener la contraseña
  • Compruebe si el nombre de usuario y la contraseña existen
  • Redirigir al usuario a su panel de control.

Cada uno de estos pasos puede estar contenido dentro de una función de inicio de sesión. Esta es una función de ejemplo:

function greet () console.log ("Hello, World");  

Esta es la forma general de una función:

function functionName () instrucción; declaración; etc.

Para ejecutar la función (también conocida como llamar a la función o invocar la función), escriba una declaración que la llame.

saludar(); 

los () Es donde pasamos entrada a la función. Cuando estamos definiendo la función, la entrada se llama un parámetro. Cuando llamamos a la función, la entrada será el valor real y se llama el argumento. Ejemplo:

función saludo (nombre) console.log ("Hola", + nombre);  saludar ("Alberta"); // Hola Alberta 

Con JavaScript ES6, puede definir funciones usando la sintaxis de flecha. Aquí está nuestra función de saludo definida usando la sintaxis de flecha:

let greet = () => console.log ("Hello, World");

Una función con un parámetro:

let greet = name => console.log ("Hello," + name);

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

let greet = (fname, lname) => console.log ("Hello," + fname + "" + name); 

Una función con múltiples afirmaciones:

let greet = (fname, lname) => let name = fname + "" + name; console.log ("Hola", + nombre); 

Como una función de flecha es una función anónima, le asignamos un nombre a nuestra función asignándola a una variable. Las funciones de flecha pueden ser útiles cuando el cuerpo de su función solo tiene una declaración.

Función de retorno de valor

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

función add (x, y) return x + y; 

Esta es la forma general que define una función de retorno de valor:

function functionName () instrucción; declaración; expresión de retorno;  

El valor de expresión Es lo que obtiene la salida por la función. Este tipo de función es útil cuando se almacena en una variable. 

deja variableName = functionName (); 

Alcance

El alcance de una variable es la parte del programa donde se puede acceder a una variable. Una variable puede ser local o global. El alcance de una variable local está dentro de la función en la que se creó. Ningún código fuera de la función puede acceder a sus variables locales. 

Además, cuando usas dejar o const Para declarar una variable, tienen ámbito de bloque. Un bloque es un conjunto de declaraciones que pertenecen juntas como un grupo. Un bloque podría ser tan simple como envolver nuestro código entre llaves:

vamos a = 2; 

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

deja a = 1; si (5> 4) vamos a = 2;  console.log (a); // 1 

Porque nuestra declaración de consola está en el mismo ámbito que nuestra primera variable una, muestra ese valor, que es 1. No tiene acceso a las variables dentro del bloque if. Ahora, considera este ejemplo:

deja a = 1; si (5> 4) vamos a = 2; console.log (a); // 2

Ahora se mostrará 2 porque el alcance de las variables a las que tiene acceso nuestra declaración de consola está dentro del bloque if. Los parámetros de una función también son variables locales y solo se puede acceder a ellos mediante un código dentro de la función. Las variables globales, por otro lado, pueden ser accedidas por todas las declaraciones en el archivo de un programa. Ejemplo:

deja a = 1; función foo () a = 2;  console.log (a); // 1 foo (); console.log (a); // 2

En este ejemplo, una es una variable global, y tenemos acceso a ella dentro de la función foo. La primera instrucción de consola mostrará 1. Después de llamar foo, El valor de una se establece en 2, haciendo que se muestre el segundo comando de consola 2. 

Las variables globales se deben utilizar muy poco, idealmente para nada. Debido a que cualquier parte de un programa puede acceder a las variables globales, corren el riesgo de ser modificadas de manera impredecible. En un programa grande con miles de líneas de código, hace que el programa sea más difícil de entender porque no se puede ver fácilmente cómo se usa la variable. Es mejor crear y utilizar variables locales..

Sin embargo, si necesita usar una variable en varios lugares de su programa, está bien usar una constante global. Declarando una variable con la const La palabra clave evita que se cambie, lo que hace que sea más seguro de usar. Solo debe preocuparse por actualizar el valor de la constante en el lugar donde se declaró..

Parámetros

Recuerde que un parámetro es una variable que una función utiliza para aceptar datos. Al parámetro se le asigna el valor de los argumentos de una función cuando se llama a la función. A partir de ES6, los parámetros también pueden tener valores predeterminados con el formato parámetroName = valor. En este caso, puede llamar a una función sin argumentos, y usará valores predeterminados. Ejemplo:

function greet (name = "world") console.log ("Hello," + name);  saludar (); //Hola Mundo

El operador de reparto / reposo es nuevo en ES6 y se puede utilizar para expandir una matriz u objeto en valores individuales o para reunir los parámetros de una función en una matriz. Este es un ejemplo del uso de un parámetro de descanso:

función foo (... args) console.log (args);  foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Módulos

Supongamos que ahora tienes un archivo que tiene 1.082 líneas. (He visto esto, y debería ejecutarlo si encuentra algo así.) El archivo está organizado en funciones, pero es difícil ver cómo se relacionan entre sí.. 

Para agrupar el 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 las propiedades públicas que queremos usar en otros archivos. El nombre del archivo sería el nombre del módulo. Los módulos también tienen su propio alcance. Para usar variables fuera del alcance del módulo, tienen que ser exportadas. Las variables que no se exportan serán privadas y solo se podrá acceder dentro del módulo.  

Las propiedades individuales se pueden exportar así:

función de exportación foo () console.log ("Hello World");  export let let = 82; exportación let baz = [1,2,3];

Alternativamente, todas las propiedades se pueden exportar con una declaración de exportación:

function foo () console.log ("Hello World");  let bar = 82; sea ​​baz = [1,2,3]; exportación foo, bar, baz;

Para utilizar las variables de un módulo, lo importa en el archivo. Puede especificar lo que quiere importar desde el módulo de esta manera:

importa foo, bar, baz desde "foo"; 

También puede cambiar el nombre de su importación:

importa foo como Foo desde "foo"; Foo ();

O puede importar todas las propiedades del módulo:

importar * como myModule desde "foo"; myModule.foo ();

revisión

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. Hay dos tipos de funciones: funciones nulas y funciones de valor devuelto. Una función nula ejecuta las declaraciones dentro de ella. Una función de retorno de valor nos devuelve un valor..  

El alcance es la parte del programa donde se puede acceder a una variable. Las variables declaradas dentro de una función, incluidos los parámetros de la función, son locales. Los bloques también tienen alcance, y las variables locales se pueden crear dentro de ellos. 

Las variables no encerradas en un bloque o módulo serán globales. Si necesita una variable global, es aceptable tener una constante global. De lo contrario, intente contener su código en módulos porque los módulos tienen su propio alcance. Pero aún mejor, los módulos le dan a su estructura de código y organización..  

Recursos

  • repl.it
  • Especificación ES6
  • No sabes JS: ES6 y más allá