JS Variables
Variables are Containers for Storing Data
There are four methods to declare variables in JavaScript:
- Â Â EventuallyÂ
- Â Â Using letÂ
- Â Â Using constÂ
- Â Â Using var
X, Y, and Z are undeclared variables in the first example.
After their first use, they are automatically declared:
Example
x = 5;
y = 6;
z = x + y;
Note
Programming best practices require that variables should always be declared before been used.
Â
Using the examples, one may infer:
- x contains the value five.
- y contains the number 6.
- Z keeps the number 11 in storage.
Example using var
var x = 5;
var y = 6;
var z = x + y;
Note
From 1995 to 2015, every JavaScript code contained the var keyword.
2015 saw the addition of the let and const keywords to JavaScript.
Only code written for older browsers should use the var keyword.
Example using let
let x = 5;
let y = 6;
let z = x + y;
Example using const
const x = 5;
const y = 6;
const z = x + y;
Mixed Example
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
price1 and price2 are two variables that are declared using the const keyword.
These are unchangeable constant values.
The let keyword is used to declare the variable total.
One can alter the value total.
When to Use var, let, or const?
- Declare variables always
- If a value shouldn’t be altered, always use const.
- If the type (Arrays and Objects) should not be altered, then always use const.
- If using const isn’t an option, use let.
- If you HAVE to support older browsers, then use var.
Just Like Algebra
Similar to arithmetic values are stored in variables:
let x = 5;
let y = 6;
Expressions employ variables, much like in algebra:
let z = x + y;
You can infer that the total is 11 given the example above.
Note
Values are stored in containers called variables.
JavaScript Identifiers
Every JavaScript variable needs to have a unique name.
We speak to these different names as identifiers.
Identifiers can be more descriptive names like age, sum, or total Volume, or they can be simple names like x and y.
The following are the typical guidelines for creating variable names (unique identifiers):
- Letters, numbers, dollar signs, and underscores can all be found in names.
- All names have to start with a letter.
- $ and _ are other possible beginnings for names, but we won’t use them in this tutorial.
- Case matters when it comes to names (y and Y are separate variables).
- It is not permitted to apply reserved words, such as JavaScript keywords, as names.
Note
Case matters when using JavaScript identification documents.
The Assignment Operator
The equal symbol (=) is not a “equal to” operator in JavaScript; actually, it is a “assignment” operator.
This isn’t algebra. In algebra, the following makes no sense:
x = x + 5
However, it makes perfect sense in JavaScript, where it sets x to the value of x + 5.
(It computes x + 5 and enters the result into x. Five more is added to the value of x.)
Note
In JavaScript, the “equal to” function is presented as ==.
JavaScript Data Types
Variables in JavaScript can store text values like “John Doe” and integers like 100.
Text values are usually referred to as text strings in programming.
While JavaScript can handle an array of data types, for the time being only consider strings and numbers.
Single or double quotations are used to divide up strings. Quotes are not used when writing numbers.
A number will be interpreted as a text string if it is contained in quotation marks.
Example
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
Declaring a JavaScript Variable
In JavaScript, “declaring” a variable means the process of creating one.
A JavaScript variable is declared using both the let or var keyword:
var carName;
or
let carName;
The variable is declared, but it is technically undefined and has no value.
Use the equal symbol to give the assign a value:
carName = "Volvo";
In addition, when you declare the variable, you can give it a value:
let carName = "Volvo";
We construct a variable named carName and give it the value “Volvo” in the example below.
The value is then “output” into an HTML paragraph with the id=”demo”:
Example
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Note
Declaring all variables at the start of the code is good programming practice.
One Statement, Many Variables
A lot of variables can be declared in a single sentence.
Let is used to begin the statement, and comma are used to divide the variables:
Example
let person = "John Doe", carName = "Volvo", price = 200;
A declaration may take up a few lines.
Example
let person = "John Doe",
carName = "Volvo",
price = 200;
Value = undefined
Variables are frequently declared without a value in computer applications. The value may be an input from the user or something that needs to be calculated and delivered later.
The value of a declared variable that has no value is undefined.
After this line is run, the value of the variable carName will be undefined.
Example
let carName;
Re-Declaring JavaScript Variables
A JavaScript variable defined using var stays with its value even if you re-declare it.
Following the execution of these statements, “Volvo” will remain the value of the variable carName:
Example
var carName = "Volvo";
var carName;
Note
A variable written with let or const cannot be re-declared.
This won’t function:
let carName = "Volvo";
let carName;
JavaScript Arithmetic
JavaScript variables allow you to perform mathematical operations using operators like = and +, much like in algebra.
Example
let x = 5 + 2 + 3;
Additional strings may be added, but they will be joined together:
Example
let x = "John" + " " + "Doe";
Example
let x = "5" + 2 + 3;
Note
The remainder of numbers will be viewed as strings and concatenated if you include a number in quotes.
Now try this:
Example
let x = 2 + 3 + "5";
JavaScript Dollar Sign $
Identifiers including $ are acceptable variable names in JavaScript since the dollar symbol works like a letter there:
Example
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
Because it’s not particularly popular, skilled programmers frequently use the dollar symbol as an alias for the main function in a JavaScript library.
For example, the main function $ in the JavaScript library jQuery is used to select HTML items. $(“p”); in jQuery suggests “select all p elements”.
JavaScript Underscore (_)
Underscore is viewed as a letter in JavaScript, resulting in variable names that contain _ are acceptable:
Example
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
