JS Variables

Overview

Variables are containers used to store data values in JavaScript. They play a crucial role in dynamic programming, allowing you to store, manipulate, and retrieve information.

Declaring Variables

In JavaScript, you can declare variables using three keywords: var, let, and const.

• var: This is the old way of declaring variables. It is still supported, but it is not recommended because it has some quirks that can lead to errors.(Historically used for variable declaration. It has function-level scope.)
• let: This is the modern way of declaring variables. It is more concise and predictable than var.(Introduced in ES6, it provides block-level scope and allows variable reassignment.)
• const: This keyword is used to declare a constant variable. A constant variable cannot be changed once it is assigned a value. (Also introduced in ES6, it provides block-level scope but variables declared with it are immutable.)

        
            var age = 25;       // Old way, less preferred now
let name = "John";   // Variable value can be changed
const PI = 3.14;     // Variable value is constant
        
    

Variable Naming

• Variable names must start with a letter, underscore (_), or dollar sign ($).
• Subsequent characters can include letters, digits, underscores, and dollar signs.
• Variables are case-sensitive (myVariable and MyVariable are different).

        
            let myVar;            // Valid variable name
let _myVariable;      // Valid variable name
let $count;           // Valid variable name
let _my_varible;      // Valid variable name
let my_2_variable;    // Valid variable name
let _my_variable_;    // Valid variable name
let 12my_variable_;   // InValid variable name
let .my_variable_;    // InValid variable name

        
    

Variable Types

JavaScript automatically determines the data type of variables. For example, if you assign a numerical value, JavaScript will recognize it as a number.

        
            let count = 10;          // Integer
let price = 19.99;       // Floating-point number
let name = "Alice";      // String
let isActive = true;     // Boolean
let ages = [25, 30, 35]; // Array
let nullVar = null;      // Null
let undefinedVar;        // Undefined
        
    

Variable Assignment

You can assign values to variables using the assignment operator (=).

        
            let age = 30;
let name = "John";
        
    

Reassigning Variables

• Variables declared with var and let can be reassigned.
• Variables declared with const cannot be reassigned after their initial value.

        
            let score = 100;
document.getElementById("first").innerHTML = score;

score = 150;   // Reassigning 'score' with 'let'
document.getElementById("second").innerHTML = score;


const pi = 3.14;
pi = 3.14159;  // Error: Cannot reassign 'pi' with 'const'

        
    

Variable Scope

Variables in JavaScript have a scope limited to a specific code block. Variables declared with var have function scope, while those declared with let and const have block scope.

Variables declared outside of any function or code block have global scope. They are accessible from anywhere in the script, including within functions. Global variables exist as long as the web page or script is loaded.

        
            let globalVariable = "I am global";

function printGlobal() {
    console.log(globalVariable); // Accessible inside the function
}
printGlobal()
console.log(globalVariable); // Accessible outside the function
        
    

However, using excessive global variables can lead to potential issues, such as naming conflicts and difficulty in tracking changes.

Variables declared within a function or a code block have local scope. They are only accessible within that function or block. This helps in encapsulating variables and preventing unintended side effects.

        
            function printLocal() {
    let localVariable = "I am local"; // Local variable
    console.log(localVariable); // Accessible within the function
}

printLocal()

console.log(localVariable); // Throws an error - not accessible outside the function
        
    

Local variables are generally preferred because they minimize the risk of variable name clashes and promote better code organization.

Starting from ES6 (ECMAScript 6), variables declared with let and const have block scope, meaning they are limited to the nearest enclosing block, whether it's a function, loop, or conditional statement.

        
            function exampleFunction() {
   if (true) {
      var x = 10; // Function-scoped variable
      let y = 20; // Block-scoped variable
      const z = 30; // Block-scoped variable
   }

   console.log(x); // Outputs 10, x is accessible due to function scope
   console.log(y); // Throws an error, y is not accessible outside the block
   console.log(z); // Throws an error, z is not accessible outside the block
}

exampleFunction();
        
    

Function-level scope, which means it's accessible throughout the entire function in which it's declared.

        
            function exampleFunction() {
   if (true) {
      var x = 10; // Function-scoped variable
      let y = 20; // Block-scoped variable
      const z = 30; // Block-scoped variable
   }

   console.log(x); // Outputs 10, x is accessible due to function scope
   console.log(y); // Throws an error, y is not accessible outside the block
   console.log(z); // Throws an error, z is not accessible outside the block
}

exampleFunction();
        
    

Summary

Variables in JavaScript provide a way to store and manipulate data values. They come in different flavors (var, let, const) and have various scopes and behaviors.