initial commit

17 files changed, 2976 insertions, 0 deletions

diff --git a/files/zh-tw/web/javascript/reference/statements/async_function/index.html b/files/zh-tw/web/javascript/reference/statements/async_function/index.html
new file mode 100644
index 0000000000..ced67f4a09
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/async_function/index.html
@@ -0,0 +1,163 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Statements/async_function
+tags:
+  - JavaScript
+  - 函式
+  - 實驗
+  - 範例
+  - 陳述
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>async function</strong></code> 宣告被定義為一個回傳 {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}} 物件的<em>非同步函式</em> 。</p>
+
+<div class="noinclude">
+<p>你也可以使用 {{jsxref("Operators/async_function", "async function expression", "", 1)}} 來定義一個<em>非同步函式</em>。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>函式名稱。</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>傳遞至函式的參數名稱。</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>組成該函式主體的陳述。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>{{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}} 物件，代表著一個非同步函式，該函式會執行該函式內的程式碼。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>當 <code>async</code> 函式被呼叫時，它會回傳一個 {{jsxref("Promise")}}。如果該 <code>async</code> 函式回傳了一個值，<code>Promise</code> 的狀態將為一個帶有該回傳值的 resolved。如果 <code>async</code> 函式拋出例外或某個值，<code>Promise</code> 的狀態將為一個帶有被拋出值的 rejected。</p>
+
+<p>async 函式內部可以使用 {{jsxref("Operators/await", "await")}} 表達式，它會暫停此 async 函式的執行，並且等待傳遞至表達式的 Promise 的解析，解析完之後會回傳解析值，並繼續此 async 函式的執行。</p>
+
+<div class="note">
+<p><code>async/await</code> 函式的目的在於簡化同步操作 promise 的表現，以及對多個 <code>Promise</code> 物件執行某些操作。就像 <code>Promise 類似於具結構性的回呼函式，同樣地，async/await 好比將 generator 與 promise 組合起來。</code></p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="簡單範例">簡單範例</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      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 =&gt; {
+  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 =&gt; {
+  console.log(v);  // prints 60 after 2 seconds.
+});
+</pre>
+
+<div class="warning">
+<h4 id="不要誤解_Promise.all_的_await">不要誤解 <code>Promise.all</code> 的 <code>await</code></h4>
+
+<p>在 <code>add1</code> 裡，該執行為了第一個 <code>await</code> 而暫停了兩秒，接著為了第二個 <code>await</code> 又暫停了兩秒。在第一個計時器（timer）被觸發前，第二個計時器並不會被建立。而在 <code>add2</code> 裡，兩個計時器都被建立起來、也都執行 <code>await</code> 過了。這把它帶往了 resolve 所的 2 秒暫停、而不是 4 秒暫停。然而這兩個 <code>await</code> 呼叫都在連續運行，而非平行運行。<code>await</code> <strong>並不是</strong> <code>Promise.all</code> 的自動程式。如果你想讓兩個、甚至兩個以上的 <code>await</code> promises 同時執行（in parallel），你必須使用 <code>Promise.all</code>.</p>
+</div>
+
+<h3 id="使用_async_function_改寫_promise_鏈">使用 async function 改寫 promise 鏈</h3>
+
+<p>一個 API 呼叫所回傳的 {{jsxref("Promise")}} 會導致一個 promise 鏈，將函式分隔成多個部份。考慮下列的程式碼：</p>
+
+<pre class="brush: js">function getProcessedData(url) {
+  return downloadData(url) // returns a promise
+    .catch(e =&gt; {
+      return downloadFallbackData(url); // returns a promise
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v); // returns a promise
+    });
+}
+</pre>
+
+<p>它可以用一個簡單的 <code>async function</code> 來改寫成這樣：</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>注意上方的範例，在 return 陳述中沒有使用 await 陳述，這是因為 async function 的回傳值隱含地被包裝於 {{jsxref("Promise.resolve")}} 之中。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} 物件</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+ <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/block/index.html b/files/zh-tw/web/javascript/reference/statements/block/index.html
new file mode 100644
index 0000000000..62a09df015
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/block/index.html
@@ -0,0 +1,86 @@
+---
+title: 區塊
+slug: Web/JavaScript/Reference/Statements/block
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<h2 id="總覽">總覽</h2>
+
+<p>區塊陳述用來組合零個或多個陳述。我們使用一對大括號 { } 以界定區塊。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="2">陳述句</td>
+  </tr>
+  <tr>
+   <td>Implemented in</td>
+   <td>JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>ECMAScript edition</td>
+   <td>ECMA-262 1st edition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{
+  <var>陳述_1</var>
+  <var>陳述_2</var>
+  ...
+  <var>陳述_n</var>
+}
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>陳述_1</code>, <code>陳述_2</code>, <code>陳述_n</code></dt>
+ <dd>區塊陳述中的陳述句群。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>區塊陳述通常配合流程控制陳述（如 <code>if</code>、<code>for</code>、<code>while</code>）一併使用。</p>
+
+<h4 id="var"><code>var</code></h4>
+
+<p>使用<code>var</code>區塊中定義的變數，其存取範圍是整個整個函式或是腳本，即為Execution Context的範圍中。</p>
+
+<pre class="brush: js">var x = 1;
+{
+  var x = 2;
+}
+alert(x); // outputs 2
+</pre>
+
+<p>輸出結果是 2。因為var是宣告於整個腳本範圍中。</p>
+
+<h4 id="let_和_const"><code>let </code>和 <code>const</code></h4>
+
+<p>當使用<code>let</code>或是<code>const</code>進行宣告時，其存取範圍是只有本身定義的區塊中。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">2</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><span class="punctuation token">;</span> <span class="comment token">// logs 1</span></code></pre>
+
+<h4 id="function"><code>function</code></h4>
+
+<p>當function被呼叫時，會建立此function的Execution Context，因此在function區塊使用<code>var</code>整個function區塊中都可對其進行存取。</p>
+
+<pre class="brush: js">function foo() {
+    {
+        var a = 'var';
+        {
+            let a = 'let';
+            console.log(a);  // let
+        }
+    }
+    console.log(a);  // var
+}
+foo();</pre>
diff --git a/files/zh-tw/web/javascript/reference/statements/break/index.html b/files/zh-tw/web/javascript/reference/statements/break/index.html
new file mode 100644
index 0000000000..ff72f9d25b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/break/index.html
@@ -0,0 +1,120 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<p><strong>break 陳述句</strong>會中斷目前的迭代、{{jsxref("Statements/switch", "switch")}} 或 {{jsxref("Statements/label", "label")}} 陳述句，並將程式流程轉到被中斷之陳述句後的陳述句。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>break [<em>label</em>];</code></pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>可選的。欲中斷陳述句的標籤 (label) 識別。若不是要中斷迭代或 {{jsxref("Statements/switch", "switch")}}，則需加此參數。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>中斷陳述 <code>break</code> 可加上標籤 (label) 參數，使其跳出被標籤的陳述語句。此中斷陳述 <code>break</code> 必須被包含在被標籤的陳述語句中。被標籤的陳述語句可被添加於任一個區塊 (<a class="internal" href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/Block">block</a>) 前，而非限定在迴圈陳述。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>下面函式包含一個中斷陳述 <code>break</code> ，當 <code>i</code> 值為 3 時，中斷 <code>while</code> 迴圈，並回傳 <code>3 * x</code> 。</p>
+
+<pre class="brush:js;highlight:[6];">function testBreak(x) {
+  var i = 0;
+
+  while (i &lt; 6) {
+    if (i == 3) {
+      break;
+    }
+    i += 1;
+  }
+
+  return i * x;
+}</pre>
+
+<p>The following code uses <code>break</code> statements with labeled blocks. A <code>break</code> statement must be nested within any label it references. Notice that <code>inner_block</code> is nested within <code>outer_block</code>.</p>
+
+<pre class="brush:js;highlight:[1,2,4];">outer_block: {
+  inner_block: {
+    console.log('1');
+    break outer_block; // breaks out of both inner_block and outer_block
+    console.log(':-('); // skipped
+  }
+  console.log('2'); // skipped
+}
+</pre>
+
+<p>The following code also uses <code>break</code> statements with labeled blocks but generates a Syntax Error because its <code>break</code> statement is within <code>block_1</code> but references <code>block_2</code>. A <code>break</code> statement must always be nested within any label it references.</p>
+
+<pre class="brush:js;highlight:[1,3,6];">block_1: {
+  console.log('1');
+  break block_2; // SyntaxError: label not found
+}
+
+block_2: {
+  console.log('2');
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Unlabeled version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Labeled version added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.break")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/const/index.html b/files/zh-tw/web/javascript/reference/statements/const/index.html
new file mode 100644
index 0000000000..831a69155c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/const/index.html
@@ -0,0 +1,129 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Constants (常數) 有點像使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 所宣告的變數，具有區塊可視範圍。常數不能重複指定值，也不能重複宣告。</div>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>常數的名稱，可以是任何合法的 {{Glossary("identifier")}}。</dd>
+ <dt><code>valueN</code></dt>
+ <dd>常數的值，可以是任何合法的 <a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>, 包括 function expression。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>上述宣告建立一個常數，它的可視範圍可能是全域的，或是在它所宣告的區域區塊中。 和 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 變數不同的是，全域的常數不會變成 window 物件的屬性。常數必須要初始化；也就是說，你必須在宣告常數的同一個敘述式中指定這個常數的值。(這很合理，因為稍後就不能再變更常數的值了)</p>
+
+<p>宣告 <strong><code>const</code></strong> 會對於它的值建立一個唯讀的參考。並不是說這個值不可變更，而是這個變數不能再一次指定值。例如，假設常數的內容(值)是個物件，那麼此物件的內容(物件的參數)是可以更改的。</p>
+
+<p>所有關於 "<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">temporal dead zone</a>" 的狀況，都適用於 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code>const</code> 。</p>
+
+<p>在相同的可視範圍內，常數不能和函數，變數具有相同名稱。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下範例展示常數的行為。請在你的瀏覽器中試試以下程式碼。</p>
+
+<pre class="brush:js">// 注意: 常數可以宣告成大寫或小寫,
+// 但習慣上使用全部大寫的字母。
+
+// 定義一個常數 MY_FAV 並賦予它的值為7
+const MY_FAV = 7;
+
+// 這裡會發生錯誤 - Uncaught TypeError: Assignment to constant variable.
+MY_FAV = 20;
+
+// MY_FAV 是 7
+console.log('我喜歡的數字是: ' + MY_FAV);
+
+// 嘗試重複宣告同名的常數，將會發生錯誤 -  Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
+const MY_FAV = 20;
+
+// MY_FAV 這個名稱已經保留給上面的常數, 所以這裡也會錯誤。
+var MY_FAV = 20;
+
+// 這式子也會錯誤
+let MY_FAV = 20;
+
+// 很重要，請注意區塊可視範圍的特性。
+if (MY_FAV === 7) {
+    // 以下式子沒有問題，並且會建立一個名叫 MY_FAV 的具有區塊可視範圍的變數。
+    // (等同於使用 let 來宣告一個具有區塊可視範圍的非常數變數。)
+    let MY_FAV = 20;
+
+    // MY_FAV 現在變成 20
+    console.log('我喜歡的數字是：' + MY_FAV);
+
+    // 這會將變數懸掛於全域，而導致錯誤。(與常數同名)
+    var MY_FAV = 20;
+}
+
+// MY_FAV 仍然是 7
+console.log('我喜歡的數字是：' + MY_FAV);
+
+// 發生錯誤 - Uncaught SyntaxError: Missing initializer in const declaration
+const FOO;
+
+// 常數的值可以是一個物件
+const MY_OBJECT = {'key': 'value'};
+
+// 嘗試覆寫該物件將會發生錯誤 - Uncaught TypeError: Assignment to constant variable.
+MY_OBJECT = {'OTHER_KEY': 'value'};
+
+// 然而, 物件的屬性並沒有被保護,
+// 所以，以下敘述式沒有問題。
+MY_OBJECT.key = 'otherValue'; // Use Object.freeze() to make object immutable
+
+// 對陣列來說也是一樣
+const MY_ARRAY = [];
+// 可以把項目加到陣列中。
+MY_ARRAY.push('A'); // ["A"]
+// 然而，對這個變數指定新陣列，將會發生錯誤 - Uncaught TypeError: Assignment to constant variable.
+MY_ARRAY = ['B'];</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>初始化定義.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>沒有改變.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">本頁面中的相容性表格是從結構性資料產生. 如果您像要提供資料，請先查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並寄給我們取得的請求。</div>
+
+<p>{{Compat("javascript.statements.const")}}</p>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Constants in the JavaScript Guide</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/debugger/index.html b/files/zh-tw/web/javascript/reference/statements/debugger/index.html
new file mode 100644
index 0000000000..79a65a398e
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/debugger/index.html
@@ -0,0 +1,75 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Statements/debugger
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>debugger 的宣告</strong>會執行可用的除錯功能，例如設定斷點。如果沒有可用的除錯功能，這個宣告沒有任何作用。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>debugger;</code></pre>
+
+<h2 id="示例">示例</h2>
+
+<p>以下示例示範了插入 debugger 宣告的程式碼，它會在函式被呼叫、而且有除錯器的時候執行除錯器。</p>
+
+<pre class="brush:js">function potentiallyBuggyCode() {
+    debugger;
+    // 執行並驗證一些潛在的問題、或是單步執行之類的。
+}</pre>
+
+<p>呼叫除錯器時，程式會在 debugger 宣告處暫停執行。它有點像是程式碼的斷點。</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="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</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>初期定義</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>只作為保留字而提到</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.debugger")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Debugging_JavaScript">JavaScript 除錯</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger">Firefox 開發工具的的除錯器</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/export/index.html b/files/zh-tw/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..195d4bed7f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,165 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary">用 <strong>export</strong> 可以指派函式、物件或變數，透過 {{jsxref("Statements/import", "import")}} 宣告給外部檔案引用。</span></p>
+
+<p>導出的模塊都會處於{{jsxref("Strict_mode","嚴謹模式")}}，無論是否有所宣告。導出宣告無法使用嵌入式腳本（embedded script）。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">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> };
+// 用 var, const 也通
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>;
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>;
+
+// 底下的 function 用 class, function* 也可以
+export default <em>expression</em>;
+export default function (…) { … }
+export default function name1(…) { … }
+
+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 …;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>外部檔案使用 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 時，用於辨認的名稱。</dd>
+</dl>
+
+<h2 id="使用說明">使用說明</h2>
+
+<p>有兩種使用 export 的方式，<strong>named</strong> 與 <strong>default</strong>。每個模組中可以有多個 named exports, 但只能有一個 default export。每種 export 都對應到一個先前說的語法。</p>
+
+<ul>
+ <li>Named exports:
+  <pre class="brush: js">// 前面已經宣告的函式可以這樣輸出
+export { myFunction };
+
+// 輸出常數
+export const foo = Math.sqrt(2); </pre>
+ </li>
+ <li>預設 export （一個 js 檔案只能有一個）:
+  <pre class="brush: js">export default function() {}
+// 或是 '<em>export default class {}</em>'
+// 結尾不用分號</pre>
+ </li>
+</ul>
+
+<p>Named exports 在輸出多個值的時候很有用，在 import 的時候, 會強制根據使用相同的物件名稱.</p>
+
+<p>但如果是 default export 則可以用任意的名字輸出.</p>
+
+<pre class="syntaxbox">export default k = 12; // 在test.js中這樣子寫
+
+import m from './test' // 注意這邊因為 export default 的關係, 可以用任意名字 import 原先的k出來
+
+console.log(m);        // will log 12
+</pre>
+
+<p>以下語法並不會導出所有被引入的模塊：</p>
+
+<pre>export * from …;</pre>
+
+<p>你必須額外引入它的預設輸出，再導出之：</p>
+
+<pre>import mod from "mod";
+export default mod;</pre>
+
+<h2 id="使用範例">使用範例</h2>
+
+<h3 id="輸出命名過的變數">輸出命名過的變數</h3>
+
+<p>模塊內可以這樣用：</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>在另一個腳本就會變成這樣：</p>
+
+<pre class="brush: js">//You should use this script in html with the type module ,
+//eg ''&lt;script type="module" src="demo.js"&gt;&lt;/script&gt;",
+//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="使用預設輸出">使用預設輸出</h3>
+
+<p>如果我們要輸出單獨的函式、物件、class 或當做 fallback 值來輸出的話，就可以用預設輸出：</p>
+
+<pre class="brush: js">// module "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>外部檔案的 import 用法：</p>
+
+<pre class="brush: js">import cube from 'my-module';
+console.log(cube(3)); // 27
+</pre>
+
+<p>Note 注意預設輸出不能使用 var, let , const。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>初始定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</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/zh-tw/web/javascript/reference/statements/for...in/index.html b/files/zh-tw/web/javascript/reference/statements/for...in/index.html
new file mode 100644
index 0000000000..8877c28d79
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/for...in/index.html
@@ -0,0 +1,116 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Statements/for...in
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>迭代物件的可列舉屬性。對每個相異屬性，執行陳述式。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="2">Statement</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Implemented in:</td>
+   <td>JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>ECMA Version:</td>
+   <td>ECMA-262</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">for (<var>變數</var> in <var>物件</var>) {<em>...</em>
+}</pre>
+
+<h3 id="Parameters" name="Parameters">參數</h3>
+
+<dl>
+ <dt><code>變數</code></dt>
+ <dd>A different property name is assigned to <em>variable</em> on each iteration.</dd>
+ <dt><code>物件</code></dt>
+ <dd>Object whose enumerable properties are iterated.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Description</h2>
+
+<p><code>for...in</code> 迴圈只迭代可列舉屬性。由內建建構式(如：Array、Object) 製造的物件，從 <code>Object.prototype</code> 和 <code>String.prototype</code> 繼承了不可列舉屬性，如： <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>的<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/indexOf">indexOf</a></code> 方法，或 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>的 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/toString">toString</a></code> 方法。 迴圈將迭代全部可列舉屬性，包括了物件自身的和物件繼承自它的建構式之原型的可列舉屬性。(原型鏈上較接近物件的屬性覆蓋原型的屬性)</p>
+
+<p>A <code>for...in</code> loop iterates over the properties of an object in an arbitrary order (see the <a href="/en-US/docs/JavaScript/Reference/Operators/delete#Cross-browser_issues">delete operator</a> for more on why one cannot depend on the seeming orderliness of iteration, at least in a cross-browser setting). If a property is modified in one iteration and then visited at a later time, its value in the loop is its value at that later time. A property that is deleted before it has been visited will not be visited later. Properties added to the object over which iteration is occurring may either be visited or omitted from iteration. In general it is best not to add, modify or remove properties from the object during iteration, other than the property currently being visited. There is no guarantee whether or not an added property will be visited, whether a modified property (other than the current one) will be visited before or after it is modified, or whether a deleted property will be visited before it is deleted.</p>
+
+<div class="note" id="hasOwnPropertyNote">
+<p>If you only want to consider properties attached to the object itself, and not its prototypes, use <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a> or perform a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a> check (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a> can also be used). Alternatively, if you know there won't be any outside code interference, you can extend built-in prototypes with a check method.</p>
+</div>
+
+<div class="note" id="arrayNote">
+<p><strong><code>for..in</code> 不應該用來迭代一個索引順序很重要的<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array">陣列</a>。</strong> 陣列索引只是以整數命名的可列舉屬性，其他方面等同於一般物件屬性。 無法擔保 <code>for...in</code> 以特定順序傳回索引，並且它將傳回全部可列舉屬性，包括非整數名的，以及繼承而來的可列舉屬性。</p>
+
+<p>因為迭代的順序依賴於 JavaScript 引擎的實作，在不同引擎下，迭代一個陣列可能不是以一個一致的順序存取陣列元素。因此，當你迭代陣列，且該陣列的存取順序很重要時，最好是使用以數值索引的 <a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a> 迴圈 (或 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">Array.forEach</a> 或非標準 <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> 迴圈)。</p>
+</div>
+
+<h2 id="Example" name="Example">Examples</h2>
+
+<p>The following function takes as its arguments an object and the object's name. It then iterates over all the object's enumerable properties and returns a string of the property names and their values.</p>
+
+<pre class="brush: js">var o = {a:1, b:2, c:3};
+
+function show_props(obj, objName) {
+  var result = "";
+
+  for (var prop in obj) {
+    result += objName + "." + prop + " = " + obj[prop] + "\n";
+  }
+
+  return result;
+}
+
+alert(show_props(o, "o")); /* alerts (in different lines): o.a = 1 o.b = 2 o.c = 3 */
+</pre>
+
+<p>The following function illustrates the use of hasOwnProperty: the inherited properties are not displayed.</p>
+
+<pre class="brush: js">var triangle = {a:1, b:2, c:3};
+
+function ColoredTriangle() {
+  this.color = "red";
+}
+
+ColoredTriangle.prototype = triangle;
+
+function show_own_props(obj, objName) {
+  var result = "";
+
+  for (var prop in obj) {
+    if( obj.hasOwnProperty( prop ) ) {
+      result += objName + "." + prop + " = " + obj[prop] + "\n";
+    }
+  }
+
+  return result;
+}
+
+o = new ColoredTriangle();
+alert(show_own_props(o, "o")); /* alerts: o.color = red */
+</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Statements/for...of"><code>for...of</code></a> - a similar statement that iterates over the property <em>values</em></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in"><code>for each...in</code></a> - a similar statement, but iterates over the values of object's properties, rather than the property names themselves (<a href="/en-US/docs/JavaScript/New_in_JavaScript/1.6">New in JavaScript 1.6</a> but deprecated)</li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a></li>
+ <li><a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (uses the <code>for...in</code> syntax)</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames"><code>getOwnPropertyNames</code></a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.prototype.forEach</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/function_star_/index.html b/files/zh-tw/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..11b1013537
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,207 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>function*</strong></code> 宣告式（<code>function</code> 關鍵字後面跟著一個星號）定義了一個<em>生成器函式（generator function）</em>，他會回傳一個{{jsxref("Global_Objects/Generator","生成器（Generator）")}}物件。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+
+
+<div class="noinclude">
+<p>你可以透過 {{jsxref("GeneratorFunction")}} 建構式來定義生成器函式。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>函式名稱。</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>要被傳入函式的引數名稱，一個函式最多可以擁有 255 個引數。</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>statements 構成了函式內容的陳述式。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>生成器是可以離開後再次進入的函式。在兩次進入之間，生成器的執行狀態（變數綁定狀態）會被儲存。</p>
+
+<p>呼叫生成器函式並不會讓裡面的程式碼立即執行，而是會回傳一個針對該函式的<a href="/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">迭代器（iterator）</a>物件。當呼叫迭代器的 <code>next()</code> 方法時，生成器函式將會執行到遭遇的第一個 {{jsxref("Operators/yield", "yield")}} 運算式，該運算式給定的值將從迭代器中回傳，如果是 {{jsxref("Operators/yield*", "yield*")}} 則會交給另一個生成器函式處理。<code>next()</code> 方法回傳一個物件，該物件有 <code>value</code> 屬性，包含了產生的數值，還有 <code>done</code> 屬性，為布林值，指出該生成器是否產出最後的數值。呼叫 <code>next()</code> 方法如果帶有一個參數，將會讓先前暫停的生成器函式恢復執行，以該參數值取代先前暫停的 <code>yield</code> 陳述式。</p>
+
+<p>生成器中的 <code>return</code> 陳述式被執行時，會讓生成器 <code>done</code> 狀態為真。若有數值被返回的動作帶回，將是放在 <code>value</code> 傳回的。已返回的生成器不會再產生任何數值。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="簡單例子">簡單例子</h3>
+
+<pre class="brush: js">function* idMaker() {
+  var index = 0;
+  while (index &lt; index+1)
+    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); // 3
+// ...</pre>
+
+<h3 id="yield*_的範例">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>
+
+<h3 id="傳入引數至生成器">傳入引數至生成器</h3>
+
+<pre class="brush: js">function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// the first call of next executes from the start of the function
+// until the first yield statement
+gen.next();             // 0
+gen.next('pretzel');    // 1 pretzel
+gen.next('california'); // 2 california
+gen.next('mayonnaise'); // 3 mayonnaise
+</pre>
+
+<h3 id="生成器中的回傳陳述式">生成器中的回傳陳述式</h3>
+
+<pre class="brush: js">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "unreachable";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="生成器無法被建構">生成器無法被建構</h3>
+
+<pre class="brush: js example-bad">function* f() {}
+var obj = new f; // throws "TypeError: f is not a constructor"</pre>
+
+<h3 id="以表達式定義生成器">以表達式定義生成器</h3>
+
+<pre><code>const foo = function* () { yield 10; yield 20; };
+const bar = foo();console.log(bar.next()); // {value: 10, done: false}</code></pre>
+
+<p> </p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Changed that generators should not have [[Construct]] trap and will throw when used with <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+</div>
+
+<h2 id="Firefox_規範註記">Firefox 規範註記</h2>
+
+<h4 id="Generators_and_iterators_in_Firefox_versions_before_26">Generators and iterators in Firefox versions before 26</h4>
+
+<p>Older Firefox versions implement an older version of the generators proposal. In the older version, generators were defined using a regular <code>function</code> keyword (without an asterisk) among other differences. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Legacy generator function </a>for further information.</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="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols">迭代協議</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://github.com/mozilla/task.js">Task.js</a></li>
+   <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Iterating generators asynchronously</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/if...else/index.html b/files/zh-tw/web/javascript/reference/statements/if...else/index.html
new file mode 100644
index 0000000000..a9317aa8a6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/if...else/index.html
@@ -0,0 +1,169 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Statements/if...else
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>當條件成立的時候會執行 if 陳述式裡的程式，而不成立時則執行另外一個陳述式。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>
+
+<p class="hidden">這個互動式的源碼被放在 GitHub 的 Repository 裡，如果您想對此互動式範例專案提出貢獻的話，請 clone https://github.com/mdn/interactive-examples 並送出 pull request。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">if (<em>條件式</em>)
+   <em>statement1</em>
+[else
+   <em>statement2</em>]
+</pre>
+
+<dl>
+ <dt><code>條件式</code></dt>
+ <dd>一個成立或不成立的<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">運算式</a>。</dd>
+</dl>
+
+<dl>
+ <dt><code>第一個陳述式(statement1)</code></dt>
+ <dd>如果if中的條件(conditions)為真時執行陳述式(statements)。陳述式可以為任何內容，包含巢狀式(nested)的if陳述。當要執行多行的陳述式(statements)時，使用區塊(block)將所要執行的陳述式包覆。如果不需要執行任何動作時，則不撰寫任何陳述式(empty statement)。</dd>
+ <dt><code>第二個陳述式(statement2)</code></dt>
+</dl>
+
+<dl>
+ <dd>當件不成立時所執行的部份，當else被撰寫時才會被執行。可以是任何的陳述式，包含使用區塊(block)及巢狀(nested)的陳述。</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>多重的 <code>if...else</code> 陳述式可以使用 <code>else if</code> 子句來建立一個巢狀結構的句子。要記住，在JavaScript中沒有 <code>elseif</code> (一個單字) 的語法可以用。</p>
+
+<pre class="eval notranslate">if (<em>condition1</em>)
+   <em>statement1</em>
+else if (<em>condition2</em>)
+   <em>statement2</em>
+else if (<em>condition3</em>)
+   <em>statement3</em>
+...
+else
+   <em>statementN</em>
+</pre>
+
+<p>將巢狀結構適當的排版後，我們能更了解其背後運作的邏輯：</p>
+
+<pre class="eval notranslate">if (<em>condition1</em>)
+   <em>statement1</em>
+else
+   if (<em>condition2</em>)
+      <em>statement2</em>
+   else
+      if (<em>condition3</em>)
+...
+</pre>
+
+<p>如果在一個條件式中有多個陳述要執行，可以使用區塊陳述式(<code>{ ... }</code>) 把所有陳述包在一起。 通常來說，無論如何都使用區塊陳述式是個很好的習慣，尤其是當你使用巢狀結構的 <code>if</code> 陳述式時，這會讓人更容易理解你的程式碼。</p>
+
+<pre class="eval notranslate">if (<em>condition</em>) {
+   <em>statements1</em>
+} else {
+   <em>statements2</em>
+}
+</pre>
+
+<p>不要被<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>物件中，布林值的 <code>true</code> 和 <code>false</code> 給混淆了。任何值只要不是 <code>false</code>、 <code>undefined</code>、 <code>null</code>、 <code>0</code>、 <code>NaN</code>，或者空字串 (<code>""</code>)，並且任何物件，包括其值是 <code>false</code>的布林物件 ，仍然會被條件陳述式視為條件成立。舉例而言：</p>
+
+<pre class="brush: js notranslate">var b = new Boolean(false);
+if (b) // this condition is truthy
+</pre>
+
+<h2 id="實例">實例</h2>
+
+<h3 id="使用_if...else">使用 <code>if...else</code></h3>
+
+<pre class="brush: js notranslate">if (cipher_char === from_char) {
+   result = result + to_char;
+   x++;
+} else {
+   result = result + clear_char;
+}
+</pre>
+
+<h3 id="使用_else_if">使用 <code>else if</code></h3>
+
+<p>要記得JavaScript沒有 <code>elseif</code> 可以使用。不過，你可以使用 <code>else</code> 和 <code>if</code>中間夾著空白的語法：</p>
+
+<pre class="brush: js notranslate">if (x &gt; 5) {
+ /* do the right thing */
+} else if (x &gt; 50) {
+ /* do the right thing */
+} else {
+ /* do the right thing */
+}</pre>
+
+<h3 id="條件表達式中的賦值">條件表達式中的賦值</h3>
+
+<p>建議不要在條件表達式中直接對物件賦值，因為這會使人在瀏覽程式碼時很容易將賦值( assignment )與相等( equality )混淆。舉例而言，不要使用以下寫法：</p>
+
+<pre class="brush: js example-bad notranslate">if (x = y) {
+   /* do the right thing */
+}
+</pre>
+
+<p>如果你必須在條件表達式中使用賦值，最好ˇ的作法是以額外的括號包住賦值語句，如下所示：</p>
+
+<pre class="brush: js example-good notranslate">if ((x = y)) {
+   /* do the right thing */
+}
+</pre>
+
+<h2 id="規範">規範</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-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.if_else")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/conditional_operator", "conditional operator")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/import/index.html b/files/zh-tw/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..7b3ef2402b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,203 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary"><strong>import</strong> 宣告用於引入由另一個模塊所導出的綁定。</span>被引入的模塊，無論是否宣告{{jsxref("Strict_mode","strict mode","嚴謹模式")}}，都會處於該模式。<code>import</code> 宣告無法用於嵌入式腳本（embedded scripts）。</p>
+
+<p>There is also a function-like dynamic <code><strong>import()</strong></code>, which does not require scripts of <code>type="module"</code>.</p>
+
+<p>Dynamic import is useful in situations where you wish to load a module conditionally, or on demand. The static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and <a href="/en-US/docs/Glossary/Tree_shaking">tree shaking</a>.</p>
+
+<h2 id="語法">語法</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>從模塊要參照過去的預設導出名。</dd>
+ <dt><code>module-name</code></dt>
+ <dd>要導入的模塊名。通常包含 <code>.js </code> 模塊文件的相對或絕對路徑名。請確認你的開發環境，某些bundler 會允許或要求你加入副檔名。只允許使用單引號和雙引號字符串。</dd>
+ <dt><code>name</code></dt>
+ <dd>參照導入時，會用做 namespace 種類的模塊名。</dd>
+ <dt><code>export, exportN</code></dt>
+ <dd>導出要被引入時，要用的名號。</dd>
+ <dt><code>alias, aliasN</code></dt>
+ <dd>別名，重新命名被import進來的js稱呼。</dd>
+</dl>
+
+<h2 id="敘述">敘述</h2>
+
+<p><code>name</code> 參數能將模塊物件（module object）名用於 namespace 種類，以便各導出能參照之。<code>export</code> 參數會在引用 <code>import * as name</code> 語法時，指定 individual named export。以下示例將展示語法的簡例。</p>
+
+<h3 id="引入整個模塊的內容">引入整個模塊的內容</h3>
+
+<p>本例在當前作用域插入了 <code>myModule</code> 變數，並把所有來自 <code>/modules/my-module.js</code> 檔案的模塊導出。</p>
+
+<pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js';
+</pre>
+
+<p>這裡會用到指定的模塊名（在此為 myModule）訪問導出來的命名空間。例如說引入模塊有 <code>doAllTheAmazingThings()</code> 的話，就可以這麼寫：</p>
+
+<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
+
+<h3 id="從模塊引入單一導出">從模塊引入單一導出</h3>
+
+<p>給定由 <code>my-module</code> 導出的模塊，稱作 <code>myExport</code> 物件與數值，無論是顯性（因為整個模塊被導出了）與隱性（使用 {{jsxref("Statements/export", "export")}} 宣告），這裡就在當前的作用域插入 <code>myExport</code>。</p>
+
+<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
+
+<h3 id="從模塊引入數個導出">從模塊引入數個導出</h3>
+
+<p>例在當前作用域插入了 <code>foo</code> 與 <code>bar</code>。</p>
+
+<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre>
+
+<h3 id="使用便利的_alias_引入或導出">使用便利的 alias 引入或導出</h3>
+
+<p>在引入時，可以重新命名導出的模塊。例如說，這裡就就在目前作用域插入 <code>shortName</code> 變數。</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
+  from '/modules/my-module.js';</pre>
+
+<h3 id="引入時重命名數個導出">引入時重命名數個導出</h3>
+
+<p>使用別名（aliases）以便引入或導出模塊</p>
+
+<pre class="brush: js">import {
+  reallyReallyLongModuleExportName as shortName,
+  anotherLongModuleName as short
+} from '/modules/my-module.js';</pre>
+
+<h3 id="僅作為副作用引入模塊">僅作為副作用引入模塊</h3>
+
+<p>僅作為副作用（side effect）引入整個模塊，而不直接引入任何東西。這樣會在不引入實際數值的情況下，執行整個模塊的程式。</p>
+
+<pre class="brush: js">import '/modules/my-module.js';
+</pre>
+
+<h3 id="引入預設">引入預設</h3>
+
+<p>你可以引入預設好的 {{jsxref("Statements/export", "export")}}，無論他屬於物件、函式、還是類別。<code>import</code> 宣告可以接著引入該預設。</p>
+
+<p>最簡單的預設引入：</p>
+
+<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre>
+
+<p>It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
+// myModule used as a namespace</pre>
+
+<p>或是：</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
+// specific, named imports
+</pre>
+
+<h3 id="動態引入">動態引入</h3>
+
+<p><code>import</code> 關鍵字也能透過函式呼叫引入之。在這種情況下，該函式回傳 promise。</p>
+
+<pre class="brush: js">import('/modules/my-module.js')
+  .then((module) =&gt; {
+    // 在模塊內作點事情
+  });
+</pre>
+
+<p>這方法也支援關鍵字 await。</p>
+
+<pre class="brush: js">let module = await import('/modules/my-module.js');</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>引用次要模塊以協助程式執行 AJAX JSON 請求。</p>
+
+<h3 id="模塊：file.js">模塊：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 =&gt; callback(JSON.parse(data)));
+}</pre>
+
+<h3 id="主要程式：main.js">主要程式：main.js</h3>
+
+<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
+
+getUsefulContents('http://www.example.com',
+    data =&gt; { doSomethingUseful(data); });</pre>
+
+<h3 id="動態引入_2">動態引入</h3>
+
+<p>This example shows how to load functionality on to a page based on a user action, in this case a button click, and then call a function within that module. This is not the only way to implement this functionality. The <code>import()</code> function also supports <code>await</code>.</p>
+
+<pre class="brush: js">const main = document.querySelector("main");
+for (const link of document.querySelectorAll("nav &gt; a")) {
+  link.addEventListener("click", e =&gt; {
+    e.preventDefault();
+
+    import('/modules/my-module.js')
+      .then(module =&gt; {
+        module.loadPageInto(main);
+      })
+      .catch(err =&gt; {
+        main.textContent = err.message;
+      });
+  });
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/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="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/index.html b/files/zh-tw/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..63c3483f1b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/index.html
@@ -0,0 +1,147 @@
+---
+title: 陳述式與宣告
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Reference
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>JavaScript 應用程式由適當的陳述式組成。一個單一的陳述式可以跨用好幾行。 多個陳述式也可以藉由分號分隔來寫在同一行。 這不是一個關鍵字，而是一群關鍵字。</p>
+
+<h2 id="陳述式與宣告分類">陳述式與宣告分類</h2>
+
+<p>For an alphabetical listing see the sidebar on the left.</p>
+
+<h3 id="流程控制">流程控制</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>中斷當下的迴圈、條件判斷（switch）或是標籤（label）陳述式，並將程式流程轉到被中斷陳述式後的陳述式。</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd>
+ <dt>{{jsxref("Statements/Empty", "Empty")}}</dt>
+ <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>當特定的條件為真時執行一段陳述式，若為假則另一段陳述式就會被執行。</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>Throws a user-defined exception.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd>
+</dl>
+
+<h3 id="宣告">宣告</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Declares a variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Declares a block scope local variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>Declares a read-only named constant.</dd>
+</dl>
+
+<h3 id="函數與類別（Class）">函數與類別（Class）</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>用指定的變數宣告一個函數</dd>
+ <dt>{{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>Generators functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd>
+ <dt>{{jsxref("Statements/async_function", "async function")}}</dt>
+ <dd>Declares an async function with the specified parameters.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Specifies the value to be returned by a function.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>Declares a class.</dd>
+</dl>
+
+<h3 id="迭代（Iteration）">迭代（Iteration）</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd>
+ <dt>{{jsxref("Statements/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("Statements/for_each...in", "for each...in")}}</dt>
+ <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd>
+ <dt>{{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/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("Statements/while", "while")}}</dt>
+ <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd>
+</dl>
+
+<h3 id="其他">其他</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd>
+ <dt>{{jsxref("Statements/export", "export")}}</dt>
+ <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd>
+ <dt>{{jsxref("Statements/import", "import")}}</dt>
+ <dd>Used to import functions exported from an external module, another script.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd>
+</dl>
+
+<dl>
+ <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt>
+ <dd>Extends the scope chain for a statement.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">技術規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</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>New: 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="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/docs/Web/JavaScript/Reference/Operators">運算式與運算子</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/label/index.html b/files/zh-tw/web/javascript/reference/statements/label/index.html
new file mode 100644
index 0000000000..4939b7b95f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/label/index.html
@@ -0,0 +1,203 @@
+---
+title: label
+slug: Web/JavaScript/Reference/Statements/label
+tags:
+  - JavaScript
+  - Statement
+  - 陳述式
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>標記陳述式</strong>可以和 {{jsxref("Statements/break", "break")}} 或 {{jsxref("Statements/continue", "continue")}} 語句一起使用。標記就是在一條陳述式前面加個可以引用的識別符號。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div>
+
+
+
+<div class="note">
+<p>標記的迴圈或程式碼區塊非常罕見。通常可以使用函式呼叫而不是使用迴圈跳轉。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>label</em> :
+   <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>任何不是保留字的 JavaScript 識別符號。</dd>
+ <dt><code>statement</code></dt>
+ <dd>一個 JavaScript 陳述式。<code>break</code> 可用於任何標記陳述式，而 <code>continue</code> 可用於循環標記陳述式。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>可使用一個標籤來唯一標記一個循環，然後使用 <code>break</code> 或 <code>continue</code> 陳述式來指示程式是否中斷循環或繼續執行。</p>
+
+<p>需要注意的是 JavaScript <strong>沒有</strong> <code>goto</code> 陳述式，標記只能和 <code>break</code> 或 <code>continue</code> 一起使用。</p>
+
+<p>在<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>中，你不能使用 “<code>let</code>” 作為標籤名稱。它會拋出一個<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="SyntaxError 物件代表嘗試解析語法上不合法的程式碼的錯誤。"><code>SyntaxError</code></a>（let 是一個保留的識別符號）。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="在_for_迴圈中使用帶標記的_continue">在 <code>for</code> 迴圈中使用帶標記的 <code>continue</code> </h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //The first for statement is labeled "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //The second for statement is labeled "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         continue loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Output is:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"
+</pre>
+
+<h3 id="使用帶標記的_continue_陳述式">使用帶標記的 <code>continue</code> 陳述式</h3>
+
+<p>給定一組資料和一組測試，下面的例子可以統計通過測試的資料。</p>
+
+<pre class="brush: js">var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i &lt; items.length; i++) {
+  for (j = 0; j &lt; tests.length; j++) {
+    if (!tests[j].pass(items[i])) {
+      continue top;
+    }
+  }
+
+  itemsPassed++;
+}</pre>
+
+<h3 id="在_for_迴圈中使用帶標記的_break">在 <code>for</code> 迴圈中使用帶標記的 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">break</span></font> </h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //The first for statement is labeled "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //The second for statement is labeled "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         break loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Output is:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+// Notice the difference with the previous continue example</pre>
+
+<h3 id="使用帶標記_break_陳述式">使用帶標記 <code>break</code> 陳述式</h3>
+
+<p>給定一組資料和一組測試，下面的例子判斷是否所有的資料均通過了測試。</p>
+
+<pre class="brush: js">var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j &lt; tests.length; i++)
+    if (!tests[j].pass(items[i])) {
+      allPass = false;
+      break top;
+    }</pre>
+
+<h3 id="在標記的區塊中使用_break">在標記的區塊中使用 <code>break</code></h3>
+
+<p>你可以在程式碼區塊中使用標記，但只有 <code>break</code> 陳述式可以使用非迴圈的標記。</p>
+
+<pre class="brush: js">foo: {
+  console.log('face');
+  break foo;
+  console.log('this will not be executed');
+}
+console.log('swap');
+
+// this will log:
+
+// "face"
+// "swap </pre>
+
+<h3 id="標記的函式宣告式">標記的函式宣告式</h3>
+
+<p>從 ECMAScript 2015 開始，標準的函式宣告式現在對規範的 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations" rel="noopener">Web 相容性附件</a>中的非嚴格程式碼進行了標準化。</p>
+
+<pre class="brush: js">L: function F() {}</pre>
+
+<p>在<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>中，這會拋出 {{jsxref("SyntaxError")}} 例外：</p>
+
+<pre class="brush: js">'use strict';
+L: function F() {}
+// SyntaxError: functions cannot be labelled</pre>
+
+<p><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/function*">產生器函式</a>既不能在嚴格模式中標記，也不能在非嚴格模式中標記：</p>
+
+<pre class="brush: js">L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+</pre>
+
+<h2 id="規格">規格</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.label")}}</p>
+
+<h2 id="相關連結">相關連結</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/let/index.html b/files/zh-tw/web/javascript/reference/statements/let/index.html
new file mode 100644
index 0000000000..0cdc8806be
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/let/index.html
@@ -0,0 +1,246 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>let</code></strong>用於宣告一個「只作用在當前區塊的變數」，初始值可選擇性的設定。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>變數名稱。</dd>
+ <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt>
+ <dd>變數的初始值，可以是任何合法的表達式。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p><code>let</code> 可以宣告只能在目前區塊、階段或表達式中作用的變數。而 <code><a href="https://developer.mozilla.org/zh-TW/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a> 則是定義了一個全域變數，或是在整個 function 而不管該區塊範圍。</code></p>
+
+<h3 id="Scoping_rules">Scoping rules</h3>
+
+<p>宣告 <code>let</code> 的作用範圍是它們被定義的區塊，以及該區塊包含的子區塊。這樣看起來功能跟 <strong><code>var</code></strong> 很相似。主要不同的地方在於 <strong><code>var</code></strong> 作用範圍是「整個」function：</p>
+
+<pre class="brush:js notranslate">function varTest() {
+  var x = 1;
+  {
+    var x = 2;  // 這裡的 x 與 function 區塊內部的 x 是一樣的，因此會影響 function 區塊內所有的 x
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  {
+    let x = 2;  // 這裡的 x 與 function 區塊內部的 x 是不同的，只會作用在這層 block 區塊中
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}</pre>
+
+<p>在上列例子裡的最前行 <code>let</code> 和 <code>var</code> 不同，<code>let</code> 並不會在全域物件中建立變數。舉例來說：</p>
+
+<pre class="brush:js notranslate">var x = 'global';
+let y = 'global';
+console.log(this.x); // "global"
+console.log(this.y); // undefined
+</pre>
+
+<h3 id="Emulating_private_members">Emulating private members</h3>
+
+<p>In dealing with <a href="/en-US/docs/Glossary/Constructor">constructors</a> it is possible to use the <strong><code>let</code></strong> bindings to share one or more private members without using <a href="/en-US/docs/Web/JavaScript/Closures">closures</a>:</p>
+
+<pre class="brush:js notranslate">var Thing;
+
+{
+  let privateScope = new WeakMap();
+  let counter = 0;
+
+  Thing = function() {
+    this.someProperty = 'foo';
+
+    privateScope.set(this, {
+      hidden: ++counter,
+    });
+  };
+
+  Thing.prototype.showPublic = function() {
+    return this.someProperty;
+  };
+
+  Thing.prototype.showPrivate = function() {
+    return privateScope.get(this).hidden;
+  };
+}
+
+console.log(typeof privateScope);
+// "undefined"
+
+var thing = new Thing();
+
+console.log(thing);
+// Thing {someProperty: "foo"}
+
+thing.showPublic();
+// "foo"
+
+thing.showPrivate();
+// 1
+</pre>
+
+<h3 id="Temporal_Dead_Zone_and_errors_with_let">Temporal Dead Zone and errors with <code>let</code></h3>
+
+<p>Redeclaring the same variable within the same function or block scope raises a {{jsxref("SyntaxError")}}.</p>
+
+<pre class="brush: js example-bad notranslate">if (x) {
+  let foo;
+  let foo; // SyntaxError thrown.
+}</pre>
+
+<p>In ECMAScript 2015, <strong><code>let</code></strong> bindings are not subject to <strong>Variable Hoisting</strong>, which means that <strong><code>let</code></strong> declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code> (contrary to a variable declared with <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var</a>, which will just have the undefined value). The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.</p>
+
+<pre class="brush: js notranslate">function do_something() {
+  console.log(foo); // ReferenceError
+  let foo = 2;
+}</pre>
+
+<p>你可能會在 <a href="https://developer.mozilla.org/zh-TW/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> 中遇到錯誤，因為所有的 <code>case</code> 都屬於同樣的區塊中。</p>
+
+<pre class="brush: js notranslate">switch (x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // SyntaxError for redeclaration.
+    break;
+}</pre>
+
+<h3 id="let_於_for_迴圈的宣告範圍"><code>let</code> 於 <code>for</code> 迴圈的宣告範圍</h3>
+
+<p>You can use the <code>let</code> keyword to bind variables locally in the scope of <code>for</code> loops. This is different from the var keyword in the head of a for loop, which makes the variables visible in the whole function containing the loop.</p>
+
+<pre class="brush:js notranslate">var i=0;
+for ( let i=i ; i &lt; 10 ; i++ ) {
+  console.log(i);
+}
+</pre>
+
+<p>However, it's important to point out that a block nested inside a case clause will create a new block scoped lexical environment, which will not produce the redeclaration errors shown above.</p>
+
+<pre class="brush: js notranslate">let x = 1;
+
+switch(x) {
+  case 0: {
+    let foo;
+    break;
+  }
+  case 1: {
+    let foo;
+    break;
+  }
+}</pre>
+
+<h3 id="The_temporal_dead_zone_and_typeof">The temporal dead zone and <code>typeof</code></h3>
+
+<p>Unlike with simply undeclared variables and variables that hold a value of <code>undefined</code>, using the <code>typeof</code> operator to check for the type of a variable in that variable's TDZ will throw a <code>ReferenceError</code>:</p>
+
+<pre class="brush: js notranslate">// prints out 'undefined'
+console.log(typeof undeclaredVariable);
+// results in a 'ReferenceError'
+console.log(typeof i);
+let i = 10;</pre>
+
+<h3 id="Another_example_of_temporal_dead_zone_combined_with_lexical_scoping">Another example of temporal dead zone combined with lexical scoping</h3>
+
+<p>Due to lexical scoping, the identifier<strong> "foo"</strong> inside the expression <code>(foo + 55)</code> evaluates to the <u>if block's foo</u>, and <strong>not</strong> the <u>overlying variable foo</u> with the value of 33.<br>
+ In that very line, the <u>if block's "foo"</u> has already been created in the lexical environment, but has not yet reached (and <strong>terminated</strong>) its initialization (which is part of the statement itself): it's still in the temporal dead zone.</p>
+
+<pre class="brush: js example-bad notranslate">function test(){
+   var foo = 33;
+   {
+      let foo = (foo + 55); // ReferenceError
+   }
+}
+test();</pre>
+
+<p>This phenomenon may confuse you in a situation like the following. The instruction <code>let n of n.a</code> is already inside the private scope of the <u>for loop's block</u>, hence the identifier<strong> "n.a"</strong> is resolved to the property 'a' of the <u>'n' object located in the first part of the instruction itself</u> ("let n"), which is still in the temporal dead zone since its declaration statement has not been reached and <strong>terminated</strong>.</p>
+
+<pre class="brush: js example-bad notranslate">function go(n) {
+  // n here is defined!
+  console.log(n); // Object {a: [1,2,3]}
+
+  for (let n of n.a) { // ReferenceError
+    console.log(n);
+  }
+}
+
+go({a: [1, 2, 3]});
+</pre>
+
+<h2 id="Other_situations">Other situations</h2>
+
+<p>When used inside a block, <strong><code>let</code></strong> limits the variable's scope to that block. Note the difference between <code><strong>var</strong></code><em> </em>whose scope is inside the function where it is declared.</p>
+
+<pre class="brush: js notranslate">var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // the scope is global
+  let b = 22; // the scope is inside the if-block
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2</pre>
+
+<h2 id="規範">規範</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-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition. Does not specify let expressions or let blocks.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.let")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a></li>
+ <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44.</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/return/index.html b/files/zh-tw/web/javascript/reference/statements/return/index.html
new file mode 100644
index 0000000000..e207c2c6f3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/return/index.html
@@ -0,0 +1,156 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Statements/return
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>return</code> 表達式</strong>會終止函式執行，並指明函式呼叫器（function caller）要回傳的數值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">return [[expression]]; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>要被回傳的表達式。如果省略了表達式，函式就會回傳 <code>undefined</code>。</dd>
+</dl>
+
+<h2 id="敘述">敘述</h2>
+
+<p>如果在 function body 內宣告 <code>return</code> 的話，函式執行就會終止。如果指定數值的話，函式呼叫器就會回傳給定的數值。例如說，以下函式會回傳 <code>x</code> 參數的次方數。</p>
+
+<pre class="brush: js">function square(x) {
+   return x * x;
+}
+var demo = square(3);
+// demo will equal 9
+</pre>
+
+<p>如果省略了表達式，函式就會回傳 <code>undefined</code>。</p>
+
+<p>以下所有的 return 宣告都會終止函式執行：</p>
+
+<pre class="brush: js">return;
+return true;
+return false;
+return x;
+return x + y / 3;
+</pre>
+
+<h3 id="自動插入分號">自動插入分號</h3>
+
+<p><code>return</code> 宣告會受<a href="/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">自動插入分號</a>（automatic semicolon insertion，ASI）影響。No line terminator is allowed between the <code>return</code> keyword and the expression.</p>
+
+<pre class="brush: js">return
+a + b;
+</pre>
+
+<p>會因為 ASI 而變成：</p>
+
+<pre class="brush: js">return;
+a + b;
+</pre>
+
+<p>主控台會警告「unreachable code after return statement」（在 return 宣告後面有無法抵達的程式碼）。</p>
+
+<div class="note">從 Gecko 40 {{geckoRelease(40)}} 開始，如果主控台發現在 return 宣告後面有無法抵達的程式碼，就會顯示警告。</div>
+
+<p>要避免 ASI 問題，可以添加括號：</p>
+
+<pre class="brush: js">return (
+  a + b
+);
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="終止函式">終止函式</h3>
+
+<p>在到達呼叫 <code>return</code> 的地方後，函式會立即停止。</p>
+
+<pre class="brush: js">function counter() {
+  for (var count = 1; ; count++) {  // 無限迴圈
+    console.log(count + 'A'); // 直到 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + 'B');  // 直到 4
+    }
+  console.log(count + 'C');  // 永不顯示
+}
+
+counter();
+
+// 輸出：
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+</pre>
+
+<h3 id="函式回傳">函式回傳</h3>
+
+<p>請參見<a href="/zh-TW/docs/Web/JavaScript/Closures">閉包</a>。</p>
+
+<pre class="brush: js">function magic(x) {
+  return function calc(x) { return x * 42; };
+}
+
+var answer = magic();
+answer(1337); // 56154
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.return")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Reference/Functions">函式</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Closures">閉包</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/switch/index.html b/files/zh-tw/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..b182da09b6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,309 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div><span class="seoSummary"><strong><code>switch</code> 語句</strong> 會比對一個 <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">表達式</a> 裡頭的值是否符合 <code>case</code> 條件，然後執行跟這個條件相關的 <a href="/en-US/docs/Web/JavaScript/Reference/Statements">陳述式</a>, 以及此一符合條件以外，剩下其他條件裡的陳述式。</span></div>
+
+<div></div>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}      </p>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">switch (expression) {
+  case value1:
+        //當 expression 的值符合 value1
+        //要執行的陳述句
+    [break;]
+  case value2:
+        //當 expression 的值符合 value2
+        //要執行的陳述句
+    [break;]
+  ...
+  case valueN:
+        //當 expression 的值符合 valueN
+        //要執行的陳述句
+    [break;]
+  [default:
+        //當 expression 的值都不符合上述條件
+        //要執行的陳述句
+    [break;]]
+}</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>一個表達式其結果用來跟每個 <code>case</code> 條件比對。</dd>
+ <dt><code>case valueN</code> {{optional_inline}}</dt>
+ <dd>一個 <code>case</code> 條件是用來跟 <code>expression</code> 匹配的。 如果 <code>expression</code> 符合特定的 <code>valueN</code>，那在case條件裡的語句就會執行，直到這個 <code>switch</code> 陳述式結束或遇到一個 <code>break</code> 。</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd>一個 <code>default</code> 條件；倘若有這個條件，那在 <code>expression</code> 的值並不符合任何一個 <code>case</code> 條件的情況下，就會執行這個條件裡的語句。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>一個 switch 陳述式會先評估自己的 expression。然後他會按照 <code>case</code> 條件順序開始尋找，直到比對到第一個表達式值跟輸入 expression 的值相等的 case 條件（使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">嚴格的邏輯運算子</a>, <code>===</code>）並把控制流交給該子句、並執行裡面的陳述式（如果給定值符合多個 case，就執行第一個符合的 case，就算該 case 與其他 case 不同）</p>
+
+<p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. 按照慣例， <code>default</code> 語句會是最後一個條件，但不一定要存在。</p>
+
+<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_switch">使用 <code>switch</code></h3>
+
+<p>In the following example, if <code>expr</code> evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When <code>break</code> is encountered, the program breaks out of <code>switch</code> and executes the statement following <code>switch</code>. If <code>break</code> were omitted, the statement for case "Cherries" would also be executed.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+    console.log('Sorry, we are out of ' + expr + '.');
+}
+
+console.log("Is there anything else you'd like?");
+</pre>
+
+<h3 id="如果我忘記_break_會發生什麼事？">如果我忘記 break 會發生什麼事？</h3>
+
+<p>If you forget a break then the script will run from the case where the criterion is met and will run the case after that regardless if criterion was met. See example here:</p>
+
+<pre class="brush: js">var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('negative 1');
+    break;
+  case 0: // foo is 0 so criteria met here so this block will run
+    console.log(0);
+    // NOTE: the forgotten break would have been here
+  case 1: // no break statement in 'case 0:' so this case will run as well
+    console.log(1);
+    break; // it encounters this break so will not continue into 'case 2:'
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}</pre>
+
+<h3 id="我可以在_cases_中間放_default_嗎？">我可以在 cases 中間放 default 嗎？</h3>
+
+<p>Yes, you can! JavaScript will drop you back to the default if it can't find a match:</p>
+
+<pre class="brush: js">var foo = 5;
+switch (foo) {
+  case 2:
+    console.log(2);
+    break; // it encounters this break so will not continue into 'default:'
+  default:
+    console.log('default')
+    // fall-through
+  case 1:
+    console.log('1');
+}
+</pre>
+
+<p>It also works when you put default before all other cases.</p>
+
+<h3 id="同時使用多個條件_case_的方法">同時使用多個條件 case 的方法</h3>
+
+<p>Source for this technique is here:</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="Multi-case_-_single_operation">Multi-case - single operation</h4>
+
+<p>This method takes advantage of the fact that if there is no break below a case statement it will continue to execute the next case statement regardless if the case meets the criteria. See the section titled "What happens if I forgot a break?"</p>
+
+<p>This is an example of a single operation sequential switch statement, where four different values perform exactly the same.</p>
+
+<pre class="brush: js">var Animal = 'Giraffe';
+switch (Animal) {
+  case 'Cow':
+  case 'Giraffe':
+  case 'Dog':
+  case 'Pig':
+    console.log('This animal will go on Noah\'s Ark.');
+    break;
+  case 'Dinosaur':
+  default:
+    console.log('This animal will not.');
+}</pre>
+
+<h4 id="Multi-case_-_chained_operations">Multi-case - chained operations</h4>
+
+<p>This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.</p>
+
+<pre class="brush: js">var foo = 1;
+var output = 'Output: ';
+switch (foo) {
+  case 0:
+    output += 'So ';
+  case 1:
+    output += 'What ';
+    output += 'Is ';
+  case 2:
+    output += 'Your ';
+  case 3:
+    output += 'Name';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Please pick a number from 0 to 5!');
+}</pre>
+
+<p>The output from this example:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Log text</th>
+  </tr>
+  <tr>
+   <td>foo is NaN or not 1, 2, 3, 4, 5 or 0</td>
+   <td>Please pick a number from 0 to 5!</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>Output: So What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>Output: What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Output: Your Name?</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>Output: Name?</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Output: ?</td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td>Output: !</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Block-scope_variables_within_switch_statements">Block-scope variables within <code>switch</code> statements</h3>
+
+<p>With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> statements to declare block-scoped variables.</p>
+
+<p>Take a look at this example:</p>
+
+<pre class="brush: js">const action = 'say_hello';
+switch (action) {
+  case 'say_hello':
+    let message = 'hello';
+    console.log(message);
+    break;
+  case 'say_hi':
+    let message = 'hi';
+    console.log(message);
+    break;
+  default:
+    console.log('Empty action received.');
+    break;
+}</pre>
+
+<p>This example will output the error <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> which you were not probably expecting.</p>
+
+<p>This is because the first <code>let message = 'hello';</code> conflicts with second let statement <code>let message = 'hi';</code> even they're within their own separate case statements <code>case 'say_hello':</code> and <code>case 'say_hi':</code>; ultimately this is due to both <code>let</code> statements being interpreted as duplicate declarations of the same variable name within the same block scope.</p>
+
+<p>We can easily fix this by wrapping our case statements with brackets:</p>
+
+<pre class="brush: js">const action = 'say_hello';
+switch (action) {
+  case 'say_hello': <strong>{ // added brackets</strong>
+    let message = 'hello';
+    console.log(message);
+    break;
+  <strong>} // added brackets</strong>
+  case 'say_hi': <strong>{ // added brackets</strong>
+    let message = 'hi';
+    console.log(message);
+    break;
+  <strong>} // added brackets</strong>
+  default: <strong>{ // added brackets</strong>
+    console.log('Empty action received.');
+    break;
+  <strong>} // added brackets</strong>
+}</pre>
+
+<p>This code will now output <code>hello</code> in the console as it should, without any errors at all.</p>
+
+<h2 id="技術規範">技術規範</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</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>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.switch")}}</p>
+
+<h2 id="你也可以看看">你也可以看看</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/zh-tw/web/javascript/reference/statements/throw/index.html b/files/zh-tw/web/javascript/reference/statements/throw/index.html
new file mode 100644
index 0000000000..dbfe664ef5
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/throw/index.html
@@ -0,0 +1,234 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>The <strong><code>throw</code> statement</strong> throws a user-defined exception. Execution of the current function will stop (the statements after <code>throw</code> won't be executed), and control will be passed to the first <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> block in the call stack. If no <code>catch</code> block exists among caller functions, the program will terminate.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">throw <em>expression</em>; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>The expression to throw.</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>Use the <code>throw</code> statement to throw an exception. When you throw an exception, <code>expression</code> specifies the value of the exception. Each of the following throws an exception:</p>
+
+<pre class="brush: js">throw 'Error2'; // generates an exception with a string value
+throw 42;       // generates an exception with the value 42
+throw true;     // generates an exception with the value true</pre>
+
+<p>Also note that the <code>throw</code> statement is affected by <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> as no line terminator between the <code>throw</code> keyword and the expression is allowed.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Throw_an_object">Throw an object</h3>
+
+<p>You can specify an object when you throw an exception. You can then reference the object's properties in the <code>catch</code> block. The following example creates an object of type <code>UserException</code> and uses it in a <code>throw</code> statement.</p>
+
+<pre class="brush: js">function UserException(message) {
+   this.message = message;
+   this.name = 'UserException';
+}
+function getMonthName(mo) {
+   mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
+   var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
+      'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException('InvalidMonthNo');
+   }
+}
+
+try {
+   // statements to try
+   var myMonth = 15; // 15 is out of bound to raise the exception
+   var monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = 'unknown';
+   console.log(e.message, e.name); // pass exception object to err handler
+}
+</pre>
+
+<h3 id="Another_example_of_throwing_an_object">Another example of throwing an object</h3>
+
+<p>The following example tests an input string for a U.S. zip code. If the zip code uses an invalid format, the throw statement throws an exception by creating an object of type <code>ZipCodeFormatException</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 ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = 'does not conform to the expected format for a zip code';
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * This could be in a script that validates address data
+ * for US addresses.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // returns 95060
+b = verifyZipCode(9560);          // returns -1
+c = verifyZipCode('a');           // returns -1
+d = verifyZipCode('95060');       // returns 95060
+e = verifyZipCode('95060 1234');  // returns 95060 1234
+</pre>
+
+<h3 id="Rethrow_an_exception">Rethrow an exception</h3>
+
+<p>You can use <code>throw</code> to rethrow an exception after you catch it. The following example catches an exception with a numeric value and rethrows it if the value is over 50. The rethrown exception propagates up to the enclosing function or to the top level so that the user sees it.</p>
+
+<pre class="brush: js">try {
+   throw n; // throws an exception with a numeric value
+} catch (e) {
+   if (e &lt;= 50) {
+      // statements to handle exceptions 1-50
+   } else {
+      // cannot handle this exception, so rethrow
+      throw e;
+   }
+}
+</pre>
+
+<h2 id="規範">規範</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</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="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/var/index.html b/files/zh-tw/web/javascript/reference/statements/var/index.html
new file mode 100644
index 0000000000..705a27a333
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/var/index.html
@@ -0,0 +1,248 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>宣告一個變數, 同時可以非強制性地賦予一初始值。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre>
+
+<dl>
+ <dt><code>varnameN</code></dt>
+ <dd>變數名稱。可以是任何合法的識別字符 (identifier)。</dd>
+</dl>
+
+<dl>
+ <dt><code>valueN</code></dt>
+ <dd>變數的初始值。可以是任何合法的表示式 (expression)。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>以 <code>var</code> 宣告的變數, 其作用範圍 (scope) 及於該函數之內; 但是如果在函數外宣告, 其作用範圍則為全域性 (global) (亦即包納於全域物件之內)。</p>
+
+<p>在函數之外使用以 <code>var</code> 宣告的變數是非強制的 (optional); 如果對一個未經宣告的變數賦值, 它會被暗中 (implicitly) 宣告成為一個全域變數 (亦即成為全域物件的屬性)。其中差異在於, 已宣告的變數是全域物件裡的一個無法變更 (non-configurable) 的屬性, 而未宣告的變數則是可變更的 (configurable)。</p>
+
+<p>因此, 建議你一定要宣告你的變數, 不管你要將它使用於全域範圍內或者函數內。</p>
+
+<p>若未宣告變數, 將非常可能導致無法預測的結果。所以, 在 ECMAScript 5 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a> 中, 若在函數中給一個未經宣告的函數賦值, 將會丟出錯誤。</p>
+
+<p>Variable declarations, wherever they occur, are processed before any code is executed. The scope of a variable declared with <code>var</code> is its current <em>execution context</em>, which is either the enclosing function or, for variables declared outside any function, global.</p>
+
+<p>Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed. The differences between declared and undeclared variables are:</p>
+
+<p>1. Declared variables are constrained in the execution context in which they are declared. Undeclared variables are always global.</p>
+
+<pre class="brush: js">function x() {
+  y = 1;   // Throws a ReferenceError in strict mode
+  var z = 2;
+}
+
+x();
+
+console.log(y); // logs "1"
+console.log(z); // Throws a ReferenceError: z is not defined outside x
+</pre>
+
+<p>2. Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.</p>
+
+<pre class="brush: js">console.log(a);                // Throws a ReferenceError.
+console.log('still going...'); // Never executes.</pre>
+
+<pre class="brush: js">var a;
+console.log(a);                // logs "undefined" or "" depending on browser.
+console.log('still going...'); // logs "still going...".</pre>
+
+<p>3. Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).</p>
+
+<pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
+delete this.b;
+
+console.log(a, b); // Throws a ReferenceError.
+// The 'b' property was deleted and no longer exists.</pre>
+
+<p>Because of these three differences, failure to declare variables will very likely lead to unexpected results. Thus <strong>it is recommended to always declare variables, regardless of whether they are in a function or global scope.</strong> And in ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, assigning to an undeclared variable throws an error.</p>
+
+<h3 id="var_hoisting">var hoisting</h3>
+
+<p>在 JavaScript 中, 變數可以先使用再宣告。</p>
+
+<p>因此, 建議你永遠都把變數的宣告放在函數的最頂端。否則可能導致混亂的情況。</p>
+
+<p>Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.</p>
+
+<pre class="brush: js">bla = 2
+var bla;
+// ...
+
+// is implicitly understood as:
+
+var bla;
+bla = 2;
+</pre>
+
+<p>For that reason, it is recommended to always declare variables at the top of their scope (the top of global code and the top of function code) so it's clear which variables are function scoped (local) and which are resolved on the scope chain.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Declaring_and_initializing_two_variables">Declaring and initializing two variables</h3>
+
+<pre class="brush: js">var a = 0, b = 0;
+</pre>
+
+<h3 id="Assigning_two_variables_with_single_string_value">Assigning two variables with single string value</h3>
+
+<pre class="brush: js">var a = "A";
+var b = a;
+
+// Equivalent to:
+
+var a, b = a = "A";
+</pre>
+
+<p>Be mindful of the order:</p>
+
+<pre class="brush: js">var x = y, y = 'A';
+console.log(x + y); // undefinedA
+</pre>
+
+<p>Here, <code>x</code> and <code>y</code> are declared before any code is executed, the assignments occur later. At the time "<code>x = y</code>" is evaluated, <code>y</code> exists so no <code>ReferenceError</code> is thrown and its value is '<code>undefined</code>'. So, <code>x</code> is assigned the undefined value. Then, <code>y</code> is assigned a value of 'A'. Consequently, after the first line, <code>x === undefined &amp;&amp; y === 'A'</code>, hence the result.</p>
+
+<h3 id="Initialization_of_several_variables">Initialization of several variables</h3>
+
+<pre class="brush: js">var x = 0;
+
+function f(){
+  var x = y = 1; // x is declared locally. y is not!
+}
+f();
+
+console.log(x, y); // Throws a ReferenceError in strict mode (y is not defined). 0, 1 otherwise.
+// In non-strict mode:
+// x is the global one as expected
+// y leaked outside of the function, though!</pre>
+
+<h3 id="Implicit_globals_and_outer_function_scope">Implicit globals and outer function scope</h3>
+
+<p>Variables that appear to be implicit globals may be references to variables in an outer function scope:</p>
+
+<pre class="brush: js">var x = 0;  // x is declared global, then assigned a value of 0
+
+console.log(typeof z); // undefined, since z doesn't exist yet
+
+function a() { // when a is called,
+  var y = 2;   // y is declared local to function a, then assigned a value of 2
+
+  console.log(x, y);   // 0 2
+
+  function b() {       // when b is called
+    x = 3;  // assigns 3 to existing global x, doesn't create a new global var
+    y = 4;  // assigns 4 to existing outer y, doesn't create a new global var
+    z = 5;  // creates a new global variable z and assigns a value of 5.
+  }         // (Throws a ReferenceError in strict mode.)
+
+  b();     // calling b creates z as a global variable
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // calling a also calls b
+console.log(x, z);     // 3 5
+console.log(typeof y); // undefined as y is local to function a</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</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="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+</ul>