1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
title: Hoisting
slug: Glossary/Hoisting
tags:
- Glossário
- JavaScript
translation_of: Glossary/Hoisting
---
<p>Hoisting (<em>sollevare, issare in italiano</em>) è un termine che <em>non</em> sentirai mai usare in nessuno testo normativo prima di <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. L'Hoisting è stato pensato come un modo generico di pensare a come funziona, in Javascript, il contesto di esecuzione (nello specifico le fasi di creazioni e di esecuzione). Il concetto può essere poco chiaro all'inizio.</p>
<p>Una definizione rigida di Hoisting potrebbe essere: "(durante la fase di <em>compilazione</em>) le dichiarazioni delle variabili e delle funzioni sono fisicamente spostate in cima al codice", ma questo di fatto non è quello che succede. In realtà, le dichiarazioni delle variabili e delle funzioni sono messe in memoria durante la fase di <em>compilazione</em>, ma rimangono esattamente dove le hai scritte nel codice.</p>
<h2 id="Learn_more">Learn more</h2>
<h3 id="Technical_example">Technical example</h3>
<p>Uno dei vantaggi di mettere in memoria la dichiarazione delle funzioni, prima di eseguire qualunque segmento di codice, è che questo ti permette di usare una funzione prima di dichiararla. Per esempio:</p>
<pre class="brush: js notranslate">function catName(name) {
console.log("My cat's name is " + name);
}
catName("Tigger");
/*
Il risultato del codice sopra è: "My cat's name is Tigger"
*/
</pre>
<p>Il codice sopra è scritto come chiunque si aspetterebbe. Ora, vediamo cosa succede quando chiamiamo la funzione prima di scriverla:</p>
<pre class="brush: js notranslate">catName("Chloe");
function catName(name) {
console.log("My cat's name is " + name);
}
/*
Il risultato del codice sopra è: "My cat's name is Chloe"
*/
</pre>
<p>Anche se chiamiamo la funzione all'inizio del codice, prima che questa sia scritta, il codice continua a funzionare. Questo accade grazie al comportamento del "contesto di esecuzione" (<em>execution context</em>) di Javascript.</p>
<p>L'Hoisting funziona bene anche con altri tipi di dati (<em>data types)</em> e con le variabili. Le variabili possono essere inizializzate e usate prima di essere dichiarate. Ma non possono essere usate senza inizializzazione.</p>
<h3 id="Technical_example_2">Technical example</h3>
<pre class="brush: js notranslate">num = 6;
num + 7;
var num;
/* non restituisce errore perchè num è dichiarata*/
</pre>
<p>Javascript "solleva" (<em>hoists</em>) solo le dichiarazioni, non le inizializzazioni. Se utilizzi una variabile prima di dichiararla e inizializzarla, il suo valore sarà undefined. L'esempio qui sotto dimostra questo comportamento.</p>
<pre class="brush: js notranslate">var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
// Il codice seguente si comporterà nella stessa maniera del precedente
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y
</pre>
<h3 id="Technical_reference">Technical reference</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>
|
