From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../functions/arguments/callee/index.html | 48 ++ .../reference/functions/arguments/index.html | 229 +++++++ .../functions/arguments/length/index.html | 131 ++++ .../reference/functions/arrow_functions/index.html | 530 +++++++++++++++++ .../functions/default_parameters/index.html | 234 ++++++++ .../javascript/reference/functions/get/index.html | 134 +++++ .../web/javascript/reference/functions/index.html | 661 +++++++++++++++++++++ .../functions/method_definitions/index.html | 226 +++++++ .../reference/functions/rest_parameters/index.html | 266 +++++++++ .../javascript/reference/functions/set/index.html | 217 +++++++ 10 files changed, 2676 insertions(+) create mode 100644 files/es/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/es/web/javascript/reference/functions/arguments/index.html create mode 100644 files/es/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/es/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/es/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/es/web/javascript/reference/functions/get/index.html create mode 100644 files/es/web/javascript/reference/functions/index.html create mode 100644 files/es/web/javascript/reference/functions/method_definitions/index.html create mode 100644 files/es/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/es/web/javascript/reference/functions/set/index.html (limited to 'files/es/web/javascript/reference/functions') diff --git a/files/es/web/javascript/reference/functions/arguments/callee/index.html b/files/es/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..1902131055 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,48 @@ +--- +title: callee +slug: Web/JavaScript/Referencia/Funciones/arguments/callee +tags: + - JavaScript + - JavaScript Reference + - Referencia +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +
+
{{jsSidebar("Functions")}}
+
+ +

Resumen

+ +

Especifica la función que se está ejecutando actualmente.

+ +

Descripción

+ +

callee es una propiedad de la variable local arguments disponible dentro de todos los objetos function; callee como una propiedad de {{jsxref("Funciones/arguments", "Function.arguments")}} ya no se utiliza. (Function.arguments en sí mismo está también desaconsejado.)

+ +

arguments.callee permite a funciones anónimas referirse a ellas mismas, lo cual es necesario en funciones anónimas recursivas.

+ +

La palabra clave this no se refiere a la función que se ejecuta actualmente. Use la propiedad callee para referirse a la función dentro del cuerpo de la función.

+ +

Ejemplos

+ +

Ejemplo: Usando arguments.callee en funciones anónimas recursivas

+ +

Una función recursiva debe ser capaz de referirse a sí misma. Típicamente, una función se refiere a sí misma por su nombre. Sin embargo, una función anónima no tiene nombre y por tanto es una variable de referencia para ella, es decir, si la función no está asignada a ninguna variable, la función no puede referirse a sí misma. (Se pueden crear funciones anónimas mediante una expresión {{jsxref("Operadores/function", "function")}} o el constructor {{jsxref("Function")}}.) Aquí es donde entra arguments.callee.

+ +

El siguiente ejemplo define una función, la cuál, en cada turno, define y devuelve una función factorial.

+ +
function makeFactorialFunc() {
+   alert('making a factorial function!');
+   return function(x) {
+      if (x <= 1)
+         return 1;
+      return x * arguments.callee(x - 1);
+   };
+}
+
+var result = makeFactorialFunc()(5); // returns 120 (5 * 4 * 3 * 2 * 1)
+
+ +

this example isn't very practical, but then again, there are few practical cases where arguments.callee is necessary, and most of the those cases involve closures

+ +

 

diff --git a/files/es/web/javascript/reference/functions/arguments/index.html b/files/es/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..ab768cff21 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,229 @@ +--- +title: El objeto arguments +slug: Web/JavaScript/Referencia/Funciones/arguments +tags: + - Funciones + - JavaScript + - Namespace + - argumentos + - arguments + - espacio de nombres + - multiples +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +
{{jsSidebar("Functions", "Funciones")}}
+ +

arguments es un objeto similar a Array accesible dentro de funciones que contiene los valores de los argumentos pasados a esa función.

+ +
{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}
+ + + +

Descripción

+ +
+

Nota: Si estás escribiendo código compatible con ES6, entonces se deben preferir los {{jsxref("Functions/rest_parameters", "parámetros resto")}}.

+
+ +
+

Nota: "similar a Array" significa que arguments tiene una propiedad {{jsxref("Functions/arguments/length", "lenght")}} y propiedades indexadas desde cero, pero no tiene métodos integrados de {{jsxref("Array")}} como {{jsxref("Array.forEach", "forEach()")}} o {{jsxref("Array.map", "map()")}}. Ve la §Descripción para obtener más detalles.

+
+ +

El objeto arguments es una variable local disponible en todas las funciones que no son {{jsxref("Functions/Arrow_functions", "funciones flecha")}}. Puedes hacer referencia a los argumentos de una función dentro de esa función utilizando su objeto arguments. Tiene entradas para cada argumento con el que se llamó a la función, con el índice de la primera entrada en 0.

+ +

Por ejemplo, si a una función se le pasan 3 argumentos, puedes acceder a ellos de la siguiente manera:

+ +
arguments[0] // primer argumento
+arguments[1] // segundo argumento
+arguments[2] // tercer argumento
+
+ +

También puedes establecer o reasignar cada argumento:

+ +
arguments[1] = 'new value';
+
+ +

El objeto arguments no es un {{jsxref("Array")}}. Es similar, pero carece de todas las propiedades de Array excepto de {{jsxref("Array.length", "length")}}. Por ejemplo, no tiene el método {{jsxref("Array.pop", "pop()")}}.

+ +

Sin embargo, se puede convertir en un Array real:

+ +
var args = Array.prototype.slice.call(arguments);
+// El uso de un arreglo literal es más corto que el anterior pero asigna un arreglo vacío
+var args = [].slice.call(arguments);
+
+ +

Así como puedes hacer con cualquier objeto tipo Array, puedes usar el método {{jsxref("Array.from()")}} de ES2015 o la {{jsxref("Operators/Spread_syntax", "propagación de sintaxis")}} para convertir arguments en un arreglo real:

+ +
let args = Array.from(arguments);
+// o
+let args = [...arguments];
+
+ +

El objeto arguments es útil para funciones llamadas con más argumentos de los que declara aceptar formalmente. Esta técnica es útil para funciones a las que se les puede pasar un número variable de argumentos, como {{jsxref("Math.min()")}}. Esta función de ejemplo acepta cualquier número de argumentos de cadena y devuelve la más larga:

+ +
function longestString() {
+  var longest = '';
+  for (var i=0; i < arguments.length; i++) {
+    if (arguments[i].length > longest.length) {
+      longest = arguments[i];
+    }
+  }
+  return longest;
+}
+
+ +

Puedes usar {{jsxref("Functions/arguments/lenght", "arguments.length")}} para contar con cuántos argumentos se llamó a la función. Si, en cambio, deseas contar cuántos parámetros se declara que acepta una función, inspecciona la propiedad {{jsxref("Function.length", "length")}} de esa función.

+ +

Usar typeof con arguments

+ +

El operador {{jsxref("Operators/typeof", "typeof")}} devuelve 'object' cuando se usa con arguments

+ +
console.log(typeof arguments); // 'object'
+ +

El tipo de argumentos individuales se puede determinar indexando arguments:

+ +
console.log(typeof arguments[0]); // devuelve el tipo del primer argumento
+ +

Propiedades

+ +
+
{{jsxref("Functions/arguments/callee", "arguments.callee")}}
+
Referencia a la función en ejecución a la que pertenecen los argumentos. Prohibida en modo estricto.
+
{{jsxref("Functions/arguments/length", "arguments.length")}}
+
El número de argumentos que se pasaron a la función.
+
{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}
+
Devuelve un nuevo objeto {{jsxref("Array/@@iterator", "Array iterator", "", 0)}} que contiene los valores de cada índice en arguments.
+
+ +

Ejemplos

+ +

Definición de una función que concatena varias cadenas

+ +

Este ejemplo define una función que concatena varias cadenas. El único argumento formal de la función es una cadena que contiene los caracteres que separan los elementos a concatenar.

+ +
function myConcat(separator) {
+  let args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}
+ +

Puedes pasar tantos argumentos como desees a esta función. Devuelve una lista de cadenas usando cada argumento en la lista:

+ +
// returns "red, orange, blue"
+myConcat(', ', 'red', 'orange', 'blue');
+
+// devuelve "elephant; giraffe; lion; cheetah"
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// devuelve "sage. basil. oregano. pepper. parsley"
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+ +

Definición de una función que crea listas HTML

+ +

Este ejemplo define una función que crea una cadena que contiene HTML para una lista. El único argumento formal para la función es una cadena que es "u" si la lista debe estar {{htmlelement("ul", "desordenada (con viñetas)")}}, u "o" si la lista es {{htmlelement("ol", "ordenada (numerada)")}}. La función se define de la siguiente manera:

+ +
function list(type) {
+  var html = '<' + type + 'l><li>';
+  var args = Array.prototype.slice.call(arguments, 1);
+  html += args.join('</li><li>');
+  html += '</li></' + type + 'l>'; // fin de la lista
+  return html;
+}
+ +

