Variables - JavaScript Basics - Source Code & Projects

Variables are the packages for storing the values. Lets take an example, suppose a,b,c are variables :

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p> (a, b & c are variables!!) </p>
<p id="ex"></p>

<script>
var a = 10;
var b = 20;
var c = a + b;
document.getElementById("ex").innerHTML =
"Value Of C is = " + c;
</script>

</body>
</html>

Output :

JS Identifiers

With unique names all the JS variables should be identified. And these Unique names are known as Identifiers, it can be short name (like a and b) or more descriptive names (age, sum, totalVolume).

Reserved words can’t be used as names.
Names can contain digits, letters, dollar signs, and underscore.
Names must begin with a letter
Names are case sensitive (a & A are different variables)
Names can also begin with( $ ) and ( _ )

Data Types

JS handles many types of data, for now lets just think of strings & numbers. Inside double or single quotation (” ” or ‘ ‘ ) Strings are written and numbers are written without quotation. If numbers are kept in a quotation mark then it will be read as a Text!!

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p>Strings are written inside Quotation sign & Numbers are written without it!</p>
<p id="ex"></p>

<script>
var pi = 2.22;
var person = "Code Projects";
var answer = 'Projects, Tutorials & More. . ';

document.getElementById("ex").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>

</body>
</html>

Output :

Creating Variables

You can simply create a variable with var keyword.

var Name;

It has no value; its undefined. ( = ) sign is used to allow value to variable.

var Name = "Johnny";

Name = "Johnny";

Now Let’s take an example :

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p>Create a variable and then put the value!</p>
<p id="ex"></p>

<script>
var Name = "Johnny";
document.getElementById("ex").innerHTML = Name;
</script>

</body>
</html>

Output :

Many Variables in One Statement

You can simply create many variables in one statement.

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p>Create many variables in one statement!</p>
<p id="ex"></p>

<script>
var person = "Johnny", bikeName = "Yamaha", price = 300000;
document.getElementById("ex").innerHTML = bikeName;
</script>

</body>
</html>

Output :

Undefined Value

Variable created without a value will have undefined value. Lets take an example of variable bikeName which will have undefined value!

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p>Variables created without value will have undefined value!</p>
<p id="ex"></p>

<script>
var bikeName;
document.getElementById("ex").innerHTML = bikeName;
</script>

</body>
</html>

Output :

Re-Creating Variables

You will not lose its value if you are re-creating same variable!

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p>Values wont erase if you are recreating same variable</p>
<p id="ex"></p>

<script>
var bikeName = "Yamaha";
var bikeName;
document.getElementById("ex").innerHTML = bikeName;
</script>

</body>
</html>

Output :

Arithmetic

Using operators like ( = ) and ( + ) you can perform arithmetic operations here:

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p>Adding 50 + 12 + 22 </p>
<p id="ex"></p>

<script>
var a = 50 + 12 + 22;
document.getElementById("ex").innerHTML = a;
</script>

</body>
</html>

Output :

To Add Strings :

<!DOCTYPE html>
<html>
<body>

<h1>JS Variables</h1>
<p>Adding Code + Projects </p>
<p id="ex"></p>

<script>
var a = "Code" + " " + "Projects";
document.getElementById("ex").innerHTML = a;
</script>

</body>
</html>

Output :

Trending now