<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Yash Prajapati's Blog |  Software Developer]]></title><description><![CDATA[Hello, my name is Yash Prajapati. I am currently residing in Mehsana, India. A passionate web developer and flutter developer who adores PHP, Javascript, and Dart.]]></description><link>https://blog.yashprajapati.com</link><generator>RSS for Node</generator><lastBuildDate>Wed, 15 Apr 2026 13:31:40 GMT</lastBuildDate><atom:link href="https://blog.yashprajapati.com/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[What is the difference between var, let and const with Example (Javascript)]]></title><description><![CDATA[What are variables?
Variables are named values and can store any type of value.
Here is how you can declare a variable in javascript.
var x = 100;
How to declare variables in javascript?
In javascript declare variables with var, let, and const.
//wit...]]></description><link>https://blog.yashprajapati.com/javascript-var-let-and-const</link><guid isPermaLink="true">https://blog.yashprajapati.com/javascript-var-let-and-const</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Programming Blogs]]></category><category><![CDATA[Blogging]]></category><category><![CDATA[variables]]></category><category><![CDATA[first post]]></category><dc:creator><![CDATA[Yash Prajapati]]></dc:creator><pubDate>Tue, 12 Apr 2022 06:15:06 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1649694889168/Sae8rsuc8.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="heading-what-are-variables">What are variables?</h2>
<p>Variables are named values and can store any type of value.</p>
<p>Here is how you can declare a variable in javascript.</p>
<pre><code><span class="hljs-keyword">var</span> x <span class="hljs-operator">=</span> <span class="hljs-number">100</span>;
</code></pre><h2 id="heading-how-to-declare-variables-in-javascript">How to declare variables in javascript?</h2>
<p>In javascript declare variables with var, let, and const.</p>
<pre><code><span class="hljs-comment">//without keyword works as var</span>
name <span class="hljs-operator">=</span> <span class="hljs-string">"Yash"</span>;

<span class="hljs-keyword">var</span> compony <span class="hljs-operator">=</span> <span class="hljs-string">"Google"</span>;

let counter <span class="hljs-operator">=</span> <span class="hljs-number">1</span>;