Puedes pasar cualquier número de argumentos a esta función y agregar cada argumento como un elemento de lista a una lista del tipo indicado. Por ejemplo:

+ +
let listHTML = list('u', 'One', 'Two', 'Three');
+
+/* la listHTML es:
+"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
+*/
+ +

Parámetros rest, predeterminados y desestructurados

+ +
+

El objeto arguments se puede utilizar junto con parámetros {{jsxref("Functions/rest_parameters", "rest")}}, {{jsxref("Functions/Default_parameters", "predeterminados")}} y {{jsxref("Operators/Destructuring_assignment", "desestructurados")}}.

+
+ +
function foo(...args) {
+  return args;
+}
+foo(1, 2, 3); // [1, 2, 3]
+
+ +

Si bien la presencia de parámetros rest, predeterminados o desestructurados no altera el comportamiento del objeto arguments en el código de modo estricto, existen sutiles diferencias para el código no estricto.

+ +

En el código de modo estricto, el objeto arguments se comporta de la misma manera independientemente de que se pasen parámetros rest, predeterminados o desestructurados a una función. Es decir, asignar nuevos valores a las variables en el cuerpo de la función no afectará al objeto arguments. La asignación de nuevas variables al objeto arguments tampoco afectará el valor de las variables.

+ +
+

Nota: No puedes escribir una directiva "use strict"; en el cuerpo de una definición de función que acepte parámetros rest, predeterminados o desestructurados. Si lo haces, generará un {{jsxref("Errors/Strict_Non_Simple_Params", "error de sintaxis")}}.

+
+ +

Las funciones no estrictas a las que se les pasan solo parámetros simples (es decir, no parámetros rest, predeterminados o desestructurados) sincronizarán el valor de los nuevos valores de las variables en el cuerpo de la función con el objeto arguments, y viceversa:

+ +
function func(a) {
+  arguments[0] = 99; // actualiza arguments[0] además actualiza a
+  console.log(a);
+}
+func(10); // 99
+
+ +

Y también:

+ +
function func(a) {
+  a = 99; // la actualización también actualiza arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 99
+
+ +

Por el contrario, las funciones no estrictas a las que se les pasan parámetros rest, predeterminados o desestructurados no sincronizarán los nuevos valores asignados a las variables de los argumentos en el cuerpo de la función con el objeto arguments. En cambio, el objeto arguments en funciones no estrictas con parámetros complejos siempre reflejarán los valores pasados a la función cuando se invocó (este es el mismo comportamiento exhibido por todas las funciones en modo estricto, independientemente del tipo de variables que se le pasen):

+ +
function func(a = 55) {
+  arguments[0] = 99; // actualizar arguments[0] tampoco actualiza a
+  console.log(a);
+}
+func(10); // 10
+ +

Y también:

+ +
function func(a = 55) {
+  a = 99; // actualizar a tampoco actualiza arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 10
+
+ +

Y también:

+ +
// Un parámetro predeterminado sin seguimiento
+function func(a = 55) {
+  console.log(arguments[0]);
+}
+func(); // undefined
+ +

Especificaciones

+ + + + + + + + + + + + +
Especificación
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Objectos arguments exóticos')}}
+ +

Compatibilidad del navegador

+ + + +

{{Compat("javascript.functions.arguments")}}

+ +

Ve también

+ + diff --git a/files/es/web/javascript/reference/functions/arguments/length/index.html b/files/es/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..b1d7698194 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,131 @@ +--- +title: arguments.length +slug: Web/JavaScript/Referencia/Funciones/arguments/length +tags: + - Funciones + - JavaScript + - Propiedades + - argumentos +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +
{{jsSidebar("Functions")}}
+ +

La propiedad arguments.length contiene el número de argumentos pasados a una función.

+ +

Sintaxis

+ +
arguments.length
+ +

Descripción

+ +

La propiedad arguments.length devuelve el número total de argumentos pasados a una función. Esto puede ser más o menos que el número de parametros definidos. (Véase {{jsxref("Function.length")}}).

+ +

Ejemplos

+ +

Usando arguments.length

+ +

En este ejemplo definimos una función que puede sumar dos o más números.

+ +
function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i < arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+
+ +
+

Tenga en cuenta la diferencia entre {{jsxref("Function.length")}} y arguments.length

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial. Implementado en JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad con los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Véase también

+ + diff --git a/files/es/web/javascript/reference/functions/arrow_functions/index.html b/files/es/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..6ea9a35595 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,530 @@ +--- +title: Funciones Flecha +slug: Web/JavaScript/Referencia/Funciones/Arrow_functions +tags: + - ECMAScript6 + - Intermedio + - JavaScript + - Referencia + - función +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +
{{jsSidebar("Functions", "Funciones")}}
+ +

Una expresión de función flecha es una alternativa compacta a una {{JSxRef("Operadores/function", "expresión de función")}} tradicional, pero es limitada y no se puede utilizar en todas las situaciones.

+ +

Diferencias y limitaciones:

+ + + +

{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}

+ +

Comparación de funciones tradicionales con funciones flecha

+ +

Observa, paso a paso, la descomposición de una "función tradicional" hasta la "función flecha" más simple:
+ Nota: Cada paso a lo largo del camino es una "función flecha" válida

+ +
// Función tradicional
+function (a){
+  return a + 100;
+}
+
+// Desglose de la función flecha
+
+// 1. Elimina la palabra "function" y coloca la flecha entre el argumento y el corchete de apertura.
+(a) => {
+  return a + 100;
+}
+
+// 2. Quita los corchetes del cuerpo y la palabra "return" — el return está implícito.
+(a) => a + 100;
+
+// 3. Suprime los paréntesis de los argumentos
+a => a + 100;
+ +
+

Como se muestra arriba, los { corchetes }, ( paréntesis ) y "return" son opcionales, pero pueden ser obligatorios.

+
+ +

Por ejemplo, si tienes varios argumentos o ningún argumento, deberás volver a introducir paréntesis alrededor de los argumentos:

+ +
// Función tradicional
+function (a, b){
+  return a + b + 100;
+}
+
+// Función flecha
+(a, b) => a + b + 100;
+
+// Función tradicional (sin argumentos)
+let a = 4;
+let b = 2;
+function (){
+  return a + b + 100;
+}
+
+// Función flecha (sin argumentos)
+let a = 4;
+let b = 2;
+() => a + b + 100;
+ +

Del mismo modo, si el cuerpo requiere líneas de procesamiento adicionales, deberás volver a introducir los corchetes Más el "return" (las funciones flecha no adivinan mágicamente qué o cuándo quieres "volver"):

+ +
// Función tradicional
+function (a, b){
+  let chuck = 42;
+  return a + b + chuck;
+}
+
+// Función flecha
+(a, b) => {
+  let chuck = 42;
+  return a + b + chuck;
+}
+ +
Y finalmente, en las funciones con nombre tratamos las expresiones de flecha como variables
+ +
+
// Función tradicional
+function bob (a){
+  return a + 100;
+}
+
+// Función flecha
+let bob = a => a + 100;
+
+ +
+ +
+ +

Sintaxis

+ +

Sintaxis básica

+ +

Un parámetro. Con una expresión simple no se necesita return:

+ +
param => expression
+ +

Varios parámetros requieren paréntesis. Con una expresión simple no se necesita return:

+ +
(param1, paramN) => expression
+ +

Las declaraciones de varias líneas requieren corchetes y return:

+ +
param => {
+  let a = 1;
+  return a + b;
+}
+ +

Varios parámetros requieren paréntesis. Las declaraciones de varias líneas requieren corchetes y return:

+ +
(param1, paramN) => {
+   let a = 1;
+   return a + b;
+}
+ +

Sintaxis avanzada

+ +

Para devolver una expresión de objeto literal, se requieren paréntesis alrededor de la expresión:

+ +
params => ({foo: "a"}) // devuelve el objeto {foo: "a"}
+ +

Los {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} son compatibles:

+ +
(a, b, ...r) => expression
+ +

Se admiten los {{JSxRef("Funciones/Parametros_por_defecto", "parámetros predeterminados")}}:

+ +
(a=400, b=20, c) => expression
+ +

{{JSxRef("Operadores/Destructuring_assignment", "Desestructuración")}} dentro de los parámetros admitidos:

+ +
([a, b] = [10, 20]) => a + b;  // el resultado es 30
+({ a, b } = { a: 10, b: 20 }) => a + b; // resultado es 30
+
+ +

Descripción

+ +

Consulta también "ES6 en profundidad: funciones flecha" en hacks.mozilla.org.

+ +

"this" y funciones flecha

+ +

Una de las razones por las que se introdujeron las funciones flecha fue para eliminar complejidades del ámbito ({{JSxRef("Operadores/this", "this")}}) y hacer que la ejecución de funciones sea mucho más intuitiva.

+ +
+

Si this es un misterio para ti, consulta {{JSxRef("Operadores/this", "este documento")}} para obtener más información sobre cómo funciona this. Para resumir, this se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave new. De lo contrario, this se establecerá —de forma predeterminada— en el {{Glossary("Scope", "ámbito o alcance")}} de window.

+
+ +

En las funciones tradicionales de manera predeterminada this está en el ámbito de window:

+ + + +
window.age = 10; // <-- ¿me notas?
+function Person() {
+  this.age = 42; // <-- ¿me notas?
+  setTimeout(function () {// <-- La función tradicional se está ejecutando en el ámbito de window
+    console.log("this.age", this.age); // genera "10" porque la función se ejecuta en el ámbito de window
+  }, 100);
+}
+
+var p = new Person();
+
+
+ +

Las funciones flecha no predeterminan this al {{Glossary("Scope", "ámbito o alcance")}} de window, más bien se ejecutan en el {{Glossary("Scope", "ámbito o alcance")}} en que se crean:

+ +
window.age = 10; // <-- ¿me notas?
+function Person() {
+  this.age = 42; // <-- ¿me notas?
+  setTimeout(() => {// <-- Función flecha ejecutándose en el ámbito de "p" (una instancia de Person)
+    console.log("this.age", this.age); // genera "42" porque la función se ejecuta en el ámbito de Person
+  }, 100);
+}
+
+var p = new Person();
+
+
+ +

En el ejemplo anterior, la función flecha no tiene su propio this. Se utiliza el valor this del {{Glossary("Scope", "ámbito")}} léxico adjunto; las funciones flecha siguen las reglas normales de búsqueda de variables. Entonces, mientras busca this que no está presente en el {{Glossary("Scope", "ámbito")}} actual, una función flecha termina encontrando el this de su {{Glossary("Scope", "ámbito")}} adjunto.

+ +

Relación con el modo estricto

+ +

Dado que this proviene del contexto léxico circundante, en el {{JSxRef("Modo_estricto", "modo estricto")}} se ignoran las reglas con respecto a this.

+ +
var f = () => {
+    'use strict';
+    return this;
+};
+
+f() === window; // o el objeto global
+ +

Todas las demás reglas del {{JSxRef("Modo_estricto", "modo estricto")}} se aplican normalmente.

+ +
+

Nota: Comprueba las notas sobre el {{JSxRef("Modo_estricto", "modo estricto")}}.

+
+ +

Funciones flecha utilizadas como métodos

+ +

Como se indicó anteriormente, las expresiones de función flecha son más adecuadas para funciones que no son métodos. Observa qué sucede cuando intentas usarlas como métodos:

+ +
'use strict';
+
+var obj = { // no crea un nuevo ámbito
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+
+obj.b(); // imprime indefinido, Window {...} (o el objeto global)
+obj.c(); // imprime 10, Object {...}
+ +

Las funciones flecha no tienen su propio this. Otro ejemplo que involucra {{JSxRef("Object.defineProperty()")}}:

+ +
'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () => {
+    console.log(this.a, typeof this.a, this); // indefinida 'undefined' Window {...} (o el objeto global)
+    return this.a + 10; // representa el objeto global 'Window', por lo tanto 'this.a' devuelve 'undefined'
+  }
+});
+
+ +

