Variables
Declaring (Creating) JavaScript Variables. Creating a variable in JavaScript is called "declaring" a variable. You declare a JavaScript variable with the var,let or const keyword:
var carName;
After the declaration, the variable has no value (Technically it has the value of undefined). To assign a value to the variable, use the equal sign:
carName = "Volvo";
You can also assign a value to the variable when you declare it:
var carName = "Volvo";
It's a good programming practice to declare all variables at the beginning of a script.You can declare many variables in one statement. Start the statement with var and separate the variables by comma:
var person = "John Doe", carName = "Volvo", price = 200;
A declaration can span multiple lines:
var person = "John Doe", carName = "Volvo", price = 200;
A variable declared without a value will have the value undefined.
The variable carName will have the value undefined after the execution of this statement:
var carName;
Re-Declaring JavaScript Variables
If you re-declare a JavaScript variable, it will not lose its value.
The variable carName will still have the value "Volvo" after the execution of these statements:
var carName = "Volvo"; var carName;
Automatically Global
If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.
This code example will declare a global variable carName, even if the value is assigned inside a function.
Example
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
Do NOT create global variables unless you intend to.
With JavaScript, the global scope is the complete JavaScript environment. In HTML, the global scope is the window object. All global variables belong to the window object.
Example
var carName = "Volvo";
// code here can use window.carName
The lifetime of a JavaScript variable starts when it is declared. Local variables are deleted when the function is completed. Global variables are deleted when you close the page. Function arguments (parameters) work as local variables inside functions.
Variable scoping
JavaScript Function Scope
In JavaScript there are two types of scope:
- Local scope
- Global scope
JavaScript has function scope: Each function creates a new scope.
Scope determines the accessibility (visibility) of these variables.
Variables defined inside a function are not accessible (visible) from outside the function.
Local JavaScript Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables have Function scope: They can only be accessed from within the function.
// code here can NOT use carName
function myFunction() {
var carName = "Volvo";
// code here CAN use carName
}
ES2015 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope variables (and constants) in JavaScript.
Before ES2015, JavaScript had only two types of scope: Global Scope and Function Scope.
JavaScript Block Scope
Variables declared with the var keyword can not have Block Scope.
Variables declared inside a block {} can be accessed from outside the block.
{
var x = 2;
}
// x CAN be used here
Variables declared with the let keyword can have Block Scope.
Variables declared inside a block {} can not be accessed from outside the block:
{
let x = 2;
}
// x can NOT be used here
Redeclaring Variables
Redeclaring a variable using the var keyword can impose problems.
Redeclaring a variable inside a block will also redeclare the variable outside the block:
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
Redeclaring a variable using the let keyword can solve this problem.
Redeclaring a variable inside a block will not redeclare the variable outside the block:
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Variables defined with const behave like let variables, except they cannot be reassigned.
avaScript const variables must be assigned a value when they are declared.
const PI = 3.141592653589793; PI = 3.14; // This will give an error PI = PI + 10; // This will also give an error
Declaring a variable with const is similar to let when it comes to Block Scope.
The x declared in the block, in this example, is not the same as the x declared outside the block:
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
What is scope chain?
Functions can contain other functions that can contain other functions and so on and they all have their own local scope nested inside their parent scope. This is known as a scope chain.
The container function cannot access variable defined in functions it contain (nested local scope), but those functions can access it's container variables.
Example:
<script type="text/javascript" defer>
function showScope( ) {
var myVar = "local, "; // Declare a local variable
function nestedFunc() { // Function, nestedFunc, is local to showScope
var nestVar="nested local, " // Declare a (nested)local variable
document.write(myVar); // Uses the container local variable
document.write(nestVar); // Uses the (nested)local local variable
}
document.write(myVar); // Uses the local variable
nestedFunc();
// document.write(nestVar); // This will cause an exception
}
// calling the showScope function
showScope(); // prints "local, local, nested local, "
</script>
The Lifetime of JavaScript Variables
The lifetime of a JavaScript variable starts when it is declared.
Local variables are deleted when the function is completed.
In a web browser, global variables are deleted when you close the browser window (or tab), but remain available to new pages loaded into the same window.
JavaScript Hoisting Explained
Within its current scope, regardless of where a variable is declared, it will be, behind the scenes, hoisted to the top. However, only the declaration will be hoisted. If the variable is also initialized, the current value, at the top of the scope, will initially be set to undefined.
Note:Functions are hoisted at the top like variable but not functions expressions
For more details check this articles video
Context vs. Scope
Every function invocation has both a scope and a context associated with it. Fundamentally, scope is function-based while context is object-based. In other words, scope pertains to the variable access of a function when it is invoked and is unique to each invocation. Context is always the value of the 'this' keyword which is a reference to the object that “owns” the currently executing code.
For more details click here....
Boolean
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x); // output is false
var x = -0;
Boolean(x); // returns false
var x = "";
Boolean(x); // empty returns false
var x= " "; // but space return true
var x = 10 / "H";
Boolean(x); // NaN returns false
Conditional (Ternary) Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax variablename = (condition) ? value1:value2 Example var voteable = (age < 18) ? "Too young":"Old enough";