const VERSION <span class="hljs-operator">=</span> <span class="hljs-number">1.0</span>;
</code></pre><p>Best way to understand var let const you need to understand</p>
<ul>
<li>Scope </li>
<li>Hoisting</li>
<li>Redeclaration of the variable</li>
<li>Reassign the value</li>
</ul>
<h2 id="heading-scope">Scope</h2>
<h3 id="heading-var">Var</h3>
<p>Variable declared with var is functional scope.</p>
<p>Example.</p>
<pre><code><span class="hljs-comment">// global scope</span>
<span class="hljs-keyword">var</span> a <span class="hljs-operator">=</span> <span class="hljs-number">0</span>;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-comment">// functional scope</span>
    <span class="hljs-keyword">var</span> b <span class="hljs-operator">=</span> <span class="hljs-number">1</span>;
    <span class="hljs-keyword">if</span>(<span class="hljs-literal">true</span>){
    <span class="hljs-comment">// block scope</span>
    console.log(b); <span class="hljs-comment">// 1</span>
    }
    console.log(a); <span class="hljs-comment">// 0 </span>
    console.log(b); <span class="hljs-comment">// 1</span>
}
test(); <span class="hljs-comment">// 1 0 1</span>
console.log(a); <span class="hljs-comment">//  0</span>
console.log(b); <span class="hljs-comment">//  ReferenceError: b is not defined.</span>
</code></pre><ul>
<li>In the above example "a" is declared in a global scope variable so can access anywhere.</li>
<li>b is declared inside the "test" function so b is not accessible outside the function scope.</li>
</ul>
<h3 id="heading-let">Let</h3>
<p>Variable declared as Let is block scoped. outside block scope can't be accessible.</p>
<p>Example.</p>
<pre><code><span class="hljs-comment">//global scope</span>
let a <span class="hljs-operator">=</span> <span class="hljs-number">0</span>;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-comment">// functional scope</span>
   let b <span class="hljs-operator">=</span> <span class="hljs-number">1</span>;
    <span class="hljs-keyword">if</span>(<span class="hljs-literal">true</span>) {
       let c <span class="hljs-operator">=</span> <span class="hljs-number">2</span>;
      <span class="hljs-comment">// block scope</span>
      console.log(a);<span class="hljs-comment">// 0</span>
      console.log(b); <span class="hljs-comment">// 1</span>
      console.log(c); <span class="hljs-comment">// 2</span>
    }
    console.log(a); <span class="hljs-comment">// 0 </span>
    console.log(c); <span class="hljs-comment">// c is not defined.</span>
}
test(); 
console.log(a); <span class="hljs-comment">//  0</span>
</code></pre><ul>
<li>In the above example a is in the global scope so we can access it anywhere.</li>
<li>but c is declared in if block so we can not use it outside of if block.</li>
</ul>
<h3 id="heading-const">Const</h3>
<p>Variable declared as Const is block scoped. outside block scope can't be accessible.</p>
<p>Example.</p>
<pre><code><span class="hljs-comment">//global scope</span>
const a <span class="hljs-operator">=</span> <span class="hljs-number">0</span>;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-comment">// functional scope</span>
   const b <span class="hljs-operator">=</span> <span class="hljs-number">1</span>;
    <span class="hljs-keyword">if</span>(<span class="hljs-literal">true</span>) {
       const c <span class="hljs-operator">=</span> <span class="hljs-number">2</span>;
      <span class="hljs-comment">// block scope</span>
      console.log(a);<span class="hljs-comment">// 0</span>
      console.log(b); <span class="hljs-comment">// 1</span>
      console.log(c); <span class="hljs-comment">// 2</span>
    }
    console.log(a); <span class="hljs-comment">// 0 </span>
    console.log(c); <span class="hljs-comment">// c is not defined.</span>
}
test(); 
console.log(a); <span class="hljs-comment">//  0</span>
</code></pre><ul>
<li>In the above example a is in the global scope so we can access it anywhere.</li>
<li>but c is declared in if block so we can not use it outside of if block. </li>
<li>Let and const scope is the same so we can not use the "c" variable outside of block-scoped.</li>
</ul>
<div class="hn-table">
<table>
<thead>
<tr>
<td>Var</td><td>Let</td><td>Const</td></tr>
</thead>
<tbody>
<tr>
<td>Function scope</td><td>Block scope</td><td>Block scope</td></tr>
</tbody>
</table>
</div><h2 id="heading-hoisting">Hoisting</h2>
<p>JavaScript has a feature that allows functions and variables to be hoisted this is useful for many developers. Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.</p>
<p>Hoisting means that you can define a variable before its declaration.</p>
<h3 id="heading-var-hoisting">Var hoisting</h3>
<pre><code>console.log(num); <span class="hljs-comment">// Returns 'undefined' from hoisted var declaration (not 6)</span>
<span class="hljs-keyword">var</span> num; <span class="hljs-comment">// Declaration</span>
num <span class="hljs-operator">=</span> <span class="hljs-number">6</span>; <span class="hljs-comment">// Initialization</span>
console.log(num); <span class="hljs-comment">// Returns 6 after the line with initialization is executed.</span>
</code></pre><ul>
<li>var default value without initialization is undefined.</li>
<li>Here we declare num and after initialization of num to 6. the default initialization of num is undefined so num is printed as undefined.</li>
<li>If you try to access it num without declaration gives you an error num is not defined</li>
</ul>
<pre><code>console.log(num); // <span class="hljs-keyword">Returns</span> <span class="hljs-string">'undefined'</span> <span class="hljs-keyword">from</span> hoisted var declaration (<span class="hljs-keyword">not</span> <span class="hljs-number">6</span>)
var num = <span class="hljs-number">6</span>; // Initialization <span class="hljs-keyword">and</span> declaration.
console.log(num); // <span class="hljs-keyword">Returns</span> <span class="hljs-number">6</span> <span class="hljs-keyword">after</span> the <span class="hljs-type">line</span> <span class="hljs-keyword">with</span> initialization <span class="hljs-keyword">is</span> executed.
</code></pre><ul>
<li>same happens if we declare and initialization in one line</li>
</ul>
<pre><code>console.log(num); <span class="hljs-comment">// Throws ReferenceError exception - the interpreter doesn't know about `num`.</span>
num <span class="hljs-operator">=</span> <span class="hljs-number">6</span>; <span class="hljs-comment">// Initialization</span>
</code></pre><p>if we cant declare a variable with the var keyword can't be hosted in javascript. variable can't be accessed before initialization to value.</p>
<h3 id="heading-let-and-const-hoisting">Let and const hoisting</h3>
<p>Let and const also hoisted but not like var.
declared with var have default value undefined but for let and const give you ReferenceError exception if you used variable before initialization.</p>
<pre><code>console.log(num); <span class="hljs-comment">// Throws ReferenceError exception as the variable value is uninitialized</span>
let num <span class="hljs-operator">=</span> <span class="hljs-number">6</span>; <span class="hljs-comment">// Initialization</span>
</code></pre><h2 id="heading-reassign-the-value">Reassign the value</h2>
<p>To reassign a value is to reassign the value of a variable.</p>
<pre><code><span class="hljs-keyword">var</span>  name <span class="hljs-operator">=</span> <span class="hljs-string">"yash"</span>;
let  company <span class="hljs-operator">=</span> <span class="hljs-string">"Google"</span>;
const age <span class="hljs-operator">=</span> <span class="hljs-number">23</span>;


