JavaScript variables include variables that hold the data value and can be changed anytime.
- JavaScript uses reserved keyword var to declare a JavaScript variables.
- A variable must have a unique name and value.
- You can assign a value to a variable using equal to (=) operator when you declare it or before using it.
If we didn’t have JavaScript variables available, we’d have to implement a giant code block that checked what the entered name was, and then display the appropriate message for any name. This is obviously really inefficient (the code is a lot bigger, even for only five choices), and it just wouldn’t work, we couldn’t possibly store all possible choices. Variables just make sense and are very necessary for JavaScript.
<!DOCTYPE html>
<html>
<body>
<p id="tacode"></p>
<script>
var a = 6;
var b = 7;
var c = a + b;
document.write("The value of c is: " + c);
</script>
</body>
</html>
Output:
In the above example, we have declared three variables using the var keyword: a, b and c. We have assigned values to variables a and b at the same time when we declared it, whereas variable c is declared but does not hold any value yet, so its value will be ‘undefined’.
JavaScript variables – single line
In JavaScript, multiple variables can also be declared in a single line separated by a comma:
<!DOCTYPE html>
<html>
<body>
<p id="tacode"></p>
<script>
var a = "Sheri", lan = "Python", rate = 1000;
document.getElementById("tacode").innerHTML = lan;
</script>
</body>
</html>
Output:
JavaScript variables without “var” keyword
JavaScript allows variable declaration without var keyword. You must assign a value when you declare a variable without var keyword. It is Not Recommended to declare a variable without var keyword. It can accidentally overwrite an existing global variable. Scope of the variables declared without var keyword become global irrespective of where it is declared. Global variables can be accessed from anywhere on the web page.
JavaScript undefined variables
JavaScript variables are mostly 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.
<!DOCTYPE html>
<html>
<body>
<p id="tacode"></p>
<script>
var Name;
document.getElementById("tacode").innerHTML = Name;
</script>
</body>
</html>
Output:
Rules for naming JavaScript variables
These are the following rules for naming JavaScript variables:
- Other characters shouldn’t be used because they may cause errors or be hard to understand for an international audience.
- Don’t use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.
- Don’t use numbers at the start of variables. This isn’t allowed and causes an error.
- A safe convention to stick to is so-called “lower camel case”, where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We’ve been using this for our variable names in the article so far.
- Make variable names intuitive, so they describe the data they contain. Don’t just use single letters/numbers, or big long phrases.
- Variables are case sensitive — so
myageis a different variable frommyAge. - One last point: you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So, you can’t use words like
var,function,let, andforas variable names. Browsers recognize them as different code items, and so you’ll get errors.