call, apply y bind

+ +

Los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} NO son adecuados para las funciones flecha, ya que fueron diseñados para permitir que los métodos se ejecuten dentro de diferentes ámbitos, porque las funciones flecha establecen "this" según el ámbito dentro del cual se define la función flecha.

+ +

Por ejemplo, {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} funcionan como se esperaba con las funciones tradicionales, porque establecen el ámbito para cada uno de los métodos:

+ +
// ----------------------
+// Ejemplo tradicional
+// ----------------------
+// Un objeto simplista con su propio "this".
+var obj = {
+    num: 100
+}
+
+// Establece "num" en window para mostrar cómo NO se usa.
+window.num = 2020; // ¡Ay!
+
+// Una función tradicional simple para operar en "this"
+var add = function (a, b, c) {
+  return this.num + a + b + c;
+}
+
+// call
+var result = add.call(obj, 1, 2, 3) // establece el ámbito como "obj"
+console.log(result) // resultado 106
+
+// apply
+const arr = [1, 2, 3]
+var result = add.apply(obj, arr) // establece el ámbito como "obj"
+console.log(result) // resultado 106
+
+// bind
+var result = add.bind(obj) // estable el ámbito como "obj"
+console.log(result(1, 2, 3)) // resultado 106
+ +

Con las funciones flecha, dado que la función add esencialmente se crea en el ámbito del window (global), asumirá que this es window.

+ +
// ----------------------
+// Ejemplo de flecha
+// ----------------------
+
+// Un objeto simplista con su propio "this".
+var obj = {
+    num: 100
+}
+
+// Establecer "num" en window para mostrar cómo se recoge.
+window.num = 2020; // ¡Ay!
+
+// Función flecha
+var add = (a, b, c) => this.num + a + b + c;
+
+// call
+console.log(add.call(obj, 1, 2, 3)) // resultado 2026
+
+// apply
+const arr = [1, 2, 3]
+console.log(add.apply(obj, arr)) // resultado 2026
+
+// bind
+const bound = add.bind(obj)
+console.log(bound(1, 2, 3)) // resultado 2026
+
+ +

Quizás el mayor beneficio de usar las funciones flecha es con los métodos a nivel del DOM (setTimeout, setInterval, addEventListener) que generalmente requieren algún tipo de cierre, llamada, aplicación o vinculación para garantizar que la función se ejecute en el ámbito adecuado.

+ +

Ejemplo tradicional:

+ +
var obj = {
+    count : 10,
+    doSomethingLater : function (){
+        setTimeout(function(){ // la función se ejecuta en el ámbito de window
+            this.count++;
+            console.log(this.count);
+        }, 300);
+    }
+}
+
+obj.doSomethingLater(); // la consola imprime "NaN", porque la propiedad "count" no está en el ámbito de window.
+ +

Ejemplo de flecha:

+ +
var obj = {
+    count : 10,
+    doSomethingLater : function(){  // por supuesto, las funciones flecha no son adecuadas para métodos
+        setTimeout( () => { // dado que la función flecha se creó dentro del "obj", asume el "this" del objeto
+            this.count++;
+            console.log(this.count);
+        }, 300);
+    }
+}
+
+obj.doSomethingLater();
+ +

Sin enlace de arguments

+ +

Las funciones flecha no tienen su propio objeto {{JSxRef("Funciones/arguments", "arguments")}}. Por tanto, en este ejemplo, arguments simplemente es una referencia a los argumentos del ámbito adjunto:

+ +
var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () => arguments[0] + n; // Los argumentos implícitos de foo son vinculantes. arguments[0] es n
+  return f();
+}
+
+foo(3); // 6
+ +

En la mayoría de los casos, usar {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} es una buena alternativa a usar un objeto arguments.

+ +
function foo(n) {
+  var f = (...args) => args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11
+ +

Uso del operador new

+ +

Las funciones flecha no se pueden usar como constructores y arrojarán un error cuando se usen con new.

+ +
var Foo = () => {};
+var foo = new Foo(); // TypeError: Foo no es un constructor
+ +

Uso de la propiedad prototype

+ +

Las funciones flecha no tienen una propiedad prototype.

+ +
var Foo = () => {};
+console.log(Foo.prototype); // undefined
+
+ +

Uso de la palabra clave yield

+ +

La palabra clave {{JSxRef("Operadores/yield", "yield")}} no se puede utilizar en el cuerpo de una función flecha (excepto cuando está permitido dentro de las funciones anidadas dentro de ella). Como consecuencia, las funciones flecha no se pueden utilizar como generadores.

+ +

Cuerpo de función

+ +

Las funciones flecha pueden tener un "cuerpo conciso" o el "cuerpo de bloque" habitual.

+ +

En un cuerpo conciso, solo se especifica una expresión, que se convierte en el valor de retorno implícito. En el cuerpo de un bloque, debes utilizar una instrucción return explícita.

+ +
var func = x => x * x;
+// sintaxis de cuerpo conciso, "return" implícito
+
+var func = (x, y) => { return x + y; };
+// con cuerpo de bloque, se necesita un "return" explícito
+
+ +

Devolver objetos literales

+ +

Ten en cuenta que devolver objetos literales utilizando la sintaxis de cuerpo conciso params => {object: literal} no funcionará como se esperaba.

+ +
var func = () => { foo: 1 };
+// ¡Llamar a func() devuelve undefined!
+
+var func = () => { foo: function() {} };
+// SyntaxError: la declaración function requiere un nombre
+ +

Esto se debe a que el código entre llaves ({}) se procesa como una secuencia de declaraciones (es decir, foo se trata como una etiqueta, no como una clave en un objeto literal).

+ +

Debes envolver el objeto literal entre paréntesis:

+ +
var func = () => ({ foo: 1 });
+ +

Saltos de línea

+ +

Una función flecha no puede contener un salto de línea entre sus parámetros y su flecha.

+ +
var func = (a, b, c)
+  => 1;
+// SyntaxError: expresión esperada, obtuve '=>'
+ +

Sin embargo, esto se puede modificar colocando el salto de línea después de la flecha o usando paréntesis/llaves como se ve a continuación para garantizar que el código se mantenga bonito y esponjoso. También puedes poner saltos de línea entre argumentos.

+ +
var func = (a, b, c) =>
+  1;
+
+var func = (a, b, c) => (
+  1
+);
+
+var func = (a, b, c) => {
+  return 1
+};
+
+var func = (
+  a,
+  b,
+  c
+) => 1;
+
+// no se lanza SyntaxError
+ +

Orden de procesamiento

+ +

Aunque la flecha en una función flecha no es un operador, las funciones flecha tienen reglas de procesamiento especiales que interactúan de manera diferente con {{JSxRef("Operadores/Operator_Precedence", "prioridad de operadores")}} en comparación con las funciones regulares.

+ +
let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () => {};
+// SyntaxError: argumentos de función flecha no válidos
+
+callback = callback || (() => {});    // bien
+
+ +

Ejemplos

+ +

Uso básico

+ +
// Una función flecha vacía devuelve undefinided
+let empty = () => {};
+
+(() => 'foobar')();
+// Devuelve "foobar"
+// (esta es una expresión de función invocada inmediatamente)
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) => a > b ? a : b;
+
+// Fácil filtrado de arreglos, mapeo, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// Cadenas de promesas más concisas
+promise.then(a => {
+  // ...
+}).then(b => {
+  // ...
+});
+
+// Funciones flecha sin parámetros que son visualmente más fáciles de procesar
+setTimeout( () => {
+  console.log('sucederá antes');
+  setTimeout( () => {
+    // código más profundo
+    console.log ('Sucederá más tarde');
+  }, 1);
+}, 1);
+
+ +