name <span class="hljs-operator">=</span> <span class="hljs-string">"Yash Prajapati"</span> <span class="hljs-comment">// the name value is now "Yash Prajapati"</span>
company <span class="hljs-operator">=</span> <span class="hljs-string">"Microsoft"</span> <span class="hljs-comment">// the company value is not "Microsoft"</span>
age <span class="hljs-operator">=</span> <span class="hljs-number">18</span>; <span class="hljs-comment">// Uncaught TypeError: Assignment to constant variable</span>
</code></pre><ul>
<li>variable declared with var and let can be reassigned value to a variable</li>
<li>variable declared with const can't be reassigned value to a variable.</li>
</ul>
<div class="hn-table">
<table>
<thead>
<tr>
<td>Var</td><td>Let</td><td>Const</td></tr>
</thead>
<tbody>
<tr>
<td>Can reassigned value</td><td>Can reassigned value</td><td>Can't reassigned value</td></tr>
</tbody>
</table>
</div><h2 id="heading-redeclaration-of-the-variable">Redeclaration of the variable</h2>
<p>The redeclaration of a variable means that you can declare the variable again.</p>
<pre><code><span class="hljs-keyword">var</span> a <span class="hljs-operator">=</span> <span class="hljs-number">1</span>; <span class="hljs-comment">// 1</span>
<span class="hljs-keyword">var</span> a <span class="hljs-operator">=</span> <span class="hljs-number">2</span>; <span class="hljs-comment">// 2</span>

let b <span class="hljs-operator">=</span> <span class="hljs-number">2</span>;  <span class="hljs-comment">// 2 </span>
let b <span class="hljs-operator">=</span> <span class="hljs-number">5</span>;  <span class="hljs-comment">// Uncaught SyntaxError: Identifier 'b' has already been declared</span>


const  c <span class="hljs-operator">=</span> <span class="hljs-number">5</span>; <span class="hljs-comment">// 5</span>
const  c <span class="hljs-operator">=</span> <span class="hljs-number">6</span>; <span class="hljs-comment">// Uncaught SyntaxError: Identifier 'c' has already been declared</span>
</code></pre><div class="hn-table">
<table>
<thead>
<tr>
<td>Var</td><td>Let</td><td>Const</td></tr>
</thead>
<tbody>
<tr>
<td>Can redeclare value</td><td>Can't redeclare value</td><td>Can't redeclare value</td></tr>
</tbody>
</table>
</div><h2 id="heading-conclusion">conclusion</h2>
<ul>
<li>always declare a variable with var or const.</li>
<li>don't use var anymore</li>
<li>don't try to access variables without declaring them.</li>
</ul>
<h2 id="heading-questions-for-the-day">Questions for the day</h2>
<pre><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHi</span>(<span class="hljs-params"></span>) </span>{
  console.log(name);
  console.log(age);
  <span class="hljs-keyword">var</span> name <span class="hljs-operator">=</span> <span class="hljs-string">'Lydia'</span>;
  let age <span class="hljs-operator">=</span> <span class="hljs-number">21</span>;
}

sayHi();
</code></pre><ol>
<li>Lydia and undefined</li>
<li>Lydia and ReferenceError</li>
<li>ReferenceError and 21</li>
<li>undefined and ReferenceError</li>
</ol>
<p>Write the answer in the comment.</p>
<p>If you like then buy me the first coffee ever thanks in advance</p>
<p><a target="_blank" href="https://www.buymeacoffee.com/yashypsoft"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" /></a></p>
<p>if you found this helpful give me a like and comment. If you have any questions ping me on <a target="_blank" href="https://twitter.com/yashypsoft">yashypsoft</a></p>
<p>Keep Learning :)
Happy coding :)</p>
]]></content:encoded></item></channel></rss>