JavaScript Variables - Global and Local variables
JavaScript Variable - Variables are used to store data, like string of text, numbers, etc. The data or value stored in the variables can be set, updated, and retrieved. In general, variables are symbolic names for values.
A variable can be created by var keyword, whereas the assignment operator = is used to store a value in a variable, Example: var VarName=Value;
Rules for JavaScript Variables
- All JavaScript variables must be given unique names (identifiers).
- All variable's name should only start with a letters, underscore( _ ), or dollar( $ ) sign.
- Digits(0 to 9) can be used but only after first letter of the variable name.Like- a1,a2,b5,etc
- Spaces are not allowed in the variable names. You can use underscore(-) to separate two words instead of using space
Note : Variable names in JavaScript are case sensitive, it means $myvar and $myVar
are two different variables. So be careful while defining variable names.
Tip : Always give meaningful names to your variables. Additionally, for naming the variables that contain multiple words, camelCase is commonly used.
In this convention all word after the first should have uppercase first letters, e.g. myVariableName.
Declaring (Creating) JavaScript Variables
The var keyword is used to declare JavaScript variable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Variable var Keyword </title>
</head>
<body>
<script>
var x = 10;
var y = 20;
var z = x + y;
document.write(z);
</script>
</body>
</html>
Output
JavaScript Variable var Keyword
Note : In JavaScript, if a variable has been declared, but has not been assigned a value explicitly, is automatically assigned the value undefined.
JavaScript Local variable
A JavaScript local variable is the one which can only be accessed inside the function or block in which it is declared. It can not be accessed from outside of that function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Local Variables </title>
</head>
<body>
<h1> JavaScript local Variable </h1>
<p id="demo"></p>
<script>
function Example(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = Example(3, 6);
</script>
</body>
</html>
Output
JavaScript Local Variables
JavaScript Global variable
A global variable is the one which is declared outside the scope of any function and can be accessed and manipulated by any function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Global Variable </title>
</head>
<body>
<script>
var data=10;//Global variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data*5);
}
a();//calling JavaScript function
b();
</script>
</body>
</html>
Output
JavaScript Global Variable Examples
JavaScript let and const Keywords ES6
ES6 introduces two new keywords let and const for declaring variables. The const keyword works exactly the same as let, except that variables declared using const cannot be reassigned value later in the code.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Const Keyword </title>
</head>
<body>
<script>
// Declaring variables
let name = "Kuldeep Bisht";
let age = 11;
let isStudent = true;
// Printing variable values
document.write(name + "<br>");
document.write(age + "<br>");
document.write(isStudent + "<br>");
// Declaring constant
const PI = 3.14;
// Printing constant value
document.write(PI); // 3.14
// Trying to reassign
PI = 10; // error
</script>
<p> Please check out the browser console by pressing the f12 key on the keyboard. </p>
</body>
</html>
Output
JavaScript Const Keyword
Note: Please check out the browser console by pressing the f12 key on the keyboard.
Note : The let and const keywords are not supported in older browsers like IE10. IE11 support them partially.