{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-2---hoisting/","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":"e50ae30b-7a5d-55bc-9277-55b2d813fef3","excerpt":"Explain ‘Hoisting’All variables using var are declared at the top of any given function scope whether you like it or not(includes function declartions)var declaration hoisted to top. Linters don’t like this but browsers don’t mind. This works perfectly fine in the browsers.So…","html":"<h2 id=\"explain-hoisting\"><a href=\"#explain-hoisting\" aria-label=\"explain hoisting permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Explain <strong>‘Hoisting’</strong></h2>\n<p>All variables using var are declared at the top of any given function scope whether you like it or not(includes function declartions)</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function</span> <span class=\"token function\">hoist</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">country</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>country <span class=\"token operator\">===</span> <span class=\"token string\">'Korea'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> greeting <span class=\"token operator\">=</span> <span class=\"token string\">'안녕'</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> greeting <span class=\"token operator\">=</span> <span class=\"token string\">'hello'</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> greeting\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>var declaration <strong>hoisted</strong> to top. Linters don’t like this but browsers don’t mind. This works perfectly fine in the browsers.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function</span> <span class=\"token function\">hoist</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">country</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> greeting\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>country <span class=\"token operator\">===</span> <span class=\"token string\">'Korea'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    greeting <span class=\"token operator\">=</span> <span class=\"token string\">'안녕'</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">var</span> greeting <span class=\"token operator\">=</span> <span class=\"token string\">'hello'</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> greeting\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>So technically, this one works too.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function</span> <span class=\"token function\">hoist</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">country</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>country <span class=\"token operator\">===</span> <span class=\"token string\">'Korea'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    greeting <span class=\"token operator\">=</span> <span class=\"token string\">'안녕'</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n    greeting <span class=\"token operator\">=</span> <span class=\"token string\">'hello'</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">var</span> greeting\n\n  <span class=\"token keyword\">return</span> greeting\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>This is pretty absurd and this is reason why people say that they hate JavaScript. This has kind of been addressed with the introduction of <strong>const</strong> and <strong>let</strong> in es6.</p>","frontmatter":{"title":"JavaScript Concept 2 - Hoisting","date":"July 02, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-2---hoisting/","previous":{"fields":{"slug":"/JavaScript/javascript-concept-1---event-delegation/"},"frontmatter":{"title":"JavaScript Concept 1 - Event Delegation","category":"JavaScript"}},"next":{"fields":{"slug":"/JavaScript/javascript-concept-3---var-let-const/"},"frontmatter":{"title":"JavaScript Concept 3 - var let const","category":"JavaScript"}}}}}