This lesson explain you, How to declare JavaScript variables and constants. What's the different between var keyword and let keywordin 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);
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);
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);
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();
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 visibleBrowser Compatibility
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>Browser Compatibility
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.
.png)
