diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/glossary/hoisting | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/glossary/hoisting')
-rw-r--r-- | files/es/glossary/hoisting/index.html | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/files/es/glossary/hoisting/index.html b/files/es/glossary/hoisting/index.html new file mode 100644 index 0000000000..7331a4b59c --- /dev/null +++ b/files/es/glossary/hoisting/index.html @@ -0,0 +1,93 @@ +--- +title: Hoisting +slug: Glossary/Hoisting +tags: + - JavaScript + - hoisting +translation_of: Glossary/Hoisting +--- +<p>Hoisting es un término que <em>no</em> encontrará utilizado en ninguna especificación previa a <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. El concepto de Hoisting fue pensado como una manera general de referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución). Sin embargo, el concepto puede ser un poco confuso al principio.</p> + +<p>Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de variables y funciones son <strong>asignadas en memoria</strong> durante la fase de <u>compilación,</u> pero quedan exactamente en dónde las has escrito en el código.</p> + +<h2 id="Aprenda_más">Aprenda más</h2> + +<h3 id="Ejemplo_técnico">Ejemplo técnico</h3> + +<p>Una de las ventajas en JavaScript de colocar (<strong>ponerlas en memoria</strong>) las declaraciones de funciones antes de ejecutar cualquier otro segmento de código es que permite utilizar una función antes de declararla en el código. Por ejemplo: </p> + +<pre class="brush: js">function nombreDelGato(nombre) { + console.log("El nombre de mi gato es " + nombre); +} + +nombreDelGato("Maurizzio"); +/* +El resultado del código es: "El nombre de mi gato es Maurizzio" +*/ +</pre> + +<p>El código escrito arriba está escrito de la manera que sería esperada para que funcione. Ahora, veamos qué sucede cuando llamamos a la función antes de escribirla:</p> + +<pre class="brush: js">nombreDelGato("Dumas"); + +function nombreDelGato(nombre) { + console.log("El nombre de mi gato es " + nombre); +} +/* +El resultado del código es: "El nombre de mi gato es Dumas" +*/ +</pre> + +<p>Como se puede observar, aunque primero llamamos a la función en el código, antes de que sea escrita, el código aún funciona. Esto sucede por la manera en la que el contexto de ejecución trabaja en JavaScript. </p> + +<p>Hoisting se lleva también bien con otros tipos de datos y variables. Observemos el siguiente ejemplo:</p> + +<h3 id="Ejemplo_técnico_2">Ejemplo técnico</h3> + +<pre class="brush: js">var x = 5; + +(function () { + console.log("x:", x); // no obtenemos '5' sino 'undefined' + var x = 10; + console.log("x:", x); // 10 +}()); +</pre> + +<p>¿No hemos obtenido lo esperado?, como la declaración de variables se procesa antes de ejecutar cualquier código, declarar una variable en cualquier parte del código es igual a declararla al inicio del mismo. Lo que ocurre aquí y para que se entienda, es que hipotéticamente la variable se <strong>eleva</strong> y pasa a declararse <strong>al comienzo de su contexto</strong>, en este caso la función que la contiene.</p> + +<p>El ejemplo anterior se entiende implícitamente como:</p> + +<pre class="brush: js">var x = 5; + +(function () { + var x; // Se elevo la declaración + console.log("x:", x); // undefined + x = 10; + console.log("x:", x); // 10 +}()); +</pre> + +<p>JavaScript sólo utiliza el hoisting en <strong>declaraciones</strong>, no inicializaciones. Si está utilizando una variable que <strong>es declarada e inicializada después </strong>(está después en el código) <strong>de usarla</strong>, el valor será <code>undefined</code>. El siguiente ejemplo demuestra ese comportamiento:</p> + +<pre class="brush: js">var x = 1; // Inicializa x +console.log(x + " " + y); // '1 undefined' +var y = 2; // Inicializa y +</pre> + +<p>Como se puede apreciar <strong>la elevación afecta la declaración</strong> de variables, pero <strong>no su inicialización</strong>. El valor será asignado exactamente cuando la sentencia de asignación sea alcanzada.</p> + +<p>El ejemplo anterior se entiende implícitamente como:</p> + +<pre class="brush: js">var x = 1; // Inicializa x +var y;// Se elevo la declaración +console.log(x + " " + y); // '1 undefined' +y = 2; // Inicializa y +</pre> + +<h3 id="Referencia_técnica">Referencia técnica</h3> + +<ul> + <li><a href="https://www.udemy.com/understand-javascript/">JavaScript: Understanding the Weird Parts</a> - Udemy.com Course</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li> +</ul> |