{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-3---var-let-const/","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":"4aeef23a-c7c8-5279-bc6c-344a727832f2","excerpt":"What’s the difference between var, let, and const?let & constNot hoistedScoped within the block they are in (within the curly bracket {})Gives you more controlconst creates immutable varibles whereas variables created by let are mutable.NOTE ::: If a constant refers to an object…","html":"<h2 id=\"whats-the-difference-between-var-let-and-const\"><a href=\"#whats-the-difference-between-var-let-and-const\" aria-label=\"whats the difference between var let and const 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>What’s the difference between var, let, and const?</h2>\n<p><strong>let &#x26; const</strong></p>\n<ul>\n<li>Not hoisted</li>\n<li>Scoped within the block they are in (within the curly bracket {})</li>\n<li>Gives you more control</li>\n</ul>\n<div class=\"gatsby-highlight has-highlighted-lines\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token comment\">// var variables are function-scoped</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"gatsby-highlight-code-line\">  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></span><span class=\"gatsby-highlight-code-line\">    <span class=\"token keyword\">var</span> temp <span class=\"token operator\">=</span> <span class=\"token string\">'fooooo'</span></span><span class=\"gatsby-highlight-code-line\">  <span class=\"token punctuation\">}</span></span><span class=\"gatsby-highlight-code-line\">  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>temp<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 'fooooo'</span></span><span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// let, const variables are block-scoped</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"gatsby-highlight-code-line\">    <span class=\"token keyword\">let</span> temp <span class=\"token operator\">=</span> <span class=\"token string\">'fooooo'</span></span>  <span class=\"token punctuation\">}</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>temp<span class=\"token punctuation\">)</span> <span class=\"token comment\">// Uncaught ReferenceError: temp is not defined</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><strong>const</strong> creates <strong>immutable</strong> varibles whereas variables created by let are mutable.</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">let</span> withLet <span class=\"token operator\">=</span> <span class=\"token string\">'assigned'</span>\nwithLet <span class=\"token operator\">=</span> <span class=\"token string\">'re-assigned'</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>withLet<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 're-assigned'</span>\n\n<span class=\"token keyword\">const</span> withConst <span class=\"token operator\">=</span> <span class=\"token string\">'assigned'</span>\nwithConst <span class=\"token operator\">=</span> <span class=\"token string\">'re-assigned'</span> <span class=\"token comment\">// TypeError</span></code></pre></div>\n<blockquote>\n<p>NOTE ::: If a constant refers to an object or array, the object or array itself can still be changed</p>\n</blockquote>","frontmatter":{"title":"JavaScript Concept 3 - var let const","date":"July 03, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-3---var-let-const/","previous":{"fields":{"slug":"/JavaScript/javascript-concept-2---hoisting/"},"frontmatter":{"title":"JavaScript Concept 2 - Hoisting","category":"JavaScript"}},"next":{"fields":{"slug":"/JavaScript/javascript-concept-4---scope-and-closure/"},"frontmatter":{"title":"JavaScript Concept 4 - Scope and Closure","category":"JavaScript"}}}}}