You currently have JavaScript disabled on your browser.

This website uses JavaScript, and This page needs JavaScript activated to work correctly.

Please active JavaScript on your browser and then refresh this page.

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:

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:


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:

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:

test



Final Thoughts

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


grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2022