Core JavaScript

Intermediate JavaScript

JavaScript Reference



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 let statement

JavaScript let statement to declare a variable that are scoped to the nearest enclosing block. Another word we can say block scope variable.

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

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

Initially, let statement added in JavaScript 1.7 version and give a stable functionality in JavaScript.

Syntax :

let variable_name = value;

Parameter :

  • let : JavaScript reserved keyword.
  • variable_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.

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

You need to define a script type and JavaScript version:

<script type="application/javascript;version=1.7"> ... </script>

let in functional scope : The following let statement example, variable scope within function,

<script type="application/javascript;version=1.7">
function callme() {
    let quote = "clever Boy";
    console.log("inside: "+ quote);
}

callme();
console.log("outside: "+ quote);
</script>

Run it...   »


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

<script type="application/javascript;version=1.7">    
function callme() {
    for( let i = 1; i < 5; i++ ) {
        console.log(i);                          // i visible on here
    };
    console.log("Outside for block:", i);        // i not defined
}

callme();
</script>

Run it...   »

let variable visible in the if condition block,

<script type="application/javascript;version=1.7">
if (1){
    let i;
    for( i = 1; i < 5; i++ ) {
        console.log(i);    // i visible on here
    };
    console.log(i);        // i visible on here
}    
</script>

Run it...   »


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

<script type="application/javascript;version=1.7">
let 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); 
}  
 
callme();
console.log("end----", i);        			  // i not define
</script>

Run it...   »

Browser Compatibility

  • Google Chrome 19+
  • Mozilla Firefox 2+
  • Internet Explorer 11+
  • Safari 3.2+

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.

Google Chrome 19+ (50% partially supported), only when "Experimental JavaScript features" are enabled

  • In Google Chrome, Address bar type chrome://flags/ : find and Enable Experimental JavaScript features.

Internet Explorer 11+ (80% partially supported) as per IE11 specification.

Opera not support.


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.