diff options
Diffstat (limited to 'files/ca/web/javascript/reference/functions')
6 files changed, 1411 insertions, 0 deletions
diff --git a/files/ca/web/javascript/reference/functions/arguments/caller/index.html b/files/ca/web/javascript/reference/functions/arguments/caller/index.html new file mode 100644 index 0000000000..b0a6afdf3e --- /dev/null +++ b/files/ca/web/javascript/reference/functions/arguments/caller/index.html @@ -0,0 +1,93 @@ +--- +title: arguments.caller +slug: Web/JavaScript/Reference/Functions/arguments/caller +translation_of: Archive/Web/JavaScript/arguments.caller +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>La propietat obsoleta <strong><code>arguments.caller</code></strong> solia proporcionar la funció que invoca la funció que s'està executant en aquest moment. Aquesta propietat s'ha eleminitat i ja no funciona.</p> + +<h2 id="Descripció">Descripció</h2> + +<p>La propietat ja no és troba disponible, però encara es pot utilitzar {{jsxref("Function.caller")}}.</p> + +<pre class="brush: js">function whoCalled() { + if (whoCalled.caller == null) + console.log('I was called from the global scope.'); + else + console.log(whoCalled.caller + ' called me!'); +}</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>El codi següent s'utilitzava per comprovar el valor de <code>arguments.caller</code> en una funció, però ja no funciona.</p> + +<pre class="brush: js">function whoCalled() { + if (arguments.caller == null) + console.log('I was called from the global scope.'); + else + console.log(arguments.caller + ' called me!'); +} +</pre> + +<h2 id="Especificacions">Especificacions</h2> + +<p>No forma part de cap estàndard. Implementat en JavaScript 1.1 i eliminat en {{bug(7224)}} a causa una potencial vulnerabilitat de seguretat.</p> + +<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome per Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ca/web/javascript/reference/functions/arguments/index.html b/files/ca/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..da5237bdf0 --- /dev/null +++ b/files/ca/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,211 @@ +--- +title: Arguments object +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Functions + - JavaScript + - NeedsTranslation + - TopicStub + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> + +<p>The <strong><code>arguments</code></strong> object is an <code>Array</code>-like object corresponding to the arguments passed to a function.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">arguments</pre> + +<h2 id="Description">Description</h2> + +<p>The <code>arguments</code> object is a local variable available within all functions. <code>arguments</code> as a property of <code>Function</code> can no longer be used.</p> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. This object contains an entry for each argument passed to the function, the first entry's index starting at 0. For example, if a function is passed three arguments, you can refer to the argument as follows:</p> + +<pre class="brush: js">arguments[0] +arguments[1] +arguments[2] +</pre> + +<p>The arguments can also be set:</p> + +<pre class="brush: js">arguments[1] = 'new value';</pre> + +<p>The <code>arguments</code> object is not an {{jsxref("Array")}}. It is similar to an <code>Array</code>, but does not have any <code>Array</code> properties except <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">length</a></code>. For example, it does not have the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="JavaScript/Reference/Global_Objects/Array/pop">pop</a></code> method. However it can be converted to a real <code>Array</code>:</p> + +<pre class="brush: js">var args = Array.prototype.slice.call(arguments);</pre> + +<div class="warning"> +<p><strong>Important:</strong> You should not slice on arguments because it prevents optimizations in JavaScript engines (V8 for example). Instead, try constructing a new array by iterating through the arguments object. <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">More information</a>.</p> +</div> + +<p>If <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Array_generic_methods" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array#Array_generic_methods">Array generics</a> are available, one can use the following instead:</p> + +<pre class="brush: js">var args = Array.slice(arguments);</pre> + +<p>The <code>arguments</code> object is available only within a function body. Attempting to access the <code>arguments</code> object outside a function declaration results in an error.</p> + +<p>You can use the <code>arguments</code> object if you call a function with more arguments than it is formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments. You can use <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> to determine the number of arguments passed to the function, and then process each argument by using the <code>arguments</code> object. (To determine the number of arguments declared when a function was defined, use the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length" title="JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code> property.)</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee" title="JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code></dt> + <dd>Reference to the currently executing function.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller" title="JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt> + <dd>Reference to the function that invoked the currently executing function.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code></dt> + <dd>Reference to the number of arguments passed to the function.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Defining_a_function_that_concatenates_several_strings">Defining a function that concatenates several strings</h3> + +<p>This example defines a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> + +<pre class="brush:js">function myConcat(separator) { + var args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>You can pass any number of arguments to this function, and it creates a list using each argument as an item in the list.</p> + +<pre class="brush:js">// returns "red, orange, blue" +myConcat(", ", "red", "orange", "blue"); + +// returns "elephant; giraffe; lion; cheetah" +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// returns "sage. basil. oregano. pepper. parsley" +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> + +<h3 id="Defining_a_function_that_creates_HTML_lists">Defining a function that creates HTML lists</h3> + +<p>This example defines a function that creates a string containing HTML for a list. The only formal argument for the function is a string that is "<code>u</code>" if the list is to be unordered (bulleted), or "<code>o</code>" if the list is to be ordered (numbered). The function is defined as follows:</p> + +<pre class="brush:js">function list(type) { + var result = "<" + type + "l><li>"; + var args = Array.prototype.slice.call(arguments, 1); + result += args.join("</li><li>"); + result += "</li></" + type + "l>"; // end list + + return result; +}</pre> + +<p>You can pass any number of arguments to this function, and it adds each argument as an item to a list of the type indicated. For example:</p> + +<pre class="brush:js">var listHTML = list("u", "One", "Two", "Three"); + +/* listHTML is: + +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" + +*/</pre> + +<h3 id="Rest_default_and_destructured_parameters">Rest, default and destructured parameters</h3> + +<p>The <code>arguments</code> object can be used in conjunction with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a>.</p> + +<pre class="brush: js">function foo(...args) { + return arguments; +} +foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 } +</pre> + +<p>However, in non-strict functions, a <strong>mapped <code>arguments</code> object</strong> is only provided if the function does <strong>not</strong> contain any <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>, any <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> or any <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a>. For example, in the following function that uses a default parameter, <code>1</code>0 instead of 100 is returned:</p> + +<pre class="brush: js">function bar(a=1) { + arguments[0] = 100; + return a; +} +bar(10); // 10 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ca/web/javascript/reference/functions/arguments/length/index.html b/files/ca/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..cf2660b7e4 --- /dev/null +++ b/files/ca/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,117 @@ +--- +title: arguments.length +slug: Web/JavaScript/Reference/Functions/arguments/length +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>La propietat <strong><code>arguments.length</code></strong> conté el número d'arguments passats a la funció.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">arguments.length</pre> + +<h2 id="Descripció">Descripció</h2> + +<p>La propietat arguments.length proporciona el número d'arguments passats a la funció. Aquest pot ser major o menor que el nombre total de paràmetres definits. (Vegeu {{jsxref("Function.length")}}).</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilitzar_arguments.length">Utilitzar <code>arguments.length</code></h3> + +<p>En aquest exemple definim una funció que pot afegir dos o més nombres.</p> + +<pre class="brush: js">function adder(base /*, n2, ... */) { + base = Number(base); + for (var i = 1; i < arguments.length; i++) { + base += Number(arguments[i]); + } + return base; +} +</pre> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentaris</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definició inicial. Implementat en JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome per Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Function.length")}}</li> +</ul> diff --git a/files/ca/web/javascript/reference/functions/get/index.html b/files/ca/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..92a9de2965 --- /dev/null +++ b/files/ca/web/javascript/reference/functions/get/index.html @@ -0,0 +1,217 @@ +--- +title: getter +slug: Web/JavaScript/Reference/Functions/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>la sintaxi <strong><code>get</code></strong> lliga la propietat d'un objecte a una funció que es cridarà quan la propietat sigui cercada.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox">{get <em>prop</em>() { ... } } +{get <em>[expressió]</em>() { ... } }</pre> + +<h3 id="Paràmetres">Paràmetres</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>El nom de la propietat que es pretén lligar a la funció donada.</dd> + <dt>expressió</dt> + <dd>A partir d'ECMAScript 6, també es pot utilitzar expressions per a calcular el nom d'una propietat a lligar a la funció donada.</dd> +</dl> + +<h2 id="Descripció">Descripció</h2> + +<p>A vegades és desitjable permetre l'accès a una propietat que retorna un valor calculat dinàmicament, o potser es vol reflectir l'estat d'una variable interna sense ésser necessari l'ús de crides explícites a mètodes. En JavaScript, Això es pot aconseguir utilitzant un <em>getter</em>. No és possible tenir simultàniament un lligam a una propietat i que aquesta mateixa propietat contingui un valor, tot i que sí és possible utilitzar un getter i un setter en conjunt per crear un tipus de pseudo-propietat.</p> + +<p>Tingueu en compte el següent quan treballeu amb la sintàxi <code>get</code>:</p> + +<div> +<ul> + <li>Pot tenir com a identificador tant un número com una string;</li> + <li>Ha de tenir exactament zero paràmetres (vegeu <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Canvi incompatible <abbr title="ECMAScript 5th edition">ES5</abbr>: les funcions getter i setter literals han de tenir zero o un argument</a> per més informació).</li> + <li>No pot aparèixer en un objecte literla amb un altre <code>get</code> o amb una entrada de dades per la mateixa propietat (<code>{ get x() { }, get x() { } }</code> i <code>{ x: ..., get x() { } }</code> estàn prohibits).</li> +</ul> +</div> + +<p>Un getter pot ser eliminiat utilitzant l'operador <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete.</a></code></p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Definir_un_getter_en_nous_objectes_en_inicialitzadors_d'objectes">Definir un getter en nous objectes, en inicialitzadors d'objectes</h3> + +<p>Això crearà una pseudo-propietat <code>latest</code> per l'objecte <code>obj</code>, el qual retornarà l'últim ítem de l'array en <code>log</code>.</p> + +<pre class="brush: js">var log = ['test']; +var obj = { + get latest () { + if (log.length == 0) retorna undefined; + return log[log.length - 1] + } +} +console.log (obj.latest); // Retornarà "test". +</pre> + +<p>Recordeu que intentar assignar un valor a <code>latest</code> no el canviarà.</p> + +<h3 id="Eliminar_un_getter_utilitzanr_l'operador_delete">Eliminar un getter utilitzanr l'operador <code>delete</code></h3> + +<p>Si voleu eliminar el getter, simplement utilitzeu <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>:</p> + +<pre class="brush: js">delete obj.latest; +</pre> + +<h3 id="Definir_un_getter_en_objectes_existents_utilitzant_la_Propietat_define">Definir un getter en objectes existents utilitzant la<code> Propietat</code> <code>define</code></h3> + +<p>Per annexar un getter a un objecte existent posteriorment en qualsevol moment, utilitzeu {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js">var o = { a:0 } + +Object.defineProperty(o, "b", { get: function () { return this.a + 1; } }); + +console.log(o.b) // Executa el getter, el qual produeix a + 1 (que és 1)</pre> + +<h3 id="Utilitzar_un_nom_de_propietat_calculat">Utilitzar un nom de propietat calculat</h3> + +<div class="note"> +<p><strong>Nota:</strong> Les propietats calculades són una tecnologia experimental, que forma part de la proposta d'ECMAScript 6, i encara no estàn ampliament suportats pels navegadors. Això llençarà un error de sintàxi en entorns que no les suportin.</p> +</div> + +<pre class="brush: js">var expr = "foo"; + +var obj = { + get [expr]() { return "bar"; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="Getters_smart_self-overwriting_lazy"> Getters smart / self-overwriting / lazy</h3> + +<p>Getters et donen una forma de definir una propietat d'un objecte, però aquests no calculen el valor de la propietat fins que no s'hi ha accedit. getter posposen el cost de calcular el valor fins el moment en que es necessiti el valor, i si no és mai necessari, mai es pagarà el cost.</p> + +<p>Una tècnica d'optimització addiccional per retardar o realitzar de forma lenta el càlcul del valor d'una propietat i guardar-ho per a accedir-hi posteriorment són els<strong> getters smart o<em> <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> </em></strong>. El valor és calculat el primer cop que es crida el getter, i és llavors guardat per tal els accessos subsegüents retornin el calor guardat en caché sense recalcular-lo. Això és útil en les situacions següents:</p> + +<ul> + <li>Si el càlcul del valor d'una propietat és car (utilitza massa RAM o massa temps de CPU, spawns worker thread, recupera els arxius remots, etc).</li> + <li>Si el valor no és necessari ara mateix. S'utilitzarà després, o en alguns casos no s'utilitzarà mai.</li> + <li>Si s'utilitza, serà accedit diverses vegades, i no hi ha necessitat de recalcular el valor que no es canviarà, o no s'hauria de recalcular.</li> +</ul> + +<p>Això vol dir que no haurieu d'utilitzar un getter lazy per una propietat el valor de la qual espereu canviar, ja que el getter no recalcularà el valor.</p> + +<p>En l'exemple següent, l'objecte té un getter com propietat pròpia. Obtenint la propietat, la propietat s'elimina de l'objecte i es reafegeix, però implícitament com a propietat de tipus data aquest cop. Finalment el valor es retorna.</p> + +<pre class="brush: js">get notifier() { + delete this.notifier; + return this.notifier = document.getElementById("bookmarked-notification-anchor"); +},</pre> + +<p>Per codi Firefox, vegeu també el mòdul de codi XPCOMUtils.jsm, el qual defineix la funció <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentaris</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definició inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Noms de propietats calculats afegits.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatChrome(1)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>9.5</td> + <td>3</td> + </tr> + <tr> + <td>Noms de propietats calculats</td> + <td>{{CompatChrome(46)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome per Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Noms de propietats calculats</td> + <td>47</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Definir Getters i Setters</a> en la guia de JavaScript</li> +</ul> diff --git a/files/ca/web/javascript/reference/functions/index.html b/files/ca/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..1dbb672ef5 --- /dev/null +++ b/files/ca/web/javascript/reference/functions/index.html @@ -0,0 +1,617 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Function + - Functions + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function can <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, i.e. they are objects and can be manipulated and passed around just like any other object. Specifically, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>Functions are not the same as procedures. A function always returns a value, but a procedure may or may not return any value.</p> + +<p>To return a specific value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is <code>undefined</code>.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* Pass object reference to the function */ + myFunc(mycar); + + /* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ + console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details):</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements which comprise the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator function are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>There is a special syntax for declaration generator functions (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator function are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements which comprise the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>An arrow function expression has a shorter syntax and lexically binds its this value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param] [, param]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of that function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<div class="note"> +<p><strong>Note:</strong> Default and rest parameters are <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<div class="note"> +<p><strong>Note:</strong> <em>Method definitions are experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x == 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y == 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Conditionally_defining_a_function">Conditionally defining a function</h2> + +<p>Functions can be conditionally defined using either //function statements// (an allowed extension to the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a> standard) or the <code>Function</code> constructor. Please note that such <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">function statements are no longer allowed in ES5 strict</a>. Additionally, this feature does not work consistently cross-browser, so you should not rely on it.</p> + +<p>In the following script, the <code>zero</code> function is never defined and cannot be invoked, because '<code>if (0)</code>' evaluates its condition to false:</p> + +<pre class="brush: js">if (0) { + function zero() { + document.writeln("This is zero."); + } +} +</pre> + +<p>If the script is changed so that the condition becomes '<code>if (1)</code>', function <code>zero</code> is defined.</p> + +<p>Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.</p> + +<p>Note: Some JavaScript engines, not including <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, incorrectly treat any function expression with a name as a function definition. This would lead to <code>zero</code> being defined, even with the always-false <code>if</code> condition. A safer way to define functions conditionally is to define the function anonymously and assign it to a variable:</p> + +<pre class="brush: js">if (0) { + var zero = function() { + document.writeln("This is zero."); + } +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is peformed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' == typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#', 'function*')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/ca/web/javascript/reference/functions/parameters_rest/index.html b/files/ca/web/javascript/reference/functions/parameters_rest/index.html new file mode 100644 index 0000000000..68fc5f0bba --- /dev/null +++ b/files/ca/web/javascript/reference/functions/parameters_rest/index.html @@ -0,0 +1,156 @@ +--- +title: Paràmetres rest +slug: Web/JavaScript/Reference/Functions/parameters_rest +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>El <strong>paràmetre rest</strong> ens permet representar un nombre indefinit d'arguments en forma d 'array.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">function f(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="Descripció">Descripció</h2> + +<p>Si l'últim argument d'una funció, està prefixat amb l'operador <code>...</code>, aquest esdevé un array el qual té com a elements des de <code>0</code> (inclòs) fins a <code>theArgs.length</code> (no inclòs) els arguments passats a la funció.</p> + +<p>A l'exemple de sobre, <code>theArgs</code> aglutina el tercer argument de la funció, ja que el primer està mapejat a <code>a</code> i el segon està mapejat a <code>b</code> , i tota la resta d'arguments consecutius. </p> + +<h3 id="Diferència_entre_els_paràmetres_rest_i_l'objecte_arguments">Diferència entre els paràmetres rest i l'objecte <code>arguments</code></h3> + +<p>Existeixen tres diferències principals entre els paràmetres rest i l'objecte <code>arguments</code></p> + +<ul> + <li>Els paràmetres rest són aquells als que no s' ha donat un nom per separat, mentre que l' objecte <code>arguments</code> conté tots els paràmetres passats a la funció</li> + <li>L' objecte <code>arguments</code> no és un array real, mentre que els paràmetres rest són instàncies d' <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> , el qual significa que els hi podem aplicar directamaent els mètodes <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> o <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method">pop</a>.</code></li> + <li>L' objecte <code>arguments</code> té funcionalitat específica a sí mateix (com la propietat <code>calle</code>).</li> +</ul> + +<h3 id="Des_d'_arguments_fins_a_un_array">Des d' arguments fins a un array</h3> + +<p>El paràmetre rest ha estat introduit per tal de reduir la quantitat de codi utilitzat que es introduit per els arguments</p> + +<pre class="brush: js">// Anteriorment a l' existència del paràmetre rest el s' utilitzava seguent codi +function f(a, b) { + var args = Array.prototype.slice.call(arguments, f.length); + + // … +} + +// equivalent a + +function f(a, b, ...args) { + +} +</pre> + +<h3 id="Desestructurant_paràmetres_rest">Desestructurant paràmetres rest</h3> + +<p>Els paràmetres rest es poden desestructurar, que vol dir que els valors que contenen es poden desenpaquetar en variables diferents i separades. Vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a>.</p> + +<pre class="brush: js">function f(...[a, b, c]) { + return a + b + c; +} + +f(1) // NaN (bi c són undefined) +f(1, 2, 3) // 6 +f(1, 2, 3, 4) // 6 (el quart paràmetre no està desetructurat)</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Com que <code>theArgs</code> és un array, la propietat <code>length</code> en retorna el recompte:</p> + +<pre class="brush: js">function fun1(...theArgs) { + console.log(theArgs.length); +} + +fun1(); // 0 +fun1(5); // 1 +fun1(5, 6, 7); // 3 +</pre> + +<p>En el seguent exemple el paràmetre rest s' utilitza per aglutinar tots els paràmetres passats a la funcció després del primer en un array. Després cadascun d' ells és multiplicat per el primer paràmetre passat a la funció i es retorna l' array.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(function(element) { + return multiplier * element; + }); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6] +</pre> + +<p>El seguent exemple mostra com els mètodes d' <code>Array</code> es poden utilitzar am paràmetres rest, però no amb l' objecte <code>arguments</code> :</p> + +<pre class="brush: js">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +console.log(sortRestArgs(5, 3, 7, 1)); // mostra 1, 3, 5, 7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // aquesta línia mai s' executarà +} + +// genera el TypeError: arguments.sort no és una funció +console.log(sortArguments(5, 3, 7, 1)); +</pre> + +<p>Per tal de poder usar els mètodes d' <code>Array</code> amb l' objecte <code>arguments</code> , aquest s' ha de convertir primer en un array.</p> + +<pre class="brush: js">function sortArguments() { + var args = Array.prototype.slice.call(arguments); + var sortedArgs = args.sort(); + return sortedArgs; +} +console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.functions.rest_parameters")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread operator</a> (also ‘<code>...</code>’)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li> +</ul> |