Javascript Variables
Javascript Variables
Javascript Variables
var x = 5;
var y = 6;
var z = x + y;
Note
The var keyword was used in all JavaScript code from 1995 to
2015.
The var keyword should only be used in code written for older
browsers.
Example using let
let x = 5;
let y = 6;
let z = x + y;
Mixed Example
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
let x = 5;
let y = 6;
let z = x + y;
From the example above, you can guess that the total is
calculated to be 11.
Note
JavaScript Identifiers
Note
x=x+5
Note
JavaScript variables can hold numbers like 100 and text values
like "John Doe".
JavaScript can handle many types of data, but for now, just
think of numbers and strings.
Example
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
<h1>JavaScript Variables</h1>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
It's a good programming practice to declare all variables at the
beginning of a script.
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
document.getElementById("demo").innerHTML = person;
document.getElementById("demo").innerHTML = price;
</script>
</body>
</html>
A declaration can span multiple lines:
Example
let person = "John Doe",
carName = "Volvo",
price = 200;
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Value = undefined
In computer programs, variables are often declared without a
value. The value can be something that has to be calculated, or
something that will be provided later, like user input.
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:
Example
let carName;
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Note
You cannot re-declare a variable declared with let or const.
This will not work:
let carName = "Volvo";
let carName;
JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript
variables, using operators like = and +:
Example
let x = 5 + 2 + 3;
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
We can also add strings, but strings will be concatenated:
Example
let x = "John" + " " + "Doe";
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Also try this:
Example
let x = "5" + 2 + 3;
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Note
If you put a number in quotes, the rest of the numbers will be
treated as strings, and concatenated.
Now try this:
Example
let x = 2 + 3 + "5";