Especificaciones

+ + + + + + + + + + +
Especificación
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Definición de función flecha')}}
+ +

Compatibilidad del navegador

+ +
+ + +

{{Compat("javascript.functions.arrow_functions")}}

+
+ +

Ve también

+ + diff --git a/files/es/web/javascript/reference/functions/default_parameters/index.html b/files/es/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..e319a3606b --- /dev/null +++ b/files/es/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,234 @@ +--- +title: Parámetros predeterminados +slug: Web/JavaScript/Referencia/Funciones/Parametros_por_defecto +tags: + - Característica del lenguaje + - ECMAScript 2015 + - Funciones + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +
{{jsSidebar("Functions", "Funciones")}}
+ +

Parámetros predeterminados de función permiten que los parámetros con nombre se inicien con valores predeterminados si no se pasa ningún valor o undefined.

+ +
{{EmbedInteractiveExample("pages/js/functions-default.html")}}
+ + + +

Sintaxis

+ +
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
+   statements
+}
+
+ +

Descripción

+ +

En JavaScript, los parámetros de función están predeterminados en {{jsxref("undefined")}}. Sin embargo, a menudo es útil establecer un valor predeterminado diferente. Aquí es donde los parámetros predeterminados pueden ayudar.

+ +

En el pasado, la estrategia general para establecer valores predeterminados era probar los valores de los parámetros en el cuerpo de la función y asignar un valor si eran undefined.

+ +

En el siguiente ejemplo, si no se proporciona ningún valor para b cuando se llama a multiply, el valor de b sería undefined al evaluar a * b y multiply devolvería NaN.

+ +
function multiply(a, b) {
+  return a * b
+}
+
+multiply(5, 2)  // 10
+multiply(5)     // NaN !
+
+ +

Para protegerte contra esto, usarías algo como la segunda línea, donde b se establece en 1 si llamas a multiply con un solo argumento:

+ +
function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1
+  return a * b
+}
+
+multiply(5, 2)  // 10
+multiply(5)     // 5
+
+ +

Con los parámetros predeterminados en ES2015, las comprobaciones en el cuerpo de la función ya no son necesarias. Ahora, puedes asignar 1 como valor predeterminado para b en el encabezado de la función:

+ +
function multiply(a, b = 1) {
+  return a * b
+}
+
+multiply(5, 2)          // 10
+multiply(5)             // 5
+multiply(5, undefined)  // 5
+
+ +

Ejemplos

+ +

Pasar undefined vs. otros valores falsos

+ +

En la segunda llamada de este ejemplo, incluso si el primer argumento se establece explícitamente en undefined (aunque no null u otros valores {{Glossary("falsy", "falsos", "", 1)}} , el valor del argumento num sigue siendo el predeterminado.

+ +
function test(num = 1) {
+  console.log(typeof num)
+}
+
+test()           // 'number' (num se establece en 1)
+test(undefined)  // 'number' (num se establece en 1 también)
+
+// prueba con otros valores falsos:
+test('')         // 'string' (num se establece en '')
+test(null)       // 'object' (num se establece en null)
+
+ +

Evaluado en el momento de la llamada

+ +

El argumento predeterminado se evalúa en el momento de la llamada. Entonces, a diferencia de (por ejemplo) Python, se crea un nuevo objeto cada vez que se llama a la función.

+ +
function append(value, array = []) {
+  array.push(value)
+  return array
+}
+
+append(1)  // [1]
+append(2)  // [2], no [1, 2]
+
+ +

Esto incluso se aplica a funciones y variables:

+ +
function callSomething(thing = something()) {
+  return thing
+}
+
+let numberOfTimesCalled = 0
+function something() {
+  numberOfTimesCalled += 1
+  return numberOfTimesCalled
+}
+
+callSomething()  // 1
+callSomething()  // 2
+
+ +

Los parámetros anteriores están disponibles para los parámetros predeterminados posteriores

+ +

Los parámetros definidos anteriormente (a la izquierda) están disponibles para los parámetros predeterminados posteriores:

+ +
function greet(name, greeting, message = greeting + ' ' + name) {
+  return [name, greeting, message]
+}
+
+greet('David', 'Hi')                     // ["David", "Hi", "Hi David"]
+greet('David', 'Hi', 'Happy Birthday!')  // ["David", "Hi", "Happy Birthday!"]
+
+ +

Esta funcionalidad se puede aproximar de esta manera, lo que demuestra cuántos casos extremos se manejan:

+ +
function go() {
+  return ':P'
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a, b, c, d, e, f, g]
+}
+
+function withoutDefaults(a, b, c, d, e, f, g) {
+  switch (arguments.length) {
+    case 0:
+      a;
+    case 1:
+      b = 5;
+    case 2:
+      c = b;
+    case 3:
+      d = go();
+    case 4:
+      e = this;
+    case 5:
+      f = arguments;
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a, b, c, d, e, f, g];
+}
+
+withDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+withoutDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+ +

Efectos de el ámbito

+ +

Si se definen parámetros predeterminados para uno o más parámetros, se crea un segundo ámbito (registro de entorno), específicamente para los identificadores dentro de la lista de parámetros. Este ámbito es padre del ámbito creado para el cuerpo de la función.

+ +

Esto significa que no se puede hacer referencia a las funciones y variables declaradas en el cuerpo de la función desde los iniciadores de parámetros de valor predeterminado; intentar hacerlo arroja un {{jsxref("ReferenceError")}} en tiempo de ejecución.

+ +

También significa que las variables declaradas dentro del cuerpo de la función usando var enmascararán los parámetros del mismo nombre, en lugar de que el comportamiento habitual de las declaraciones var duplicadas no tenga ningún efecto.

+ +

La siguiente función arrojará un ReferenceError cuando se invoca, porque el valor del parámetro predeterminado no tiene acceso al ámbito secundario del cuerpo de la función:

+ +
function f(a = go()) { // Lanza un `ReferenceError` cuando se invoca a `f`.
+  function go() { return ':P' }
+}
+
+ +

...y esta función imprimirá undefined porque la variable var a se eleva solo a la parte superior del ámbito creado para el cuerpo de la función (y no hasta el ámbito principal creado para la lista de parámetros):

+ +
function f(a, b = () => console.log(a)) {
+  var a = 1
+  b() // Imprime `undefined`, porque los valores de los parámetros predeterminados existen en su propio ámbito
+}
+
+ +

Parámetros sin valores predeterminados después de los parámetros predeterminados

+ +

Los parámetros aún se establecen de izquierda a derecha, sobrescribiendo los parámetros predeterminados incluso si hay parámetros posteriores sin valores predeterminados.

+ +
function f(x = 1, y) {
+  return [x, y]
+}
+
+f()   // [1, undefined]
+f(2)  // [2, undefined]
+
+ +

Parámetro desestructurado con asignación de valor predeterminado

+ +

Puedes usar la asignación de valor predeterminado con la notación {{jsxref("Operators/Destructuring_assignment", "la desestructuración", "", 1)}}:

+ +
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z
+}
+
+f()  // 6
+ +

Especificaciones

+ + + + + + + + + + + + +
Especificación
{{SpecName('ESDraft', '#sec-function-definitions', 'Definición de Funciones')}}
+ +

Compatibilidad del navegador

+ +
+ + +

