Add block scoped declaration section

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
 }, {

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);
+}

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');
+}

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);
+    }
+}

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>
+        );
+    }
+});