Learn JavaScript

JavaScript Variables

Like any other programming language, JavaScript also has variables. The variables are just used as a container, while in turn if we assign any value to a variable then that value will be stored in this container. In order to use a variable in JavaScript, we first have to declare it. In JavaScript, variables are declared using the keyword var, let, or const.

Example 1

// declaration of multiple variables
<script>
var v1;
var v2;
.
.
.
var vn;
</script>

Example 2

// declaration of multiple variables in a single line
<script>
var v1, var v2, ..., var vn;
</script>

JavaScript Variables Initialization

Assigning a value to a variable is called the variable initialization. Variable initialization can be done in two ways:
(a) At the time of declaration.
(b) Within a code snippet when we require the value of that value.

Example

<script>
var name = "Ravi";
var class;
class = 12;
</script>

Important Notes:

  1. We use the keyword var, let, const for the declaration or initialization of a variable or for both, once in an entire program. that means, we are not allowed to redeclare the same variable again in that program.
  2. Since JavaScript is an untyped programming language, hence the JavaScript variable can hold the value of any data type. In JavaScript we are not required to communicate the JavaScript about the data type of a variable. Since JavaScript takes care it automatically, at the time of execution of the program. Means the data type of a variable changes accordingly during the execution of the program.

Scope of JavaScript Variables

like any other programming languages, JavaScript also defines the scopes for the variables. Before ES6 JavaScript had only two types of scopes Global and Local, but after ES6 JavaScript possesses an additional variable scope that is Block Scope. ES6 introduced two new keywords let and const those are used to define a variable in a block level.


Global Variables: Global variables possess the Global scope, that means a Global variable is visible (accessible) throughout the program.

Example

<html>
<head>
<body>
<h2>JavaScript Variables Global Scope</h2>
<p id="jod"></p>
<script>
var gameName = "PUGM";
myFunc();
function myFunc(){
document.getElementById("jod").innerHTML = "We love to play" + " " + gameName;
}
</script>
</body>
</head>
</html>

Output

JavaScript Variables Global Scope

We love to play PUGM


Local Variables: Local variables possess the local scope, that means a local variable is visible (accessible) within a function or method in which it is defined.

Example

<html>
<head>
<body>
<h2>JavaScript Variables Local Scope</h2>
<p id="jod"></p>
<script>
myFunc();
function myFunc(){
var name = "local variables";
document.getElementById("jod").innerHTML = name;
}
</script>
</body>
</head>
</html>

Output

JavaScript Variables Local Scope

local variables


Note: inside the body of a function, the local variable has the precedence over the global variable with same name.

Example

<html>
<head>
<body>
<h2>JavaScript Precedence of Local Variables</h2>
<p id="jod"></p>
<script>
var name = "Global Variables";
myFunc();
function myFunc(){
var name = "local variables";
document.getElementById("jod").innerHTML = name;
}
</script>
</body>
</head>
</html>

Output

JavaScript Precedence of Local Variables

local variables


Block Variables: The cope of a block variable remains within the block, in which the variable is declared. Once a variable is declared inside a block {}, it can not be accessed from anywhere outside the block.

Example

<html>
<head>
<body>
<h2>JavaScript Understanding Scope of Block Variable</h2>
<p id="jod"></p>
<p id="bs"></p>
<script>
{
var name = "Global Variables";
document.getElementById("bs").innerHTML = name;
}
myFunc();
function myFunc(){
var gameName = "PUBGM";
document.getElementById("jod").innerHTML = gameName;
}
</script>
</body>
</head>
</html>

Output

JavaScript Understanding Scope of Block Variable

PUBGM

Global Variables


Warning: Do not create a global variable, unless you need it badly. Global variables or functions can overwrite the windows variables or functions.


JavaScript Variable Names Rules

Some important rules are depicted to give a name to a variable.

  • JavaScript keywords can not be used as a variable name.
  • Variable names can not begin with a digit.
  • Variable names can start with a letter or underscore symbol.

Note: Since JavaScript is a case sensitive programming language, hence Name, name, and NAME all are treated differently.

Audience

This JavaScript tutorial is designed to help the beginners as well as the professional developers. For better understanding the language of the tutorial is kept simple and easy to understand.

Prerequisites

This tutorial demands to have the basic knowledge of the programming languages such as c or c++, HTML for the better understanding of the JavaScript programming language. The other basic requirement to learn JavaScript through this tutorial is the basic knowledge of computer and information technology so you can easily acquire a better understanding JavaScript programming.

Community Helping

In case you find any kind of error like typing error, spelling mistakes, incorrect grammar, incorrect information or any other mistakes. Please feel free to write to us at: akyadav@etutororg.com.