ES6 | Funciones

La función ES6 es la misma que una función normal, pero ES6 tiene algunas diferencias. Una función es un conjunto de instrucciones que toma algunas entradas, realiza una tarea específica y produce una salida. Una función es un conjunto de códigos que se pueden reutilizar en el programa en cualquier momento. 

Sintaxis: 

function func-name() { 
   // body 
}

func-name();  // Calling 

Tipos de funciones: Hay varios tipos de funciones en ES6 JavaScript, todas ellas se mencionan a continuación:

Funciones parametrizadas: Esta función es la misma que una función normal. Estamos enviando algunos parámetros que son aceptados por la función de llamada y realiza alguna tarea en esos parámetros y produce una salida. 

Sintaxis: 

function func-name( p1, p2, . . ., p-n) {   
   // body 
}

func-name(1,"Geek", 3); // calling

Ejemplo: 

<script>
function add( p1, p2) {
   var sum = p1 + p2
   console.log("The sum of the values entered " + sum)
}
add(12, 10)
</script>

Producción: 

The sum of the values entered 22

Funciones retornables: las funciones que devuelven algún valor a la función principal o la función desde la que llamó. 

Sintaxis: 

function func_name() { 
   // statements 
   return value; 
}
var var_name = func_name

Ejemplo: 

<script>
function geeks( ) { 
    // body
    return 'GeeksforGeeks';
}
 
// calling
var gfg = geeks()
console.log(gfg)
</script>                   

Producción: 

GeeksforGeeks

Parámetros por defecto en funciones: Este concepto es nuevo en la versión ES6. Es similar a la función predeterminada en C++. Simplemente asignamos un valor predeterminado a los argumentos en la lista de parámetros. Si no se le pasan valores o no está definido, los parámetros se inicializan con estos valores predeterminados. 

Sintaxis:  

// p2 and p3 initialized with a default value
function func-name( p1, p2 = 0, p3 = 2) {
   // body 
}

func - name(1); // calling

Ejemplo: 

<script>
// p2 and p3 initialized with a default value
function sum( p1, p2 = 0, p3 = 2) {
   document.write(p1+p2+p3); //1+0+2= 3
}
sum(1);
</script>

Producción: 

3

Resto de parámetros en función: no restringe la cantidad de argumentos que se pueden pasar a una función. Es decir, podemos enviar 1, 2, 3 o muchos más argumentos a la misma función con diferentes llamadas a funciones. Los parámetros se escriben seguidos de “…”, como ejemplo “…p”, “…” define que puede haber muchos argumentos pasados ​​por la llamada a la función. 

Sintaxis:  

function func-name( ...p) // "p" is the parameter
// "..."  define the "Rest parameters"
{
   // body 
}

// calling
func-name(); // 0 argument
func-name(1); // 1 argument
func-name(1,"Geek"); // 2 arguments
func-name(1,"Geek",3); // 3 arguments

Ejemplo: 

<script>
function RestFunc( ...p) // "p" is the parameter
// "..."  define the "Rest parameters"
{
   document.write(p + "<br>");
}
  
// calling
  
RestFunc(1); // 1
RestFunc(2,"GFG"); // 2,GFG
RestFunc(3,"GeeK","GFG"); // 3, GeeK, GFG
</script>

Producción: 

1
2,GFG
3,GeeK,GFG

Función anónima: una función anónima es una función que se declara sin ningún identificador con nombre para referirse a ella. Estas funciones se declaran en tiempo de ejecución de forma dinámica. Puede tomar entradas y producir salidas. No se puede acceder después de su creación inicial.

 Sintaxis: 

var func = function(arguments)
{
    // body
}

Ejemplo: 

<script>
// "func" refer to the function
var func = function() {
    document.write("GeeksforGeeks");
}
 
// Calling
func();
</script>

Producción: 

GeeksforGeeks

Funciones Lambda o Función de flecha: Lambda se refiere a funciones anónimas. Es una función que no tiene nombre pero que normalmente se usa como un valor pasado a otra función como valor. La función lambda tiene una notación de flecha, esto es lo principal que diferencia una función lambda de otra función. Esto se introdujo en la versión ES6. También se conoce como la función de flecha. Proporciona una abreviatura para crear funciones anónimas. Se define usando la notación  “=>” .
 Sintaxis: 