{{Compat("javascript.functions.default_parameters")}}

+
+ +

Ve también

+ + diff --git a/files/es/web/javascript/reference/functions/get/index.html b/files/es/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..7125ab0caa --- /dev/null +++ b/files/es/web/javascript/reference/functions/get/index.html @@ -0,0 +1,134 @@ +--- +title: get +slug: Web/JavaScript/Referencia/Funciones/get +tags: + - ECMAScript5 + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Functions/get +--- +
{{jsSidebar("Funciones")}}
+ +

Enlaza la propiedad de un objeto con una función que será llamada cuando la propiedad es buscada.

+ +

Sintaxis

+ +

{get prop() { . . . } }

+ +

Parámetros

+ +
+
prop
+
el nombre de la propiedad a unir con la función dada
+
+ +

Descripción

+ +

A veces es deseable permitir acceso a una propiedad que retorna un valor dinámicamente calculado, o si desea mostrar el estado de alguna variable interna sin requerir el uso de llamadas a métodos explícitos. En JavaScript, esto se puede lograr con el uso de un getter (captador). No es posible tener simultáneamente un getter ligado a una propiedad y que dicha propiedad tenga actualmente un valor, aunque es posible usar un getter junto con un setter para crear un tipo de pseudo-propiedad.

+ +

Tenga en cuenta lo siguiente al trabajar con la sintaxis get:

+ + + +

El getter puede ser removido usando el operador {{jsxref("Operadores/delete", "delete")}}.

+ +

Ejemplos

+ +

Definir un getter con el operador get

+ +

Esto creará una pseudo-propiedad latest (ver ejemplo) del objecto o que podría retornar la más reciente entrada dentro de o.log:

+ +
var o = {
+  get latest () {
+    if (this.log.length > 0) {
+      return this.log[this.log.length - 1];
+    }
+    else {
+      return null;
+    }
+  },
+  log: []
+}
+
+ +

Note que intentar asignar un valor a latest no lo cambiará.

+ +

Borrar un getter usando el operador delete

+ +
delete o.latest;
+
+ +

Compatibilidad de navegadores

+ +

Basado en la página de página de Robert Nyman

+ +

Sin soporte (notablemente en IE6-8) significa que el script lanzará un error de sintaxis.

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{ CompatGeckoDesktop("1.8.1") }}199.53
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Consulta también

+ + + +
+

 

+
+ +

 

diff --git a/files/es/web/javascript/reference/functions/index.html b/files/es/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..ac1bea24ea --- /dev/null +++ b/files/es/web/javascript/reference/functions/index.html @@ -0,0 +1,661 @@ +--- +title: Funciones +slug: Web/JavaScript/Referencia/Funciones +tags: + - Funciones + - Guia(2) + - JavaScript + - función +translation_of: Web/JavaScript/Reference/Functions +--- +
{{jsSidebar("Functions")}}
+ +

En términos generales, una función es un "subprograma" que puede ser llamado por código externo (o interno en caso de recursión) a la función. Al igual que el programa en sí mismo, una función se compone de una secuencia de declaraciones, que conforman el llamado cuerpo de la función. Se pueden pasar valores a una función, y la función puede devolver un valor.

+ +

En JavaScript, las funciones son objetos de primera clase, es decir, son objetos y se pueden manipular y transmitir al igual que cualquier otro objeto. Concretamente son objetos {{jsxref("Function")}}.

+ +

General

+ +

Toda función en JavaScript es un objeto Function. Ver {{jsxref("Function")}} para obtener información sobre las propiedades y métodos de los objetos Function.

+ +

Las funciones no son lo mismo que los procedimientos. Una función siempre devuelve un valor, pero un procedimiento, puede o no puede devolver un valor.

+ +

Para devolver un valor especifico distinto del predeterminado, una función debe tener una sentencia {{jsxref("Sentencias/return", "return")}}, que especifique el valor a devolver. Una función sin una instrucción return devolverá el valor predeterminado. En el caso de un {{jsxref("Object.prototype.constructor", "constructor")}} llamado con la palabra clave {{jsxref("new")}}, el valor predeterminado es el valor de su parametro. Para el resto de funciones, el valor predeterminado es undefined.

+ +

Los parámetros en la llamada a una función son los argumentos de la función. Los argumentos se pasan a las funciones por valor. Si la función cambia el valor de un argumento, este cambio no se refleja globalmente ni en la llamada de la función. Sin embargo, las referencias a objetos también son valores, y son especiales: si la función cambia las propiedades del objeto referenciado, ese cambio es visible fuera de la función, tal y como se muestra en el siguiente ejemplo:

+ +
/* Declarando la función 'myFunc' */
+ function myFunc(elobjeto)
+ {
+   elobjeto.marca= "Toyota";
+ }
+
+ /*
+  * Declarando la variable 'mycar';
+  * Se crea e inicializa el nuevo objeto;
+  * para hacer referencia a él mediante 'mycar'
+  */
+ var mycar = {
+   marca: "Honda",
+   modelo: "Accord",
+   año: 1998
+ };
+
+ /* Mostrando 'Honda' */
+ window.alert(mycar.marca);
+
+ /* Paso por referencia del objeto 'mycar' a la función 'myFunc'*/
+ myFunc(mycar);
+
+ /*
+  * Muestra 'Toyota' como valor de la propiedad 'marca'
+  * del objeto, que ha sido cambiado por la función.
+  */
+ window.alert(mycar.marca);
+ +

La palabra clave this no hace referencia a la función que está ejecutandose actualmente, por lo que debes referirte a los objetos Function por nombre, incluso dentro del cuerpo de la función. Como alternativa, puedes utilizar la propiedad arguments.callee (que no se recomienda).

+ +

Definiendo funciones

+ +

Hay varias formas de definir funciones:

+ +

Declaración de una función (La instrucción function)

+ +

Hay una sintaxis especial para declarar funciones (ver la instrucción {{jsxref("Sentencias/function","function")}} para más detalles):

+ +
function nombre([param[,param[, ...param]]]) {
+   instrucciones
+}
+
+ +
+
nombre
+
El nombre de la función.
+
+ +
+
param
+
El nombre de un argumento que se pasará a la función. Una función puede tener hasta 255 argumentos.
+
+ +
+
instrucciones
+
Las instruciones que forman el cuerpo de la función.
+
+ +

Expresión de una función (El operador function)

+ +

Una expresión function es similar y tiene la misma sintaxis que una declaración de función (ver operador {{jsxref("Operadores/function", "function")}} para más detalles):

+ +
function [nombre]([param[, param[, ...param]]]) {
+   instrucciones
+}
+
+ +
+
nombre
+
El nombre de la función, se puede omitir, en ese caso la función se conoce como función anónima.
+
+ +
+
param
+
El nombre de los argumentos que se pasarán a la función. Una función puede tener hasta 255 argumentos.
+
+ +
+
instrucciones
+
Las instrucciones que forman el cuerpo de la función.
+
+ +

La expresión de función flecha (=>)

+ +
+

Nota: Las expresiones de función Flecha son una tecnología experimental, parte de la proposición Harmony (EcmaScript 6) y no son ampliamente implementadas por los navegadores.

+
+ +

Una expresión de función flecha tiene una sintaxis más corta y su léxico se une a este valor (ver {{jsxref("Funciones/Arrow_functions", "arrow functions", "", 1)}} para más detalles):

+ +
([param] [, param]) => { instrucciones }
+
+param => expresión
+
+ +
+
param
+
El nombre de un argumento. Si no hay argumentos se tiene que indicar con (). Para un único argumento no son necesarios los parentesis. (como foo => 1)
+
instrucciones o expresión
+
Multiples instrucciones deben ser encerradas entre llaves. Una única expresión no necesita llaves. La expresión es, así mismo, el valor de retorno implícito de esa función.
+
+ +

El constructor Function

+ +

Como todos los demás objetos, los objetos {{jsxref("Function")}} se pueden crear mediante el operador new:

