## Introduction to Variables *Note*: In this REPL and most other REPLs in the tutorial the Lightview script is placed in a separate section. This is to simplify editing. Behind the scenes, the script is included in the body tag. Much of the power of Lightview comes from variables coupled with JavaScript string literal notation embedded in HTML. Try adding some text or HTML before or after `${message}`. Variables declared as the functional type `reactive` automatically update the DOM nodes that reference them. Try copy/paste replacing the code with: ```javascript currentComponent.mount = function() { this.variables({message:"string"},{reactive}); message = "Hello world!"; setTimeout(function() { message = "Goodbye world ..."; },2000); } ``` You can also use the functional type `constant`. Try replacing the code with: ```javascript currentComponent.mount = function() { this.variables({message:"string"},{constant:"Hello world"}); message = "Goodbye world ..."; } ``` Note how the variable `message` simply does not get replaced. You can configure Lightview to render errors. Try this: ```javascript Lightview.renderErrors = true; currentComponent.mount = function() { this.variables({message:"string"},{constant:"Hello world"}); message = "Goodbye world ..."; } ``` See the API documentation [Lightview.renderErrors](../api.html#renderErrors). Finally, you can set default values using `set`. Try replacing the code with: ```javascript currentComponent.mount = function() { this.variables({message:"string"},{reactive,set:"Hello world!"}); setTimeout(function() { message = "Goodbye world ..."; },2000); } ``` See the API documentation on [variables](../api.html#variables) and [reactive](../api.html#reactive). See the Medium article for an exploration of functional types.