A variable is a named container in the memory, that stores the values. In simple words, we can say that a variable is a container for values in Javascript. The ES6 Variable names are called identifiers.
The rules to keep in mind while naming an identifier.
- An identifier can contain alphabets and numbers but cannot be the keyword names
- It cannot start with a number
- It cannot contain spaces and special characters, except the underscore (_) and the dollar ($) symbol.
Variable initialization: It refers to the process of storing a value in the variable. A variable initialization can be done at any time before its use.
Valid type of Syntax:
var $variable_name1 = value var variablename1 = value var nam$e1 = value var _name$ = value
The below example illustrates the ES6 Variables:
Example:
<!DOCTYPE html><html><head> <script>
var name = "Geeks" // type string(Dynamic Typing)
console.log("The variable is : " + name);
console.log("<br>Variable Type : " + typeof(name))
</script>
</head></html> |
Output:
The variable is : Geeks Variable Type : string
Dynamic Typing: JavaScript supports Dynamic Typing similar to Python, Ruby, Perl, etc. It is a feature where you don’t have to tell JavaScript what type of value the variable holds. It gets triggered and takes care of the variable automatically even if the variable value type gets changed while execution.
Variable Scope in JavaScript ES6:
- Global Scope: A variable that can be accessed from any part of the JavaScript code.
- Local Scope: A variable that can be accessed within a function where it is declared.
Example: This example illustrates the Global and Local Scope:
<!DOCTYPE html><html><head> <script>
var $variable_name12 = 10
// Global variable can be accessed
// from anywhere
function Geeks() {
// This local variable gets its
// own memory allocation even
// though it contains the same
// as the outer.
var $variable_name12 = 100
console.log("<br>Inside Geeks() = "
+ $variable_name12)
}
console.log("Outside Geeks() = "
+ $variable_name12)
Geeks();
</script>
</head></html> |
Output:
Outside Geeks() = 10 Inside Geeks() = 100
The let and const:
- const: The const declaration creates a read-only reference to a value.
Example:
const pi = 3.14 pi = 4.15 // will result in an error!!
In the above, later on, in the code if we try to change the pi value it simply throws an error. Mainly used for mathematical constants. Constants variables are immutable.
- let: This keyword allows the script to restrict access to the variable to the nearest enclosing block. Any variable declared using the let keyword is assigned the block scope. Block scope is a section where the let variable gets a declaration whether it is a block{}, a function{}, or global (script), that section gets restricted to access.
Example:
let n = 100; let n = 300; console.log(n);// Throw an error: Identifier 'n' has already been declared
ES6 and Variable Hoisting: Hoisting allows, the use of the variables before their declaration. The concept of hoisting applies to the variable declaration but not variable initialization.
Example:
<!DOCTYPE html><html><head> <script>
// n gets hoisted to the global scope
n = "Geeks";
function geeks() {
// x gets hoisted to the function scope.
for (var x = 0; x < 5; x++) {
document.write("<br>" + x);
}
console.log("<br>Hoisted variable(in function)"
+ " type x : " + typeof(x));
console.log("<br>Hoisted variable(globally)"
+ " type n : " + typeof(n));
}
// Results undefined
console.log("Hoisted variable(out function)"
+ " type x : " + typeof(x));
console.log("<br>Hoisted variable(globally)"
+ " type n : " + typeof(n));
geeks();
</script>
</head></html> |
Output:
Hoisted variable(out function) type x : undefined Hoisted variable(globally) type n : string 0 1 2 3 4 Hoisted variable(in function) type x : number Hoisted variable(globally) type n : string
Note: It is recommended to always declare variables at the top of their scope, to enable the code to resolve the variable’s scope.