diff options
Diffstat (limited to 'files/es/web/javascript/referencia/sentencias')
31 files changed, 4327 insertions, 0 deletions
diff --git a/files/es/web/javascript/referencia/sentencias/block/index.html b/files/es/web/javascript/referencia/sentencias/block/index.html new file mode 100644 index 0000000000..36b2054d60 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/block/index.html @@ -0,0 +1,89 @@ +--- +title: block +slug: Web/JavaScript/Referencia/Sentencias/block +tags: + - JavaScript + - Referencia + - Referência(2) + - Statement +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Una sentencia block se utiliza para agrupar cero o más sentencias. Este grupo block se delimita por un par de llaves.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval">{<em> sentencia_1</em><em>; sentencia_2</em>; ...<em> sentencia_n</em>; } +</pre> + +<dl> + <dt><code>sentencia_1</code>, <code>sentencia_2</code>, <code>sentencia_n</code></dt> + <dd>Sentencias agrupadas dentro de una sentencia block.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Esta sentencia se utiliza comúnmente para controlar sentencias de flujo (es decir <code>if</code>, <code>for</code>, <code>while</code>). Por ejemplo:</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p><font><font>Las variables declaradas con </font></font><code>var</code> <strong><font><font>no</font></font></strong><font><font> tienen alcance de bloque(</font></font>block scope<font><font>)</font></font>. Las variables introducidas dentro de un grupo block tienen el alcance de la función que lo contiene o del script, y los efectos de su asignación persisten más allá del grupo block en sí mismo. En otras palabras, las sentencias block no incluyen ningún alcance. Aunque los grupos block "en solitario" (standalone) son una sintaxis válida, usted no querrá utilizar grupos block en solitario en JavaScript, ya que ellos no hacen lo que parecen, si piensa que funcionan de manera similar a los bloques en C o Java. Por ejemplo:</p> + +<pre class="brush: js">var x = 1; +{ + var x = 2; +} +alert(x); // resultado 2 +</pre> + +<p>Este obtiene el resultado 2 ya que la sentencia <code>var x</code> dentro del grupo block tiene el mismo alcance que la sentencia <code>var x</code> antes del mismo. En C o Java, el código equivalente tendría como resultado 1.</p> + +<h4 id="Con_let_y_const"><font><font>Con </font></font><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let">let</a> </code><font><font>y </font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/const">const</a></h4> + +<p>Por el contrario, las variables declaradas con <code>let</code> y <code>const</code> tienen alcance de bloque.</p> + +<pre><code>let x = 1; +{ + let x = 2; +} +console.log(x); // logs 1</code> +</pre> + +<p><font><font>El alcance </font></font><code>x = 2</code><font><font> es limitado solamente al bloque en el que está definido.</font></font></p> + +<p><font><font>Lo mismo para </font></font><code>const</code><font><font>:</font></font></p> + +<pre><code>const c = 1; +{ + const c = 2; +} +console.log(c); // logs 1 </code>y no lanza SyntaxError... +</pre> + +<p>Tenga en cuenta que la variable <code>const c = 2 con alcance de bloque, </code><strong><em>no</em> lanza</strong> un <code>SyntaxError: </code>El identificador 'c' ya ha sido declarado. Esto es porque <strong>se puede declarar de forma única</strong> dentro del bloque, sin interferir con la otra que tiene un alcance global.</p> + +<h4 id="Con_function"><font><font>Con </font></font><code>function</code></h4> + +<p>La <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">declaración de una función</a> también tiene un alcance limitado dentro del bloque donde se produce la declaración:</p> + +<pre class="brush: js">nacion('frances'); // TypeError: nacion no es una función +{ + function nacion(nacionalidad) { + console.log('Yo soy ' + nacionalidad); + } +nacion('español'); // correcto. logs Yo soy español +}</pre> + +<p> </p> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/while", "while")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/break/index.html b/files/es/web/javascript/referencia/sentencias/break/index.html new file mode 100644 index 0000000000..aff2a58733 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/break/index.html @@ -0,0 +1,41 @@ +--- +title: break +slug: Web/JavaScript/Referencia/Sentencias/break +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Termina el bucle actual, sentecia switch o label y transfiere el control del programa a la siguiente sentencia a la sentecia de terminación de éstos elementos.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">break [<em>etiqueta</em>];</pre> +<dl> + <dt> + <code>etiqueta</code></dt> + <dd> + Identificador asociado con la etiqueta de la sentencia.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>La sentencia <code>break</code> incluye una etiqueta opcional que permite al programa salir de una sentencia etiquetada. La sentencia <code>break</code> necesita estar anidada dentro de la sentencia etiquetada. La sentencia etiquetada puede ser cualquier tipo de sentencia; no tiene que ser una sentencia de bucle.</p> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> +<h4 id="Ejemplo:_Usando_break" name="Ejemplo:_Usando_break">Ejemplo: Usando <code>break</code></h4> +<p>La siguiente función tiene una sentencia que termina el bucle {{jsxref("Sentencias/while", "while")}} cuando <code>i</code> es 3, y entonces devuelve el valor 3 * <code>x</code>.</p> +<pre class="brush: js">function comprobarBreak(x) { + var i = 0; + while (i < 6) { + if (i == 3) + break; + i++; + } + return i * x; +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/continue", "continue")}}</li> + <li>{{jsxref("Sentencias/label", "label")}}</li> + <li>{{jsxref("Sentencias/switch", "switch")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/class/index.html b/files/es/web/javascript/referencia/sentencias/class/index.html new file mode 100644 index 0000000000..c37b9ba43b --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/class/index.html @@ -0,0 +1,148 @@ +--- +title: class +slug: Web/JavaScript/Referencia/Sentencias/class +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La<strong> declaración class</strong> crea una nueva clase con el nombre proporcionado utilizando la herencia basada en prototipos</p> + +<div class="noinclude"> +<p>También se puede definir una clase usando una {{jsxref("Operators/class", "expresión de clase", "", 1)}}. Pero a diferencia de las expresiones de clases, la declaración de clases no permite que una clase existente sea declarada de nuevo y en caso de hacerse, lanzará un error de tipo.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // Contenido de la clase +} +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>De la misma manera que con las expresiones de clase, el contenido de una clase se ejecuta en <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">modo estricto</a>.</p> + +<p>Las declaraciones de clases no están {{Glossary("Hoisting", "izadas")}} (al contrario que las <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">declaraciones de funciones</a>).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Declaración_sencilla_de_una_clase">Declaración sencilla de una clase</h3> + +<p>En el siguiente ejemplo, primero definimos la clase <code>Polygon</code>, luego extendemos de ella para crear la clase <code>Square</code>. Notar que <code>super()</code>, utilizado en el constructor, sólo puede ser llamado dentro del constructor y debe ser llamado antes de que la palabra clave <code>this</code> pueda ser usada.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</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>Soporte básico</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome para Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>declaración de funciones</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>expresión de clases</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/const/index.html b/files/es/web/javascript/referencia/sentencias/const/index.html new file mode 100644 index 0000000000..c55350fbd4 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/const/index.html @@ -0,0 +1,127 @@ +--- +title: const +slug: Web/JavaScript/Referencia/Sentencias/const +tags: + - ECMAScript6 + - Experimental + - Expérimental(2) + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Las variables constantes presentan un <strong>ámbito de bloque </strong><font><font>(</font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/block">block </a>scope<font><font>)</font></font> tal y como lo hacen las variables definidas usando la instrucción <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/let">let</a>, con la particularidad de que el valor de una constante no puede cambiarse a través de la reasignación. Las constantes <u>no se pueden redeclarar</u>.</p> + +<div class="warning"> +<p>La <strong>redeclaración</strong> de la misma variable bajo un mismo <font><font><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments" rel="noopener">ámbito léxico</a></font></font> terminaría en un error de tipo <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError" title="SyntaxError">SyntaxError</a></code>. Esto también es <strong>extensible</strong> si usamos <code>var</code> dentro del <font><font>ámbito léxico</font></font>. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible solo con <code>var.</code></p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">const <em>varname1 = <em>value1 [</em>, <em>varname2</em> = <em>value2 [</em>, <em>varname3</em> = <em>value3 [</em>, ... [</em>, <em>varnameN</em> = <em>valueN]]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>Nombre de la constante. Puede ser un identificador legal.</dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd>Valor de la constante. Puede ser cualquier expresión legal.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Esta declaración crea una constante cuyo alcance puede ser <strong>global o local para el bloque en el que se declara</strong>. Es necesario <strong>inicializar</strong> la constante, es decir, se debe especificar su valor en la misma sentencia en la que se declara, lo que tiene sentido, dado que no se puede cambiar posteriormente.</p> + +<p>La declaración de una constante crea una referencia de sólo lectura. No significa que el valor que tiene sea inmutable, sino que el identificador de variable no puede ser reasignado, por lo tanto, en el caso de que la asignación a la constante sea un objeto, el objeto sí que puede ser alterado.</p> + +<p>Una constante <strong>no puede compartir su nombre</strong> con una función o variable en el mismo ámbito.</p> + +<p><font><font>Todas las consideraciones acerca de la " <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let#muerta">zona muerta temporal</a> " se aplican tanto a </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code><font><font>y</font></font><code>const</code><font><font>.</font></font></p> + +<div class="warning"> +<p><code>const</code> <s>es </s><u>fue</u> una <strong>extensión especifica de Mozilla</strong>, no <s>es</s> <u>era</u> soportado en IE, pero <s>tiene</s> <u>tenia</u> soporte parcial por Opera desde la versión 9.0 y por Safari.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente ejemplo produce una salida <code>"a es 7."</code></p> + +<pre class="brush: js">const a = 7; +document.writeln("a es " + a + "."); +</pre> + +<p>Las siguientes instrucciones demuestra como se comporta <code>const</code></p> + +<div class="warning"> +<p>Las instrucciones deberán ser ordenadas correctamente para conseguir la salida esperada a los ejemplos</p> +</div> + +<pre class="brush: js">// NOTA: Las constantes pueden ser declaradas en mayusculas o minusculaas, +//pero por convencion para distinguirlas del resto de variables se escribe todo en mayusculas + +// definimos MY_FAV como constante y le damos un valor de 7 +const MY_FAV = 7; + +// lanzara un error: Unkeught TypeError: Asignación a variable constante. +MY_FAV = 20; + +// imprimira 7 +console.log('my favorite number is: ' + MY_FAV); + +// lanzara un error: SyntaxError: tratando de redeclarar una constante. El identificador 'MY_FAV' ya ha sido declarado +const MY_FAV = 20; + +// el nombre MY_FAV esta reservado para la constante anterior, también fallara y lanzara un SyntaxError por la redeclaración +var MY_FAV = 20; + +// el nombre MY_FAV esta reservado para la variable anterior, esto también lanzara un SyntaxError por la redeclaración +let MY_FAV = 20; + +// es importante tener en cuenta como funciona el alcance de bloque +if (MY_FAV === 7) { + // esto esta bien y crea una variable MY_FAV de alcance/ambito de bloque + // (funciona igual de bien con let para declarar un alcance de bloque/ambito de variable no-constante) + const MY_FAV = 20; + + // MY_FAV ahora es 20 + console.log('my favorite number is ' + MY_FAV); + + // aquín también lanzara un SyntaxError por la redeclaración + var MY_FAV = 20; +} + +// MY_FAV todavia es 7 +console.log('my favorite number is ' + MY_FAV); + +// lanza error, falta el inicializador en la declaracion de const +const FOO; + +// const tambien funciona en objetos +const MY_OBJECT = {'key': 'value'}; + +// Intentando sobrescribir el objeto nos lanza un error +MY_OBJECT = {'OTHER_KEY': 'value'}; + +// Sin embargo, los object keys no estan protegidas, +// por lo que la siguiente sentencia se ejecutara sin problema +MY_OBJECT.key = 'otherValue'; // Use Object.freeze() para hacer un objeto inmutable + +// Lo mismo se aplica a los arrays +const MY_ARRAY = []; +// es posible empujar elementos en el array +MY_ARRAY.push('A'); // ["A"] +// Sin embargo, asignar un nuevo array a la variable lanza error +MY_ARRAY = ['B']</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Sentencias/var", "var")}}</li> + <li>{{jsxref("Sentencias/let", "let")}}</li> + <li><a href="/en/JavaScript/Guide/Values,_Variables,_and_Literals#Constants" title="en/JavaScript/Guide/Values, Variables, and Literals#Constants">Constants in JavaScript Guide</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/continue/index.html b/files/es/web/javascript/referencia/sentencias/continue/index.html new file mode 100644 index 0000000000..5371b4cdd7 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/continue/index.html @@ -0,0 +1,66 @@ +--- +title: continue +slug: Web/JavaScript/Referencia/Sentencias/continue +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Termina la ejecución de las sentencias de la iteración actual del bucle actual o la etiqueta y continua la ejecución del bucle con la próxima iteración.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">continue [ <em>etiqueta</em> ];</pre> +<dl> + <dt> + <code>label</code></dt> + <dd> + Identificador asociado con la etiqueta de la sentencia.</dd> +</dl> +<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3> +<p>En contraste con la sentencia {{jsxref("Sentencias/break", "break")}}, <code>continue</code> no termina la ejecución del bucle por completo; en cambio,</p> +<ul> + <li>En un bucle {{jsxref("Sentencias/while", "while")}}, salta de regreso a la condición.</li> +</ul> +<ul> + <li>En un bucle {{jsxref("Sentencias/for", "for")}}, salta a la expresión actualizada.</li> +</ul> +<p>La sentencia <code>continue</code> puede incluir una etiqueta opcional que permite al programa saltar a la siguiente iteración del bucle etiquetado en vez del bucle actual. En este caso, la sentencia <code>continue</code> necesita estar anidada dentro de esta sentecia etiquetada.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_continue_con_while" name="Ejemplo:_Usando_continue_con_while">Ejemplo: Usando <code>continue</code> con <code>while</code></h3> +<p>El siguiente ejemplo muestra un bucle {{jsxref("Sentencias/while", "while")}} que tiene una sentencia <code>continue</code> que se ejecuta cuando el valor de <code>i</code> es 3. Así, <code>n</code> toma los valores 1, 3, 7 y 12.</p> +<pre class="brush: js">i = 0; +n = 0; +while (i < 5) { + i++; + if (i == 3) + continue; + n += i; +} +</pre> +<h3 id="Ejemplo:_Usando_continue_con_una_etiqueta" name="Ejemplo:_Usando_continue_con_una_etiqueta">Ejemplo: Usando <code>continue</code> con una etiqueta</h3> +<p>En el siguiente ejemplo, una sentencia etiquetada <code>checkiandj</code> contiene una sentencia etiquetada <code>checkj</code>. Si se encuentra <code>continue</code>, el programa continua hasta encima de la sentencia <code>checkj</code>. Cada vez que se encuentra <code>continue</code>, <code>checkj</code> se reitera hasta que su condición devuelve false. Cuando se devuelve false, el recordatorio de la sentencia <code>checkiandj</code> se completa.</p> +<p>Si <code>continue</code> tuviese una etiqueta <code>checkiandj</code>, el programa continuaría hasta encima de la sentencia <code>checkiandj</code>.</p> +<pre>checkiandj: +while (i < 4) { + document.write(i + "<br>"); + i += 1; + + checkj: + while (j > 4) { + document.write(j + "<br>"); + j -= 1; + if ((j % 2) == 0) + continue checkj; + document.write(j + " is odd.<br>"); + } + document.write("i = " + i + "<br>"); + document.write("j = " + j + "<br>"); +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/break", "break")}}</li> + <li>{{jsxref("Sentencias/label", "label")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/debugger/index.html b/files/es/web/javascript/referencia/sentencias/debugger/index.html new file mode 100644 index 0000000000..bb36e356c0 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/debugger/index.html @@ -0,0 +1,125 @@ +--- +title: debugger +slug: Web/JavaScript/Referencia/Sentencias/debugger +tags: + - JavaScript + - Sentencia +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La sentencia <strong>debugger</strong> invoca cualquier funcionalidad de depuración disponible, tiene la misma función que un breakpoint. Si la funcionalidad de depuración no está disponible, esta sentencia no tiene efecto alguno.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>debugger;</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente ejemplo muestra un bloque de código donde ha sido insertada una sentencia debugger, para invocar el depurador (si existe) cuando la función es ejecutada.</p> + +<pre class="brush:js">function codigoPotencialmenteDefectuoso() { + debugger; + // realizar paso a paso o examinar código que contiene + // potenciales errores +}</pre> + +<p>Cuando el depurador es invocado, la ejecución se detiene en la sentencia debugger. Es como un punto de interrupción en el script.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<h2 id="Especificaciones">Especificaciones</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('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Solo mencionada como palabra reservada</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</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>Soporte básico</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 para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</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="Vea_también">Vea también</h2> + +<ul> + <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li> + <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/default/index.html b/files/es/web/javascript/referencia/sentencias/default/index.html new file mode 100644 index 0000000000..5cc0eb9060 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/default/index.html @@ -0,0 +1,120 @@ +--- +title: default +slug: Web/JavaScript/Referencia/Sentencias/default +tags: + - JavaScript + - Palabra clave +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Sentencias")}}</div> + +<p>La palabra clave<strong> default, </strong>en JavaScript puede ser usada en dos situaciones: dentro una sentencia {{jsxref("Sentencias/switch", "switch")}}, o con un sentencia{{jsxref("Sentencias/export", "export")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + +<p class="hidden">El codigo fuente para este ejemplo interactivo esta almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y mandenos un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>Dentro de una sentencia {{jsxref("Sentencias/switch", "switch")}}:</p> + +<pre class="syntaxbox">switch (expresion) { + case valor1: + //Declaración ejecutada cuando el resultado de la expresion conincida con valor1 + [break;] + default: + //Declaración ejecutada cuando ninguno de los valores conincida con algun valor de la expresion + [break;] +}</pre> + +<p>Con una sentencia {{jsxref("Sentencias/export", "export")}}:</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Para mas detalles vea las paginas:</p> + +<ul> + <li>Sentencia {{jsxref("Sentencias/switch", "switch")}} y</li> + <li>Sentencia {{jsxref("Sentencias/export", "export")}}.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_default_en_una_sentencia_switch">Usando <code>default</code> en una sentencia <code>switch</code></h3> + +<p>En el siguiente ejemplo, si se evalua <code>expr</code> como "Naranjas" o "Manzanas", el programa coincide los valores en cada caso: "Naranjas" o "Manzanas", y ejecuta la declaración correspondiente. La palabra clave <code>default</code> ayudara en algun otro caso y ejecuta la declaración asociada.</p> + +<pre class="brush: js">switch (expr) { + case 'Naranjas': + console.log('Las Naranjas cuestan $0.59 el kilogramo.'); + break; + case 'Manzanas': + console.log('Las Manzanas cuestan $0.32 el kilogramo.'); + break; + default: + console.log('Lo esntimos, no tenemos ' + expr + '.'); +}</pre> + +<h3 id="Usando_default_con_export">Usando <code>default</code> con <code>export</code></h3> + +<p>Si queres exportar un solo valor o necesitas reservar un valor para un modulo, puedes usar una exportación por defecto:</p> + +<pre class="brush: js">// modulo "mi-modulo.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>Entonces, en otro script, sera sencillo de importar el valor del modulo:</p> + +<pre class="brush: js">// modulo "otro-modulo.js" +import cubeArea from 'mi-modulo'; //default export nos da la libertad de decir import cubeArea, en lugar de import cube from 'my-module' +console.log(cubeArea(3)); // 27 +</pre> + +<h2 id="Especificaciones">Especificaciones</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-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta pagina es generada desde datos estruturados. si quieres contribuir con los datos, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div> + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="Vea_tambien">Vea tambien</h2> + +<ul> + <li>{{jsxref("Sentencias/export", "export")}}</li> + <li>{{jsxref("Sentencias/switch", "switch")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/do...while/index.html b/files/es/web/javascript/referencia/sentencias/do...while/index.html new file mode 100644 index 0000000000..628c1458cd --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/do...while/index.html @@ -0,0 +1,49 @@ +--- +title: do...while +slug: Web/JavaScript/Referencia/Sentencias/do...while +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La sentencia (hacer mientras) crea un bucle que ejecuta una sentencia especificada, hasta que la condición de comprobación se evalúa como falsa. La condición se evalúa después de ejecutar la sentencia, dando como resultado que la sentencia especificada se ejecute al menos una vez.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">do + <em>sentencia</em> +while (<em>condición</em>); +</pre> + +<dl> + <dt><code>sentencia</code></dt> + <dd>Una sentencia que se ejecuta al menos una vez y es reejecutada cada vez que la condición se evalúa a verdadera. Para ejecutar múltiples sentencias dentro de un bucle, utilice la sentencia {{jsxref("Statements/block", "block")}} (<code>{ ... }</code>) para agrupar aquellas sentencias.</dd> +</dl> + +<dl> + <dt><code>condición</code></dt> + <dd>Una expresión se evalúa después de cada pase del bucle. Si <code>condición</code> se evalúa como verdadera, la <code>sentencia</code> se re-ejecuta. Cuando <code>condición</code> se evalúa como falsa, el control pasa a la siguiente sentencia hacer mientras.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Usando_do...while" name="Ejemplo:_Usando_do...while">Usando <code>hacer mientras</code></h3> + +<p>En el siguiente ejemplo, el bucle hacer mientras itera al menos una vez y se reitera hasta que <code>i</code> ya no sea menor que 5.</p> + +<pre class="brush: js">do { + i += 1; + document.write(i); +} while (i < 5); +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/while", "while")}}</li> + <li>{{jsxref("Sentencias/for", "for")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/empty/index.html b/files/es/web/javascript/referencia/sentencias/empty/index.html new file mode 100644 index 0000000000..627fd889c7 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/empty/index.html @@ -0,0 +1,141 @@ +--- +title: empty +slug: Web/JavaScript/Referencia/Sentencias/Empty +tags: + - JavaScript + - Sentencia + - Vacía +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Un <strong>empty statement</strong> o sentencia vacía es usada para no proveer una sentencia, incluso si la sintaxis JavaScript esperase una.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La sentencia vacía es un punto y coma (;) que indica que no se ejecutará ninguna sentencia, incluso si la sintaxis JavaScript requiere una. El comportamiento opuesto, donde se desean ejecutar varias sentencias pero JavaScript solo permite una sola, es posible usando una <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/block">sentencia de bloque</a>; la cual combina varias declaraciones en una.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>La sentencia vacía es comúnmente usada en bucles. Por ejemplo, un bucle for sin bloque de sentencias:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Asignar el valor 0 a todos los elementos del array +for (i = 0; i < arr.length; arr[i++] = 0) /* sentencia vacía */ ; + +console.log(arr); +// [0, 0, 0] +</pre> + +<p><strong>Nota:</strong> Es una buena práctica comentar el uso intencional de la sentencia vacía, ya que no es fácilmente distinguible de un punto y coma normal. Un ejemplo de uso probablemente no intencional:</p> + +<pre class="brush: js">if (condicion); // Esta condición no ejerce ningún control! + borrarTodo() // Por lo cual esta sentencia será ejecutada siempre!!! +</pre> + +<p>Otro ejemplo de uso:</p> + +<pre class="brush: js">var a = 1, b = 1; +if((a == 0) || (b = 0)); // Asigna a '<code>b'</code> el valor cero si '<code>a'</code> no es cero. +console.log(b); // 0</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</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="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Sentencias/block", "Sentencia de bloque")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/export/index.html b/files/es/web/javascript/referencia/sentencias/export/index.html new file mode 100644 index 0000000000..6016afd0ba --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/export/index.html @@ -0,0 +1,175 @@ +--- +title: export +slug: Web/JavaScript/Referencia/Sentencias/export +tags: + - ECMAScript 2015 + - JavaScript + - Módulos + - Sentencia + - export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración <strong><code>export</code></strong> se utiliza al crear módulos de JavaScript para exportar funciones, objetos o tipos de dato primitivos del módulo para que puedan ser utilizados por otros programas con la sentencia {{jsxref("Statements/import", "import")}}.</p> + +<p>Los módulos exportados están en {{jsxref("Strict_mode","strict mode")}} tanto si se declaran así como si no. La sentencia export no puede ser utilizada en scripts embebidos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // también var +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // también var, const +export function FunctionName(){...} +export class ClassName {...} + +export default <em>expression</em>; +export default function (…) { … } // también class, function* +export default function name1(…) { … } // también class, function* +export { <var>name1</var> as default, … }; + +export * from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …; +export { default } from …; +</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Identificador a ser exportado (es posible importarlo a través de {{jsxref("Statements/import", "import")}} en otro script).</dd> +</dl> + +<h2 id="Descripción" name="Descripción">Descripción</h2> + +<p>Existen dos tipos diferentes de exportación , <strong>nombrada</strong> y <strong>por defecto</strong>. Se pueden tener varias exportaciones nombradas por módulo pero sólo una exportación por defecto. Cada tipo corresponde a una de las sintaxis siguientes:</p> + +<ul> + <li>Exports con nombre: + <pre class="brush: js">// exporta la función previamente declarada +export { myFunction }; + +// exporta una constante +export const foo = Math.sqrt(2);</pre> + </li> + <li>Exports por defecto (function): + <pre class="brush: js">export default function() {} </pre> + </li> + <li>Exports por defecto (class): + <pre class="brush: js">export default class {} </pre> + </li> +</ul> + +<p>Los export con nombre son útiles cuando se necesitan exportar múltiples valores. Durante el import, es obligatorio usar el mismo nombre que el correspondiente objeto.</p> + +<p>Pero un export por defecto puede ser importado con cualquier nombre, por ejemplo:</p> + +<pre class="brush: js">export default k = 12; // en el archivo test.js + +import m from './test' // notese que tenemos la libertad de usar import m en lugar de import k, porque k era el export por defecto + +console.log(m); // escribirá 12</pre> + +<p>Sólo puede haber un export por defecto.</p> + +<p>La siguiente sintaxis no exporta un export por defecto del módulo importado:</p> + +<pre class="brush: js">export * from …;</pre> + +<p>Si necesita exportar por defecto, escriba lo siguiente en su lugar:</p> + +<pre class="brush: js">import mod from 'mod'; +export default mod;</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Syntax" name="Syntax">Usando exports con nombre</h3> + +<p>En el módulo, podremos usar el siguiente código:</p> + +<pre class="brush: js">// module "my-module.js" +function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +var graph = { + options:{ + color:'white', + thickness:'2px' + }, + draw: function(){ + console.log('From graph draw function'); + } +} +export { cube, foo, graph };</pre> + +<p>De esta forma, en otro script, podemos tener:</p> + +<pre class="brush: js">//You should use this script in html with the type module , +//eg ''<script type="module" src="demo.js"></script>", +//open the page in a httpserver,otherwise there will be a CORS policy error. +//script demo.js + +import { cube, foo, graph } from 'my-module'; +graph.options = { + color:'blue', + thickness:'3px' +}; +graph.draw(); +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888 +</pre> + +<h3 id="Usando_el_export_por_defecto">Usando el export por defecto</h3> + +<p>Si queremos exportar un sólo valor o tener uno por defecto para nuestro módulo, podemos usar un export por defecto:</p> + +<pre class="brush: js">// module "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>De esta forma la importación de un export default será sumamemte sencilla:</p> + +<pre class="brush: js">import cube from 'my-module'; +console.log(cube(3)); // 27</pre> + +<p>Tenga en cuenta que no es posible usar <code>var</code>, <code>let</code> o <code>const</code> con <code>export default</code>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_en_navegadores">Compatiblidad en navegadores</h2> + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Vea también" name="Vea también">Vea también</h2> + +<ul> + <li>{{jsxref("Sentencias/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, publicación del blog de Hacks por Jason Orendorff</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, publicación del blog de Hacks por Lin Clark</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Libro de Axel Rauschmayer: "Exploring JS: Modules"</a></li> +</ul> + +<p> </p> diff --git a/files/es/web/javascript/referencia/sentencias/for-await...of/index.html b/files/es/web/javascript/referencia/sentencias/for-await...of/index.html new file mode 100644 index 0000000000..49349d7199 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/for-await...of/index.html @@ -0,0 +1,144 @@ +--- +title: for await...of +slug: Web/JavaScript/Referencia/Sentencias/for-await...of +tags: + - Iteración + - JavaScript + - Referencia + - Sentencia + - asincrónico + - await + - iterar +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La <strong>sentencia</strong> <strong><code>for await...of</code> </strong>crea un bucle iterando tanto sobre objetos iterables asincrónicos como sincrónicos, incluyendo: built-in {{jsxref("String")}}, {{jsxref("Array")}}, objetos <code>Array</code>-like (por ej., {{jsxref("Functions/arguments", "arguments")}} o {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, y async/sync iterables definidos por el usuario. Invoca un hook de iteración personalizada con sentencias a ser ejecutadas por el valor de cada propiedad diferente del objeto.</p> + +<p class="hidden">El código fuente de este ejemplo interactivo está almacenado en un repositorio Github. Si te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) { + <em>sentencia +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>En cada iteración, el valor de una propiedad diferente es asignado a <em>variable</em>. <em>variable</em> puede ser declarada con <code>const</code>, <code>let</code>, o <code>var</code>.</dd> + <dt><code>iterable</code></dt> + <dd>Objeto sobre cuyas propiedades se itera.</dd> +</dl> + +<h3 id="Iterando_sobre_iterables_asincrónicos">Iterando sobre iterables asincrónicos</h3> + +<p>También puedes iterar sobre un objeto que explícitamente implementa el protocolo async iterable:</p> + +<pre class="brush:js">var asyncIterable = { + [Symbol.asyncIterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return Promise.resolve({ value: this.i++, done: false }); + } + + return Promise.resolve({ done: true }); + } + }; + } +}; + +(async function() { + for await (let num of asyncIterable) { + console.log(num); + } +})(); + +// 0 +// 1 +// 2 +</pre> + +<h3 id="Iterando_sobre_funciones_generadoras_asincrónicas">Iterando sobre funciones generadoras asincrónicas</h3> + +<p>Debido a que las funciones generadoras asincrónicas implementan el protocolo async iterator, las mismas pueden ser iteradas utilizando <code>for await... of</code></p> + +<pre class="brush: js">async function* asyncGenerator() { + var i = 0; + while (i < 3) { + yield i++; + } +} + +(async function() { + for await (let num of asyncGenerator()) { + console.log(num); + } +})(); +// 0 +// 1 +// 2</pre> + +<p>Para un ejemplo más concreto de iteración sobre una función generadora utilizando <code>for await... of</code>, considera iterar sobre datos provistos por una API. Este ejemplo primero crea un iterador asincrónico para un stream de datos, luego lo utiliza para obtener el tamaño de la respuesta desde la API.</p> + +<pre class="brush: js">async function* streamAsyncIterator(stream) { + const reader = stream.getReader(); + try { + while (true) { + const { done, value } = await reader.read(); + if (done) { + return; + } + yield value; + } + } finally { + reader.releaseLock(); + } +} +// Obtiene datos desde url y calcula el tamaño de la respuesta utilizando la función generadora asincrónica. +async function getResponseSize(url) { + const response = await fetch(url); + // Almacenará el tamaño de la respuesta en bytes. + let responseSize = 0; + // El buble for-await-of. Itera asincrónicamente sobre cada parte de la respuesta. + for await (const chunk of streamAsyncIterator(response.body)) { + // Incrementando el tamaño total. + responseSize += chunk.length; + } + + console.log(`Tamaño de la respuesta: ${responseSize} bytes`); + // salida esperada: "Tamaño de la respuesta: 1071472" + return responseSize; +} +getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<div class="hidden">La tabla de compatiblidad de esta página es generada a partir de datos estructurados. Si te gustaría contribuir a estos datos, por favor clona <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div> + +<p>{{Compat("javascript.statements.for_await_of")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Statements/for...of")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/for...in/index.html b/files/es/web/javascript/referencia/sentencias/for...in/index.html new file mode 100644 index 0000000000..0680d69dea --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/for...in/index.html @@ -0,0 +1,150 @@ +--- +title: for...in +slug: Web/JavaScript/Referencia/Sentencias/for...in +tags: + - Característica del lenguaje + - Declaración + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La instrucción {{JSxRef("Sentencias/for...in", "for-in")}} itera sobre todas las {{JSxRef("../Enumerability_and_ownership_of_properties", "propiedades enumerables")}} de un objeto que está codificado por cadenas (ignorando los codificados por {{JSxRef("Objetos_globales/Symbol", "Símbolos")}}, incluidas las propiedades enumerables heredadas.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div> + +<p 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.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>objeto</var>) + instrucción</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Asigna un nombre de propiedad diferente a la <em>variable</em> en cada iteración.</dd> + <dt><code>objeto</code></dt> + <dd>Objeto cuyas propiedades enumerables que no son símbolos se iteran.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Un bucle <code>for...in</code> solo itera sobre propiedades enumerables que no son símbolo. Los objetos creados a partir de constructores integrados como <code>Array</code> y <code>Object</code> han heredado propiedades no enumerables de <code>Object.prototype</code> y <code>String.prototype</code>, como el método {{JSxRef("String.indexOf", "indexOf()")}} de {{JSxRef("String")}} o el método {{JSxRef("Object.toString", "toString()")}} de {{JSxRef("Object")}}. El bucle iterará sobre todas las propiedades enumerables del objeto en sí y aquellas que el objeto hereda de su cadena de prototipos (las propiedades de los prototipos más cercanos tienen prioridad sobre las de los prototipos más alejados del objeto en su cadena de prototipos).</p> + +<h3 id="Propiedades_deleted_added_o_modified">Propiedades <code>deleted</code>, <code>added</code> o <code>modified</code></h3> + +<p>Un bucle <code>for...in</code> itera sobre las propiedades de un objeto en un orden arbitrario (consulta el operador {{JSxRef("Operadores/delete", "delete")}} para obtener más información sobre por qué no puede depender del aparente orden de la iteración, al menos en una configuración entre navegadores).</p> + +<p>Si una propiedad se modifica en una iteración y luego se visita en un momento posterior, su valor en el bucle es su valor en ese momento posterior. Una propiedad que se elimina antes de haber sido visitada no se visitará más tarde. Las propiedades agregadas al objeto sobre el que se está produciendo la iteración se pueden visitar u omitir de la iteración.</p> + +<p>En general, es mejor no agregar, modificar o eliminar propiedades del objeto durante la iteración, aparte de la propiedad que se está visitando actualmente. No hay garantía de si se visitará una propiedad agregada, si se visitará una propiedad modificada (distinta de la actual) antes o después de que se modifique, o si se visitará una propiedad eliminada antes de eliminarla.</p> + +<h3 id="Iteración_en_arreglos_y_for...in">Iteración en arreglos y <code>for</code>...<code>in</code></h3> + +<div class="note"> +<p><strong>Nota</strong>: <code>for...in</code> no se debe usar para iterar sobre un {{JSxRef("Array")}} donde el orden del índice es importante.</p> +</div> + +<p>Los índices del arreglo son solo propiedades enumerables con nombres enteros y, por lo demás, son idénticos a las propiedades generales del objeto. No hay garantía de que <code>for...in</code> devuelva los índices en un orden en particular. La instrucción de bucle <code>for...in</code> devolverá todas las propiedades enumerables, incluidas aquellas con nombres no enteros y aquellas que se heredan.</p> + +<p>Debido a que el orden de iteración depende de la implementación, es posible que la iteración sobre un arreglo no visite los elementos en un orden coherente. Por lo tanto, es mejor usar un bucle {{JSxRef("Sentencias/for", "for")}} con un índice numérico (o {{JSxRef("Array.prototype.forEach()")}} o el bucle {{JSxRef("Sentencias/for...of", "for...of")}}) cuando se itera sobre arreglos donde el orden de acceso es importante.</p> + +<h3 id="Iterar_solo_sobre_propiedades_directas">Iterar solo sobre propiedades directas</h3> + +<p>Si solo deseas considerar las propiedades adjuntas al objeto en sí mismo, y no sus prototipos, usa {{JSxRef("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} o realiza una {{JSxRef("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} verificación ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}} también se puede utilizar). Alternativamente, si sabes que no habrá ninguna interferencia de código externo, puedes extender los prototipos incorporados con un método de verificación.</p> + +<h2 id="¿Por_qué_usar_for...in">¿Por qué usar <code>for</code>...<code>in</code>?</h2> + +<p>Dado que <code>for...in</code> está construido para iterar propiedades de objeto, no se recomienda su uso con arreglos y opciones como <code>Array.prototype.forEach()</code> y existe <code>for...of</code>, ¿cuál podría ser el uso de <code>for...in</code>?</p> + +<p>Es posible que se utilice de forma más práctica con fines de depuración, ya que es una forma fácil de comprobar las propiedades de un objeto (mediante la salida a la consola o de otro modo). Aunque los arreglos suelen ser más prácticos para almacenar datos, en situaciones en las que se prefiere un par clave-valor para trabajar con datos (con propiedades que actúan como la "clave"), puede haber casos en los que desees comprobar si alguna de esas claves cumple un valor particular.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizar_for...in">Utilizar <code>for</code>...<code>in</code></h3> + +<p>El siguiente bucle <code>for...in</code> itera sobre todas las propiedades enumerables que no son símbolos del objeto y registra una cadena de los nombres de propiedad y sus valores.</p> + +<pre class="brush: js notranslate">var obj = {a: 1, b: 2, c: 3}; + +for (const prop in obj) { + console.log(`obj.${prop} = ${obj[prop]}`); +} + +// Produce: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<h3 id="Iterar_propiedades_directas">Iterar propiedades directas</h3> + +<p>La siguiente función ilustra el uso de {{JSxRef("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} — las propiedades heredadas no se muestran.</p> + +<pre class="brush: js notranslate">var triangle = {a: 1, b: 2, c: 3}; + +function ColoredTriangle() { + this.color = 'red'; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (const prop in obj) { + if (obj.hasOwnProperty(prop)) { + console.log(`obj.${prop} = ${obj[prop]}`); + } +} + +// Produce: +// "obj.color = red" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'declaración for...in')}}</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.statements.for_in")}}</p> + +<h3 id="Compatibilidad_expresiones_iniciadoras_en_modo_estricto">Compatibilidad: expresiones iniciadoras en modo estricto</h3> + +<p>Antes de Firefox 40, era posible utilizar una expresión iniciadora (<code>i=0</code>) en un bucle <code>for...in</code>:</p> + +<pre class="brush: js example-bad notranslate">var obj = {a: 1, b: 2, c: 3}; +for (var i = 0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Este comportamiento no estándar ahora se ignora en la versión 40 y posteriores, y presentará un {{JSxRef("SyntaxError")}} ("{{JSxRef("errors/Invalid_for-in_initializer", "iniciador for...in no válido", "las declaraciones de encabezado del bucle for-in posiblemente no tengan iniciadores")}} en {{JSxRef("Strict_mode", "modo estricto")}} ({{bug(748550)}} y {{bug(1164741)}}").</p> + +<p>Otros motores como v8 (Chrome), Chakra (IE/Edge) y JSC (WebKit/Safari) están investigando si eliminar también el comportamiento no estándar.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Sentencias/for...of", "for...of")}} — una declaración similar que itera sobre la propiedad <code>values</code></li> + <li>{{JSxRef("Sentencias/for_each...in", "for each...in")}} — una declaración similar pero obsoleta que itera sobre los valores de las propiedades de un objeto, en lugar de los nombres de las propiedades en sí</li> + <li>{{JSxRef("Sentencias/for", "for")}}</li> + <li>{{JSxRef("../Guide/Iterators_and_Generators", "Expresiones generadoras")}} (usa la sintaxis <code>for...in</code>)</li> + <li>{{JSxRef("../Enumerability_and_ownership_of_properties", "Enumerabilidad y posesión de propiedades")}}</li> + <li>{{JSxRef("Object.getOwnPropertyNames()")}}</li> + <li>{{JSxRef("Object.prototype.hasOwnProperty()")}}</li> + <li>{{JSxRef("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/for...of/index.html b/files/es/web/javascript/referencia/sentencias/for...of/index.html new file mode 100644 index 0000000000..572308b41a --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/for...of/index.html @@ -0,0 +1,319 @@ +--- +title: for...of +slug: Web/JavaScript/Referencia/Sentencias/for...of +tags: + - ECMAScript6 + - JavaScript + - Referencia + - Sentencia +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">La sentencia </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">sentencia <code>for...of</code></strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> ejecuta un bloque de código para cada elemento de un </span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable" style="font-size: 1rem; letter-spacing: -0.00278rem;">objeto iterable</a>,<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> como lo son: {{jsxref("String")}}, {{jsxref("Array")}}, objetos similares a array (por ejemplo, {{jsxref("Functions/arguments", "arguments")}} or </span><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/NodeList" style="font-size: 1rem; letter-spacing: -0.00278rem;" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} e iterables definidos por el usuario.</span></p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>En cada iteración el elemento (propiedad enumerable) correspondiente es asignado a <em>variable</em>. </dd> + <dt><code>iterable</code></dt> + <dd>Objeto cuyas propiedades enumerables son iteradas. </dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Iterando_un_jsxrefArray">Iterando un {{jsxref("Array")}}</h3> + +<pre class="brush: js">let iterable = [10, 20, 30]; + +for (let value of iterable) { + value += 1; + console.log(value); +} +// 11 +// 21 +// 31 +</pre> + +<p>Es posible usar <code>const</code> en lugar de <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> </code>si no se va a modificar la variable dentro del bloque.</p> + +<pre class="brush: js">let iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30</pre> + +<h3 id="Iterando_un_jsxrefString">Iterando un {{jsxref("String")}}</h3> + +<pre class="brush: js">let iterable = "boo"; + +for (let value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o"</pre> + +<h3 id="Iterando_un_jsxrefTypedArray">Iterando un {{jsxref("TypedArray")}}</h3> + +<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255</pre> + +<h3 id="Iterando_un_jsxrefMap">Iterando un {{jsxref("Map")}}</h3> + +<pre class="brush: js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// ['a', 1] +// ['b', 2] +// ['c', 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</pre> + +<h3 id="Iterando_un_jsxrefSet">Iterando un {{jsxref("Set")}}</h3> + +<pre class="brush: js">let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</pre> + +<h3 id="Iterando_un_objeto_arguments">Iterando un objeto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></h3> + +<pre class="brush: js">(function() { + for (let argument of arguments) { + console.log(argument); + } +})(1, 2, 3); + +// 1 +// 2 +// 3</pre> + +<h3 id="Iterando_una_colección_del_DOM">Iterando una colección del DOM</h3> + +<p>Iterando colecciones del DOM como un {{domxref("NodeList")}}: el siguiente ejemplo añade la clase "read" a los párrafos (<code><p></code>) que son descendientes directos de un (<code><article></code>):</p> + +<pre class="brush: js">// Nota: Esto solo funcionará en plataformas que tengan +// implementado NodeList.prototype[Symbol.iterator] +let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +}</pre> + +<h3 id="Clausurando_iteraciones">Clausurando iteraciones</h3> + +<p>En los bucles <code>for...of</code>, se puede causar que la iteración termine de un modo brusco usando: <code>break</code>, <code>continue<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_closing_1">[4]</a></code>, <code>throw</code> or <code>return<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_closing_2">[5]</a></code>. En estos casos la iteración se cierra.</p> + +<pre><code>function* foo(){ + yield 1; + yield 2; + yield 3; +}; + +for (let o of foo()) { + console.log(o); + break; // closes iterator, triggers return +}</code></pre> + +<h3 id="Iterando_generadores">Iterando generadores</h3> + +<p>También es posible iterar las nuevas funciones <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">generator</a></strong>:</p> + +<pre class="brush: js">function* fibonacci() { // una función generador + let [prev, curr] = [0, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // interrumpir la secuencia en 1000 + if (n >= 1000) { + break; + } +}</pre> + +<div class="note"> +<h4 id="No_se_deben_reutilizar_los_generadores"><a id="#re-use" name="#re-use">No se deben reutilizar los generadores</a></h4> + +<p>Los generadores no deben ser reutilizados, incluso si el bucle <strong><code>for...of</code></strong> se ha terminado antes de tiempo con la sentencia <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/break">break</a>. Una vez abandonado el bucle, el generador está cerrado y tratar de iterar sobre él de nuevo no dará más resultados. Firefox no ha implementado aún este comportamiento y el generador puede ser reutilizado en contra de lo escrito en el estándar ES6 (<a href="https://www.ecma-international.org/ecma-262/6.0/#sec-13.7.5.13">13.7.5.13, step 5m</a>), pero esto cambiará una vez que el bug {{Bug(1147371)}} haya sido corregido.</p> +</div> + +<pre class="brush: js example-bad">var gen = (function *(){ + yield 1; + yield 2; + yield 3; +})(); +for (let o of gen) { + console.log(o); + break; // Finaliza la iteración +} + +// El generador no debe ser reutilizado, lo siguiente no tiene sentido +for (let o of gen) { + console.log(o); // Nunca será llamado +}</pre> + +<h3 id="Iterando_otros_objetos_iterables">Iterando otros objetos iterables</h3> + +<p>Es posible, además, iterar un objeto que explicitamente implemente el protocolo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a>:</p> + +<pre class="brush: js">var iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (var value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2</pre> + +<h3 id="Diferencia_entre_for...of_y_for...in">Diferencia entre <code>for...of</code> y <code>for...in</code></h3> + +<p>El bucle <code><strong><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></strong> iterará sobre <strong>todas las propiedades de un objeto</strong>.</code> Más tecnicamente, iterará sobre cualquier propiedad en el objeto que haya sido internamente definida con su propiedad <code>[[Enumerable]] </code>configurada como <code>true</code>. </p> + +<p>La sintaxis de <strong><code>for...of</code> </strong>es específica para las <strong>colecciones</strong>, y no para todos los objetos. Esta Iterará sobre cualquiera de los elementos de una colección que tengan la propiedad <code>[Symbol.iterator]</code>.</p> + +<p>El siguiente ejemplo muestra las diferencias entre un bucle<strong> <code>for...of</code></strong> y un bucle <strong>f<code>or...in</code></strong>. </p> + +<pre class="brush: js">let arr = [3, 5, 7]; +arr.foo = "hola"; + +for (let i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (let i of arr) { + console.log(i); // logs "3", "5", "7" +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Cometario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome(38)}} <a href="##Chrome_note_1">[1]</a><br> + {{CompatChrome(51)}} <a href="##Chrome_note_3">[3]</a></td> + <td>{{CompatGeckoDesktop("13")}} <a href="##Gecko_note_2">[2]</a> <a href="##Chrome_note_4">[4]</a></td> + <td>12</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</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>Soporte básico</td> + <td>5.1</td> + <td>{{CompatChrome(38)}} <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_note_1">[1]</a></td> + <td>{{CompatGeckoMobile("13")}} <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Gecko_note_2">[2]</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p><a id="#Chrome_note_1" name="#Chrome_note_1">[1]</a> Desde Chrome 29 a Chrome 37 esta funcionalidad estuvo disponible al activar la opción chrome://flags/#enable-javascript-harmony: “JavaScript experimental”.</p> + +<p><a id="#Gecko_note_2" name="#Gecko_note_2">[2]</a> Antes de Firefox 51, el uso de <code>for...of usando</code> {{jsxref("const")}}<code> resultaba en un</code> {{jsxref("SyntaxError")}} ("missing = in const declaration"). El problema ha sido resuelto ({{bug(1101653)}}).</p> + +<p><a id="#Chrome_note_3" name="#Chrome_note_3">[3]</a> Chrome 51 añadió soporte para iterar objetos.</p> + +<p><a id="#Chrome_note_4" name="#Chrome_note_4">[4]</a> Firefox aún permite el uso de un generador después de haber interrumpido el bucle {{Bug(1147371)}}. Como se vio más arriba, <a href="##re-use">no se deben reutilizar los generadores</a>.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/for/index.html b/files/es/web/javascript/referencia/sentencias/for/index.html new file mode 100644 index 0000000000..875236ba2b --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/for/index.html @@ -0,0 +1,57 @@ +--- +title: for +slug: Web/JavaScript/Referencia/Sentencias/for +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Crea un bucle que consiste en tres expresiones opcionales, encerradas en paréntesis y separadas por puntos y comas, seguidas de una sentencia ejecutada en un bucle.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">for ([<em>expresion-inicial</em>]; [<em>condicion</em>]; [<em>expresion-final</em>])<em>sentencia</em> +</pre> +<dl> + <dt> + <code>expresion-inicial</code></dt> + <dd> + Una expresión (incluyendo las expresiones de asignación) o la declaración de variable. Típicamente se utiliza para usarse como variable contador. Esta expresión puede opcionalmente declarar nuevas variables con la palabra clave <code>var</code>. Estas variables no son locales del bucle, es decir, están en el mismo alcance en el que está el bucle <code>for</code>. El resultado de esta expresión es descartado.</dd> +</dl> +<dl> + <dt> + <code>condicion</code></dt> + <dd> + Una expresión para ser evaluada antes de cada iteración del bucle. Si esta expresión se evalúa como verdadera, se ejecuta <code>sentencia</code>. Esta comprobación condicional es opcional. Si se omite, la condición siempre se evalúa como verdadera. Si la expresión se evalúa como falsa, la ejecución salta a la primera expresión que sigue al constructor de <code>for</code>.</dd> +</dl> +<dl> + <dt> + <code>expresion-final</code></dt> + <dd> + Una expresión para ser evaluada al final de cada iteración del bucle. Esto ocurre antes de la siguiente evaluación de la <code>condicion</code>. Generalmente se usa para actualizar o incrementar la variable contador.</dd> +</dl> +<dl> + <dt> + <code>sentencia</code></dt> + <dd> + Una sentencia que se ejecuta mientras la condición se evalúa como verdadera. Para ejecutar múltiples sentencias dentro del bucle, utilice una sentencia {{jsxref("Sentencias/block", "block")}} (<code>{ ... }</code>) para agrupar aquellas sentecias.</dd> +</dl> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> +<h4 id="Ejemplo:_Usando_for" name="Ejemplo:_Usando_for">Ejemplo: Usando <code>for</code></h4> +<p>La siguiente sentencia <code>for</code> comienza mediante la declaración de la variable <code>i</code> y se inicializa a <code>0</code>. Comprueba que <code>i</code> es menor que nueve, realiza las dos sentencias con éxito e incrementa <code>i</code> en 1 después de cada pase del bucle.</p> +<pre class="eval">for (var i = 0; i < 9; i++) { + n += i; + mifuncion(n); +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/break", "break")}}</li> + <li>{{jsxref("Sentencias/continue", "continue")}}</li> + <li>{{jsxref("Sentencias/empty", "empty")}}</li> + <li>{{jsxref("Sentencias/while", "while")}}</li> + <li>{{jsxref("Sentencias/do...while", "do...while")}}</li> + <li>{{jsxref("Sentencias/for...in", "for...in")}}</li> + <li>{{jsxref("Sentencias/for...of", "for...of")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/for_each...in/index.html b/files/es/web/javascript/referencia/sentencias/for_each...in/index.html new file mode 100644 index 0000000000..bec1303e99 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/for_each...in/index.html @@ -0,0 +1,67 @@ +--- +title: for each...in +slug: Web/JavaScript/Referencia/Sentencias/for_each...in +tags: + - Deprecated + - E4X + - JavaScript + - Statement +translation_of: Archive/Web/JavaScript/for_each...in +--- +<p>{{jsSidebar("Statements")}} </p> + +<div class="warning"> +<p>La sentencia <code>for each ... in</code> ha quedado obsoleta como parte del estándar ECMA-357 (E4X). El soporte E4X ha sido quitado. Considere usar <code>for .. of</code> en su lugar. (Por favor, referirse al {{bug("791343")}}.)</p> +</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>Itera una variable especifica por todos los valores de las propiedades del objeto. Para cada propiedad distinta, una sentencia especifica es ejecutada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">for each (<em>variable</em> in <em>objeto</em>) + <em>sentencia</em> +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Variable a iterar sobre los valores de las propiedades, opcionalmente declarado con la palabra reservada <code>var</code>. Esta variable es local a la función, no al bucle.</dd> +</dl> + +<dl> + <dt><code>objeto</code></dt> + <dd>Objeto por el cual las propiedades son iteradas.</dd> +</dl> + +<dl> + <dt><code>sentencia</code></dt> + <dd>Una sentencia a ejecutar para cada propiedad. Para ejecutar multiples sentencias dentro del bucle use una sentencia {{jsxref("Sentencias/block", "block")}} para agrupar esas sentencias.</dd> +</dl> + +<h2 id="Descripción" name="Descripción">Descripción</h2> + +<p>Algunas propiedades integradas no son iteradas. Estas incluyen todos los metodos integrados, p.ej.: el método <code>indexOf</code> de <code>String</code>. Sin embargo, todas las propiedades definidas por el usuario son iteradas.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_Using_for_each...in" name="Example:_Using_for_each...in">Ejemplo: Uso de <code>for each...in</code></h3> + +<p><strong>Atención:</strong> Nunca usar un bucle como este en arrays. Solamente usar en objetos. Más detalles: {{jsxref("Sentencias/for...in", "for...in")}}.</p> + +<p>El siguiente fragmento de código itera sobre las propiedades de un objeto, calculando su suma:</p> + +<pre class="brush: js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; +for each (var item in obj) { + sum += item; +} +print(sum); // imprime "26", que es 5+13+8 +</pre> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Sentencias/for...in", "for...in")}} – una sentencia similar que itera sobre los nombres (<em>names</em>) de las propiedades.</li> + <li>{{jsxref("Sentencias/for", "for")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html b/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html new file mode 100644 index 0000000000..573c10fad8 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html @@ -0,0 +1,173 @@ +--- +title: Función async +slug: Web/JavaScript/Referencia/Sentencias/funcion_asincrona +tags: + - Declaración + - Ejemplo + - JavaScript + - función +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración de función <code><strong>async</strong></code> define una <em>función asíncrona</em>, la cual devuelve un objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</p> + +<div class="noinclude"> +<p>Es posible definir también funciones asíncronas a través de una {{jsxref("Operators/async_function", "expresión de función async", "", 1)}}.</p> +</div> +</div> + +<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>name</code></dt> + <dd>El nombre de la función.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de un argumento que se debe pasar a la función.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Las declaraciones que conforman el cuerpo de la función.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}, que representa una función asíncrona que ejecuta el código contenido dentro de la función.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Cuando se llama a una función <code>async</code>, esta devuelve un elemento {{jsxref("Promise")}}. Cuando la función <code>async</code> devuelve un valor, <code>Promise</code> se resolverá con el valor devuelto. Si la función <code>async</code> genera una excepción o algún valor, <code>Promise</code> se rechazará con el valor generado.</p> + +<p>Una función <code>async</code> puede contener una expresión {{jsxref("Operators/await", "await")}}, la cual pausa la ejecución de la función asíncrona y espera la resolución de la <code>Promise</code> pasada y, a continuación, reanuda la ejecución de la función <code>async</code> y devuelve el valor resuelto.</p> + +<div class="note"> +<p>La finalidad de las funciones <code>async</code>/<code>await</code> es simplificar el comportamiento del uso síncrono de promesas y realizar algún comportamiento específico en un grupo de <code>Promises</code>. Del mismo modo que las <code>Promises</code> son semejantes a las devoluciones de llamadas estructuradas, <code>async</code>/<code>await</code> se asemejan a una combinación de generadores y promesas.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_sencillo">Ejemplo sencillo</h3> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + + +async function add1(x) { + const a = await resolveAfter2Seconds(20); + const b = await resolveAfter2Seconds(30); + return x + a + b; +} + +add1(10).then(v => { + console.log(v); // prints 60 after 4 seconds. +}); + + +async function add2(x) { + const p_a = resolveAfter2Seconds(20); + const p_b = resolveAfter2Seconds(30); + return x + await p_a + await p_b; +} + +add2(10).then(v => { + console.log(v); // prints 60 after 2 seconds. +}); +</pre> + +<div class="warning"> +<h4 id="No_se_deben_confundir_await_y_Promise.all">No se deben confundir <code>await</code> y <code>Promise.all</code></h4> + +<p>En <code>add1</code>, la ejecución se suspende durante dos segundos correspondientes al primer operador <code>await</code>, y luego durante otros dos segundos correspondientes al segundo <code>await</code>. El segundo temporizador no se crea hasta que el primero no se haya disparado ya. En <code>add2</code>, ambos temporizadores se crean y, acto seguido, ambos reciben <code>await</code>. Esto provoca la resolución en dos segundos y no cuatro, ya que los temporizadores se ejecutaron de manera simultánea. Sin embargo, ambas llamadas <code>await</code> aún pueden ejecutarse en series, no en paralelo: esto <strong>no</strong> constituye ninguna aplicación automática de <code>Promise.all</code>. Si se desea aplicar <code>await</code> a dos o más promesas en paralelo, es preciso utilizar <code>Promise.all</code>.</p> +</div> + +<h3 id="Reescritura_de_una_cadena_de_promesas_con_una_función_async">Reescritura de una cadena de promesas con una función <code>async</code></h3> + +<p>Una API que devuelva una {{jsxref("Promise")}} tendrá como resultado una cadena de promesas, y dividirá la función en muchas partes. Estudie este código:</p> + +<pre class="brush: js">function getProcessedData(url) { + return downloadData(url) // returns a promise + .catch(e => { + return downloadFallbackData(url) // returns a promise + }) + .then(v => { + return processDataInWorker(v); // returns a promise + }); +} +</pre> + +<p>Es posible reescribirlo utilizando un solo operador <code>async</code> de esta manera:</p> + +<pre class="brush: js">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch(e) { + v = await downloadFallbackData(url); + } + return processDataInWorker(v); +} +</pre> + +<p>Observe que, en el ejemplo anterior, no hay ninguna instrucción <code>await</code> dentro de la instrucción <code>return</code>, porque el valor de retorno de una <code>async function</code> queda implícitamente dentro de un {{jsxref("Promise.resolve")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'Función async')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definición inicial en ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-async-function-definitions', 'Función async')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<div> + + +<p>{{Compat("javascript.statements.async_function")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Operators/async_function", "Expresión de función async")}}</li> + <li>Objeto {{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Operators/await", "await")}}</li> + <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">«Decorar funciones async de JavaScript» en innolitics.com</a> (en inglés)</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/function/index.html b/files/es/web/javascript/referencia/sentencias/function/index.html new file mode 100644 index 0000000000..36b02935d9 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/function/index.html @@ -0,0 +1,52 @@ +--- +title: function +slug: Web/JavaScript/Referencia/Sentencias/function +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Declara una función con los parámetros especificados.</p> +<p>Puede también definir funciones usando el constructor {{jsxref("Function")}} y el {{jsxref("Operadors/function", "function")}} (expresión function).</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">function <em>nombre</em>([<em>parametro1</em>] [,<em>parametro2</em>] [..., <em>parametroN</em>]) {<em>sentencias</em>} +</pre> +<dl> + <dt> + <code>nombre</code></dt> + <dd> + El nombre de la función.</dd> +</dl> +<dl> + <dt> + <code>parametroN</code></dt> + <dd> + El nombre de un argumento que se pasa a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> +<dl> + <dt> + <code>sentencias</code></dt> + <dd> + Las sentencias que comprenden el cuerpo de la función.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Para devolver un valor, la función debe tener una sentencia {{jsxref("Sentencias/return", "return")}} que especifica el valor a devolver.</p> +<p>Una función creada con la sentencia <code>function</code> es un objeto <code>Function</code> y tiene todas las propiedades, métodos, y comportamiento de los objetos <code>Function</code>. Vea {{jsxref("Function")}} para información detallada sobre funciones.</p> +<p>Una función puede también ser declarada dentro de una expresión. En este caso la función es normalmente anónima. Vea {{jsxref("Operadores/function", "function expression")}} para más información acerca de <code>function</code> (expresión function).</p> +<p>Las funciones pueden declararse condicionalmente. Es decir, una definición de una función puede estar anidada dentro de una sentecia <code>if</code>. Técnicamente, tales declaraciones no son en realidad declaraciones de funciones; son expresiones function (expresiones de función).</p> +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> +<h3 id="Ejemplo:_Usando_function" name="Ejemplo:_Usando_function">Ejemplo: Usando <code>function</code></h3> +<p>El siguiente código declara una función que devuelve la cantidad total de ventas, cuando se da el número de unidades vendidas de productos <code>a</code>, <code>b</code>, y <code>c</code>.</p> +<pre class="brush: js">function calcular_ventas(unidades_a, unidades_b, unidades_c) { + return unidades_a*79 + unidades_b * 129 + unidades_c * 699; +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li> + <li>{{jsxref("Function")}}</li> + <li>Operadores{{jsxref("Operadores/function", "function")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/function_star_/index.html b/files/es/web/javascript/referencia/sentencias/function_star_/index.html new file mode 100644 index 0000000000..79ff51b7f2 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/function_star_/index.html @@ -0,0 +1,224 @@ +--- +title: function* +slug: Web/JavaScript/Referencia/Sentencias/function* +tags: + - Declaración + - Experimental + - Expérimental(2) + - Iterador + - función +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración <code><strong>function*</strong></code> (la palabra clave <code>function</code> seguida de un asterisco) define una <em>función generadora</em>, que devuelve un objeto {{jsxref("Global_Objects/Generator","Generator")}}.</p> + +<div class="noinclude"> +<p>También puedes definir funciones generadoras usando el constructor {{jsxref("GeneratorFunction")}} y una {{jsxref("Operators/function*", "function* expression")}}.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">function* <em>nombre</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>instrucciones</em> +} +</pre> + +<dl> + <dt><code>nombre</code></dt> + <dd>El nombre de la función.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de los argumentos que se le van a pasar a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instrucciones</code></dt> + <dd>Las instrucciones que componen el cuerpo de la función.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Los generadores son funciones de las que se puede salir y volver a entrar. Su contexto (asociación de variables) será conservado entre las reentradas.</p> + +<p>La llamada a una función generadora no ejecuta su cuerpo inmediatamente; se devuelve un objeto <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterador</a> para la función en su lugar. Cuando el metodo <code>next()</code> del iterador es llamado , el cuerpo de la función generadora es ejecutado hasta la primera expresión {{jsxref("Operators/yield", "yield")}}, la cual especifica el valor que será retornado por el iterador o con, {{jsxref("Operators/yield*", "yield*")}}, delega a otra función generadora. El método <code>next()</code> retorna un objeto con una propiedad <em>value</em> que contiene el valor bajo el operador yield y una propiedad <em>done </em>que indica, con un booleano, si la función generadora ha hecho yield al último valor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_simple">Ejemplo simple</h3> + +<pre class="brush: js">function* idMaker(){ + var index = 0; + while(index < 3) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // undefined +// ...</pre> + +<h3 id="Ejemplo_con_yield*">Ejemplo con yield*</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i){ + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Status</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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 for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h3> + +<h4 id="Generadores_e_iteradores_en_versiones_de_Firefox_anteriores_a_26">Generadores e iteradores en versiones de Firefox anteriores a 26</h4> + +<p>Las versiones anteriores de FireFox implementan así mismo una versión anterior de la propuesta de generadores. En la versión anterior, los generadores eran definidos utilizando la declaración <code>function</code> de una manera regular (Sin asterisco). Véase <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Legacy generator function </a>para mayor información.</p> + +<h4 id="IteratorResult_object_returned_instead_of_throwing"><code>IteratorResult</code> object returned instead of throwing</h4> + +<p>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Other web resources: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1">Hemanth.HM: The New gen of *gen(){}</a></li> + <li><a href="http://taskjs.org/">Task.js</a></li> + </ul> + </li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/if...else/index.html b/files/es/web/javascript/referencia/sentencias/if...else/index.html new file mode 100644 index 0000000000..3bac571218 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/if...else/index.html @@ -0,0 +1,109 @@ +--- +title: if...else +slug: Web/JavaScript/Referencia/Sentencias/if...else +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>Ejecuta una sentencia si una condición específicada es evaluada como verdadera. Si la condición es evaluada como falsa, otra sentencia puede ser ejecutada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">if (<em>condición</em>) <em>sentencia1</em> [else <em>sentencia2</em>] +</pre> + +<dl> + <dt><code>condición</code></dt> + <dd>Una expresión que puede ser evaluada como verdadera o falsa.</dd> +</dl> + +<dl> + <dt><code>sentencia1</code></dt> + <dd>Sentencia que se ejecutará si <code>condición</code> es evaluada como verdadera. Puede ser cualquier sentencia, incluyendo otras sentenccias <code>if</code> anidadas. Para ejecutar múltiples sentencias, use una sentencia {{jsxref("Sentencias/block", "block")}} ({ ... }) para agruparlas.</dd> +</dl> + +<dl> + <dt><code>sentencia2</code></dt> + <dd>Sentencia que se ejecutará si <code>condición</code> se evalúa como falsa, y exista una cláusula <code>else</code>. Puede ser cualquier sentencia, incluyendo sentencias block y otras sentencias <code>if</code> anidadas.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Multiples sentencias <code>if...else</code> pueden ser anidadas para crear una cláusula <code>else if</code>:</p> + +<pre>if (<em>condición1</em>) + <em>sentencia1</em> +else if (<em>condición2</em>) + <em>sentencia2</em> +else if (<em>condición3</em>) + <em>sentencia3</em> +... +else + <em>sentenciaN</em> +</pre> + +<p>Para entender como esto funciona, así es como se vería si el anidamiento hubiera sido indentado correctamente:</p> + +<pre>if (<em>condición1</em>) + <em>sentencia1</em> +else + if (<em>condición2</em>) + <em>sentencia2</em> + else + if (<em>condición3</em>) + ... +</pre> + +<p>Para ejecutar varias sentencias en una cláusula, use una sentencia block (<code>{ ... }</code>) para agruparlas. Generalmente, es una buena práctica usar siempre sentencias block, especialmente en código que incluya sentencias if anidadas:</p> + +<pre class="brush: js">if (condición) { + sentencia1 +} else { + sentencia2 +} +</pre> + +<p>No confundir los valores primitivos <code>true</code> y <code>false</code> con los valores true y false del objeto {{jsxref("Boolean")}}. Cualquier valor diferente de <code>undefined</code>, <code>null</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, o la cadena vacía (<code>""</code>), y cualquier objecto, incluso un objeto Boolean cuyo valor es false, se evalúa como verdadero en una sentencia condicional. Por ejemplo:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // Esta condición se evalúa como verdadera +</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">Ejemplo: Uso de <code>if...else</code></h3> + +<pre class="brush: js">if (cipher_char == from_char) { + result = result + to_char; + x++; +} else + result = result + clear_char; +</pre> + +<h3 id="Example:_Assignment_within_the_conditional_expression" name="Example:_Assignment_within_the_conditional_expression">Ejemplo: Asignación en una expresión condicional</h3> + +<p>Es aconsejable no usar asignaciones simples en una expresión condicional, porque la asignación puede ser confundida con igualdad (operador relacional) cuando se lee el código. Por ejemplo, no use el siguiente código:</p> + +<pre class="brush: js">if (x = y) { + /* sentencia */ +} +</pre> + +<p>Si realmente necesita una asignación dentro de una exprsión condicional, una práctica común es poner paréntesis adicionales alrededor del la asignación, por ejemplo:</p> + +<pre class="brush: js">if ((x = y)) { + /* sentencia */ +} +</pre> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/block", "block")}}</li> + <li>{{jsxref("Sentencias/switch", "switch")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/import.meta/index.html b/files/es/web/javascript/referencia/sentencias/import.meta/index.html new file mode 100644 index 0000000000..8c09e97475 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/import.meta/index.html @@ -0,0 +1,93 @@ +--- +title: import.meta +slug: Web/JavaScript/Referencia/Sentencias/import.meta +translation_of: Web/JavaScript/Reference/Statements/import.meta +--- +<div>{{JSSidebar("Statements")}}</div> + +<p>El objeto<strong> <code>import.meta</code></strong> expone el contenido especifico de la metadata al módulo JavaScript. Este contiene informacion sobre el módulo, como por ejemplo, la URL del mismo.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">import.meta</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La sintasis consiste de la palabra clave {{JSxRef("Statements/import","import")}},un punto, y un identificador <code>meta</code>. Normalmente, la parte a la izquierda del punto es el objeto sobre el cual la accion es realizada, pero aqui <code>import</code> no es realmente un objeto.</p> + +<p>El objeto <code>import.meta</code> es creado por la implementacion ECMAScript , con un prototipo {{JSxRef("null")}} . El objeto es extensible y sus propiedades son grabables, editables y enumerables.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_import.meta">Usando import.meta</h3> + +<p>Dado un módulo <code>my-module.js</code></p> + +<pre class="brush: html"><script type="module" src="my-module.js"></script> +</pre> + +<p>puedes acceder a la meta información sobre el módulo usando el objeto <code>import.meta</code>.</p> + +<pre class="brush: js;">console.log(import.meta); // { url: "file:///home/user/my-module.js" }</pre> + +<p>Este retorna un objeto con una propiedad <code>url</code> indicando la URL base del módulo.Esta será la URL de la que el script fue obtenido, por scripts externos, o la URL base del documento que contiene el documento, por scripts inline.</p> + +<p>Nota que este incluirá parametros de la consulta y/o el hash (ej: seguido del <code>?</code> or <code>#</code>).</p> + +<p>Por ejemplo, con el siguiente HTML:</p> + +<pre class="brush: html"><script type="module"> +import './index.mjs?someURLInfo=5'; +</script></pre> + +<p>..El siguiente archivo JavaScript registrará el parámetro <code>someURLInfo</code>:</p> + +<pre class="brush: js">// index.mjs +new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre> + +<p>Lo mismo aplica cuando un archivo importa otro:</p> + +<pre class="brush: js">// index.mjs +import './index2.mjs?someURLInfo=5'; + +// index2.mjs +new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre> + +<p>Nota que mientras Node.js pasa en la consulta los parámetros (o el hash ) como en el último ejemplo, a partir de Node 14.1.0, una URL con parametros en la consulta fallará cuando se carguen en el formato <code>node --experimental-modules index.mjs?someURLInfo=5</code> (es tratado como un archivo en lugar de una URL en este contexto).</p> + +<p>Tal argumento específico del archivo podria ser complementario al usado en toda la aplicacion <code>location.href</code> (con consultas strings o hash añadidas despues de la ruta HTML) (o en Node.js, mediante <code>process.argv</code>).</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + </tr> + <tr> + <td><code><a href="https://tc39.es/proposal-import-meta/#prod-ImportMeta">import.meta</a></code> proposal</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.import_meta")}}</p> + +<h3 id="Implementation_Progress">Implementation Progress</h3> + +<p>La siguiente tabla provee el estatus de implementación diaria para esta caracteristica, porque esta caracteristica aun no ha alcanzado la estabilidad entre navegadores. La información es generada corriendo los test relevantes de la caracteristica en <a href="https://github.com/tc39/test262">Test262</a>, la suite estandar de test de JavaScript, en el build nocturno, o en el último release de cada motor de los browser de JavaScript.</p> + +<div>{{EmbedTest262ReportResultsTable("import.meta")}}</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{JSxRef("Statements/import", "import")}}</li> + <li>{{JSxRef("Statements/export", "export")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/import/index.html b/files/es/web/javascript/referencia/sentencias/import/index.html new file mode 100644 index 0000000000..7d2c261d0e --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/import/index.html @@ -0,0 +1,177 @@ +--- +title: import +slug: Web/JavaScript/Referencia/Sentencias/import +tags: + - ECMAScript 2015 + - JavaScript + - Módulos + - Sentencia + - import +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Sentencias")}}</div> + +<p>La sentencia <code><strong>import</strong></code> se usa para importar funciones que han sido exportadas desde un módulo externo.</p> + +<div class="note"> +<p>Por el momento, esta característica sólo está <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">comenzando a ser implementada</a> de forma nativa en los navegadores. Está implementada en muchos transpiladores, tales como Typescript y <a href="http://babeljs.io/">Babel</a>, y en empaquetadores como <a href="https://github.com/rollup/rollup">Rollup</a> y <a href="https://webpack.js.org/">Webpack</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>"; +import * as <em>name</em> from "<em>module-name</em>"; +import { <em>export </em>} from "<em>module-name</em>"; +import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; +import { <em>export1 , export2</em> } from "<em>module-name</em>"; +import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>"; +import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>"; +import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>"; +import "<em>module-name</em>";</pre> + +<dl> + <dt><code>defaultExport</code></dt> + <dd>Nombre que se referirá al export por defecto del módulo.</dd> + <dt><code>module-name</code></dt> + <dd>El módulo desde el que importar. Normalmente es una ruta relativa o absoluta al archivo <code><strong>.js</strong></code> que contiene el módulo, excluyendo la extensión <code><strong>.js</strong></code>. Algunos empaquetadores pueden permitir o requerir el uso de la extensión; comprueba tu entorno. Sólo se permiten Strings con comillas simples o dobles.</dd> + <dt><code>name</code></dt> + <dd>Nombre del objeto del módulo que se utilizará como nombre de dominio al hacer referencia a los imports.</dd> + <dt><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-style: inherit; font-weight: inherit;'>export, exportN</span></dt> +</dl> + +<dl> + <dd>Nombre de los exports a ser importados.</dd> + <dt><code>alias, aliasN</code></dt> + <dd>Nombre del objeto que recibirá la propiedad importada.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El parámetro <code>name</code> es el nombre del objeto que recibirá los miembros exportados. El parámetro <code>member</code> especifica miembros individuales, mientras el parámetro <code>name</code> importa todos ellos. <font face="Courier New, Andale Mono, monospace">name</font> puede también ser una función si el módulo exporta un sólo parámetro por defecto en lugar de una serie de miembros. Abajo hay ejemplos que explican la sintaxis.</p> + +<h3 id="Importa_el_contenido_de_todo_un_módulo.">Importa el contenido de todo un módulo.</h3> + +<p>Esto inserta <code>myModule</code> en el ámbito actual, que contiene todos los elementos exportados en el archivo ubicado en <code>/modules/my-module.js</code>.</p> + +<pre class="brush: js">import * as myModule from '/modules/my-module.js';</pre> + +<p>Aquí, para acceder a los miembros exportados habrá que usar el alias del módulo ("myModule" en este caso) como namespace. Por ejemplo, si el módulo importado arriba incluye un miembre exportado llamado <code>doAllTheAmazingThings()</code>, habría que invocarlo de la siguiente manera:</p> + +<pre class="brush: js">myModule.doAllTheAmazingThings();</pre> + +<h3 id="Importa_un_solo_miembro_de_un_módulo.">Importa un solo miembro de un módulo.</h3> + +<p>Dado un objeto o valor llamado <code>myExport</code> que ha sido exportado del módulo <code>my-module</code> ya sea implícitamente (porque todo el módulo ha sido exportado) o explícitamente (usando la sentencia {{jsxref("Sentencias/export", "export")}} ), esto inserta <code>myExport</code> en el ámbito actual.</p> + +<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre> + +<h3 id="Importa_multiples_miembros_de_un_módulo.">Importa multiples miembros de un módulo.</h3> + +<p>Esto inserta <code>foo</code> y <code>bar</code> en el ámbito actual.</p> + +<pre class="brush: js">import {foo, bar} from "my-module.js";</pre> + +<h3 id="Importa_un_miembre_con_un_alias_mas_conveniente">Importa un miembre con un alias mas conveniente</h3> + +<p>Se puede renombrar un miembro exportado cuando se importa. Por ejemplo, esto inserta <code>shortName</code> en el ámbito actual.</p> + +<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName} + from '/modules/my-module.js';</pre> + +<h3 id="Renombra_multiples_miembros_durante_la_importación">Renombra multiples miembros durante la importación</h3> + +<p>Importa múltiples miembros exportados de un módulo con un alias conveniente.</p> + +<pre class="brush: js">import { + reallyReallyLongModuleExportName as shortName, + anotherLongModuleName as short +} from '/modules/my-module.js';</pre> + +<h3 id="Importa_un_módulo_entero_para_efectos_secundarios_sólamente">Importa un módulo entero para efectos secundarios sólamente</h3> + +<p>Importa un módulo entero para efectos secundarios sólamente, sin importar ningun elemento. Esto ejecuta el código global del módulo, pero no importa ningún valor.</p> + +<pre class="brush: js">import '/modules/my-module.js';</pre> + +<h3 id="Importación_de_elementos_por_defecto">Importación de elementos por defecto</h3> + +<p>Es posible tener una exportación por defecto (tanto si se trata de un objeto, función, clase, etc.). Recíprocamente, es posible usa la instrucción <code>import</code> para importar esos elementos establecidos como por defecto.</p> + +<p>La versión más sencilla de importar un elemento por defecto es:</p> + +<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre> + +<p>También es posible usar la sintaxis por defecto con lo que hemos visto anteriormente (importación de espacios de nombres o importaciones con nombre. En esos casos, la importación por defecto se deberá realizar en primer lugar. Por ejemplo:</p> + +<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js'; +// myModule used as a namespace</pre> + +<p>o</p> + +<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js'; +// specific, named imports</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Importar un archivo secundario para asistir en un procesamiento de una petición JSON AJAX.</p> + +<h3 id="El_módulo_file.js">El módulo: file.js</h3> + +<pre class="brush: js">function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open('GET', url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +}</pre> + +<h3 id="El_programa_principal_main.js">El programa principal: main.js</h3> + +<pre class="brush: js">import { getUsefulContents } from '/modules/file.js'; + +getUsefulContents('http://www.example.com', + data => { doSomethingUseful(data); });</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inical</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Sentencias/export", "export")}}</li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/index.html b/files/es/web/javascript/referencia/sentencias/index.html new file mode 100644 index 0000000000..bbf0ce42e8 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/index.html @@ -0,0 +1,141 @@ +--- +title: Sentencias +slug: Web/JavaScript/Referencia/Sentencias +tags: + - JavaScript + - Referencia + - sentencias +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Las aplicaciones JavaScript se componen de sentencias con una sintaxis propia. Una sentencia puede estar formada por múltiples líneas. Puede haber varias sentencias en una sola línea si separamos cada una de las sentencias por un punto y coma. No es una palabra clave, sino un grupo de palabras clave.</p> + +<h2 id="Sentencias_y_declaraciones_por_categoría">Sentencias y declaraciones por categoría</h2> + +<p>Puedes encontrarlas por orden alfabético en la columna de la izquierda .</p> + +<h3 id="Control_de_flujo">Control de flujo</h3> + +<dl> + <dt>{{jsxref("Sentencias/block", "Block")}}</dt> + <dd>Un bloque de sentencias se utiliza para agrupar cero o mas sentencias. El bloque se delimita por un par de llaves.</dd> + <dt>{{jsxref("Sentencias/break", "break")}}</dt> + <dd>Finaliza la sentencia actual loop, switch, o label y transfiere el control del programa a la siguiente sentencia de la sentencia finalizada.</dd> + <dt>{{jsxref("Sentencias/continue", "continue")}}</dt> + <dd>Finaliza la ejecucion de las sentencias dentro de la iteracion actual del actual bucle, y continua la ejecucion del bucle con la siguiente iteracion.</dd> + <dt>{{jsxref("Sentencias/Empty", "Empty")}}</dt> + <dd>Una sentencia vacía se utiliza para proveer una "no sentencia", aunque la sintaxis de JavaScript esperaba una.</dd> + <dt>{{jsxref("Sentencias/if...else", "if...else")}}</dt> + <dd>Ejecuta una sentencia si una condición especificada es true. Si la condición es false, otra sentencia puede ser ejecutada.</dd> + <dt>{{jsxref("Sentencias/switch", "switch")}}</dt> + <dd>Evalua una expresión, igualando el valor de la expresión a una clausula case y ejecuta las sentencias asociadas con dicho case.</dd> + <dt>{{jsxref("Sentencias/throw", "throw")}}</dt> + <dd>Lanza una excepción definida por el usuario.</dd> + <dt>{{jsxref("Sentencias/try...catch", "try...catch")}}</dt> + <dd>Marca un bloque de sentencias para ser probadas (try) y especifica una respuesta, en caso de que se lance una excepción.</dd> +</dl> + +<h3 id="Declaraciones">Declaraciones</h3> + +<dl> + <dt>{{jsxref("Sentencias/var", "var")}}</dt> + <dd>Declara una variable, opcionalmente inicializándola a un valor.</dd> + <dt>{{jsxref("Sentencias/let", "let")}}</dt> + <dd>Declara una variable local de ambito de bloque, opcionalmente inicializándola a un valor.</dd> + <dt>{{jsxref("Sentencias/const", "const")}}</dt> + <dd>Declara una constante de solo lectura.</dd> +</dl> + +<h3 id="Funciones">Funciones</h3> + +<dl> + <dt>{{jsxref("Sentencias/function", "function")}}</dt> + <dd>Declara una función con los parámetros especificados.</dd> + <dt>{{jsxref("Sentencias/function*", "function*")}}</dt> + <dd>Los generadores de funciones permiten escribir {{jsxref("Iteration_protocols", "iteradores")}} con mas facilidad.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/async_function", "async function")}}</dt> + <dd>Declara una función asíncrona con los parámetros especificados.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Especifica el valor a ser retornado por una función.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declara una clase.</dd> +</dl> + +<h3 id="Iteraciones">Iteraciones</h3> + +<dl> + <dt>{{jsxref("Sentencias/do...while", "do...while")}}</dt> + <dd>Crea un bucle que ejecuta una instrucción especificada hasta que la condición de prueba se evalúa como falsa. La condición se evalúa después de ejecutar la instrucción, lo que da como resultado que la instrucción especificada se ejecute al menos una vez.</dd> + <dt>{{jsxref("Sentencias/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline()}} {{non-standard_inline()}}{{jsxref("Sentencias/for_each...in", "for each...in")}}</dt> + <dd>Itera una variable especificada sobre todos los valores de las propiedades del objeto. Para cada propiedad distinta, se ejecuta una instrucción especificada.</dd> + <dt>{{jsxref("Sentencias/for...in", "for...in")}}</dt> + <dd>Itera sobre las propiedades enumerables de un objeto, en orden albitrario. Para cada propiedad distinta, las instrucciones pueden ser ejecutadas.</dd> + <dt>{{jsxref("Sentencias/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Array", "array")}}, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Sentencias/while", "while")}}</dt> + <dd>Crea un bucle que ejecuta la instrucción especificada siempre que la condición de prueba se evalúe como verdadera. La condición se evalúa antes de ejecutar la instrucción.</dd> +</dl> + +<h3 id="Otros">Otros</h3> + +<dl> + <dt>{{jsxref("Sentencias/debugger", "debugger")}}</dt> + <dd>Invoca cualquier funcionalidad de depuración disponible. Si no hay funcionalidad de depuración disponible, esta isntrucción no tiene efecto.</dd> + <dt>{{jsxref("Sentencias/export", "export")}}</dt> + <dd>Usada para permitir a un script firmada proveer propiedades, funciones y objetos a otros scripts firmada o sin firmar. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6</dd> + <dt>{{jsxref("Sentencias/import", "import")}}</dt> + <dd>Usada para permitir a un escript importar propiedades, funciones y objetos desde otro script firmado que ha exportado su información. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6.</dd> + <dt>{{jsxref("Sentencias/label", "label")}}</dt> + <dd>Provee una instrucción con un identificador que puedes referir usando una instrucción <code>break</code> o <code>continue</code> .</dd> +</dl> + +<dl> + <dt>{{deprecated_inline()}} {{jsxref("Sentencias/with", "with")}}</dt> + <dd>Extiende la cadena de alcance para una instrucción.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Nuevo: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores">Operadores</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/label/index.html b/files/es/web/javascript/referencia/sentencias/label/index.html new file mode 100644 index 0000000000..03f3108e0e --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/label/index.html @@ -0,0 +1,35 @@ +--- +title: label +slug: Web/JavaScript/Referencia/Sentencias/label +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/label +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Proporciona una sentencia con un identificador al que se puede referir al usar las sentencias {{jsxref("Sentencias/break", "break")}} o {{jsxref("Sentencias/continue", "continue")}}.</p> +<p>Por ejemplo, puede usar una etiqueta para identificar un bucle, y entonces usar las sentencias <code>break</code> o <code>continue</code> para indicar si un programa debería interrumpir el bucle o continuar su ejecución.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="eval"><i>etiqueta</i> :<i>sentencia</i> +</pre> +<dl> + <dt> + <code>etiqueta</code></dt> + <dd> + Cualquier identificador JavaScript que no sea una palabra reservada.</dd> +</dl> +<dl> + <dt> + <code>sentencia</code></dt> + <dd> + Sentencias. <code>break</code> puede ser usado con cualquier sentencia etiquetada, y <code>continue</code> puede usarse con bucles etiquetados de sentencias.</dd> +</dl> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<p>Para un ejemplo de una sentencia label usando <code>break</code>, vea <code>break</code>. Para un ejemplo de una sentencia label usando <code>continue</code>, vea <code>continue</code>.</p> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/break", "break")}}</li> + <li>{{jsxref("Sentencias/continue", "continue")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/let/index.html b/files/es/web/javascript/referencia/sentencias/let/index.html new file mode 100644 index 0000000000..8c450b37d4 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/let/index.html @@ -0,0 +1,393 @@ +--- +title: let +slug: Web/JavaScript/Referencia/Sentencias/let +tags: + - Característica del lenguaje + - Declaración de variable + - ECMAScript 2015 + - JavaScript + - Variables + - let + - sentencias +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La instrucción <strong><code>let</code></strong> declara una variable de alcance local con ámbito de bloque<font><font>(</font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/block">block </a>scope<font><font>)</font></font>, la cual, opcionalmente, puede ser inicializada con algún valor.</p> + +<div class="warning"> +<p class="p1">La palabra reservada <strong><code><span class="s1">let </span></code></strong>en Mozilla Firefox 44 y anteriores, está solo disponible para bloques de código en HTML que esten envueltos en una etiqueta <code><span class="s1"><script type="application/javascript;version=1.7"></span></code> (o de una version mayor). Las etiquetas <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> tienen acceso a esas características sin necesidad de dicho bloque. Es necesario tomar en cuenta que esta es una característica <s>no estándar</s> <u>que ya se ha hecho actualmente estándar</u>, <s>esto</s> <u>pero</u> puede crear conflictos con otros navegadores<u>, ya que fue una característica no estándar.</u></p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">let var1 [= valor1] [, var2 [= valor2]] [, ..., varN [= valorN]];</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> + <dd>Los nombres de la variable o las variables a declarar. Cada una de ellas debe ser un identificador legal de JavaScript</dd> + <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt> + <dd>Por cada una de las variables declaradas puedes, opcionalmente, especificar su valor inicial como una expresión legal JavaScript.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p><strong><code>let</code> </strong>te permite declarar variables limitando su alcance (<em>scope</em>) al bloque, declaración, o expresión donde se está usando.a diferencia de la palabra clave <code>var</code> la cual define una variable global o local en una función sin importar el ámbito del bloque. La otra diferencia entre <code>var</code> y <code>let</code> <span class="VIiyi" lang="es"><span class="ChMk0b JLqJ4b"><span>es que este último se inicializa a un valor sólo cuando un analizador lo evalúa (ver abajo).</span></span></span></p> + +<p>Al igual que <code>const</code>, <code>let </code>no crea propiedades del objeto se declara globalmente (en el alcance más alto).</p> + +<h3 id="Alcance_scope_a_nivel_de_bloque_con_let">Alcance (<em>scope</em>) a nivel de bloque con <code>let</code></h3> + +<p>Usar la palabra reservada <code>let</code> para definir variables dentro de un bloque.</p> + +<pre class="brush:js notranslate">if (x > y) { + let gamma = 12.7 + y; + i = gamma * x; +} +</pre> + +<p>Es posible usar definiciones <code>let</code> para asociar código en extensiones con un pseudo-espacio-de-nombre (pseudo-namespace). (Ver <a href="/en-US/docs/Security_best_practices_in_extensions" title="en-US/docs/Security_best_practices_in_extensions">Mejores prácticas de seguridad en extensiones</a>.)</p> + +<pre class="brush:js notranslate">let Cc = Components.classes, Ci = Components.interfaces; +</pre> + +<p><code>let</code> puede ser útil para escribir código más limpio cuando usamos funciones internas.</p> + +<pre class="brush:js notranslate">var list = document.getElementById("list"); + +for (var i = 1; i <= 5; i++) { + var item = document.createElement("LI"); + item.appendChild(document.createTextNode("Item " + i)); + + let j = i; + item.onclick = function (ev) { + console.log("Item " + j + " is clicked."); + }; + list.appendChild(item); +} +</pre> + +<p>El ejemplo anterior trabaja como se espera porque las cinco instancias de la función (anónima) interna hacen referencia a cinco diferentes instancias de la variable <code>j</code>. Nótese que esto no funcionaría como se espera si reemplazamos <code>let</code> con <code>var</code> o si removemos la variable <code>j</code> y simplemente usamos la variable <code>i</code> dentro de la función interna.</p> + +<h4 id="Reglas_de_alcance">Reglas de alcance</h4> + +<p>Variables declaradas por <code>let</code> tienen por alcance el bloque en el que se han definido, así mismo, como en cualquier bloque interno. De esta manera, <code>let</code> trabaja muy parecido a <code>var</code>. La más notable diferencia es que el alcance de una variable <code>var</code> es la función contenedora:</p> + +<pre class="brush:js notranslate">function varTest() { + var x = 31; + if (true) { + var x = 71; // ¡misma variable! + console.log(x); // 71 + } + console.log(x); // 71 +} + +function letTest() { + let x = 31; + if (true) { + let x = 71; // variable diferente + console.log(x); // 71 + } + console.log(x); // 31 +} +// llamamos a las funciones +varTest(); +letTest(); +</pre> + +<p>En el nivel superior de un programa y funciones, <code>let</code> , a diferencia de <code>var</code>, <strong>no crea</strong> una propiedad en el objeto global, por ejemplo:</p> + +<pre class="brush:js notranslate">var x = 'global'; +let y = 'global'; +console.log(this.x); // "global" +console.log(this.y); // undefined +</pre> + +<p>La salida de este código desplegaría "global" una vez.</p> + +<h3 id="Zona_muerta_temporal_y_errores_con_let">Zona muerta temporal y errores con <code>let<a id="muerta" name="muerta"></a></code></h3> + +<p>La <strong>redeclaración</strong> de la misma variable bajo un mismo <font><font><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments">ámbito léxico</a> </font></font>terminaría en un error de tipo <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError" title="SyntaxError">SyntaxError</a></code>. Esto también es <strong>extensible</strong> si usamos <code>var</code> dentro del <font><font>ámbito léxico</font></font>. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible solo con <code>var.</code></p> + +<pre class="brush: js notranslate">if (x) { + let foo; + let foo; // Terminamos con un SyntaxError. +} +if (x) { + let foo; + var foo; // Terminamos con un SyntaxError. +} +</pre> + +<p>En ECMAScript 2015, <code>let</code> <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/var#Description">no eleva</a> la variable a la parte superior del bloque. Si se hace una referencia a la variable declarada con <code>let</code> (<code>let foo</code>) antes de su declaración, terminaríamos con un error de tipo <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError" title="TypeError">ReferenceError</a> </code>(al contrario de la variable declarada con <code>var</code>, que tendrá el valor <code>undefined</code>), esto porque la variables vive en una "zona muerta temporal" desde el inicio del bloque hasta que la declaración ha sido procesada.</p> + +<pre class="notranslate"><code>function do_something() { + console.log(bar); // undefined + console.log(foo); // ReferenceError: foo </code>no está definido<code> + var bar = 1; + let foo = 2; +}</code></pre> + +<p>Es posible encontrar errores en bloques de control <a href="/en-US/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> debido a que solamente existe un block subyacente.</p> + +<pre class="brush: js notranslate">switch (x) { + case 0: + let foo; + break; + + case 1: + let foo; // Terminamos con un error de tipo SyntaxError. + // esto debido a la redeclaracion + break; +}</pre> + +<h3 id="Otro_ejemplo_de_zona_muerta_temporal_combinada_con_ámbito_léxico"><font><font>Otro ejemplo de zona muerta temporal combinada con <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments">ámbito léxico</a></font></font></h3> + +<p>Debido al alcance léxico, el identificador <code>num</code> dentro de la expresión (<code>num + 55</code>) se evalúa como <code>num</code> del bloque <code>if</code>, y no como la variable <code>num</code> con el valor 33 que esta por encima</p> + +<p>En esa misma línea, el <code>num </code>del bloque <code>if</code> ya se ha creado en el ámbito léxico, pero aún no ha alcanzado (y <strong>terminado</strong>) su inicialización (que es parte de la propia declaración): todavía está en la zona muerta temporal.</p> + +<pre class="notranslate"><code>function prueba(){ + var num = 33; + if (true) { + let num = (num + 55);</code>//ReferenceError: no se puede acceder a la declaración léxica `num'antes de la inicialización <code> + } +} +prueba();</code> +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="let_vs_var"><code>let</code> vs <code>var</code></h3> + +<p>Cuando usamos <code>let</code> dentro de un bloque, podemos limitar el alcance de la variable a dicho bloque. Notemos la diferencia con <code>var</code>, cuyo alcance reside dentro de la función donde ha sido declarada la variable.</p> + +<pre class="brush: js notranslate">var a = 5; +var b = 10; + +if (a === 5) { + let a = 4; // El alcance es dentro del bloque if + var b = 1; // El alcance es global + + console.log(a); // 4 + console.log(b); // 1 +} + +console.log(a); // 5 +console.log(b); // 1</pre> + +<h3 id="let_en_bucles"><code>let</code> en bucles</h3> + +<p>Es posible usar la palabra reservada <code>let</code> para enlazar variables con alcance local dentro del alcance de un bucle en lugar de usar una variable global (definida usando <code>var</code>) para dicho propósito.</p> + +<pre class="brush: js notranslate">for (let i = 0; i<10; i++) { + console.log(i); // 0, 1, 2, 3, 4 ... 9 +} + +console.log(i); // ReferenceError: i is not defined +</pre> + +<h2 id="Extensiones_let_no-estandar">Extensiones <code>let</code> no-estandar</h2> + +<h3 id="Bloques_let">Bloques<code> let</code></h3> + +<div class="warning"> +<p>La <strong>sintaxis del bloque y expresion</strong> <code>let</code> es no-estandar y sera deshechado en un futuro. ¡No deben ser usados! ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023609" rel="noopener" title="FIXED: Remove SpiderMonkey support for let expressions">error 1023609</a> y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1167029" rel="noopener" title="FIXED: Remove SpiderMonkey support for let blocks">error 1167029</a> para mas detalles.</p> +</div> + +<p>Un <strong>bloque <code>let</code></strong> provee una manera de asociar valores con variables dentro del alcance de un bloque sin afectar el valor de variables con nombre similar fuera del bloque.</p> + +<h4 id="Sintaxis_2">Sintaxis</h4> + +<pre class="syntaxbox notranslate">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) {declaración};</pre> + +<h4 id="Descripción_2">Descripción</h4> + +<p>El bloque <code>let</code> provee alcance local para las variables. Funciona enlazando cero o más variables en el alcance léxico de un solo bloque de código; de otra manera, es exactamente lo mismo que una declaración de bloque. Hay que notar particularmente que el alcance de una variable declarada dentro de un bloque <code>let</code> usando var es equivalente a declarar esa variable fuera del bloque <code>let</code>; dicha variable aún tiene alcance dentro de la función. Al usar la sintaxis de bloque <code>let</code>, los paréntesis siguientes a <code>let</code> son requeridos. Una falla al incluir dichos paréntesis resultará en un error de sintaxis.</p> + +<h4 id="Ejemplo">Ejemplo</h4> + +<pre class="brush:js notranslate">var x = 5; +var y = 0; + +let (x = x+10, y = 12) { + console.log(x+y); // 27 +} + +console.log(x + y); // 5 +</pre> + +<p>Las reglas para el bloque de código son las mismas que para cualquier otro bloque de código en JavaScript. Es posible tener sus propias variables locales usando declaraciones <code>let</code> en dicho bloque.</p> + +<h4 id="Reglas_de_alcance_2">Reglas de alcance</h4> + +<p>El alcance de las variables definidas usando <code>let</code> es el mismo bloque <code>let</code>, así como cualquier bloque interno contenido dentro de el bloque, a menos que esos bloques internos definan variables con el mismo nombre.</p> + +<h3 id="expresiones_let">expresiones <code>let</code></h3> + +<div class="warning"> +<p><code>Soporte de <strong>expresiones</strong> let</code> ha sido removido en Gecko 41 ({{bug(1023609)}}).</p> +</div> + +<p>Una <strong>expresion <code>let</code></strong> permite establecer variables con alcance dentro de una expresión.</p> + +<h4 id="Sintaxis_3">Sintaxis</h4> + +<pre class="syntaxbox notranslate">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre> + +<h4 id="Ejemplo_2">Ejemplo</h4> + +<p>Podemos usar <code>let</code> para establecer variables que tienen como alcance solo una expresión:</p> + +<pre class="brush: js notranslate">var a = 5; +let(a = 6) console.log(a); // 6 +console.log(a); // 5</pre> + +<h4 id="Reglas_de_alcance_3">Reglas de alcance</h4> + +<p>Dada la expresión <code>let</code> siguiente:</p> + +<pre class="eval notranslate">let (<var>decls</var>) <var>expr</var> +</pre> + +<p>Existe un bloque implícito creado alrededor de expr.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición initial. No especifica expresiones ni declaraciones let.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> + +<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>Soporte básico</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td> + <td>11</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Zona muerta temporal</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("35") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Expresión<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}-{{ CompatGeckoDesktop("40") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Bloque<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</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 para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Zona muerta temporal</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("35") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Expresión<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}-{{ CompatGeckoMobile("40") }}[1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Bloque<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_específicas_a_Firefox">Notas específicas a Firefox</h3> + +<ul> + <li>[1]: Solo disponible para bloques de codigo HTML dentro de una etiqueta <code><script> type="application/javascript;version=1.7"></code> (o de una versión mayor). Es necesario tomar en cuenta que esta es una característica no estándar, esto puede crear conflictos con otros navegadores. Las etiquetas <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> tienen acceso a esas características sin necesidad de dicho bloque. Ver<span style="line-height: 1.5;">{{bug(932513)}}.</span></li> + <li>Conformidad con ES2015 para <code>let</code> en SpIderMonkey es monitoreado en {{bug(950547)}} y extensiones no-standar seran eliminadas en el futuro {{bug(1023609)}}.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/return/index.html b/files/es/web/javascript/referencia/sentencias/return/index.html new file mode 100644 index 0000000000..6497e97632 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/return/index.html @@ -0,0 +1,73 @@ +--- +title: return +slug: Web/JavaScript/Referencia/Sentencias/return +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p><span id="result_box" lang="es"><span>La</span> <span>sentencia <code>return</code></span> <span class="alt-edited">finaliza la</span> <span>ejecución de la función</span> <span>y especifica</span> <span>un valor</span> <span>para ser devuelto</span> <span class="alt-edited">a quien llama a la</span> <span>función.</span></span></p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">return [[ <em>expresion</em> ]];</pre> + +<dl> + <dt><span class="short_text" id="result_box" lang="es"><span>expresion</span></span></dt> + <dd>La expresión a retornar. Si se omite, <code>undefined</code> es retornado en su lugar.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Cuando una instrucción de retorno se llama en una función, se detiene la ejecución de esta. Si se especifica un valor dado, este se devuelve a quien llama a la función. Si se omite la expresión, <code>undefined</code> se devuelve en su lugar. Todas las siguientes sentencias de retorno rompen la ejecución de la función:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">return</span><span class="punctuation token">;</span> +<span class="keyword token">return</span> <span class="keyword token">true</span><span class="punctuation token">;</span> +<span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span> +<span class="keyword token">return</span> x<span class="punctuation token">;</span> +<span class="keyword token">return</span> x <span class="operator token">+</span> y <span class="operator token">/</span> <span class="number token">3</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Sintaxis" name="Sintaxis"><br> + La inserción automática Punto y coma</h2> + +<p>La instrucción de retorno se ve afectada por la inserción automática de punto y coma (ASI). No se permite el terminador de línea entre la palabra clave de retorno y la expresión.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">return</span> +a <span class="operator token">+</span> b<span class="punctuation token">;</span></code></pre> + +<dl> +</dl> + +<p><br> + se transforma por ASI en:</p> + +<pre class="line-numbers language-html"><code class="language-html">return; +a + b;</code></pre> + +<p><br> + La consola le advertirá "código inalcanzable después de la declaración de retorno".</p> + +<div class="note"> +<p>A partir de Gecko 40 {{geckoRelease(40)}}, una advertencia es mostrada en la consola si se encuentra código inalcanzable despues de una instrucción return.</p> +</div> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_return" name="Ejemplo:_Usando_return">Ejemplo: Usando <code>return</code></h3> + +<p>La siguiente función devuelve el cuadrado de su argumento, <code>x</code>, donde <code>x</code> es un número.</p> + +<pre class="brush: js">function cuadrado(x) { + return x * x; +} +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/switch/index.html b/files/es/web/javascript/referencia/sentencias/switch/index.html new file mode 100644 index 0000000000..9aa1f67dc0 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/switch/index.html @@ -0,0 +1,245 @@ +--- +title: switch +slug: Web/JavaScript/Referencia/Sentencias/switch +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La <strong>declaración</strong> <code><strong>switch</strong></code> evalúa una <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_Operators">expresión</a>, comparando el valor de esa expresión con una instancia <code><strong>case</strong></code>, y ejecuta <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias">declaraciones</a> asociadas a ese <code>case</code>, así como las declaraciones en los <code>case</code> que siguen.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox notranslate">switch (expresión) { + case valor1: + //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1 + [break;] + case valor2: + //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2 + [break;] + ... + case valorN: + //Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN + [break;] + default: + //Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión + [break;] +}</pre> + +<dl> + <dt><code>expresión</code></dt> + <dd>Es una expresión que es comparada con el valor de cada instancia <code>case</code>.</dd> + <dt><code>case valorN</code></dt> + <dd>Una instancia <code>case valorN</code> es usada para ser comparada con la <code>expresión</code>. Si la <code>expresión</code> coincide con el <code>valorN</code>, las declaraciones dentro de la instancia <code>case</code> se ejecutan hasta que se encuentre el final de la declaración <code>switch</code> o hasta encontrar una interrupción <code>break</code>.</dd> +</dl> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">default</span></font></dt> + <dd>Una instancia <code>default</code>, cuando es declarada, es ejecutada si el valor de la <code>expresión</code> no coincide con cualquiera de las otras instancias <code>case valorN</code>.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Si ocurre una coincidencia, el programa ejecuta las declaraciones asociadas correspondientes. Si la expresión coincide con múltiples entradas, la primera será la seleccionada, incluso si las mayúsculas son tenidas en cuenta.</p> + +<p>El programa primero busca la primer instacia <code>case</code> cuya expresión se evalúa con el mismo valor de la expresión de entrada (usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparación estricta</a>, <code>===)</code> y luego transfiere el control a esa cláusula, ejecutando las declaraciones asociadas. Si no se encuentra una cláusula de <code>case</code> coincidente, el programa busca la cláusula <code>default</code> opcional, y si se encuentra, transfiere el control a esa instancia, ejecutando las declaraciones asociadas. Si no se encuentra una instancia <code>default</code> el programa continúa la ejecución en la instrucción siguiente al final del <code>switch</code>. Por convención, la instancia <code>default</code> es la última cláusula, pero no tiene que ser así.</p> + +<p>La declaración <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> es opcional y está asociada con cada etiqueta de <code>case</code> y asegura que el programa salga del <code>switch</code> una vez que se ejecute la instrucción coincidente y continúe la ejecución en la instrucción siguiente. Si se omite el <code>break</code> el programa continúa la ejecución en la siguiente instrucción en la declaración de <code>switch</code> .</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_switch">Usando <code>switch</code></h3> + +<p>En el siguiente ejemplo, si <code>expresión</code> se resuelve a "Platanos", el algoritmo compara el valor con el <code>case</code> "Platanos" y ejecuta la declaración asociada. Cuando se encuentra un <code>break</code>, el programa sale del condicional <code>switch</code> y ejecuta la declaración que lo procede. Si se omite el <code>break</code>, el <code>case</code> "Cerezas" también es ejecutado.</p> + +<pre class="notranslate"><code>switch (expr) { + case 'Naranjas': + console.log('El kilogramo de naranjas cuesta $0.59.'); + break; + case 'Manzanas': + console.log('El kilogramo de manzanas cuesta $0.32.'); + break; + case 'Platanos': + console.log('El kilogramo de platanos cuesta $0.48.'); + break; + case 'Cerezas': + console.log('El kilogramo de cerezas cuesta $3.00.'); + break; + case 'Mangos': + case 'Papayas': + console.log('El kilogramo de mangos y papayas cuesta $2.79.'); + break; + default: + console.log('Lo lamentamos, por el momento no disponemos de ' + expr + '.'); +} + +console.log("¿Hay algo más que te quisiera consultar?");</code></pre> + +<h3 id="¿Qué_pasa_si_olvido_un_break">¿Qué pasa si olvido un break?</h3> + +<p>Si olvidas un <code>break</code>, el script se ejecutará desde donde se cumple la condición y ejecutará el siguiente <code>case</code> independientemente si esta condición se cumple o no. Ver el siguiente ejemplo:</p> + +<pre class="brush: js notranslate">var foo = 0; +switch (foo) { + case -1: + console.log('1 negativo'); + break; + case 0: // foo es 0, por lo tanto se cumple la condición y se ejecutara el siguiente bloque + console.log(0) + // NOTA: el "break" olvidado debería estar aquí + case 1: // No hay sentencia "break" en el 'case 0:', por lo tanto este caso también será ejecutado + console.log(1); + break; // Al encontrar un "break", no será ejecutado el 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +} +</pre> + +<h3 id="¿Puedo_usar_un_<default>_entre_condiciones">¿Puedo usar un <default> entre condiciones?</h3> + +<p>Si, ¡es posible! JavaScript retornará a la instancia <code>default</code> en caso de no encontrar una coincidencia:</p> + +<pre class="notranslate"><code>var foo = 5; +switch (foo) { + case 2: + console.log(2); + break; // al encontrar este 'break' no se continuará con el siguiente 'default:' + default: + console.log('default') + // fall-through + case 1: + console.log('1'); +}</code></pre> + +<p>Al estar el <code>case 1:</code> a continuación de <code>default</code>, y al no haber un <code>break </code>de por medio, veremos que la declaración del <code>case 1:</code> será ejecutada, apareciendo el resultado <code>1</code> en el <em>log de consola.</em></p> + +<h3 id="Metodos_para_casos_con_multiple-criterio">Metodos para casos con multiple-criterio</h3> + +<p>La fuente de esta técnica esta aquí:</p> + +<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p> + +<h4 id="Operación_única_con_múltiples_casos">Operación única con múltiples casos</h4> + +<p>Este método toma ventaja del hecho de que, si no hay un <code>break</code> debajo de una declaración <code>case</code>, continuará la ejecución hasta el siguiente <code>case</code>, ignorando si en dicho caso se cumple o no el criterio indicado. Comprobar en la sección <em>¿Qué pasa si olvido un <code>break</code>?</em></p> + +<p>Este es un ejemplo de operación única con sentencia <code>switch</code> secuencial, donde cuatro valores diferentes se comportan exactamente de la misma manera:</p> + +<pre class="brush: js notranslate">var Animal = 'Jirafa'; +switch (Animal) { + case 'Vaca': + case 'Jirafa': + case 'Perro': + case 'Cerdo': + console.log('Este animal subirá al Arca de Noé.'); + break; + case 'Dinosaurio': + default: + console.log('Este animal no lo hará.'); +}</pre> + +<h4 id="Operaciones_encadenadas_con_múltiples_casos">Operaciones encadenadas con múltiples casos</h4> + +<p>Este es un ejemplo de una sentencia <code>switch</code> secuencial con múltiples operaciones, donde, dependiendo del valor entero dado, se pueden recibir diferentes resultados. Esto demuestra que el algoritmo correrá en el orden en que se coloquen las declaraciones <code>case</code>, y que no tiene que ser numéricamente secuencial. En JavaScript, también es posible combinar definiciones con valores <em><code>"string"</code> </em>dentro de estas declaraciones <code>case</code>.</p> + +<pre class="brush: js notranslate">var foo = 1; +var output = 'Salida: '; +switch (foo) { + case 10: + output += '¿Y '; + case 1: + output += 'Cuál '; + output += 'Es '; + case 2: + output += 'Tu '; + case 3: + output += 'Nombre'; + case 4: + output += '?'; + console.log(output); + break; + case 5: + output += '!'; + console.log(output); + break; + default: + console.log('Por favor, selecciona un valor del 1 al 6.'); +}</pre> + +<p>La salida(output) de este ejemplo:</p> + +<table class="standard-table" style="height: 270px; width: 522px;"> + <tbody> + <tr> + <th scope="col">Value</th> + <th scope="col">Log text</th> + </tr> + <tr> + <td>foo es NaN or no es 1, 2, 3, 4, 5 ni 10</td> + <td>Por favor, selecciona un valor del 1 al 6.</td> + </tr> + <tr> + <td>10</td> + <td>Salida: ¿Y Cuál Es Tu Nombre?</td> + </tr> + <tr> + <td>1</td> + <td>Salida: Cuál Es Tu Nombre?</td> + </tr> + <tr> + <td>2</td> + <td>Salida: Tu Nombre?</td> + </tr> + <tr> + <td>3</td> + <td>Salida: Nombre?</td> + </tr> + <tr> + <td>4</td> + <td>Salida: ?</td> + </tr> + <tr> + <td>5</td> + <td>Salida: !</td> + </tr> + </tbody> +</table> + +<h3 id="Variables_centradas_en_bloques_sin_un_estamento_de_switch">Variables centradas en bloques sin un estamento de switch</h3> + +<p>Con ECMAScript 2015 (ES6) </p> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</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> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/throw/index.html b/files/es/web/javascript/referencia/sentencias/throw/index.html new file mode 100644 index 0000000000..d3e52f83ac --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/throw/index.html @@ -0,0 +1,153 @@ +--- +title: throw +slug: Web/JavaScript/Referencia/Sentencias/throw +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Lanza una excepcion definida por el usuario.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">throw <em>expresion</em>;</pre> + +<dl> + <dt><code>expresion</code></dt> + <dd>Expresión a lanzar.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Utilice la sentencia <code>throw</code> para lanzar una excepción. Cuando lanza una excepción, <code>expresion</code> especifica el valor de la excepción. Cada uno de los siguientes ejemplos lanza una excepción:</p> + +<pre class="brush: js">throw "Error2"; // genera una excepción con un valor cadena +throw 42; // genera una excepción con un valor 42 +throw true; // genera una excepción con un valor true</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Lanzar_un_objeto" name="Ejemplo:_Lanzar_un_objeto">Ejemplo: Lanzar un objeto</h3> + +<p>Puede especificar un objeto cuando lanza una excepción. Puede entonces referenciar las propiedades del objeto en el bloque <code>catch</code>. El siguiente ejemplo crea un objeto <code>miExcepcionUsuario</code> del tipo <code>ExceptionUsuario</code> y la utiliza usándola en una sentencia <code>throw</code>.</p> + +<pre class="brush: js">function ExceptionUsuario(mensaje) { + this.mensaje = mensaje; + this.nombre = "ExceptionUsuario"; +} + +function getNombreMes(mes) { + mes = mes - 1; // Ajustar el número de mes al índice del arreglo (1 = Ene, 12 = Dic) + var meses = new Array("Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", + "Ago", "Sep", "Oct", "Nov", "Dic"); + if (meses[mes] != null) { + return meses[mes]; + } else { + miExcepcionUsuario = new ExceptionUsuario("NumeroMesNoValido"); + throw miExcepcionUsuario; + } +} + +try { + // sentencias para try + nombreMes = getNombreMes(miMes); +} catch (excepcion) { + nombreMes = "desconocido"; + registrarMisErrores(excepcion.mensaje, excepcion.nombre); // pasa el objeto exception al manejador de errores +} +</pre> + +<h3 id="Ejemplo:_Otro_ejemplo_sobre_lanzar_un_objeto" name="Ejemplo:_Otro_ejemplo_sobre_lanzar_un_objeto">Ejemplo: Otro ejemplo sobre lanzar un objeto</h3> + +<p>El siguiente ejemplo comprueba una cadena de entrada para un código postal de EE.UU. Si el código postal utiliza un formato no válido, la sentencia throw lanza una excepción creando un objeto de tipo <code>ExcepcionFormatoCodigoPostal</code>.</p> + +<pre class="brush: js">/* + * Creates a ZipCode object. + * + * Accepted formats for a zip code are: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * If the argument passed to the ZipCode constructor does not + * conform to one of these patterns, an exception is thrown. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // zip code value will be the first match in the string + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ExcepcionFormatoCodigoPostal(zip); + } +} + +function ExcepcionFormatoCodigoPostal(valor) { + this.valor = valor; + this.mensaje = "no conforme con el formato esperado de código postal"; + this.toString = function() { + return this.valor + this.mensaje + }; +} + +/* + * Esto podría estar en un script que valida los datos de una dirección de EE.UU. + */ + +var CODIGOPOSTAL_NOVALIDO = -1; +var CODIGOPOSTAL_DESCONOCIDO_ERROR = -2; + +function verificarCodigoPostal(codigo) { + try { + codigo = new CodigoPostal(codigo); + } catch (excepcion) { + if (excepcion instanceof ExcepcionFormatoCodigoPostal) { + return CODIGOPOSTAL_NOVALIDO; + } else { + return CODIGOPOSTAL_DESCONOCIDO_ERROR; + } + } + return codigo; +} + +a = verificarCodigoPostal(95060); // devuelve 95060 +b = verificarCodigoPostal(9560;) // devuelve -1 +c = verificarCodigoPostal("a"); // devuelve -1 +d = verificarCodigoPostal("95060"); // devuelve 95060 +e = verificarCodigoPostal("95060 1234"); // devuelve 95060 1234 +</pre> + +<h3 id="Ejemplo:_Relanzar_una_excepci.C3.B3n" name="Ejemplo:_Relanzar_una_excepci.C3.B3n">Ejemplo: Relanzar una excepción</h3> + +<p>Puede usar <code>throw</code> para volver a lanzar una excepción después de cogerla. El siguiente ejemplo coge una excepción con un valor numérico y la vuelve a lanzar si el valor es superior a 50. La excepción relanzada propaga hacia arriba la función adjunta o a un nivel superior para que el usuario pueda verla.</p> + +<pre class="eval">try { + throw n; // lanza una excepción con un valor numérico +} catch (excepcion) { + if (excepcion <= 50) { + // sentencias para manejar la excepción 1-50 + } else { + // no se puede manejar esta excepción, así que se vuelve a lanzar + throw excepcion; + } +} +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/try...catch/index.html b/files/es/web/javascript/referencia/sentencias/try...catch/index.html new file mode 100644 index 0000000000..d429db6163 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/try...catch/index.html @@ -0,0 +1,254 @@ +--- +title: try...catch +slug: Web/JavaScript/Referencia/Sentencias/try...catch +tags: + - Error + - Excepción + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración <strong><code>try...catch</code></strong> señala un bloque de instrucciones a intentar (<strong><code>try</code></strong>), y especifica una respuesta si se produce una excepción (<strong><code>catch</code></strong>).</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">try { + <em>try_statements</em> +} +[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // non-standard + <em>catch_statements_1</em> +}] +... +[catch (<em>exception_var_2</em>) { + <em>catch_statements_2</em> +}] +[finally { + <em>finally_statements</em> +}] +</pre> + +<dl> + <dt><code>try_statements</code></dt> + <dd>Las sentencias que serán ejecutadas.</dd> +</dl> + +<dl> + <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt> + <dd>Sentencias que se ejecutan si una excepción es lanzada en el bloque <code>try</code>.</dd> +</dl> + +<dl> + <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> + <dd>Identificador que contiene un objeto de excepcion asociado a la cláusula <code>catch</code>.</dd> +</dl> + +<dl> + <dt><code>condition_1</code></dt> + <dd>Una expresión condicional.</dd> +</dl> + +<dl> + <dt><code>finally_statements</code></dt> + <dd>Sentencias que se ejecutan después de que se completa la declaración <code>try</code> . Estas sentencias se ejecutan independientemente de si una excepcion fue lanzada o capturada.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La sentencia <code>try</code> consiste en un bloque <code>try</code> que contiene una o más sentencias. Las llaves <code>{}</code> se deben utilizar siempre<code>,</code> incluso para una bloques de una sola sentencia. Al menos un bloque <code>catch</code> o un bloque <code>finally</code> debe estar presente. Esto nos da tres formas posibles para la sentencia <code>try</code>:</p> + +<ol> + <li><code>try...catch</code></li> + <li><code>try...finally</code></li> + <li><code>try...catch...finally</code></li> +</ol> + +<p>Un bloque <code>catch</code> contiene sentencias que especifican que hacer si una excepción es lanzada en el bloque <code>try</code>. Si cualquier sentencia dentro del bloque <code>try</code> (o en una funcion llamada desde dentro del bloque <code>try</code>) lanza una excepción, el control cambia inmediatamente al bloque <code>catch</code> . Si no se lanza ninguna excepcion en el bloque <code>try</code>, el bloque <code>catch</code> se omite.</p> + +<p>La bloque <code>finally</code> se ejecuta despues del bloque <code>try</code> y el/los bloque(s) <code>catch</code> hayan finalizado su ejecución. Éste bloque siempre se ejecuta, independientemente de si una excepción fue lanzada o capturada.</p> + +<p>Puede anidar una o más sentencias <code>try</code>. Si una sentencia <code>try</code> interna no tiene una bloque <code>catch</code>, se ejecuta el bloque <code>catch</code> de la sentencia <code>try</code> que la encierra.</p> + +<p>Usted también puede usar la declaración <code>try</code> para manejar excepciones de JavaScript. Consulte la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide">Guía de JavaScript</a> para obtener mayor información sobre excepciones de JavaScript.<br> + </p> + +<h3 id="Bloque_catch_incondicional">Bloque catch incondicional</h3> + +<p>Cuando solo se utiliza un bloque <code>catch</code>, el bloque <code>catch</code> es ejecutado cuando cualquier excepción es lanzada. Por ejemplo, cuando la excepción ocurre en el siguiente código, el control se transfiere a la cláusula <code>catch</code>.</p> + +<pre class="brush: js">try { + throw "myException"; // genera una excepción +} +catch (e) { + // sentencias para manejar cualquier excepción + logMyErrors(e); // pasa el objeto de la excepción al manejador de errores +} +</pre> + +<p>El bloque <code>catch</code> especifíca un identificador ( <code>e</code> en el ejemplo anterior) que contiene el valor de la excepción. Este valor está solo disponible en el {{Glossary("Scope", "scope")}} de el bloque<code> catch</code></p> + +<h3 id="Bloques_catch_condicionales">Bloques catch condicionales</h3> + +<p>Tambien se pueden crear "bloques <code>catch</code> condicionales", combinando bloques <code>try...catch</code> con estructuras <code>if...else if...else</code> como estas:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="function token">myroutine</span><span class="punctuation token">();<code class="language-js"><span class="comment token"> </span></code></span><span class="comment token">// puede lanzar tres tipos de excepciones</span><span class="punctuation token"><code class="language-js"> +</code>}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">TypeError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar excepciones TypeError</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">RangeError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar excepciones RangeError</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">EvalError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar excepciones EvalError</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar cualquier excepción no especificada</span> + <span class="function token">logMyErrors</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// </span><span class="punctuation token">pasa el objeto de la excepción al manejador de errores</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="The_exception_identifier" name="The_exception_identifier">El identificador de excepciones</h3> + +<p>Cuando una excepción es lanzada en el bloque <code>try</code>, <code><em>exception_var</em></code> (por ejemplo, la <code>e</code> en <code>catch (e)</code>) guarda el valor de la excepción. Se puede usar éste identificador para obtener información acerca de la excepción que fue lanzada. Este valor está solo disponible en el {{Glossary("Scope", "scope")}} de el bloque<code> catch.</code></p> + +<pre class="brush: js">function isValidJSON(text) { + try { + JSON.parse(text); + return true; + } catch { + return false; + } +}</pre> + +<h3 id="The_finally_clause" name="The_finally_clause">La cláusula <code>finally</code></h3> + +<p>La cláusula <code>finally</code> contiene sentencias a ejecutarse después de que las cláusulas <code>try</code> y <code>catch</code> se ejecuten, pero antes de las sentencias que le siguen al bloque <code>try..catch..finally</code>. Note que la cláusula <code>finally</code> se ejecuta sin importar si una excepción es o no lanzada. Si una excepción es lanzada, las instrucciones en la cláusula <code>finally</code> se ejecutan incluso si ninguna cláusula <code>catch</code> maneja la excepción.</p> + +<p>Usted puede usar la cláusula finally para hacer que su script falle plácidamente cuando una excepción ocurra; por ejemplo, para hacer una limpieza general, usted puede necesitar liberar un recurso que su script haya retenido.</p> + +<p>Puede parecer extraño tener una cláusula relacionada a una excepción que se ejecuta sin importar si hay una excepción o no, pero esta concepción en realidad sirve a un propósito. El punto importante no es que la cláusula <code>finally</code> siempre se ejecuta, si no más bien que el codigo ordinario que le sigue a <code>try..catch</code> no.</p> + +<p>Por ejemplo, si otra excepción ocurre dentro de un bloque <code>catch</code> de una declaración <code>try</code>, cualquier codigo restante en el mismo bloque exterior <code>try</code> que encierra ese <code>try..catch</code> (o en el flujo principal, si no es un bloque <code>try</code> exterior) , no será ejecutado, dado que el control es inmediatamente transferido al bloque <code>catch</code> del <code>try</code> exterior (o el generador de error interno, si no es en un bloque <code>try</code>).</p> + +<p>Por lo tanto, cualquier rutina de limpieza hecha en esa sección encerrada (o la principal) antes de que exista, será saltada. Sin embargo, si la declaración <code>try</code> tiene un bloque <code>finally</code>, entonces el código de ese bloque <code>finally</code> será ejecutado primero para permitir tal limpieza, y ENTONCES el bloque <code>catch</code> de la otra declaración <code>try</code> (o el generador de error) tomará el control para manejar la segunda excepción.</p> + +<p>Ahora, si esa rutina de limpieza debiera ser hecha ya sea que el código del <code>try..catch</code> tenga éxito o no, entonces si el bloque <code>finally</code> se ejecutase solo después de una excepción, el mismo código de limpieza tendría que estar presente dentro y fuera del bloque <code>finally</code>, y por lo tanto no hay razón para no tener el bloque <code>finally</code> solo, y dejarlo ejecutarse sin importar si hay excepciones o no.</p> + +<p>El siguiente ejemplo abre un archivo y despues ejecuta sentencias que usan el archivo (JavaScript del lado del servidor permite acceder a archivos). Si una excepción es lanzada mientras el archivo está abierto, la cláusula <code>finally</code> cierra el archivo antes de que el script falle. El código en <code>finally</code> también se ejecuta después de un retorno explícito de los bloques <code>try</code> o <code>catch</code>.</p> + +<pre class="brush: js">openMyFile() +try { + // retiene un recurso + writeMyFile(theData); +} +finally { + closeMyFile(); // siempre cierra el recurso +} +</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="The_finally_clause" name="The_finally_clause">Bloques try anidados</h3> + +<p>Primero, veamos que pasa con esto:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "finally"</span> +<span class="comment token">// "outer" "oops"</span></code></pre> + +<p>Ahora, si nosotros ya capturamos la excepción en una declaración try interna agregando un bloque catch.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "inner" "oops"</span> +<span class="comment token">// "finally"</span></code></pre> + +<p>Y ahora vamos a relanzar el error.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">throw</span> ex<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "inner" "oops"</span> +<span class="comment token">// "finally"</span> +<span class="comment token">// "outer" "oops"</span></code></pre> + +<p>Cualquier excepción dad será capturada solo una vez por el bloque catch más cercano a menos que sea relanzado. Por supuesto cualquier nueva excepción que se origine en el bloque 'interno' (porque el código en el bloque catch puede hacer algo que lanze un error), será capturado por el bloque 'externo'.</p> + +<h3 id="Retornando_de_un_bloque_finally">Retornando de un bloque finally</h3> + +<p>Si el bloque <code>finally</code> retorna un valor, este valor se convierte en el valor de retorno de toda la producción <code>try-catch-finally</code>, a pesar de cualquier sentencia <code>return</code> en los bloques <code>try</code> y <code>catch</code>. Esto incluye excepciones lanzadas dentro del bloque catch.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">throw</span> ex<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "inner" "oops"</span> +<span class="comment token">// "finally"</span></code></pre> + +<p>El "oops" externo no es lanzado debido al retorno en el bloque finally. Lo mismo aplicaría para cualquier valor retornado del bloque catch.</p> + +<p>Vea los ejemplos para {{jsxref("Sentencias/throw", "throw")}}.</p> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea también</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Sentencias/throw", "throw")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/var/index.html b/files/es/web/javascript/referencia/sentencias/var/index.html new file mode 100644 index 0000000000..006e40a270 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/var/index.html @@ -0,0 +1,163 @@ +--- +title: var +slug: Web/JavaScript/Referencia/Sentencias/var +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La sentencia <strong><code>var</code></strong> declara una variable, opcionalmente inicializándola con un valor.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><strong>var</strong> <em>nombreDeVariable1 [= valor1] [, nombreDeVariable2 [= valor2] ... [, nombreDeVariableN [=valorN]]]; </em></code></pre> + +<dl> + <dt><code>nombreDeVariableN</code></dt> + <dd>Representa el nombre que el programador da a la variable. Puede ser cualquier identificador legal.</dd> +</dl> + +<dl> + <dt><code>valorN</code></dt> + <dd>Valor inicial de la variable. Puede ser cualquier expresión legal. El valor predeterminado es <em>undefined</em> (en español, <em>indefinida</em>).</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Las declaraciones de variables, donde sea que ocurran, son procesadas antes de que cualquier otro código sea ejecutado. El ámbito de una variable declarada con la palabra reservada <strong><code>var</code></strong> es su <em>contexto de ejecución</em> en curso<em>,</em> que puede ser la función que la contiene o, para las variables declaradas afuera de cualquier función, un ámbito global. Si re-declaras una variable Javascript, esta no perderá su valor.</p> + +<p>Asignar un valor a una variable no declarada implica crearla como variable global (se convierte en una propiedad del objeto global) cuando la asignación es ejecutada. Las diferencias entre una variable declarada y otra sin declarar son:</p> + +<p>1. Las variables declaradas se limitan al contexto de ejecución en el cual son declaradas. Las variables no declaradas siempre son globales.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">x</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + y <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('use strict')</span> + <span class="keyword token">var</span> z <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="function token">x</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "1" </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError": z no está definida afuera de x</span></code></pre> + +<p>2. Las variables declaradas son creadas antes de ejecutar cualquier otro código. Las variables sin declarar no existen hasta que el código que las asigna es ejecutado.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError".</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'trabajando...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Nunca se ejecuta.</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a<span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "undefined" o "" dependiendo del navegador.</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'trabajando...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "</span><span class="string token">trabajando</span><span class="comment token">...".</span></code></pre> + +<p>3. Las variables declaradas son una propiedad no-configurable de su contexto de ejecución (de función o global). Las variables sin declarar son configurables (p. ej. pueden borrarse).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> +b <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> + +<span class="keyword token">delete</span> <span class="keyword token">this</span><span class="punctuation token">.</span>a<span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('use strict'), de lo contrario falla silenciosamente.</span> +<span class="keyword token">delete</span> <span class="keyword token">this</span><span class="punctuation token">.</span>b<span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError". </span> +<span class="comment token">// La propiedad 'b' se eliminó y ya no existe.</span></code></pre> + +<p>Debido a esas tres diferencias, fallar al declarar variables muy probablemente llevará a resultados inesperados. Por tanto <strong>se recomienda siempre declarar las variables, sin importar si están en una función o un ámbito global</strong>. Y en el modo estricto (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>) de ECMAScript 5, asignar valor a una variable sin declarar lanzará un error.</p> + +<h3 id="Elevación_de_variables">Elevación de variables</h3> + +<p>Como la declaración de variables (y todas las declaraciones en general) se procesa antes de ejecutar cualquier código, declarar una variable en cualquier parte del código es equivalente a declararla al inicio del mismo. Esto también significa que una variable puede parecer usarse antes de ser declarada. Este comportamiento es llamado <em>hoisting </em>(del inglés "elevación"), ya que la declaración de una variable parecer haber sido movida a la cima de la función o código global.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">bla <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> bla<span class="punctuation token">;</span> +<span class="comment token">// ...</span> + +<span class="comment token">// Es entendido implicitamente como:</span> + +<span class="keyword token">var</span> bla<span class="punctuation token">;</span> +bla <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span></code></pre> + +<p>Por esa razón, se recomienda siempre declarar variables al inicio de su ámbito (la cima del código global y la cima del código de función) para que sea claro cuáles variables pertenecen al ámbito de función (local) y cuáles son resueltas en la cadena de ámbito.</p> + +<p>Es importante señalar que <strong>la elevación afectará la declaración</strong> de variables, pero <strong>no su inicialización</strong>. El valor será asignado precisamente cuando la sentencia de asignación sea alcanzada:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">haz_algo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined (valor indefinido)</span> + <span class="keyword token">var</span> bar <span class="operator token">=</span> <span class="number token">111</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 111</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Se entiende implícitamente como: </span> +<span class="keyword token">function</span> <span class="function token">haz_algo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> bar<span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined (valor indefinido)</span> + bar <span class="operator token">=</span> <span class="number token">111</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 111</span> +<span class="punctuation token">}</span></code></pre> + +<p> </p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Declarando_e_inicializando_dos_variables">Declarando e inicializando dos variables</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> b <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Asignando_dos_variables_con_un_solo_valor_de_cadena">Asignando dos variables con un solo valor de cadena</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> b <span class="operator token">=</span> a<span class="punctuation token">;</span> + +<span class="comment token">// Equivalente a:</span> + +<span class="keyword token">var</span> a<span class="punctuation token">,</span> b <span class="operator token">=</span> a <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span></code></pre> + +<p>Sé consciente del orden:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> y<span class="punctuation token">,</span> y <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x <span class="operator token">+</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprimirá "undefinedA"</span></code></pre> + +<p>Aquí, '<code>x</code>' & '<code>y</code>' son declaradas antes de ejecutarse cualquier código, y la asignación ocurre después. Al momento de evaluar "<code>x = y</code>", '<code>y</code>' existe así que ningún error "<code>ReferenceError</code>" es lanzado y su valor es '<code>undefined</code>', de modo que '<code>x</code>' también tiene asignada el valor '<code>undefined</code>'. Después, a 'y' se le asigna el valor 'A'. Consecuentemente, luego de la primera línea, '<code>x</code>' es exactamente igual a <code>'undefined</code>' & '<code>y</code>' es igual a <code>'A'</code>, de ahí el resultado.</p> + +<h3 id="Initialización_de_muchas_variables">Initialización de muchas variables</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> x <span class="operator token">=</span> y <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> <span class="comment token">// 'x' es declarada localmente, ¡'y' no lo es!</span> +<span class="punctuation token">}</span> +<span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('y' no está definida). De lo contrario se imprimiría "0, 1".</span> +<span class="comment token">// En modo no-estricto:</span> +<span class="comment token">// 'x' es la variable global como se esperaría</span> +<span class="comment token">// 'y' sin embargo, se sale de la función</span></code></pre> + +<h3 id="Globales_implícitas_y_ámbito_externo_a_una_función">Globales implícitas y ámbito externo a una función</h3> + +<p>Las variables que parecen ser globales implícitas pueden ser referencias a variables en un ámbito externo a la función:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="comment token">// 'x' es declarada globalmente, luego se le asigna el valor 0</span>. + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "undefined", pues 'z' aún no existe</span>. + +<span class="keyword token">function</span> <span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Cuando 'a()' es invocada,</span> + <span class="keyword token">var</span> y <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> <span class="comment token">// 'y' es declarada localmente en la function 'a()', después se le asigna el valor 2</span>. + + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "0, 2</span>". + + <span class="keyword token">function</span> <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Cuando 'b()' es invocada,</span> + x <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span> <span class="comment token">// Asigna el valor 3 a la global 'x' ya existente, no crea una nueva variable global.</span> + y <span class="operator token">=</span> <span class="number token">4</span><span class="punctuation token">;</span> <span class="comment token">// Asigna 4 a la externa existente 'y', no crea una nueva variable global.</span> + z <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span> <span class="comment token">// Crea una nueva variable global 'z' y le asigna un valor de 5. </span> + <span class="punctuation token">}</span> <span class="comment token">// (Lanza un error de tipo "ReferenceError" en modo estricto.)</span> + + <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Invocar 'b()' crea 'z' como variable global.</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">,</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "3, 4, 5</span>". +<span class="punctuation token">}</span> + +<span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Invocar 'a()' también llama a 'b</span>()'. +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "3, 5</span>", porque 'z' ya es una global. +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime 'undefined' porque 'y' es local en la función 'a()'</span></code></pre> diff --git a/files/es/web/javascript/referencia/sentencias/while/index.html b/files/es/web/javascript/referencia/sentencias/while/index.html new file mode 100644 index 0000000000..8eab047884 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/while/index.html @@ -0,0 +1,58 @@ +--- +title: while +slug: Web/JavaScript/Referencia/Sentencias/while +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Crea un bucle que ejecuta una sentencia especificada mientras cierta condición se evalúe como verdadera. Dicha condición es evaluada antes de ejecutar la sentencia</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval">while (<em>condicion</em>) + <em>sentencia</em> +</pre> + +<dl> + <dt><code>condicion</code></dt> + <dd>Una expresión que se evalúa antes de cada paso del bucle. Si esta condición se evalúa como verdadera, se ejecuta <code>sentencia</code>. Cuando la condición se evalúa como false, la ejecución continúa con la <code>sentencia </code>posterior al bucle <code>while</code>.</dd> +</dl> + +<dl> + <dt><code>sentencia</code></dt> + <dd>Una sentecia que se ejecuta mientras la condición se evalúa como verdadera. Para ejecutar múltiples sentencias dentro de un bucle, utiliza una sentencia {{jsxref("Sentencias/block", "block")}} (<code>{ ... }</code>) para agrupar esas sentencias.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p>El siguiente bucle <code>while</code> itera mientras <code>n</code> es menor que tres.</p> + +<pre class="brush: js">n = 0; +x = 0; +while (n < 3) { + n ++; + x += n; +} +</pre> + +<p>Cada interación, el bucle incrementa <code>n</code> y la añade a <code>x</code>. Por lo tanto, <code>x</code> y <code>n</code> toman los siguientes valores:</p> + +<ul> + <li>Después del primer pase: <code>n</code> = 1 y <code>x</code> = 1</li> + <li>Después del segundo pase: <code>n</code> = 2 y <code>x</code> = 3</li> + <li>Después del tercer pase: <code>n</code> = 3 y <code>x</code> = 6</li> +</ul> + +<p>Después de completar el tercer pase, la condición <code>n</code> < 3 no será verdadera más tiempo, por lo que el bucle terminará.</p> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/do...while", "do...while")}}</li> + <li>{{jsxref("Sentencias/for", "for")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/with/index.html b/files/es/web/javascript/referencia/sentencias/with/index.html new file mode 100644 index 0000000000..d5dc78d600 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/with/index.html @@ -0,0 +1,166 @@ +--- +title: with +slug: Web/JavaScript/Referencia/Sentencias/with +translation_of: Web/JavaScript/Reference/Statements/with +--- +<div class="warning">El uso de la declaración no es recomendado, ya que puede ser el origen de los errores de confusión y problemas de compatibilidad. See the "Ambiguity Con" paragraph in the "Description" section below for details.</div> + +<div>{{jsSidebar("Statements")}}</div> + +<p>La <strong>sentencia with</strong> extiende el alcance de una cadena con la declaración.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">with (expresión) { + <em>declaración</em> +} +</pre> + +<dl> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">expresión</font></dt> + <dd>Añade la expresión dada a la declaración. Los parentesis alrededor de la expresión son necesarios.</dd> + <dt><code>declaración</code></dt> + <dd>Se puede ejecutar cualquier declaración. Para ejecutar varias declaraciónes, utilizar una declaración de bloque ({ ... }) para agrupar esas declaraciónes.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a {{jsxref("ReferenceError")}} is thrown.</p> + +<div class="note">Using <code>with</code> is not recommended, and is forbidden in ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.</div> + +<h3 id="Performance_pro_contra">Performance pro & contra</h3> + +<p><strong>Pro:</strong> The <code>with</code> statement can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.</p> + +<p><strong>Contra:</strong> The <code>with</code> statement forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</p> + +<h3 id="Ambiguity_contra">Ambiguity contra</h3> + +<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p> + +<pre class="brush: js">function f(x, o) { + with (o) + print(x); +}</pre> + +<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p> + +<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something else than a plain object. Consider this example:</p> + +<div> +<pre class="brush:js">function f(foo, values) { + with (foo) { + console.log(values) + } +} +</pre> + +<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_with">Using <code>with</code></h3> + +<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p> + +<pre class="brush:js">var a, x, y; +var r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +}</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-with-statement', 'with statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Now forbidden in strict mode.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES1')}}</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> + </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("Statements/block", "block")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> +</ul> |