+ +
new Function (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Ningún o varios argumentos  son pasados para ser utilizados por la función como nombres de argumentos formales. Cada uno debe ser una cadena que se ajuste a las reglas de identificadores válidos en JavaScript, o a una lista de este tipo de cadenas separadas por comas; por ejemplo "x", "theValue", o "a,b".
+
+ +
+
Cuerpo de la función
+
Una cadena conteniendo las instrucciones JavaScript que comprenden la definición de la función.
+
+ +

Llamar al contructor Function como una función, sin el operador new, tiene el mismo efecto que llamarlo como un constructor.

+ +
Nota: Utilizar el constructor Function no se recomienda, ya que necesita el cuerpo de la función como una cadena, lo cual puede ocasionar que no se optimize correctamente por el motor JS, y puede también causar otros problemas.
+ +

El objeto arguments

+ +

Puedes referirte a los argumentos de una función dentro de la misma, utilizando el objeto arguments. Ver {{jsxref("Functiones/argument", "Function")}}.

+ +

Ámbito de ejecución y pila de funciones

+ +

some section about scope and functions calling other functions

+ +

Repaso

+ +

Una función puede referirse y llamarse a sí misma. Hay tres maneras en la que una función puede referirse a sí misma.

+ +
    +
  1. El nombre de la función
    2. +
  2. {{jsxref("arguments.callee")}}
    3. +
  3. una función dentro del ambito de ejecución que refiere a la función
    4. +
+ +

Por ejemplo, considere la siguiente definición de función:

+ +
var foo = function bar() {
+   // el cuerpo va aqui
+};
+
+ +

Dentro del cuerpo de la función, todo lo siguientes son lo mismo:

+ +
    +
  1. bar()
    2. +
  2. arguments.callee()
    3. +
  3. foo()
    4. +
+ +

Una función que se llama a sí misma es llamada una función recursiva. En algunas ocaciones, la recursión es análoga a un bucle. Ambos ejecutan el mismo código múltiples veces, y ambas requieren una condición (para evitar un bucle infinito, o en su lugar, recursión infinita en este caso). Por ejemplo, el siguiente bucle:

+ +
var x = 0;
+while (x < 10) { // "x < 10" es la condición
+   // haz algo
+   x++;
+}
+
+ +

puede ser convertida en una función recursiva y una llamada a esa función:

+ +
function loop(x) {
+   if (x >= 10) // "x >= 10" es la condición de salida (equivalente a "!(x < 10)")
+      return;
+   // haz algo
+   loop(x + 1); // la llamada recursiva
+}
+loop(0);
+
+ +

Sin embargo, algunos algoritmos no pueden ser bucles iterativos simples. Por ejemplo, obtener todos los nodos de una estructura de arbol (e.g. el DOM) es realizado de manera más fácil usando recursión:

+ +
function recorrerArbol (nodo) {
+   if (nodo == null) //
+      return;
+   // haz algo con el nodo
+   for (var i = 0; i < nodo.nodosHijos.length; i++) {
+       recorrerArbol(nodo.nodosHijos[i]);
+   }
+}
+
+ +

En comparación con el bucle de la función loop, cada llamada recursiva hace muchas llamadas recursivas aquí.

+ +

Es posible convertir cualquier algoritmo recursivo en uno no recursivo, pero a menudo la lógica es mucho más compleja y hacerlo requiere el uso de una pila. De hecho, la recursión utiliza una pila: la pila de funciones.

+ +

El comportamiento similar a la pila se puede ver en el ejemplo siguiente:

+ +
function foo(i) {
+   if (i < 0)
+      return;
+   document.writeln('inicio:' + i);
+   foo(i - 1);
+   document.writeln('fin:' + i);
+}
+foo(3);
+ +

que produce:

+ +
inicio:3
+inicio:2
+inicio:1
+inicio:0
+fin:0
+fin:1
+fin:2
+fin:3
+
+ +

Funciones anidadas y cierres

+ +

Puede anidar una función dentro de una función. La función anidada (inner) es privada a la función que la contiene (outer). También con la forma: aclosure.

+ +
+
Un cierre es una expresión (normalmente una función) que puede tener variables libres junto con un entorno que enlaza esas variables (que "cierra" la expresión).
+ Dado que una función anidada es un cierre, esto significa que una función anidada puede "heredar" los argumentos y las variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa.
+
+ +

Desde que la función anidada es un cierre (closure), esto 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 un scope (alcance) de la función externa.

+ +

Para resumir:

+ + + + + +

El ejemplo siguiente muestra funciones anidadas:

+ +
function addCuadrado(a,b) {
+   function cuadrado(x) {
+      return x * x;
+   }
+   return cuadrado(a) + cuadrado(b);
+}
+a = addCuadrado(2,3); // retorna 13
+b = addCuadrado(3,4); // retorna 25
+c = addCuadrado(4,5); // retorna 41
+
+ +

Dado que la función interna forma un cierre, puede llamar a la función externa y especificar argumentos para la función externa e interna

+ +
function fuerade(x) {
+   function dentro(y) {
+      return x + y;
+   }
+   return dentro;
+}
+resultado = fuerade(3)(5); // retorna 8
+
+ +

Consideraciones sobre la eficiencia

+ +

Observe cómo se conserva x cuando se devuelve dentro. Un cierre conserva los argumentos y las variables en todos los ámbitos que contiene. Puesto que cada llamada proporciona argumentos potencialmente diferentes, debe crearse un cierre para cada llamada a la función externa. En otras palabras, cada llamada a fuerade crea un cierre. Por esta razón, los cierres pueden usar una gran cantidad de memoria. La memoria se puede liberar sólo cuando el dentro devuelto ya no es accesible. En este caso, el cierre del dentro se almacena en resultado. Como el resultado está en el ámbito global, el cierre permanecerá hasta que se descargue el script (en un navegador, esto sucedería cuando la página que contiene el script esté cerrada).

+ +

Debido a esta ineficiencia, evite cierres siempre que sea posible, es decir, evite las funciones de anidamiento siempre que sea posible. Por ejemplo, considere el siguiente ejemplo:

+ +
function assignOnclick(elemento) {
+   element.onclick = function() {
+      this.style.backgroundColor = 'blue';
+   };
+}
+
+ +

Esto se puede volver a escribir para evitar el cierre. Sin embargo, la función interna anónima necesitaría ser nombrada y ya no sería privada para assignOnclick:

+ +
function assignOnclick(elemento) {
+   elemento.onclick = elemento_onclick;
+}
+
+function elemento_onclick() {
+   this.style.backgroundColor = 'blue';
+}
+
+ +

Multiples funciones anidadas

+ +

Las funciones pueden ser anidadas contigua de la otra, es decir, una función (A) que contiene una función (B) que contiene una función (C), etc. Ambas funciones B y C forman cierres aquí, por lo que B puede acceder a A y C pueden acceder a B. Además, como C puede acceder a B, que puede acceder a A, C también puede acceder a A. Por lo tanto, los cierres pueden contener múltiples ámbitos; contienen recursivamente el alcance de las funciones que lo contienen. Esto es llamado encadenamiento de objetos(scope chaining). (Por qué se llama "chaining"("encadenamiento") se explicará más adelante.)

+ +

Considere el siguiente ejemplo:

+ +
function A(x) {
+   function B(y) {
+      function C(z) {
+         alert(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // alerts 6 (1 + 2 + 3)
+
+ +

En este ejemplo, C accede a las B que hayan en y y A en x. Esto se puede hacer porque:

+ +
    +
  1. B forma un cierre que incluye a A, es decir, B puede acceder a los argumentos y variables de A.
    2. +
  2. C forma un cierre que incluye a B.
    3. +
  3. Como el cierre de B incluye a A, el cierre de C incluye a A, C puede acceder a los argumentos y variables de la Banda A. En otras palabras, codifica los ámbitos de B y A en ese orden.
    4. +
+ +

Lo contrario, sin embargo, no es cierto. A no puede acceder a C, porque A no puede acceder a ningún argumento o variable de B, que C es una variable de. Así, C permanece privado de sólo B.

+ +

Conflictos de nombre

+ +

Cuando dos argumentos o variables en los ámbitos de un cierre tienen el mismo nombre, existe un conflicto de nombres("name conflict"). Más alcances internos tienen prioridad, por lo que el alcance más interno tiene la más alta precedencia, mientras que el alcance más externo toma el más bajo. Esta es la cadena de alcance. El primero en la cadena es el alcance más interno, y el último es el alcance más exterior. Considera lo siguiente:

+ +
function fuerade() {
+   var x = 10;
+   function dentro(x) {
+      return x;
+   }
+   return dentro;
+}
+resultado = fuerade()(20); // retorna 20 en lugar de 10
+
+ +

El conflicto de nombres ocurre en la sentencia return x y está entre el parámetro x del dentroy la variable x del fuerade. La cadena de alcance aquí es {dentro, fuerade, global object}. Por lo tanto, la x de insidetiene precedentes sobre la x de fuerade, y 20 (dentrode x) se devuelve en lugar de 10 (fuerade de x).

+ +

Constructor vs declaración vs expresión

+ +

Las diferencias entre la Function constructora, la de declaración y la de expresión.

+ +

Compare lo siguiente:

+ +
    +
  1. Una función definida con el constructor Function asignado a la variable multiply                                                                                                                     + + 
    var multiply = new Function("x", "y", "return x * y;");
+
    +
    2. +
  2. Una declaración de una función denominada multiply                                                  + 
    function multiply(x, y) {
+   return x * y;
+}
+
    +
    3. +
  3. Una expresión de función anónima asignada a la variable multiply                           + 
    var multiply = function(x, y) {
+   return x * y;
+}
+
    +
    4. +
  4. Una declaración de una función denominada func_name asignada a la variable multiply                                                                                                                  + 
    var multiply = function func_name(x, y) {
+   return x * y;
+}
+
    +
    5. +
+ +

Todos hacen aproximadamente la misma cosa, con algunas diferencias sutiles:

+ + + +

Una declaración de función es muy fácilmente (ya menudo involuntariamente) convertida en una expresión de función. Una declaración de función deja de ser una cuando:

+ + + +

Ejemplos:

+ + + +

Definición condicional de una función

+ +

Las funciones se pueden definir de forma condicional utilizando expresiones de función o el constructor Function.

+ +

En la siguiente secuencia de comandos, la función zero nunca se define y no se puede invocar, porque 'if (0)' se evalúa como false:

+ +
if (0)
+   function zero() {
+      document.writeln("Esto es zero.");
+   }
+
+ +

Si se cambia el script para que la condición se convierta en 'if (1)', se define la función zero.

+ +
+

Nota: Aunque esto parece una declaración de función, ésta es en realidad una expresión de función ya que está anidada dentro de otra instrucción. Ver las diferencias entre las funciones de declaración y de expresión.

+
+ +
+

Nota: Algunos motores JavaScript, sin incluir SpiderMonkey, tratan incorrectamente cualquier expresión de función con un nombre como una declaración de función. Esto llevaría a que se definiera zero incluso con el siempre-falso("always-false") condicional. Una manera más segura de definir funciones condicionalmente es definir la función anónimamente y asignarla a una variable:

+
+ +
if (0)
+   var zero = function() {
+      document.writeln("Esto es zero.");
+   }
+
+ +

Funciones como manejadores de eventos

+ +

En JavaScript, los controladores de eventos DOM son funciones (en oposición a los objetos que contienen un método handleEvent en otros enlaces de idioma DOM). Las funciones se pasan un objeto de evento como el primer y único parámetro. Como cualquier otro parámetro, si el objeto de evento no necesita ser utilizado, puede omitirse en la lista de parámetros formales.

+ +

Los posibles objetivos de eventos en un documento HTML incluyen: window (Window objects("objeto de ventana"), including frames("marcos")), document (HTMLDocument objects("objetos HTMLDocument")), y elementos (Element objects("objetos Elemento")). En el HTML DOM, los destinos de evento tienen propiedades de controlador de eventos. Estas propiedades son nombres de eventos en minúsculas con prefijo "on", e.g. onfocus. Los eventos DOM Level 2 Events proporcionan una forma alternativa y más sólida de agregar oyentes de eventos.

+ +
+

Nota: Los eventos son parte del DOM, no de JavaScript. (JavaScript simplemente proporciona un enlace al DOM.)

+
+ +

El ejemplo siguiente asigna una función a un manejador de eventos de "foco"("focus") de ventana.

+ +
window.onfocus = function() {
+   document.body.style.backgroundColor = 'white';
+}
+
+ +

Si se asigna una función a una variable, puede asignar la variable a un controlador de eventos. El siguiente código asigna una función a la variable setBGColor.

+ +
var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
+
+ +

Puede utilizar esta variable para asignar una función a un controlador de eventos de varias maneras. Aquí hay dos formas:

+ +
    +
  1. Escritura con propiedades de evento DOM HTML
    + + 
    document.form1.colorButton.onclick = setBGColor;
+
    +
    2. +
  2. Atributo de evento HTML
    + + 
    <input name="colorBoton" type="button"
+   value="Cambia color de fondo"
+   onclick="setBGColor();"/>
+
    + +

    Un manejador de eventos establecido de esta manera es en realidad una función, denominada después del atributo, envuelta alrededor del código especificado. Esta es la razón por la que los paréntesis en "setBGColor()" son necesarios aquí (en lugar de sólo "setBGColor").

    +
    3. +
+ +

Es equivalente a:

+ +
document.form1.colorButton.onclick = function onclick(event) {
+   setBGColor();
+}
+
+ +

Observe cómo se pasa el objeto de evento a esta función anónima como event de parámetro. Esto permite que el código especificado utilice el objeto Evento("Event object)":

+ +
<input ...
+    onclick="alert(event.target.tagName);"/>
+
+ +

Al igual que cualquier otra propiedad que se refiere a una función, el controlador de eventos puede actuar como un método, y this se refiere al elemento que contiene el controlador de eventos. En el ejemplo siguiente, se llama a la función referida por onfocus con this igual a window.

+ +
window.onfocus();
+
+ +

Un error común de principiante de JavaScript es el añadir paréntesis y / o parámetros al final de la variable, es decir, llamar al manejador de eventos cuando lo asigna. La adición de estos paréntesis asignará el valor devuelto al llamar al manejador de eventos, que a menudo es undefined (si la función no devuelve nada), en lugar del controlador de eventos en sí:

+ +
document.form1.button1.onclick = setBGColor();
+
+ +

Para pasar parámetros a un manejador de eventos, el manejador debe ser envuelto en otra función de la siguiente manera:

+ +
document.form1.button1.onclick = function() {
+   setBGColor('Algun valor');
+};
+
+ +

Compatibilidad con versiones anteriores

+ +

JavaScript 1.1 y anteriores

+ +

No puede anidar una sentencia de función en otra instrucción o en sí misma.

+ +

Variables locales dentro de las funciones

+ +

arguments: Objeto similar a una matriz que contiene los argumentos pasados a la función en ejecución.

+ +

arguments.callee: Especifica la función en ejecución.

+ +

arguments.caller: Especifica la función que invocó la función en ejecución.

+ +

arguments.length: Especifica el número de argumentos pasados a la función.

+ +

Ejemplos

+ +

1) Devolver un número con formato

+ +

La siguiente función devuelve una cadena que contiene la representación formateada de un número rellenado con ceros a la izquierda.

+ +
// Esta función devuelve una cadena rellenada con ceros a la izquierda
+
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Inicializa un valor de retorno como cadena
+   var numZeros = totalLen - numStr.length; // Calcula el no. de ceros
+   for (var i = 1; i <= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+
+ +

Las siguientes sentencias llaman a la función padZeros.

+ +
var resultado;
+resultado = padZeros(42,4); // retorna "0042"
+resultado = padZeros(42,2); // retorna "42"
+resultado = padZeros(5,4);  // retorna "0005"
+
+ +

2) Determinar si existe una función

+ +

Puede determinar si existe una función utilizando el operador typeof. En el ejemplo siguiente, se realiza una prueba para determinar si el objeto window tiene una propiedad llamada noFunc que es una función. Si es así, se utiliza; de lo contrario, se tomarán otras medidas.

+ +
 if ('function' == typeof window.noFunc) {
+   // utiliza noFunc()
+ } else {
+   // hacer algo mas
+ }
+
+ +
+

Nota: Tenga en cuenta que en la prueba if, e utiliza una referencia a noFunc aquí no hay paréntesis "()" después del nombre de la función para que la función real no se llame.

+
+ +

Ver también

+ +

Function, sentencia function, operador function

+ +

{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions", "ru": "ru/\u042f\u0434\u0440\u043e_JavaScript_1.5_\u0421\u043f\u0440\u043e\u0432\u0447\u043d\u0438\u043a/Functions", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions", "ja": "ja/Core_JavaScript_1.5_Reference/Functions" } ) }}

diff --git a/files/es/web/javascript/reference/functions/method_definitions/index.html b/files/es/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..2aa23ca9b3 --- /dev/null +++ b/files/es/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,226 @@ +--- +title: Method definitions +slug: Web/JavaScript/Referencia/Funciones/Method_definitions +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +
A partir de ECMAScript 2015 (ES6), se introdujo una sintaxis abreviada para la definición de métodos en inicializadores de objetos. Es una forma abreviada para la asignación de una función al nombre del método.
+ +
 
+ +

Sintaxis

+ +
var obj = {
+  property( parameters… ) {},
+  *generator( parameters… ) {},
+// also with computed keys:
+  [property]( parameters… ) {},
+  *[generator]( parameters… ) {},
+// compare ES5 getter/setter syntax:
+  get property() {},
+  set property(value) {}
+};
+
+ +

Descripción

+ +

La sintaxis abreviada es similar a la introducida en ECMAScript 5 con getter y setter.

+ +

Dado el siguiente código:

+ +
var obj = {
+  foo: function() {},
+  bar: function() {}
+};
+ +

Ahora se puede abreviar esto mismo como:

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +
+

Nota : La sintaxis abreviada usa funciones con nombre en lugar de funciones anónimas (como en …foo: function() {}…). Las funciones con nombre pueden ser llamadas desde el cuerpo de la función (esto es imposible con funciones anónimas, ya que no existe un identificador al que referirse). Para más detalles, ver {{jsxref("Operators/function","function","#Examples")}}.

+
+ +

Abreviatura de métodos generadores

+ +

Los métodos generadores también pueden definirse usando la sintaxis abreviada. Note que el asterisco (*) en la sintaxis abreviada debe estar antes del nombre de propiedad del generador. Esto es, * g(){} funcionará, pero g *(){} no.

+ +
// Usando una propiedad con nombre (pre-ES6)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// El mismo objeto, usando la sintaxis abreviada
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1
+ +

Las definiciones de métodos no son constructores (instanciables con new)

+ +

Las las definiciones de métodos no son constructores y generarán un {{jsxref("TypeError")}} si intenta instanciarlos.

+ +
var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method no es un constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g no es un constructor (cambiado en ES2016)
+
+ +

Ejemplos

+ +

Caso de prueba simple

+ +
var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+
+ +

Nombres de propiedad computados

+ +

La sintaxis abreviada también soporta nombres de propiedades computados.

+ +
var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2
+ +

Especificaciónes

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES7')}}Cambiado el que los métodos generadores no deban tener una  trampa [[Construct]] y deban fallar cuando se usen con new.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Definición de métodos abreviada{{CompatChrome("39")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera("26")}}{{CompatNo}}
Métodos generadors no son constructores (ES2016){{CompatUnknown}}{{CompatGeckoDesktop("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Definición de métodos abreviada{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Métodos generadores no son constructores (ES2016){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notas específicas para SpiderMonkey

+ + + +

Ver también

+ + diff --git a/files/es/web/javascript/reference/functions/rest_parameters/index.html b/files/es/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..2e26e2c6e0 --- /dev/null +++ b/files/es/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,266 @@ +--- +title: Parámetros Rest +slug: Web/JavaScript/Referencia/Funciones/parametros_rest +tags: + - Funciones + - JavaScript + - Parametros Rest +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +
{{jsSidebar("Functions")}}
+ +

La sintaxis de los parámetros rest nos permiten representar un número indefinido de argumentos como un array.

+ +

{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}

+ +

La fuente interactiva de este ejemplo es almacenado en un repositorio de GitHub. Si a ti te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona este repositorio https://github.com/mdn/interactive-examples y envíanos un pull-request.

+ +

Sintaxis

+ +
function(a, b, ...theArgs) {
+  // ...
+}
+
+ +

Descripción

+ +

El último parámetro de una función se puede prefijar con ..., lo que hará que todos los argumentos restantes (suministrados por el usuario) se coloquen dentro de un array de javascript "estándar".

+ +

Sólo el último parámetro puede ser un "parámetro rest".

+ +
function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("one", "two", "three", "four", "five", "six");
+
+// Console Output:
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]
+
+ +

Diferencia entre los parámetros rest y el objeto arguments

+ +

Hay tres principales diferencias entre los parámetros rest y el objeto arguments:

+ + + +

De argumentos a array

+ +

Los parámetros rest han sido agregados para reducir el código repetitivo que se usaba en los parámetros.

+ +
// Antes de los parámetros rest, "arguments" se podía convertir en un array usando:
+
+function f(a, b) {
+
+  let normalArray = Array.prototype.slice.call(arguments)
+  // -- o  --
+  let normalArray = [].slice.call(arguments)
+  // -- o  --
+  let normalArray = Array.from(arguments)
+
+  let first = normalArray.shift()  // OK, nos da el primer argumento
+  let first = arguments.shift()    // ERROR (arguments no es un array)
+}
+
+// Ahora, puedes acceder fácilmente a un array usando un parametro rest.
+
+function f(...args) {
+  let normalArray = args
+  let first = normalArray.shift() // OK, gives the first argument
+}
+ +

Desestructuración de los parametros rest

+ +

Los parámetros rest pueden ser desestructurados, eso significa que sus datos pueden ser desempaquetados dentro de distintas variables. Ver Destructuring assignment.

+ +
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b y c son indefinidos)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (el cuarto parámetro no está desestructurado)
+ +

Ejemplos

+ +

Usando parámetros rest

+ +

En este ejemplo, el primer argumento es mapeado con 'a' y el segundo con 'b', entonces, esos argumentos nombrados, son usados normalmente

+ +

De todas formas, el tercer argumento, manyMoreArgs, será un array que contendrá tantos argumentos como el usuario incluya (3er, 4to, 5to ...).

+ +
function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a)
+  console.log("b", b)
+  console.log("manyMoreArgs", manyMoreArgs)
+}
+
+myFun("one", "two", "three", "four", "five", "six")
+
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]
+ +

