JavaScript Error

Variables

What Are Variables?

Variables are a type of digital containers which are used for storing data. You can declare and use as many variables as you require. However, since JavaScript variables use up the clients browser memory, you should be mindful of the number of variables your scripts use and how much memory they consume, because it is possible to accidentally use up all or too much of the clients web browser memory, resulting in the clients web browser to freeze up and/or crash. So use variables wisely.

When declaring a variable, you must identify that variable by specify the new variables name (its identifier). The naming rules that you must follow when naming (identifying) JavaScript variables are as followings:

• Variable names (identifiers) are case sensitive, for example one variable named x and one variable named X are treated by JavaScript as two different separate variables since one is lower case and the other is upper case.
• All variable names must be unique, you cannot have two variable names named and cased the same.
• All variable names must begin with a letter, an underscore, or a dollar sign.
• The variable name can contain numbers, as long as the name begins with a letter.
• The variable name cannot contain any blank spaces.
• The only special characters allowed in a variables identifier name is the underscore and the dollar sign.
• Reserved words (such as JavaScript keywords) cannot be used as variable names.

You must declare a variable first before you can use it to store data. There are four ways to declare a variable in JavaScript:

1. Using var : Available since 1995, and is used in all versions of JavaScript and web browsers.
2. Using let : New since 2015, which means the same thing as var but is only able to be used in newer web browsers.
3. Using const : New since 2015, which declares the variable as a constant type. The value of a constant variable cannot be changed after it has been declared and initialized.
4. Leave it Undefined and use nothing : although it is not recommended. It is recommended that you always declare a variable using var, let, or const.

Assignment Operator

The single equal sign ( = ) is an "assignment" operator, not an "equal to" operator. The double equal sign ( == ) is the "equal to" operator.

The single equal sign is used when assigning a value to the declared variable identifier. For example:

• x = x + 1, or
• let person = "Jane Doe"

VAR Example

In the following example, three variables (x, y, and z) are declared, and a value is assigned to x and y. The variable z is declared and its value is set to be the sum of the values of variables x and y at that moment in code:

var x = 1;
var y = 2;
var z = x + y;

LET Example

The let keyword has some conditions and limitations:

• Variables defined with let cannot be redeclared, either intentionally or accidentally. However var will allow you to redeclare the same variable, resulting in the newest declaration to overwrite any older declaration.
• Variables defined with let must be declared before use. Variables defined with var are hoisted to the top and can be initialized at any time, meaning that you can use the variable before it is declared. Even though variables that are defined with let are also hoisted to the top of the block, they are not initialized until their declaration is reached, therefore variables defined with let must be declared first before they can be used.
• Variables defined with let have Block Scope. let and const variables declared inside a { } block cannot be accessed from outside the block.

The following code example performs the same operations as the example above, however it shows how to declare the variables using the let instruction instead of the var instruction:

let x = 1;
let y = 2;
let z = x + y;

CONST Example

The following code example performs the same operations as above, however it shows how to declare the variables using the const instruction instead of the var or let instructions. Note that JavaScript will throw an error if you attempt to reassign a new value to a constant variable after it has been declared, therefore it is recommended that you assign and set the variables value at the time of declaration whenever you declare a variable as a const:

const x = 1;
const y = 2;
const z = x + y;

Undefined Example

The following code example performs the same operations as above, however it shows how to declare the variables undefined and not using a declaration instruction:

x = 1;
y = 2;
z = x + y;

Note: this practice of undefined variable declaration is not advised, and it is recommended that you always declare variables using the var, let, or const keywords.

Additional Examples

When declaring a variable using the var or let instructions, then you can set and reset the value of the variable after it has already been declared. You can also declare the variable as null, and then set its value elsewhere down the code:

var x = 0;
var y = 0;

x = 1;
y = 2;

var z;

z = x + y;

You can also declare variables on the same line, by separating each variable name with a comma:

var x = 2.5, y = 7.25, z = 0;
z = x + y;

Variable types can be of any object type as well, not just number. The following example creates a variable of string type and assigns it a string value:

var tempText;
tempText = "Hello World!";

JavaScript variables can also be of any class type as well, not just numbers or strings. The following example crates a simple class object that represents a CAT, declares a variable of that custom class object type, sets its name and age values, and then uses it to output values to a label:

class Cat {
  constructor(name, birthYear) {
    this.name = name;
    this.birthYear = birthYear;
  }
  age(currentYear) {
    return currentYear - this.birthYear;
  }
}

let todaysDate = new Date();
let thisYear = todaysDate.getFullYear();

let myCat = new Cat("Spot", 2019);
document.getElementById("myLabel").innerHTML= "My cat ( named " + myCat.name + " ) was born in " + myCat.birthYear + " and is now " + myCat.age(thisYear) + " years old.";

The code example above demonstrates how to create a class object, declare and instantiate an instance of that class object type as a variable, pass it values, and return its values.

The code example above was added into this web page and it produces the following results:

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(0)
	(0)