JavaScript Variables and Constants (ECMAScript)

This lesson explain you, How to declare JavaScript variables and constants. What's the different between var keyword and let keyword in JavaScript.

JavaScript var statement

JavaScript var statement to declare a variables that are scoped to the nearest function block. Another word we can say function scope variable.

If you don't assign variable's value at declaration time, JavaScript automatically assigns the undefined value.

You can't use variable before the declaration otherwise gives an error.

Syntax

var variable_name = value;

Parameter

  • var: JavaScript reserved keyword.
  • var_name: Name of the variable.
  • value: Optional, Initial value assign at the time of declaration.

Shorthand style, you can declare a one or more variables in single statement separated by comma.

var var1 = val1, var2 = val2, ..., varN = valN;

In Strict Mode JavaScript, without var keyword you can't declare and initialize, give an error ReferenceError.

<script>
    "use strict";   // strict mode specification 
    var a = "A";
    b = "B";        // give an ReferenceError 
</script>

One or more variables declare and initialize

var a = 0, b = 0;

One or more variables assign same values

var a = b = c = "hello";
var a = "hello";
var b = a;
var c = b;

document.writeln("a : " + a);
document.writeln("b : " + b);
document.writeln("c : " + c);

Run it...   »

Variable override: you can re-assignment the value of the variable.

var a = "A";
if (a){
    document.writeln("variable a: " + a);
}

var a ="AA";
document.writeln("reinitializing a: " + a);

Run it...   »

var in functional scope: The following var statement example, quote variable scope within callme() function scope. you can't access quote variable outside of function,

function callme() {
    var quote = "clever Boy";
    console.log("inside: "+ quote);
}

callme();
console.log("outside: "+ quote);

Run it...   »

var in loops: var variable visible in the for() loop block,

function callme() {
    for( var i = 1; i < 5; i++ ) {
        console.log(i);                          // i visible on here
    };
    console.log("Outside for block:", i);        // i still visible
}

callme();

Run it...   »

var in global scope: Using var keyword to define variable globally. Once you define globally, you can access inside anywhere.

var i = 1;
console.log("start----", i);
    
function callme() {
    for( i = 1; i < 5; i++ ) {
        console.log("looping time----",i);    // i visible on here
    };
    console.log("function end----", i);       // i visible 
}  
 
callme();
console.log("end----", i);                    // i visible

Run it...   »

Browser Compatibility

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Opera
  • Safari

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

JavaScript const statement

JavaScript const statement to declare a constant variable with a value. As per ECMA specification constant variable scope to the nearest enclosing block.

Constant variable can not re declare, and you can not reassign constant a value to a constant variable.

Syntax

const constant_name = value;

Parameter

  • const: JavaScript reserved keyword.
  • constant_name: Name of the constant variable.
  • value: Required, Initializing constant value.

Shorthand style, you can declare a one or more constant in single statement separated by comma.

const con1 = val1, con2 = val2, ..., conN = valN;

Example

<script>
    const a = 10;
    console.log("Constant a: ", a);        // a value 10

    const b;            // weird, const can define without initial value,
    console.log("Constant b: ", b);    // automatic assign 'undefined'
    
    //const a = 20;     // throw TypeError 'a' already been declared

    //var a = 20;       // throw TypeError 'a' already been declared
                        // 'a' is already used as a constant can not declare as a variable

    a = 20;           // Define 'a' variable without var keyword, can't throw error
    console.log("a without var:", a);
    const c = 20;       // Define and initializing 'c' constant variable
    const d = b;        // Define 'd' constant variable, initialize constant 'c'
    console.log("Constant c: ", c);
    console.log("Constant d: ", d);
    
    const obj = {"a": "A", "b": "B"};    // Define and initializing constant object
    console.log("Constant Object:", obj);
    console.log("Constant obj.a:", obj.a);

    //var obj = 10;              // throw TypeError 'obj' already been declared
    obj.a = "AA";                // 'a' key, try to reassign
    console.log("Reassign after Object:", obj);    // Object {a: "AA", b: "B"}
</script>

Run it...   »

Browser Compatibility

  • Google Chrome 20+
  • Mozilla Firefox 13+
  • Internet Explorer 11+
  • Opera 12+
  • Safari 5.1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

All browser partially supported, also fails in value reassignment.