From 9b82a03e977293df75f6fe49649e8a7e4a96fe08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?=
 <stanislas.ormieres@smartfocus.com>
Date: Fri, 23 Oct 2015 15:43:56 +0200
Subject: [PATCH] Add block scoped declaration section - Add let block scoped
 explanation - Add TDZ explanation - Add const block scped explanation

---
 example-list.js                              |  4 +++
 examples/block-scoped-declarations/a.example | 16 ++++++++++
 examples/block-scoped-declarations/b.example | 32 ++++++++++++++++++++
 examples/block-scoped-declarations/c.example | 14 +++++++++
 examples/block-scoped-declarations/index.jsx | 29 ++++++++++++++++++
 5 files changed, 95 insertions(+)
 create mode 100644 examples/block-scoped-declarations/a.example
 create mode 100644 examples/block-scoped-declarations/b.example
 create mode 100644 examples/block-scoped-declarations/c.example
 create mode 100644 examples/block-scoped-declarations/index.jsx

diff --git a/example-list.js b/example-list.js
index 122f26c..9b09ac6 100644
--- a/example-list.js
+++ b/example-list.js
@@ -1,3 +1,4 @@
+import BlockScoped from "./examples/block-scoped-declarations/index.jsx";
 import Arrow from "./examples/arrow-functions/index.jsx";
 import Classes from "./examples/classes/index.jsx";
 import ConciseMethods from "./examples/concise-methods/index.jsx";
@@ -7,6 +8,9 @@ import ObjectLiterals from "./examples/object-literals/index.jsx";
 import SpreadOperator from "./examples/spread-operator/index.jsx";
 
 export default [{
+  name: "Block scoped declarations",
+  example: BlockScoped
+}, {
   name: "Arrow functions",
   example: Arrow
 }, {
diff --git a/examples/block-scoped-declarations/a.example b/examples/block-scoped-declarations/a.example
new file mode 100644
index 0000000..444464d
--- /dev/null
+++ b/examples/block-scoped-declarations/a.example
@@ -0,0 +1,16 @@
+{
+    var functionScoped = 'var variable';
+    let blockScoped = 'let variable';
+
+    console.log(functionScoped);
+    console.log(blockScoped);
+}
+try {
+     // functionScoped is declared and intialized
+    console.log(functionScoped);
+    // blockScoped is not declared...
+    console.log(blockScoped);
+} catch (e) {
+    // ...so the lookup throws an error
+    console.log(e.name + ': ' + e.message);
+}
diff --git a/examples/block-scoped-declarations/b.example b/examples/block-scoped-declarations/b.example
new file mode 100644
index 0000000..8aef7b6
--- /dev/null
+++ b/examples/block-scoped-declarations/b.example
@@ -0,0 +1,32 @@
+try {
+    // functionScoped is declared (its declaration is hoisted)
+    // though not yet initialized, so it returns 'undefined'
+    console.log(functionScoped);
+    // "Temporal Dead Zone" (TDZ) error:
+    // blockScoped is not declared yet,
+    // so the lookup throws an error (ReferenceError)
+    blockScoped;
+} catch (e) {
+    console.log(e.name + ': ' + e.message);
+}
+
+{
+    // Block
+    try {
+        // functionScoped is declared (its declaration is hoisted)
+        // and still not initialized
+        console.log(functionScoped);
+        // Still in "Temporal Dead Zone" (TDZ):
+        // (Depending on your browser version, your browser may not behave like it is in the TDZ,
+        // a future version may correct this).
+        console.log(blockScoped);
+    } catch (e) {
+        console.log(e.name + ': ' + e.message);
+    }
+
+    var functionScoped = 'var variable';
+    let blockScoped = 'let variable';
+
+    console.log(functionScoped, 'is now initialized');
+    console.log(blockScoped, 'is now initialized');
+}
diff --git a/examples/block-scoped-declarations/c.example b/examples/block-scoped-declarations/c.example
new file mode 100644
index 0000000..c27f112
--- /dev/null
+++ b/examples/block-scoped-declarations/c.example
@@ -0,0 +1,14 @@
+{
+    let aVariable = 'let variable';
+    const aConstant = 'const constant';
+
+    try {
+        aVariable = 'let variable changed';
+        console.log('variable is now changed');
+        aConstant = 'const cannot be changed'; // TypeError
+        console.log('This will not appear');
+    } catch (e) {
+        //Should log this: TypeError: Assignment to constant variable.
+        console.log(e.name + ': ' + e.message);
+    }
+}
diff --git a/examples/block-scoped-declarations/index.jsx b/examples/block-scoped-declarations/index.jsx
new file mode 100644
index 0000000..dc1af32
--- /dev/null
+++ b/examples/block-scoped-declarations/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react/addons';
+import Playground from 'component-playground';
+import a from 'raw!./a.example';
+import b from 'raw!./b.example';
+import c from 'raw!./c.example';
+import Code from '../../code.jsx';
+
+export default React.createClass({
+    render() {
+        return (
+            <div>
+                <h3><Code>let</Code> instruction</h3>
+
+                <p><Code>let</Code> is a new instruction that creates a variable available only in the block it was defined in.</p>
+                <Playground codeText={a} es6Console={true} scope={{}}/>
+
+                <p>Warning: unlike with the <Code>var</Code> instruction, the variable declaration is <strong>not</strong> hoisted with <Code>let</Code>.</p>
+                <Playground codeText={b} es6Console={true} scope={{}}/>
+
+                <h3><Code>const</Code> instruction</h3>
+                <p>
+                    <Code>const</Code> is another block-scoped instruction, which shares the same rules as <Code>let</Code>, and contains one more rule.
+                    Since <Code>const</Code> declares a constant, it cannot be reassigned.
+                </p>
+                <Playground codeText={c} es6Console={true} scope={{}}/>
+            </div>
+        );
+    }
+});