{"id":2807,"date":"2021-09-30T22:32:39","date_gmt":"2021-10-01T03:32:39","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=2807"},"modified":"2024-04-02T17:59:29","modified_gmt":"2024-04-02T23:59:29","slug":"funciones-en-node-js-y-javascript-mas-detalles","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/funciones-en-node-js-y-javascript-mas-detalles\/","title":{"rendered":"Functions in Node.js and Javascript. More details"},"content":{"rendered":"

\u201cFunciones en node.js y Javascript. M\u00e1s detalles\u201d, es la segunda parte de lo m\u00e1s importante de las funciones en node.js y Javascript<\/a>. El tema de funciones es muy importante, y tambi\u00e9n muy extenso. Aprender\u00e1s sobre el prototipo de una funci\u00f3n, el comportamiento de la referencia a this,<\/code> propiedad especial prototype<\/code>, elevado de funciones y sus beneficios, variable adicional arguments<\/code> y m\u00e9todos \u00fatiles como call<\/code> and apply<\/code>. Y como extra muy importante, si llegas al final, las mejores recomendaciones de comunicaci\u00f3n a trav\u00e9s del c\u00f3digo.<\/p>\n\n\n\n

El prototipo de una funci\u00f3n en Node.js y Javascript<\/h2>\n\n\n\n

En la primera parte de Funciones en Node.js y Javascript. Pudimos entender que las funciones son objetos, y el porqu\u00e9 las funciones son objetos. Una funci\u00f3n tiene un prototipo, si no sabes que es un prototipo en Javascript, esto explica en this post<\/a>.<\/p>\n\n\n\n

Las funciones tienen como prototipo a Function.prototype<\/code>. Aunque a diferencia de los objetos literales no se ven tan clara la relaci\u00f3n, podemos ejecutar la siguiente prueba.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>greet<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>'<\/span>Hola<\/span>'<\/span>;<\/span><\/span>\n}<\/span><\/span>\ngreet<\/span>.<\/span>__proto__ <\/span>=<\/span> <\/span>function<\/span>.<\/span>prototype<\/span>;<\/span> <\/span>\/\/ true<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
El prototipo de Function.prototype<\/code> is Object.prototype<\/code>. Con esta \u00faltima sentencia comprobamos lo que hemos dicho de los objetos en Javascript, tienen como objeto base a Object.prototype.<\/code><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
greet<\/span>.<\/span>__proto__<\/span>.<\/span>proto <\/span>===<\/span> <\/span>object<\/span>.<\/span>prototype<\/span>;<\/span> <\/span>\/\/ true;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Aqu\u00ed el diagrama.<\/p>\n\n\n\n
\"Cadena
Cadena de prototipos de una funci\u00f3n<\/figcaption><\/figure>\n\n\n\n
Tipos de invocaciones y referencia this<\/code><\/h2>\n\n\n\n
Las funciones en Node.js y Javascript  se comportan de manera extra\u00f1a al ser invocadas. Este comportamiento cambia seg\u00fan la forma en como se invoque e influye en como se trata la referencia this<\/code>. En las siguientes cuatro secciones se explican estos tipos de invocaciones.<\/p>\n\n\n\n
Invocaci\u00f3n de funciones en Node.js y Javascript como m\u00e9todo<\/h2>\n\n\n\n
Cuando una funci\u00f3n se asigna a una propiedad de un objeto entonces decimos que es un m\u00e9todo. Y cuando un m\u00e9todo es invocado se puede hacer referencia al objeto al que pertenece a trav\u00e9s de la palabra reservada this<\/code>. <\/p>\n\n\n\n
Como vimos en el tema de objetos, se puede acceder a una propiedad a trav\u00e9s de corchetes, as\u00ed ['nombreDePropiedad']<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> James <\/span>=<\/span> <\/span>{<\/span><\/span>\n  <\/span>name<\/span>:<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span><\/span>\n  <\/span>greet<\/span>:<\/span> <\/span>functions<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> <\/span>`<\/span>Hola soy <\/span>${<\/span>this.<\/span>name<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n};<\/span><\/span>\nJames<\/span>.<\/span>greet<\/span>()<\/span>;<\/span> <\/span>\/\/ 'Hola soy Jaime'<\/span><\/span>\njaime[<\/span>'<\/span>greet<\/span>'<\/span>]()<\/span>;<\/span> <\/span>\/\/ 'Hola soy Jaime'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Invocaci\u00f3n de funciones en Node.js y Javascript como funci\u00f3n<\/h2>\n\n\n\n
Cuando una funci\u00f3n se invoca de esta manera y quiere hacer referencia a this<\/code>, este deber\u00eda obtener null<\/code> either undefined<\/code>, pero en lugar de eso, hace referencia al objeto global del ambiente donde se est\u00e1 ejecutando el c\u00f3digo, en el caso del navegador web hace referencia a window<\/code>. En el caso de node.js es el objeto global<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>greet<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>this;<\/span><\/span>\n}<\/span><\/span>\ngreet<\/span>()<\/span>;<\/span> <\/span>\/\/ En el navegador es window y en node.js es global<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Dentro del navegador web, es algo como lo siguiente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
Window <\/span>{<\/span><\/span>\n  <\/span>alert<\/span>:<\/span> <\/span>\u0192<\/span> <\/span>alert<\/span>()<\/span><\/span>\n  <\/span>console<\/span>:<\/span> <\/span>console<\/span> <\/span>{},<\/span><\/span>\n  <\/span>fetch<\/span>:<\/span> <\/span>\u0192<\/span> <\/span>fetch<\/span>()<\/span>,<\/span><\/span>\n  <\/span>isNaN<\/span>:<\/span> <\/span>\u0192<\/span> <\/span>isNaN<\/span>()<\/span>,<\/span><\/span>\n  <\/span>clearInterval<\/span>:<\/span> <\/span>\u0192<\/span> <\/span>clearInterval<\/span>()<\/span>,<\/span><\/span>\n  <\/span>clearTimeout<\/span>:<\/span> <\/span>\u0192<\/span> <\/span>clearTimeout<\/span>()<\/span>,<\/span><\/span>\n  <\/span>setInterval<\/span>:<\/span> <\/span>\u0192<\/span> <\/span>setInterval<\/span>()<\/span>,<\/span><\/span>\n  <\/span>setTimeout<\/span>:<\/span> <\/span>\u0192<\/span> <\/span>setTimeout<\/span>()<\/span><\/span>\n  <\/span>...<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Por otro lado en node.js es algo como esto.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>ref<\/span> *1> <\/span>object<\/span> [global] {<\/span><\/span>\n  global: [Circular <\/span>*<\/span>1<\/span>]<\/span>,<\/span><\/span>\n  clearInterval: [Function: clearInterval]<\/span>,<\/span><\/span>\n  clearTimeout: [Function: clearTimeout]<\/span>,<\/span><\/span>\n  setInterval: [Function: setInterval]<\/span>,<\/span><\/span>\n  setTimeout: [Function: setTimeout] <\/span>{<\/span><\/span>\n    <\/span>[<\/span>symbol<\/span>(<\/span>nodejs<\/span>.<\/span>util<\/span>.<\/span>promisify<\/span>.<\/span>custom<\/span>)]<\/span>:<\/span> [Getter]<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  queueMicrotask: [Function: queueMicrotask]<\/span>,<\/span><\/span>\n  performance: [Getter<\/span>\/<\/span>Setter]<\/span>,<\/span><\/span>\n  clearImmediate: [Function: clearImmediate]<\/span>,<\/span><\/span>\n  setImmediate: [Function: setImmediate] <\/span>{<\/span><\/span>\n    <\/span>[<\/span>symbol<\/span>(<\/span>nodejs<\/span>.<\/span>util<\/span>.<\/span>promisify<\/span>.<\/span>custom<\/span>)]<\/span>:<\/span> [Getter]<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>...<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ahora, si una funci\u00f3n interna hace referencia a this<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>greet<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>functions<\/span> <\/span>saludarInternamente<\/span>()<\/span> <\/span>{<\/span><\/span>\n  \t<\/span>return<\/span> <\/span>this;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>return<\/span> <\/span>saludarInternamente<\/span>()<\/span>;<\/span><\/span>\n}<\/span><\/span>\ngreet<\/span>()<\/span>;<\/span> <\/span>\/\/ En el navegador web es window, en Node.js es global<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Esta funci\u00f3n interna sigue haciendo referencia al objeto window<\/code> either global<\/code>. Y lamentablemente este mismo comportamiento sucede aun si la funci\u00f3n greet<\/code> es el m\u00e9todo de un objeto.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> James <\/span>=<\/span> <\/span>{<\/span><\/span>\n  <\/span>name<\/span>:<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span><\/span>\n  <\/span>greet<\/span>:<\/span> <\/span>functions<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>functions<\/span> <\/span>saludarInternamente<\/span>()<\/span> <\/span>{<\/span><\/span>\n      <\/span>return<\/span> <\/span>this;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>return<\/span> <\/span>saludarInternamente<\/span>()<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n};<\/span><\/span>\nJames<\/span>.<\/span>greet<\/span>()<\/span>;<\/span>  <\/span>\/\/ En el navegador web es window, en Node.js es global<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Cuando el objeto se crea a trav\u00e9s de una clase, la referencia a this<\/code> is undefined<\/code>, esto es una mejora, sin embargo, \u00bfTendr\u00eda m\u00e1s sentido que si hiciera referencia al objeto en cuesti\u00f3n? Yo opino que si, pero ese ejemplo vamos a guardarlo para cuando toquemos las clases.<\/p>\n\n\n\n
Invocaci\u00f3n de funciones en Node.js y Javascript como constructor<\/h2>\n\n\n\n
Javascript es un lenguaje de programaci\u00f3n orientado a objetos basado en prototipos. Originalmente no usa clases, pero intenta simular una sintaxis basada en clases. Estamos hablando del operador new<\/code>.<\/p>\n\n\n\n
Las funciones constructoras son funciones que se invocan con el operador new<\/code> para crear nuevos objetos. Como el ejemplo de abajo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>Persona<\/span>(<\/span>name<\/span>,<\/span> <\/span>edad<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>this.<\/span>name<\/span> <\/span>=<\/span> <\/span>name<\/span>;<\/span><\/span>\n  <\/span>this.<\/span>edad<\/span> <\/span>=<\/span> <\/span>edad<\/span>;<\/span><\/span>\n}<\/span><\/span>\nconst<\/span> James <\/span>=<\/span> <\/span>new<\/span> <\/span>Persona<\/span>(<\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span> <\/span>33<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Esta forma de crear objetos con una funci\u00f3n constructora permite que la referencia a this<\/code> est\u00e9 correctamente enlazada al nuevo objeto. Lo podemos comprobar cuando ejecutamos las siguientes l\u00edneas.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
James<\/span>.<\/span>name<\/span>;<\/span> <\/span>\/\/ 'Jaime'<\/span><\/span>\nJames<\/span>.<\/span>edad<\/span>;<\/span> <\/span>\/\/ 33<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Propiedad especial prototype<\/code><\/h3>\n\n\n\n
Existe una propiedad especial llamada prototype<\/code> en las funciones, esta no es la misma propiedad oculta que enlaza a Function.prototype<\/code>. <\/p>\n\n\n\n
Esta propiedad especial prototype<\/code> permite usar a una funci\u00f3n constructora para simular la herencia cl\u00e1sica. As\u00ed cuando se crea un nuevo objeto usando la funci\u00f3n constructora, este nuevo objeto pueda usar las propiedades de prototype<\/code>. Esto propiedad b\u00e1sicamente funciona igual que las propiedades Object.prototype<\/code>, Function.prototype<\/code>, Array.prototype<\/code>, y dem\u00e1s prototipos de objetos en Javascript. Con la diferencia, que nosotros agregamos el contenido manualmente a prototype<\/code>. A continuaci\u00f3n un ejemplo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>Persona<\/span>(<\/span>name<\/span>,<\/span> <\/span>edad<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>this.<\/span>name<\/span> <\/span>=<\/span> <\/span>name<\/span>;<\/span><\/span>\n  <\/span>this.<\/span>edad<\/span> <\/span>=<\/span> <\/span>edad<\/span>;<\/span><\/span>\n}<\/span><\/span>\nPersona<\/span>.<\/span>prototype<\/span>.<\/span>greet<\/span> <\/span>=<\/span> <\/span>functions<\/span> <\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>`<\/span>Hola soy <\/span>${<\/span>this.<\/span>name<\/span>}<\/span> y tengo <\/span>${<\/span>this.<\/span>edad<\/span>}<\/span> a\u00f1os<\/span>`<\/span>;<\/span><\/span>\n};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"Cadena
Cadena de prototipos de una funci\u00f3n y propiedad especial prototype<\/figcaption><\/figure>\n\n\n\n
Y con este ejemplo comprobamos que la funci\u00f3n greet<\/code> invocada desde el objeto James<\/code>, efectivamente tiene la referencia a this<\/code> enlazada correctamente. Y puede acceder al name<\/code> and edad<\/code> del nuevo objeto James<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> James <\/span>=<\/span> <\/span>new<\/span> <\/span>Persona<\/span>(<\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span> <\/span>33<\/span>)<\/span>;<\/span><\/span>\nJames<\/span>.<\/span>greet<\/span>()<\/span>;<\/span> <\/span>\/\/ Hola soy Jaime y tengo 33 a\u00f1os<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Visualmente es como el siguiente diagrama.<\/p>\n\n\n\n
\"Cadena
Cadena de prototipos de un objeto creado con una funci\u00f3n constructora<\/figcaption><\/figure>\n\n\n\n
Por \u00faltimo te preguntar\u00e1s, \u00bfPor qu\u00e9 no agregamos los m\u00e9todos dentro de la funci\u00f3n constructora Persona? Muy parecido a lo que hicimos cuando vimos el tema de closure<\/a>. <\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>Persona<\/span>(<\/span>name<\/span>,<\/span> <\/span>edad<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>this.<\/span>name<\/span> <\/span>=<\/span> <\/span>name<\/span>;<\/span><\/span>\n  <\/span>this.<\/span>edad<\/span> <\/span>=<\/span> <\/span>edad<\/span>;<\/span><\/span>\n  <\/span>this.<\/span>greet<\/span> <\/span>=<\/span> <\/span>functions<\/span> <\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> <\/span>`<\/span>Hola soy <\/span>${<\/span>this.<\/span>name<\/span>}<\/span> y tengo <\/span>${<\/span>this.<\/span>edad<\/span>}<\/span> a\u00f1os<\/span>`<\/span>;<\/span><\/span>\n  <\/span>};<\/span><\/span>\n}<\/span><\/span>\nconst<\/span> James <\/span>=<\/span> <\/span>new<\/span> <\/span>Persona<\/span>(<\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span> <\/span>33<\/span>)<\/span>;<\/span><\/span>\nJames<\/span>.<\/span>greet<\/span>()<\/span>;<\/span> <\/span>\/\/ Hola soy Jaime y tengo 33 a\u00f1os<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Pues la respuesta es que tambi\u00e9n se puede hacer, pero la desventaja es que estar\u00edamos creando nuevas funciones cada vez que creamos una instancia de Persona<\/code>. Con el uso de la propiedad prototype<\/code> no se crean nuevas funciones, solo se hacen referencia a ellas, es decir, cada nuevo objeto debe ir a buscar en sus prototipos a la funci\u00f3n saludar.<\/p>\n\n\n\n
Nota importante sobre las funciones constructoras<\/h3>\n\n\n\n
Las funciones constructoras siempre empiezan con una letra may\u00fascula, no porque la sintaxis del lenguaje lo necesite, sino para que los programadores identifiquen a una funci\u00f3n constructora de una que no lo es y se use adecuadamente el operador new<\/code>.<\/p>\n\n\n\n
Invocaci\u00f3n de funciones en Node.js y Javascript con apply<\/code> and call<\/code><\/h2>\n\n\n\n
Como ya hemos hecho mucho hincapi\u00e9, las funciones en Node.js y Javascript son objetos. Por lo tanto una funci\u00f3n tambi\u00e9n tiene m\u00e9todos. Los m\u00e9todos del prototipo Function.prototype.apply<\/code> and Function.prototype.call<\/code>, permiten definir expl\u00edcitamente la referencia a this<\/code> al ejecutarse el cuerpo de la funci\u00f3n.<\/p>\n\n\n\n
Invocaci\u00f3n con Function.prototype.apply<\/code><\/h3>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> James <\/span>=<\/span> <\/span>{<\/span><\/span>\n  <\/span>name<\/span>:<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span><\/span>\n  <\/span>greet<\/span>:<\/span> <\/span>functions<\/span>(<\/span>saludo<\/span>)<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> <\/span>`${<\/span>saludo<\/span>}<\/span>, soy <\/span>${<\/span>this.<\/span>name<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n};<\/span><\/span>\nJames<\/span>.<\/span>greet<\/span>(<\/span>'<\/span>Hola<\/span>'<\/span>)<\/span>;<\/span> <\/span>\/\/ Hola, soy Jaime<\/span><\/span>\nJames<\/span>.<\/span>greet<\/span>.<\/span>apply<\/span>(<\/span>{<\/span> <\/span>name<\/span>:<\/span> <\/span>'<\/span>Pepito<\/span>'<\/span> <\/span>},<\/span> [<\/span>'<\/span>Buenos d\u00edas<\/span>'<\/span>])<\/span>;<\/span> <\/span>\/\/ Buenos d\u00edas, soy Pepito<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
El m\u00e9todo apply<\/code> recibe como primer par\u00e1metro el objeto al que se va a enlazar la funci\u00f3n y podr\u00e1 hacer referencia usando this<\/code> y como segundo par\u00e1metro un arreglo de valores que son los par\u00e1metros de la funci\u00f3n. En este caso la funci\u00f3n saludar solo recibe una cadena de caracteres a trav\u00e9s del par\u00e1metro saludo<\/code>. Es por eso que solo necesita un arreglo con un solo elemento.<\/p>\n\n\n\n
Aqu\u00ed un ejemplo con una funci\u00f3n de dos par\u00e1metros.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>sumar<\/span>(<\/span>to<\/span>,<\/span> <\/span>b<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>to<\/span> <\/span>+<\/span> <\/span>b<\/span>;<\/span><\/span>\n}<\/span><\/span>\nsumar<\/span>.<\/span>apply<\/span>(<\/span>null,<\/span> [<\/span>1<\/span>,<\/span> <\/span>2<\/span>])<\/span>;<\/span> <\/span>\/\/ 3<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
En este ejemplo el primer par\u00e1metro del m\u00e9todo apply<\/code> is null<\/code> porque la funci\u00f3n no se enlaza a un objeto y no necesita usar la referencia this<\/code>.<\/p>\n\n\n\n
Invocaci\u00f3n con Function.prototype.call<\/code><\/h3>\n\n\n\n
Este m\u00e9todo es una simplificaci\u00f3n del m\u00e9todo apply<\/code>, igualmente recibe dos par\u00e1metros, el objeto al cual se har\u00e1 referencia con this<\/code> y los argumentos de la funci\u00f3n que va a invocar. La \u00fanica diferencia es que en lugar de recibir un array de par\u00e1metros para la funci\u00f3n que se va a invocar, recibe cualquier n\u00famero de par\u00e1metros separados con comas. A continuaci\u00f3n un ejemplo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>sumar<\/span>(<\/span>to<\/span>,<\/span> <\/span>b<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>to<\/span> <\/span>+<\/span> <\/span>b<\/span>;<\/span><\/span>\n}<\/span><\/span>\nsumar<\/span>.<\/span>call<\/span>(<\/span>null,<\/span> <\/span>1<\/span>,<\/span> <\/span>2<\/span>)<\/span>;<\/span> <\/span>\/\/ 3<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Par\u00e1metro extra arguments<\/code> de las funciones en Node.js y javascript<\/h2>\n\n\n\n
Cuando una funci\u00f3n es invocada, adicional a la lista de par\u00e1metros, tiene acceso a un par\u00e1metro llamado argument<\/code>. Este par\u00e1metro extra contiene la lista de todos los par\u00e1metros pasados en la invocaci\u00f3n de una funci\u00f3n.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>greet<\/span>(<\/span>complemento<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>arguments<\/span>;<\/span><\/span>\n}<\/span><\/span>\ngreet<\/span>(<\/span>'<\/span>Hola<\/span>'<\/span>)<\/span>;<\/span><\/span>\n\/*<\/span><\/span>\nArguments [<\/span><\/span>\n  0: "Hola",<\/span><\/span>\n  callee: \u0192 saludar(saludo),<\/span><\/span>\n  length: 1,<\/span><\/span>\n  Symbol(Symbol.iterator): \u0192 values(),<\/span><\/span>\n  [[Prototype]]: Object<\/span><\/span>\n]<\/span><\/span>\n*\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
arguments<\/code> es un objeto muy parecido a un array<\/code>, pero no lo es. En el ejemplo anterior vemos que su prototipo es Object.prototype<\/code> y para ser un array<\/code> deber\u00eda ser  Array.prototype<\/code>. <\/p>\n\n\n\n
Debido a lo anterior, arguments<\/code> no tiene todos los m\u00e9todos \u00fatiles de un array<\/code>. Por ejemplo, que tal si queremos recorrer la lista de todos los par\u00e1metros, en un arreglo se podr\u00eda usar el m\u00e9todo Array.prototype.forEach<\/code>, pero eso no es posible.<\/p>\n\n\n\n
Una forma de mitigar este inconveniente es convertir el objeto arguments<\/code> a un arreglo, usando el m\u00e9todo Array.from<\/code>. Y entonces si usar los m\u00e9todos de Array.prototype<\/code> que necesites. Ejemplo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>greet<\/span>(<\/span>complemento<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>args<\/span> <\/span>=<\/span> <\/span>array<\/span>.<\/span>from<\/span>(<\/span>arguments<\/span>)<\/span>;<\/span><\/span>\n  <\/span>args<\/span>.<\/span>forEach<\/span>(<\/span>actual<\/span> <\/span>=><\/span> <\/span>console<\/span>.<\/span>log<\/span>(<\/span>actual<\/span>))<\/span>;<\/span><\/span>\n}<\/span><\/span>\ngreet<\/span>(<\/span>'<\/span>Hola<\/span>'<\/span>,<\/span> <\/span>'<\/span>Soy Jaime<\/span>'<\/span>,<\/span> <\/span>'<\/span>Tengo 33 a\u00f1os<\/span>'<\/span>)<\/span>;<\/span><\/span>\n\/*<\/span><\/span>\nHola<\/span><\/span>\nSoy Jaime<\/span><\/span>\nTengo 33 a\u00f1os<\/span><\/span>\n*\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Aunque la funci\u00f3n saludar solo recibe un par\u00e1metro, aun as\u00ed todos los par\u00e1metros que se pasen en la invocaci\u00f3n, se guardan en arguments<\/code>.<\/p>\n\n\n\n
Elevado de funciones en Node.js y JavaScript<\/h2>\n\n\n\n
El elevado se refiere a que la creaci\u00f3n de funci\u00f3n sube hasta el inicio del \u00e1mbito en donde se encuentre. Solo la declaraci\u00f3n normal de funci\u00f3n puede ser elevada. Ejemplo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>greet<\/span>(<\/span>complemento<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>agregarComplemento<\/span>(<\/span>complemento<\/span>)<\/span>;<\/span><\/span>\n  <\/span>functions<\/span> <\/span>agregarComplemento<\/span>(<\/span>complemento<\/span>)<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> <\/span>`<\/span>Hola, <\/span>${<\/span>complemento<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span>\ngreet<\/span>(<\/span>'<\/span>soy Jaime<\/span>'<\/span>)<\/span>;<\/span> <\/span>\/\/ 'Hola, soy Jaime'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Como podemos ver la funci\u00f3n agregarComplemento<\/code> se puede utilizar antes de su definici\u00f3n, esto es porque javascript antes de ejecutar el c\u00f3digo, crea la funci\u00f3n al inicio del \u00e1mbito local donde se encuentra, el c\u00f3digo anterior se traduce antes de ser ejecutado a lo siguiente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>greet<\/span>(<\/span>complemento<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>functions<\/span> <\/span>agregarComplemento<\/span>(<\/span>complemento<\/span>)<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> <\/span>`<\/span>Hola, <\/span>${<\/span>complemento<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>return<\/span> <\/span>agregarComplemento<\/span>(<\/span>complemento<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span>\ngreet<\/span>(<\/span>'<\/span>soy Jaime<\/span>'<\/span>)<\/span>;<\/span> <\/span>\/\/ 'Hola, soy Jaime'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Las funciones en forma de expresi\u00f3n y funciones flecha no cuentan con este elevado de funciones, as\u00ed que es importante definirlas antes de ser usadas.<\/p>\n\n\n\n
Beneficio del elevado de funciones<\/h2>\n\n\n\n
Este comportamiento parece confuso, pero cuando est\u00e1s programando con funciones es muy \u00fatil. Cuando se programa se tiene funciones principales y funciones secundarias. Para la persona que lee nuestro c\u00f3digo muy a menudo es suficiente con visualizar las funciones principales para entender el c\u00f3digo, no tiene que perder el tiempo en ver los detalles de las funciones secundarias. Imaginate un archivo con cien l\u00edneas de c\u00f3digo y compara encontrar las funciones principales en las l\u00edneas de inicio contra encontrar las funciones principales al final.<\/p>\n\n\n\n
Veamos un ejemplo. Aqu\u00ed al lector solo le interesa a alto nivel lo que renderiza renderVista<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>renderVista<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>renderHeader<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderMain<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderFooter<\/span>()<\/span>;<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderHeader<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>renderMenu<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderBanner<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderSearchForm<\/span>()<\/span><\/span>\n  <\/span>\/\/ ....<\/span><\/span>\n}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderMenu<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderBanner<\/span>()<\/span>  <\/span>{<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderSearchForm<\/span>()<\/span>  <\/span>{<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n  <\/span>}<\/span><\/span>\nfunctions<\/span> <\/span>renderMain<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>renderContent<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderAside<\/span>()<\/span>;<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderContent<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderAside<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderFooter<\/span>()<\/span>  <\/span>{<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n  <\/span>}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Es facil, \u00bfVerdad?, solo leemos la primera funci\u00f3n e ignoramos el resto del c\u00f3digo.<\/p>\n\n\n\n
\u00bfPero qu\u00e9 pasa cuando ahora la funci\u00f3n principal se encuentra al final? Ejemplo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>renderMenu<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderBanner<\/span>()<\/span>  <\/span>{<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderSearchForm<\/span>()<\/span>  <\/span>{<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderHeader<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>renderMenu<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderBanner<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderSearchForm<\/span>()<\/span><\/span>\n  <\/span>\/\/ ....<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderMain<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>renderContent<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderAside<\/span>()<\/span>;<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderContent<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderAside<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderFooter<\/span>()<\/span>  <\/span>{<\/span><\/span>\n  <\/span>\/\/ ...<\/span><\/span>\n}<\/span><\/span>\nfunctions<\/span> <\/span>renderVista<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>renderHeader<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderMain<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderFooter<\/span>()<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Adem\u00e1s de ir hasta el final para encontrar la funci\u00f3n principal que nos interesa usar, se pierde el sentido de este archivo. O al menos tardamos m\u00e1s en entender el objetivo de este archivo, el cual es renderizar la vista.<\/p>\n\n\n\n
Por \u00faltimo, si quisieras, puedes hacer que todo viva dentro de una sola funci\u00f3n, utilizando funciones anidadas. Haciendo m\u00e1s claro la relaci\u00f3n entre las funciones. Como el siguiente ejemplo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
functions<\/span> <\/span>renderVista<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>renderHeader<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderMain<\/span>()<\/span>;<\/span><\/span>\n  <\/span>renderFooter<\/span>()<\/span>;<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderHeader<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>renderMenu<\/span>()<\/span>;<\/span><\/span>\n    <\/span>renderBanner<\/span>()<\/span>;<\/span><\/span>\n    <\/span>renderSearchForm<\/span>()<\/span><\/span>\n    <\/span>\/\/ ....<\/span><\/span>\n      <\/span>functions<\/span> <\/span>renderMenu<\/span>()<\/span> <\/span>{<\/span><\/span>\n      \t<\/span>\/\/ ...<\/span><\/span>\n      <\/span>}<\/span><\/span>\n      <\/span>functions<\/span> <\/span>renderBanner<\/span>()<\/span>  <\/span>{<\/span><\/span>\n        <\/span>\/\/ ...<\/span><\/span>\n      <\/span>}<\/span><\/span>\n      <\/span>functions<\/span> <\/span>renderSearchForm<\/span>()<\/span>  <\/span>{<\/span><\/span>\n        <\/span>\/\/ ...<\/span><\/span>\n      <\/span>}<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderMain<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>renderContent<\/span>()<\/span>;<\/span><\/span>\n    <\/span>renderAside<\/span>()<\/span>;<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n      <\/span>functions<\/span> <\/span>renderContent<\/span>()<\/span> <\/span>{<\/span><\/span>\n          <\/span>\/\/ ...<\/span><\/span>\n      <\/span>}<\/span><\/span>\n      <\/span>functions<\/span> <\/span>renderAside<\/span>()<\/span> <\/span>{<\/span><\/span>\n        <\/span>\/\/ ...<\/span><\/span>\n      <\/span>}<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>functions<\/span> <\/span>renderFooter<\/span>()<\/span>  <\/span>{<\/span><\/span>\n    <\/span>\/\/ ...<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\u00bfLas funciones son referencia o valor?<\/h2>\n\n\n\n
Como ya vimos en la publicaci\u00f3n sobre objetos, dado que la funci\u00f3n es un objeto, entonces una funci\u00f3n siempre ser\u00e1 una referencia.<\/p>\n\n\n\n
Diferencias importantes entre funciones flecha y tradicionales<\/h2>\n\n\n\n
Las funciones flechas tienen ciertas limitaciones si las comparamos con las funciones tradicionales, aunque hay que decir que si tu c\u00f3digo est\u00e1 enfocado a la programaci\u00f3n funcional, este tipo de funciones son muy convenientes.<\/p>\n\n\n\n
Sus limitaciones en comparacion con las funciones tradicionales son:<\/p>\n\n\n\n