Novedades ES6

Caracteres válidos para el nombre de una funcion y funciones anidadas

.Cuando definimos una función podemos emplear letras minúsculas, mayúsculas, números siempre y cuando no ocupe la primer posición en el nombre, el caracter  '_' y el caracer '$', también  JavaScript permite definir funciones dentro de otras funciones.

Una definición de función (también denominada declaración de función o expresión de función) consta de la palabra clave function, seguida de:

  • El nombre de la función.
  • Una lista de parámetros de la función, entre paréntesis y separados por comas.
  • Las declaraciones de JavaScript que definen la función, encerradas entre llaves, { ... }.

Por ejemplo, el siguiente código define una función simple llamada square ("cuadrado"):

function square(number) {
  return number * number;
}

La función square toma un parámetro, llamado number. La función consta de una declaración que dice devuelva el parámetro de la función (es decir, number) multiplicado por sí mismo. La instrucción return especifica el valor devuelto por la función:

return number * number;

Los parámetros primitivos (como un number) se pasan a las funciones por valor; el valor se pasa a la función, pero si la función cambia el valor del parámetro, este cambio no se refleja globalmente ni en la función que llama. Si pasas un objeto (es decir, un valor no primitivo, como Array o un objeto definido por el usuario) como parámetro y la función cambia las propiedades del objeto, ese cambio es visible fuera de la función, como se muestra en el siguiente ejemplo:

function myFunc(theObject) {
theObject.make = 'Toyota';
}

[parcial]var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
var x, y;

x = mycar.make; // x obtiene el valor "Honda"

myFunc(mycar);
y = mycar.make; // y obtiene el valor "Toyota"
// (la propiedad make fue cambiada por la función)
Expresiones function

Si bien la declaración de función anterior sintácticamente es una declaración, las funciones también se pueden crear mediante una expresión function.
Esta función puede ser anónima; no tiene por qué tener un nombre. Por ejemplo, la función square se podría haber definido como:

const square = function(number) { return number * number }
var x = square(4) // x obtiene el valor 16
Sin embargo, puedes proporcionar un nombre con una expresión function. Proporcionar un nombre permite que la función se refiera a sí misma y también facilita la identificación de la función en el seguimiento de la pila de un depurador:
const factorial = function fac(n) {
return n < 2 ? 1 : n * fac(n - 1)
}
console.log(factorial(3))
Las expresiones function son convenientes cuando se pasa una función como argumento a otra función. El siguiente ejemplo muestra una función map que debería recibir una función como primer argumento y un arreglo como segundo argumento.
function map(f, a) {
let result = []; // Crea un nuevo arreglo
let i; // Declara una variable
for (i = 0; i != a.length; i++)
result[i] = f(a[i]);
return result;
}

En el siguiente código, la función recibe una función definida por una expresión de función y la ejecuta por cada elemento del arreglo recibido como segundo argumento.

function map(f, a) {
let result = []; // Crea un nuevo arreglo
let i; // Declara una variable
for (i = 0; i != a.length; i++)
result[i] = f(a[i]);
return result;
}
const f = function(x) {
return x * x * x;
}
let numbers = [0, 1, 2, 5, 10];
let cube = map(f,numbers);
console.log(cube);

La función devuelve: [0, 1, 8, 125, 1000].
En JavaScript, una función se puede definir en función de una condición. Por ejemplo, la siguiente definición de función define myFunc solo si num es igual a 0:

var myFunc;
if (num === 0) {
myFunc = function(theObject) {
theObject.make = 'Toyota';
}
}

Además de definir funciones como se describe aquí, también puedes usar el constructor Function para crear funciones a partir de una cadena en tiempo de ejecución, muy al estilo de eval().
Un método es una función que es propiedad de un objeto.
Una convención muy extendida cuando se define una función es comenzar la primera palabra en minúscula y a partir de la segunda palabra disponer el primer caracter en mayúsculas:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
function calcularPerimetro(lado)
{
var per=lado*4;
return per;
}

var l=prompt('Ingrese valor del lado:','');
l=parseInt(l);
document.write(calcularPerimetro(l));
</script>

</body>
</html>

El nombre de la función en este ejemplo es: calcularPerimetro
Como vemos la primer palabra "calcular" hemos utilizado todo minúsculas y en la segunda palabra disponemos en mayúsculas el primer caracter "Perimetro".

Las funciones estándares de JavaScript tienen esta convención:

parseInt
parseFloat
prompt

Los métodos de distintas clases (Date, String) también cumplen esta convención:

getFullYear()
toUpperCase()
toLowerCase()
indexOf()
etc.

Siempre es conveniente utilizar nombres de funciones que sean significativas con el algoritmo que implementan: calcularPerimetro, sumar, calcularRaizCuadrada etc.

La regla de definir un nombre de función lo más claro posible puede saltearse con funciones que se utilizan constantemente (por ejemplo la librería JQuery de JavaScript define una función que tiene como nombre solo el caracter $)
Emplear un solo caracter para definir un nombre de función solo se aconseja para funciones de uso masivo.

Problema

Definir una función llamada $ que reciba como parámetro el id de un elemento HTML y retorne la referencia del mismo.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body id="cuerpo">
<script>
function $(ele)
{
return document.getElementById(ele);
}
function inicio()
{
$('cuerpo').style.backgroundColor='#ffff00';
}
window.onload=inicio;
</script>
</body>
</html>

La función $ recibe como parámetro el id de un elemento HTML y mediante el método getElementById extrae la referencia y lo retorna:

function $(ele)
{
return document.getElementById(ele);
}

La función inicio se ejecuta luego que la página está completamente cargada. Llama a la función $ pasando el id del body de la página y con el valor devuelto accedemos a la propiedad style del objeto:

function inicio()
{
$('cuerpo').style.backgroundColor='#ffff00';
}

Funciones anidadas

Puedes anidar una función dentro de otra función. La función anidada (interna) es privada de su función contenedora (externa).
También forma un cierre. Un cierre es una expresión (comúnmente, una función) que puede tener variables libres junto con un entorno que une esas variables (que "cierra" la expresión).

Dado que una función anidada es un cierre, significa que una función anidada puede "heredar" los argumentos y variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa.

Para resumir:
  • Solo se puede acceder a la función interna desde declaraciones en la función externa.
  • La función interna forma un cierre: la función interna puede usar los argumentos y variables de la función externa, mientras que la función externa no puede usar los argumentos y variables de la función interna.

El siguiente ejemplo muestra funciones anidadas:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body >
<script>function addSquares(a, b) {
function square(x) {
return x * x;
}
return square(a) + square(b);
}
a = addSquares(2, 3); // devuelve 13
b = addSquares(3, 4); // devuelve 25
c = addSquares(4, 5); // devuelve 41
document.write(a);
document.write('<br>');
document.write(b);
document.write('<br>');
document.write(c); </script>

</body>
</html>

Dado que la función interna forma un cierre, puedes llamar a la función externa y especificar argumentos tanto para la función externa como para la interna:
function outside(x) {
function inside(y) {
return x + y;
}
return inside;
}
fn_inside = outside(3); // Piensa en ello como: dame una función que agregue 3 a lo que sea que le des // eso
result = fn_inside(5); // devuelve 8

result1 = outside(3)(5); // devuelve 8