Debajo... incluso si hay solo un valor, el ultimo argumento seguirá siendo colocado dentro de un array.

+ +
// usando la misma definición de función del ejemplo anterior
+myFun("one", "two", "three")
+
+// a, one
+// b, two
+// manyMoreArgs, [three]
+ +

Debajo, el tercer argumento no esta provisto, pero manyMoreArgs continúa siendo un array (aunque uno vacío).

+ +
//usando la misma definición de función del ejemplo anterior
+
+myFun("one", "two")
+
+// a, one
+// b, two
+// manyMoreArgs, []
+ +

Argument length

+ +

Puesto que theArgs es un array, su tamaño (un conteo de sus elementos) es dado por la propiedad length :

+ +
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+
+ +

Ordinary parameter and rest parameters

+ +

En el siguiente ejemplo, se usa un parámetro rest para agrupar  dentro de un array a todos los argumentos despues del primero.  Luego cada uno es multiplicado por el primero y el arreglo es retornado:

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function (element) {
+    return multiplier * element;
+  });
+}
+
+let arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+
+ +

El siguiente ejemplo muestra que se puede usar los métodos de Array en los parámetros rest , pero no en el objeto arguments:

+ +
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5,3,7,1)); // muestra 1,3,5,7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // esto nunca va a ocurrir
+}
+
+// lanza un TypeError: arguments.sort is not a function
+console.log(sortArguments(5,3,7,1));
+
+ +