• Función anónima con un argumento x que devuelve x + 1 

x => x + 1

• Igual que el anterior pero con un cuerpo de función 

x => {return x + 1}

• función de flecha de 2 argumentos 

(x, y) => x + y

• Igual que el anterior pero con un cuerpo de función 

(x, y) => {return x + y}

Ejemplo: 

<script>
//"=>" is use for arrow or lambda expression
var func = () =>
{
   document.write("Arrow function")
}
func()
</script>

Producción: 

Arrow function

Elevación de funciones: la elevación de funciones es un mecanismo de JavaScript donde las funciones se pueden usar antes de su declaración. Solo ocurre para declaraciones de funciones. Simplemente levanta el nombre de la función, también levanta la definición de la función real. 

Sintaxis:  

GFG();  // Calling before definition
function GFG() // Define after calling
{
  // body
}

Ejemplo:  

<script>
func();
 
// Calling before definition-->Hoisting
// "func" is the function
function func() {
    document.write("GeeksforGeeks");
}
</script> 

Producción: 

GeeksforGeeks

Función Generator(): Una función Generator es como una función normal. Pero una función normal se ejecuta hasta que regresa o finaliza. En la función Generador, la función se ejecuta hasta que el rendimiento regresa o finaliza. Se realiza utilizando la palabra clave yield en lugar de la palabra clave return. Cuando se llama a una función de Generador, devuelve el Objeto de Generador que contiene todo el Iterador de Generador que se itera usando el método next() o for…of loop. La declaración de rendimiento suspende la ejecución de la función temporalmente y devuelve un valor a la persona que llama. Lo principal es que cuando llamamos a una función muchas veces, la ejecución de esa función se detiene por un solo valor y en la siguiente llamada, la ejecución de esa función se reanuda desde esa posición de pausa. 

Sintaxis:  

function* func-name(){
     yield 'GEEK';
     yield 'GFG';
}

// Object creation of generator function
var v = func-name()
document.write.(v.next().value); //"GEEK" 
document.write.(v.next().value); //GFG

Ejemplo: 

<script>
 
// Generator Function
function * func() {
 
    // 3 different value
    // generates by 3 different call
    yield 'python';
    yield 'java';
    yield 'C++';    
}
    
// Calling the Generate Function
var g = func();
document.write(g.next().value+"<br>"); //python
// Paused execution on "python"
  
document.write(g.next().value+"<br>"); //java
// Paused execution on "java"
  
document.write(g.next().value); //c++
// Paused execution on "C++"
  
// "value" is keyword
</script>

Producción: 

python
java
C++

Función inmediatamente invocada: las expresiones de función inmediatamente invocadas se utilizan para evitar el levantamiento. Permite el acceso público a los métodos incluso si la privacidad de las variables no es pública. Estas funciones no requieren ninguna llamada explícita para ser invocadas. La declaración de esta función también es diferente de las funciones normales. La función total se declara bajo un par de 1er paréntesis. Esta cosa le dice al compilador que ejecute este bloque inmediatamente. Esto también se declara usando el “!” símbolo. 

Sintaxis:  

• usando el 1er paréntesis: 

(function ()
{ 
    // body 
}) ();

• usando «!» símbolo 

!function ()
{ 
    // body 
}();

Ejemplo: aquí, la segunda declaración es la expresión de función invocada inmediatamente, que se invocará después de la primera declaración en la función llamada y antes de la última declaración de la función llamada, incluso si la última declaración está bajo la función llamada. 

<script>
 
// Immediately Invoked Function Expression
function func() {
    document.write("do"+"<br>");
      
        // This function invoke immediately
        // after executing previous statement
        (function() { document.write("CODE"+"<br>"); })();
      
    document.write("at GeeksforGeeks");
  
    // Using "!" keyword
    document.write("<br><br>do"+"<br>");
      
        // Same thing using "!" symbol
        !function() { document.write("Practice"+"<br>"); } ();
      
    document.write("at GeeksforGeeks");
}
  
// Calling
func();
</script>

Producción: 

do
CODE
at GeeksforGeeks

do
Practice
at GeeksforGeeks