JavaScript Variables
Basics
var myNum = 5; // Declare 'myNum' as a variable with a value 5
myNum = 8; // Change its value
console.log( myNum ); // Access it (this will display 8)
console.log( myNum + 4 ); // Use the variable in math (this will display 12)
- You can also declare it and give it a value in separate lines (e.g. var y; and y = 3;)
- Variable names can contain letters (uppercase or lowercase), numbers, $ symbols, and underscores.
- Variable names are case sensitive, so "mynum" is not the same as "myNum".
- Variable names cannot match special JavaScript keywords (such as "var", "if", "false", ...)
- Unlike with Java, you don't have to indicate the variable type.
Data Types
var gpa = 3; // A number can have a decimal or not
var prodId = 9729482749372857n; // A bigint stores a large whole number (add n)
var myNote = "Hi, I'm back"; // A string stores text between quotes
var isDone = true; // A boolean can store true or false
var myVar; // If given no value, it is undefined type
...
- Although you don't have to state the variable type, it is implied by the assigned value.
- A bigint type (Big Integer) should be used for values 2^53 or greater (positive or negative). Don't forget to add 'n' at the end.
- Booleans can also be assigned a boolean equation (e.g. x < 12), not only true or false.
- Variable types behave differently in mathematical operations, (2+2=4, but "2" + 2 is "22").
- See also object, null, and symbol types.
Changing data types (conversion)
var myNum = 22;
var asStr_1 = String(myNum); // Becomes "22"
var asBool_1 = Boolean(myNum); // Becomes true (would be false if 0)
var asBigInt_1 = BigInt(myNum); // Becomes 22n
var myStr = "45";
var asNum = Number(myStr); // Becomes 45
var asBool = Boolean(myStr); // Becomes true (false if empty "")
var asBigInt = BigInt(myStr); // Becomes 45n
var myBool = true;
var asNum = Number(myBool); // Becomes 1 (would be 0 if false)
var asStr = Boolean(myBool); // Becomes "true"
var asBigInt = BigInt(myBool); // Becomes 1n
...
- Changing type is useful for ensuring that the values are treated in the expected way for certain actions (e.g. math).
- For example, a number cannot be added to a bigint, you must first convert the number to a bigint.
- If you convert a string of letters into a number or bigint, it will get a value of NaN (not a number).
Adding to variable values
var myNum = 4;
myNum = myNum + 3; // A variable can access its current value when assigning
myNum += 3; // += means "= itself plus"; you can also use *=, /=, etc.
myNum++; // ++ means add 1, -- means subtract 1
var myString = "Hi";
myString += ", I'm Bob"; // += works on strings too
var str1 = "She has " + 3; // Append numbers to strings
var str2 = "I have " + myNum; // Append variables
var str3 = "He has " + (myNum + 3); // Append results of math
- When you add two strings together, it just combines them as one string (e.g "Hi, I'm Bob").
- Remember to use parentheses when adding math in strings, after the calculation it will treat the number like a string.
Challenge
Create a variable called name, and a variable called age. Display the following, replacing the values in angle brackets with the variable values: "Joe is <age + 5> years old, which is about five years older than <name>".
Completed