<p>In this blog we are going to learn basic fundamentals of programming. We are exploring variables and datatypes in javascript.</p> <p>First we try to understand variables. So what are variables.</p> <p><strong>Variables :</strong> Variables are containers that stores and manage some data.</p> <p>There are three ways to declare a variable in javaScript. <code>let</code> , <code>var</code> and <code>const</code> .</p> <p><strong>syntax to declare a variable :</strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">let</span> <span class="nx">variableName</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">variableName</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">variableName</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> </code></pre> </div> <p>You can use <code>let</code> ,<code>var</code> and <code>const</code> according to your use case.</p> <p><strong>What is scope :</strong> Scope defines where a variable can be access in program.</p> <p><strong>Global Scope :</strong> A variable declared outside any function can be access anywhere in the program.</p> <p><strong>Function Scope :</strong> A variable declared inside a function cannot be accessed outside that function.</p> <p><strong>Block Scope :</strong> Block scope was introduced in ES6.<br><br> Variables declared with <code>let</code> and <code>const</code> can only be accessed inside the block <code>{}</code> where they are declared.</p> <p><strong>Example :</strong> A variable declared with <code>let</code> or <code>const</code> inside an <code>if-else</code> statement is accessible only within that block.</p> <p>But variables declared with <code>var</code> ignore block scope boundaries and are scoped to the nearest function.</p> <p><strong>Basic difference between</strong> <code>var</code><strong>,</strong> <code>let</code><strong>, and</strong> <code>const</code> <strong>:</strong></p> <p><strong>var :</strong> <code>var</code> is <strong>function-scoped</strong>.<br><br> It can be <strong>re-declared</strong> and <strong>re-assigned (updated)</strong>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span> <span class="c1">// re-declaration allowed</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// re-assignment allowed</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span> <span class="c1">// 30</span> </code></pre> </div> <p><strong>let :</strong> <code>let</code> is <strong>block-scoped</strong>.<br><br> It can be <strong>re-assigned (updated)</strong>, but <strong>cannot be re-declared</strong> in the same scope.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">let</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="c1">// let y = 20; ❌ Error (cannot re-declare in same scope)</span> <span class="nx">y</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// re-assignment allowed</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">y</span><span class="p">);</span> <span class="c1">// 30</span> </code></pre> </div> <p><strong>const :</strong> <code>const</code> is also <strong>block-scoped</strong>.<br><br> It <strong>cannot be re-declared</strong> and <strong>cannot be re-assigned</strong>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="c1">// const z = 20; ❌ Error (cannot re-declare)</span> <span class="c1">// z = 30; ❌ Error (cannot re-assign)</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">z</span><span class="p">);</span> <span class="c1">// 10</span> </code></pre> </div> <p><strong>Naming Rules (Identifiers) to declare a variable :</strong></p> <p>Variable names must follow these strict rules to be valid:</p> <ul> <li><p>variable names must begin with letter , underscore <code>(_)</code> or dollar <code>($)</code>. Subsequent characters can also include digits.</p></li> <li><p>variables name are case sensitive in javaScript means variable name <code>age</code> and <code>Age</code> are two different variables.</p></li> <li><p>you cannot use reserved words like if-else , for loop and function.</p></li> </ul> <p>Now you understand variables let's dive the datatypes :</p> <p><strong>Data types :</strong> From the name itself, you can understand that a data type means the type of data.</p> <p><strong>JavaScript is a dynamically typed language.</strong><br><br> It means that data types are determined at runtime, not before the execution of the program. unlike many other language we don't need to declare data type first.</p> <p>Lets take an example :<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="mi">12</span> </code></pre> </div> <p>12 is a data it can be age of any person. But what is the type of 12. It is number.<br><br> Here, <code>12</code> is a piece of data. It can represent the age of a person.<br><br> But what is the type of <code>12</code>? It is a number.</p> <p>So, <strong>"number" is the data type of 12.</strong></p> <p>Data types are categorised into two types.</p> <ol> <li><p>Primitive Data Types</p></li> <li><p>Non-Primitive Data Types</p></li> </ol> <p>Data types are categorised according to how it stores in memory and how we can access it.</p> <p><strong>Primitive Data Types :</strong> There are seven primitive data types.</p> <ol> <li> <p><strong>Number :</strong> The <code>Number</code> data type is used to represent both integer and floating-point values.<br><br> Unlike many other languages, JavaScript does not have separate data types like <code>int</code>, <code>float</code>, or <code>double</code>.<br> </p> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">21</span><span class="p">;</span> <span class="c1">// integer</span> <span class="kd">const</span> <span class="nx">price</span> <span class="o">=</span> <span class="mf">99.99</span><span class="p">;</span> <span class="c1">// floating-point</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">age</span><span class="p">);</span> <span class="c1">// "number"</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">price</span><span class="p">);</span> <span class="c1">// "number"</span> </code></pre> </li> <li> <p><strong>String :</strong> A <code>String</code> is used to represent a collection of characters (text data).</p> <p><strong>Immutability:</strong><br><br> Once a string is created, it cannot be changed. Methods like <code>toUpperCase()</code> return a new string instead of modifying the original one.<br> </p> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">john</span><span class="dl">"</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">upperName</span> <span class="o">=</span> <span class="nx">name</span><span class="p">.</span><span class="nf">toUpperCase</span><span class="p">();</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "john" (original remains same)</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">upperName</span><span class="p">);</span> <span class="c1">// "JOHN" (new string)</span> </code></pre> </li> <li><p><strong>Boolean :</strong> The <code>Boolean</code> data type represents only two values: <code>true</code> or <code>false</code>.<br><br><br> These values are case-sensitive and must be written in lowercase.<br><br><br> <code>TRUE</code> or <code>FALSE</code> are not considered valid Boolean values.<br><br> </p></li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">isLoggedIn</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">hasPermission</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">isLoggedIn</span><span class="p">);</span> <span class="c1">// "boolean"</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">hasPermission</span><span class="p">);</span> <span class="c1">// "boolean"</span> </code></pre> </div> <ol> <li> <p><strong>null :</strong> <code>null</code> is used to represent an intentional absence of value (empty).<br><br> It does not mean <code>0</code>; it means that no value is assigned.<br> </p> <pre class="highlight javascript"><code><span class="kd">let</span> <span class="nx">user</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">);</span> <span class="c1">// null</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">user</span><span class="p">);</span> <span class="c1">// "object" (this is a known JavaScript quirk)</span> </code></pre> </li> <li> <p><strong>Undefined :</strong> From the name itself , you can understand it represent the value is not defined. When a variable is declared but not assigned any value. It is undefined.<br> </p> <pre class="highlight javascript"><code><span class="kd">let</span> <span class="nx">name</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// undefined</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">name</span><span class="p">);</span> <span class="c1">// "undefined"</span> </code></pre> </li> <li> <p><strong>BigInt :</strong> <code>BigInt</code> is used to represent very large integers that are beyond the limit of the normal <code>Number</code> type.</p> <p>In JavaScript, the <code>Number</code> type can safely store integers only up to:<br><br> <code>2^53 - 1</code></p> <p>For values larger than this, we use <code>BigInt</code>.<br> </p> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">bigNumber</span> <span class="o">=</span> <span class="mi">1234567890123456789012345678901234567890</span><span class="nx">n</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">bigNumber</span><span class="p">);</span> <span class="c1">// very large number</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">bigNumber</span><span class="p">);</span> <span class="c1">// "bigint"</span> </code></pre> </li> <li> <p><strong>Symbol :</strong> symbol is used to represent unique value.<br><br> It is immutable once created It cannot be changed. It always return a unique value even if the description is same.</p> <p><strong>Non-Enumerable:</strong> When used as a key in an object, Symbols do not show up in standard loops like <code>for...in</code> or methods like <code>Object.keys()</code>.<br> </p> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">sym1</span> <span class="o">=</span> <span class="nc">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">sym2</span> <span class="o">=</span> <span class="nc">Symbol</span><span class="p">(</span><span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">);</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">sym1</span> <span class="o">===</span> <span class="nx">sym2</span><span class="p">);</span> <span class="c1">// false (always unique)</span> </code></pre> </li> </ol> <p><strong>Non-Primitive Data Types :</strong> There are two types of non-primitive data types.</p> <p>Arrays and Objects are non-primitive. They are mutable because they share the reference in the memory. if we change in non-primitive data type it will affect original data.</p> <p><strong>Arrays :</strong> Arrays are collection of multiple data in contiguous order in a single variable.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span> <span class="p">,</span> <span class="mi">2</span> <span class="p">,</span> <span class="mi">3</span> <span class="p">,</span> <span class="mi">4</span><span class="p">]</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">);</span> <span class="c1">// output : [1 , 2 , 3 , 4]</span> </code></pre> </div> <p>Arrays are dynamically sized can grow and shrink its length automatically when you add or remove a value from array.</p> <p>Array can store multiple datatypes.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">multipleData</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span> <span class="p">,</span> <span class="mi">2</span> <span class="p">,</span> <span class="dl">"</span><span class="s2">email</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">};</span> </code></pre> </div> <p>But in javaScript array is actually a type of object.</p> <p>When you check its type using <code>typeof</code>, it returns <code>"object"</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">numbers</span><span class="p">);</span> <span class="c1">// "object"</span> </code></pre> </div> <p><strong>So how to check it is an array :</strong></p> <p>Since <code>typeof()</code> is not reliable for array you can use <code>Array.isArray()</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">arr</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nb">Array</span><span class="p">.</span><span class="nf">isArray</span><span class="p">(</span><span class="nx">arr</span><span class="p">));</span> <span class="c1">// true</span> </code></pre> </div> <p>If return value is true it is an array otherwise it is not an array.</p> <p><strong>Objects :</strong> An <code>Object</code> in JavaScript is used to store data in the form of <strong>key–value pairs</strong>.</p> <p>Each key (also called a property) is associated with a value, which can be of any data type.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">john</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">21</span><span class="p">,</span> <span class="na">isStudent</span><span class="p">:</span> <span class="kc">true</span> <span class="p">};</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// "john"</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span> <span class="c1">// 21</span> </code></pre> </div> <ul> <li><p>Values can be of any type (number, string, array, function, etc.)</p></li> <li><p>You can access values using <strong>dot notation</strong> or <strong>bracket notation</strong></p></li> </ul> <p><strong>Bracket notation Example :</strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">john</span><span class="dl">"</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="mi">21</span> <span class="p">};</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">[</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">]);</span> <span class="c1">// "john"</span> </code></pre> </div> <p><strong>Summary :</strong> In this blog, we explored the fundamentals of JavaScript, starting with variables and their scope. We also understood the concept of dynamic typing and how JavaScript determines data types at runtime.</p> <p>Further, we discussed variables using <code>var</code>, <code>let</code>, and <code>const</code>, along with their differences in scope, re-declaration, and re-assignment. The concept of scope—global, function, and block scope—was explained with simple examples to build a strong foundation.</p> <p>We also explore primitive and non-primitive data types.</p> <p>By the end of this blog, you should have a clear understanding of how JavaScript handles data and variables, which is essential for writing clean and error-free code.</p>