diff options
Diffstat (limited to 'files/es/web/javascript/referencia/funciones/arguments/index.html')
| -rw-r--r-- | files/es/web/javascript/referencia/funciones/arguments/index.html | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/files/es/web/javascript/referencia/funciones/arguments/index.html b/files/es/web/javascript/referencia/funciones/arguments/index.html new file mode 100644 index 0000000000..ab768cff21 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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 +--- +<div>{{jsSidebar("Functions", "Funciones")}}</div> + +<p><strong><code>arguments</code></strong> es un objeto similar a <code>Array</code> accesible dentro de <a href="/es/docs/Web/JavaScript/Guide/Functions">funciones</a> que contiene los valores de los argumentos pasados a esa función.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div> + +<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> + +<h2 id="Descripción">Descripción</h2> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si estás escribiendo código compatible con ES6, entonces se deben preferir los {{jsxref("Functions/rest_parameters", "parámetros resto")}}.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: "similar a Array" significa que <code>arguments</code> 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 <a href="#Descripción">§Descripción</a> para obtener más detalles.</p> +</div> + +<p>El objeto <code>arguments</code> 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 <code>arguments</code>. Tiene entradas para cada argumento con el que se llamó a la función, con el índice de la primera entrada en <code>0</code>.</p> + +<p>Por ejemplo, si a una función se le pasan 3 argumentos, puedes acceder a ellos de la siguiente manera:</p> + +<pre class="brush: js notranslate">arguments[0] // primer argumento +arguments[1] // segundo argumento +arguments[2] // tercer argumento +</pre> + +<p>También puedes establecer o reasignar cada argumento:</p> + +<pre class="brush: js notranslate">arguments[1] = 'new value'; +</pre> + +<p>El objeto <code>arguments</code> no es un {{jsxref("Array")}}. Es similar, pero carece de todas las propiedades de <code>Array</code> excepto de {{jsxref("Array.length", "length")}}. Por ejemplo, no tiene el método {{jsxref("Array.pop", "pop()")}}.</p> + +<p>Sin embargo, se puede convertir en un <code>Array</code> real:</p> + +<pre class="brush: js notranslate">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); +</pre> + +<p>Así como puedes hacer con cualquier objeto tipo <code>Array</code>, puedes usar el método {{jsxref("Array.from()")}} de ES2015 o la {{jsxref("Operators/Spread_syntax", "propagación de sintaxis")}} para convertir <code>arguments</code> en un arreglo real:</p> + +<pre class="brush: js notranslate">let args = Array.from(arguments); +// o +let args = [...arguments]; +</pre> + +<p>El objeto <code>arguments</code> 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:</p> + +<pre class="brush: js notranslate">function longestString() { + var longest = ''; + for (var i=0; i < arguments.length; i++) { + if (arguments[i].length > longest.length) { + longest = arguments[i]; + } + } + return longest; +} +</pre> + +<p>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.</p> + +<h3 id="Usar_typeof_con_arguments">Usar <code>typeof</code> con <code>arguments</code></h3> + +<p>El operador {{jsxref("Operators/typeof", "typeof")}} devuelve <code>'object'</code> cuando se usa con <code>arguments</code></p> + +<pre class="brush: js notranslate">console.log(typeof arguments); // 'object' </pre> + +<p>El tipo de argumentos individuales se puede determinar indexando <code>arguments</code>:</p> + +<pre class="notranslate">console.log(typeof arguments[0]); // devuelve el tipo del primer argumento</pre> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Functions/arguments/callee", "arguments.callee")}}</dt> + <dd>Referencia a la función en ejecución a la que pertenecen los argumentos. Prohibida en modo estricto.</dd> + <dt>{{jsxref("Functions/arguments/length", "arguments.length")}}</dt> + <dd>El número de argumentos que se pasaron a la función.</dd> + <dt>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}</dt> + <dd>Devuelve un nuevo objeto {{jsxref("Array/@@iterator", "Array iterator", "", 0)}} que contiene los valores de cada índice en <code>arguments</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Definición_de_una_función_que_concatena_varias_cadenas">Definición de una función que concatena varias cadenas</h3> + +<p>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.</p> + +<pre class="brush:js notranslate">function myConcat(separator) { + let args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>Puedes pasar tantos argumentos como desees a esta función. Devuelve una lista de cadenas usando cada argumento en la lista:</p> + +<pre class="brush:js notranslate">// 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');</pre> + +<h3 id="Definición_de_una_función_que_crea_listas_HTML">Definición de una función que crea listas HTML</h3> + +<p>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 "<code>u</code>" si la lista debe estar {{htmlelement("ul", "desordenada (con viñetas)")}}, u "<code>o</code>" si la lista es {{htmlelement("ol", "ordenada (numerada)")}}. La función se define de la siguiente manera:</p> + +<pre class="brush:js notranslate">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; +}</pre> + +<p>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:</p> + +<pre class="brush:js notranslate">let listHTML = list('u', 'One', 'Two', 'Three'); + +/* la listHTML es: +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" +*/</pre> + +<h3 id="Parámetros_rest_predeterminados_y_desestructurados">Parámetros <code>rest</code>, predeterminados y desestructurados</h3> + +<div> +<p>El objeto <code>arguments</code> se puede utilizar junto con parámetros {{jsxref("Functions/rest_parameters", "rest")}}, {{jsxref("Functions/Default_parameters", "predeterminados")}} y {{jsxref("Operators/Destructuring_assignment", "desestructurados")}}.</p> +</div> + +<pre class="brush: js notranslate">function foo(...args) { + return args; +} +foo(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Si bien la presencia de parámetros <code>rest</code>, predeterminados o desestructurados no altera <a href="/es/docs/Web/JavaScript/Reference/Strict_mode#Haciendo_eval_y_arguments_más_simples">el comportamiento del objeto <code>arguments</code> en el código de modo estricto</a>, existen sutiles diferencias para el código no estricto.</p> + +<p>En el código de modo estricto, el objeto <code>arguments</code> se comporta de la misma manera independientemente de que se pasen parámetros <code>rest</code>, 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 <code>arguments</code>. La asignación de nuevas variables al objeto <code>arguments</code> tampoco afectará el valor de las variables.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: No puedes escribir una directiva <code>"use strict";</code> en el cuerpo de una definición de función que acepte parámetros <code>rest</code>, predeterminados o desestructurados. Si lo haces, generará un {{jsxref("Errors/Strict_Non_Simple_Params", "error de sintaxis")}}.</p> +</div> + +<p>Las funciones no estrictas a las que se les pasan solo parámetros simples (es decir, no parámetros <code>rest</code>, predeterminados o desestructurados) sincronizarán el valor de los nuevos valores de las variables en el cuerpo de la función con el objeto <code>arguments</code>, y viceversa:</p> + +<pre class="brush: js notranslate">function func(a) { + arguments[0] = 99; // actualiza arguments[0] además actualiza a + console.log(a); +} +func(10); // 99 +</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">function func(a) { + a = 99; // la actualización también actualiza arguments[0] + console.log(arguments[0]); +} +func(10); // 99 +</pre> + +<p>Por el contrario, las funciones no estrictas a las que <strong>se les pasan</strong> parámetros <code>rest</code>, predeterminados o desestructurados <strong>no</strong> sincronizarán los nuevos valores asignados a las variables de los argumentos en el cuerpo de la función con el objeto <code>arguments</code>. En cambio, el objeto <code>arguments</code> en funciones no estrictas con parámetros complejos <strong>siempre</strong> 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):</p> + +<pre class="brush: js notranslate">function func(a = 55) { + arguments[0] = 99; // actualizar arguments[0] tampoco actualiza a + console.log(a); +} +func(10); // 10</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">function func(a = 55) { + a = 99; // actualizar a tampoco actualiza arguments[0] + console.log(arguments[0]); +} +func(10); // 10 +</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">// Un parámetro predeterminado sin seguimiento +function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Objectos arguments exóticos')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.functions.arguments")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Function", "Función")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Parámetros resto")}}</li> +</ul> |