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 ( +
+

let instruction

+ +

let is a new instruction that creates a variable available only in the block it was defined in.

+ + +

Warning: unlike with the var instruction, the variable declaration is not hoisted with let.

+ + +

const instruction

+

+ const is another block-scoped instruction, which shares the same rules as let, and contains one more rule. + Since const declares a constant, it cannot be reassigned. +

+ +
+ ); + } +});