{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-5---statement(definition)-and-expression/","webpackCompilationHash":"f92dbf25810602c1889e","result":{"data":{"site":{"siteMetadata":{"title":"Web Devlog","author":"RossenaHuh","siteUrl":"https://github.com/rossenahuh","comment":{"disqusShortName":"RossenaHuh","utterances":"rossenahuh/my-dev-blog.git"},"sponsor":{"buyMeACoffeeId":"rossena"}}},"markdownRemark":{"id":"1b0d78e3-6660-5983-90c0-b94694d00b77","excerpt":"The difference on the usage of ‘Definition’ and ‘Expression’Expressions result in a value even if just “undefined”\nDefinition creates sort of like a reference but it’s not an actual value so you can’t run itExplain why the following doesn’t work as IIFEIn fact, this is how JS…","html":"

The difference on the usage of ‘Definition’ and ‘Expression’

\n
definition() //'I am definition'\nexpression() // Uncaught TypeError: expression is not a function\n\nfunction definition() {\n  return 'I am definition'\n}\n\nvar expression = function() {\n  return 'I am expression'\n}
\n

Expressions result in a value even if just “undefined”\nDefinition creates sort of like a reference but it’s not an actual value so you can’t run it

\n
function definition() {\n  return 'I am definition'\n}\n\nlet expression\n\ndefinition()\nexpression()\n\nexpression = function() {\n  return 'I am expression'\n}
\n

Explain why the following doesn’t work as IIFE

\n
function foo() {\n    // i pity this code\n}();
\n

In fact, this is how JS reading IIFE (hoisting applied)

\n
function foo() {\n\n}\n\n(); // as if you wrote it on separate lines
\n

You can make it work simply by putting parentheses around it. In this way, you can make the function at an expression.

\n
;(function foo() {})()
\n

Why would I ever use one? => To control variable scope

\n
;(function foo() {})()\n\nconsole.log(foo) // referenceError: foo is not defined
\n

The variables inside of the foo function will only be availble inside the function not outside of the function, which can let us use dumb(?) and plain naming conventions in our application.

","frontmatter":{"title":"JavaScript Concept 5 - Statement(Definition) and Expression","date":"July 05, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-5---statement(definition)-and-expression/","previous":{"fields":{"slug":"/JavaScript/javascript-concept-4---scope-and-closure/"},"frontmatter":{"title":"JavaScript Concept 4 - Scope and Closure","category":"JavaScript"}},"next":{"fields":{"slug":"/JavaScript/javascript-concept-6---null-undefined-undeclared/"},"frontmatter":{"title":"JavaScript Concept 6 - Null Undefined Undeclared","category":"JavaScript"}}}}}