Para poder usar los métodos de  Array en el objeto arguments, se debe convertir a un Array primero.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}definción inicial.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilidad en Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatChrome(47)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}{{CompatNo}}34{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatNo}}{{CompatChrome(47)}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(47)}}
+
+ +

Ver también

+ + diff --git a/files/es/web/javascript/reference/functions/set/index.html b/files/es/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..ef555e6759 --- /dev/null +++ b/files/es/web/javascript/reference/functions/set/index.html @@ -0,0 +1,217 @@ +--- +title: setter +slug: Web/JavaScript/Referencia/Funciones/set +translation_of: Web/JavaScript/Reference/Functions/set +--- +
{{jsSidebar("Funciones")}}
+ +

La sintaxis  set  asocia la propiedad de un objeto a una función que será llamada cuando haya un intento de asignar valor a esa propiedad.

+ +

Sintaxis

+ +
{set prop(val) { . . . }}
+{set [expression](val) { . . . }}
+ +

Parámetros

+ +
+
prop
+
El nombre de la propiedad a asociar con la función dada.
+
+ +
+
val
+
Un alias para la variable que contiene el valor a asignar a la propiedad.
+
expression
+
A partir de ECMAScript 2015, se puede también usar expresiones para nombres de propiedades computados para asociar a la función dada.
+
+ +

Descripción

+ +

En JavaScript, un setter puede ser usado para ejecutar una función donde sea que una propiedad se intente cambiar. Los setters son regularmente usados en conjunto con getters para crear un tipo de pseudo-propiedad. No es posible tener simultáneamente un setter en una propiedad que ya tiene un valor.

+ +

Tenga en cuenta lo siguiente al trabajar con setters:

+ +
+ +
+ +

Ejemplos

+ +

Definiendo un setter en el inicializador de nuevos objetos

+ +

En el siguiente ejemplo definimos una pseudo-propiedad  actual  al objeto lenguaje. Cuando se le asigne un valor a actual, actualiza log con ese valor:

+ +
var lenguaje = {
+  set actual(mensaje) {
+    this.log.push(mensaje);
+  },
+  log: []
+}
+lenguaje.actual='ES';
+console.log(lenguaje.log); // ['ES']
+
+lenguaje.actual='FR';
+console.log(lenguaje.log); // ['ES', 'FR']
+
+ + + +

Note que actual no está definido y cualquier intento de accederlo devolverá undefined.

+ +

Eliminando un setter con el operador delete 

+ +

Si desea eliminar el setter, puede simplemente aplicar delete en él:

+ +
delete lenguaje.actual;
+
+ +

Definiendo un setter en un objecto existente usando defineProperty

+ +

Para añadir un setter a un objeto existente, use {{jsxref("Object.defineProperty()")}}

+ +
consr o = {a: 0};
+
+Object.defineProperty(o, 'b', {
+  set: function (x) { this.a = x / 2; }
+});
+
+o.b = 10; // Ejecuta el setter, el cual asigna 10 / 2 (5) a la propiedad 'a'
+console.log(o.a) // 5
+ +

Usando un nombre de propiedad computado

+ +
+

Nota: Propiedades computadas son 'experimental technology', parte de la propuesta para ECMAScript 6, y no está soportado en todos los navegadores. Dará error de sintaxis en entornos no soportados.

+
+ +
const expr = 'foo';
+
+var obj = {
+  baz: 'bar',
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = "baz";      // ejecuta el setter
+console.log(obj.baz); // "baz"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Definición inicial.
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Se añaden las propiedades computadas.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1)}}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatIE(9) }}9.53
Computed property names{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.8.1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Computed property names{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("34.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Notas específicas para SpiderMonkey-specific

+ + + +

Ver también

+ + -- cgit v1.2.3-54-g00ecf