Welcome to the Javascript Variables Homepage, Guest!


Javascript | Variables are the containers for storing values




Variables

Javascript variables are essentially containers that store the data values you present them with. The variables are similar to the concepts of algebraic equations; some variable equals something. In math, the variable will equal something that needs to be worked out, more variables, or a number value. In programming, the languages use variables to hold the specific values we wish to represent using that variable name. The variables are used in expressions; myBirthday = 10/16/1985.

var x = 10;
var y = 16;
var z = x + "/" + y;

// x stores the value of 10, and y stores 16, z will be a string concatenated together using the two variables If z is printed out to the screen: 10/16

// We could also use the variables to do math var xyz = x + (2 * y); xyz would print out to screen: 42



var weight = 180;
var name = "James";
var person = name + " " + weight;

// This will concatenate the two together
if person was printed to screen: James 180




Identifiers

Javascript identifiers are unique names used to identify Javascript variables. All JS variables must be identified by a specific unique name; an identifier. Identifiers can be shorter names, x or y, but usually more descriptive names should be used, myAge or myName. There is a list of standard rules for creating descriptive names for identifiers:

  • Identifiers can use letters, numbers, digits, underscores, or dollar signs
  • The identifier must begin with a letter
  • Identifiers are case sensitive; myAge and MyAge are two different identifiers
  • Identifiers will accept keywords as names




Assignment Operator

Javascript utilizes the equals sign to make an assignment. The equals sign stands for an assignment operator, and definitely not an equal to assignment. In algebra, the equals sign means both sides of the equation must be equal. In Javascript, the equals sign represents what data the variable will hold after reading the line of code.

In algebra:

x = 10 + 5 makes perfect sense, but x = x+5 does not because one side cannot equal 5 more than itself.

In Javascript:

x = 10 + 5 makes sense, and x = x + 5 makes perfect sense. The second just says, x will hold the value of x + 5 after this line of code is read and executed.




Data Types

Javascript can handle many different types of data types, but for now this tutorial will mainly focus on just Strings and numbers. Text values are referred to as strings. Strings are written inside of double or single quotation marks, while numbers are written without any kind of quotation. If a number is placed within a set of quotation marks, the number will be represented as a string variable.

var pi = 3.14;

Ouptut pi: 3.14

var name = "James Patterson";

Ouptut name: James Patterson

var namePi = "Pi: 3.14";

Ouptut namePi: Pi: 3.14




Steps

Declaring a variable in Javascript is creating a variable. You will declare a variable every time you use the var keyword; var myName. After the declaration, the variable is null or undefined unless you assign a value to the variable being declared; var myName = "James". The value can be assigned while the variable is being delcared, or you can wait to assign the variable after the declaration. Some programmers will declare all of their variables, and later on in the code they will assign the values to their variables. I like to assign values as soon as I know what they will be. It is a good programming practice to actually declare all of the variables at the beginning of a script.

You can declare the variable, and then assign a value for the undefined variable:

var myName;

myName = "James";

You can also kill two birds with one stone by declaring and assigning:

var myName = "James";




<!DOCTYPE html>
<html>
  <body>

    <h2>JavaScript Variables</h2>

    <p>We are going to declare the variable and then assign values :</p>

    <p id="tutorial"></p>

    <script>
      var myName;
      myName = "James Patterson";
      document.getElementById("tutorial").innerHTML = myName;
    </script>

  </body>
</html>




<!DOCTYPE html>
<html>
  <body>

    <h2>JavaScript Variables</h2>

    <p>We are going to declare the variable and assign values instantly:</p>

    <p id="tutorial"></p>

    <script>
      var myName = "James Patterson";
      document.getElementById("tutorial").innerHTML = myName;
    </script>

  </body>
</html>




Multiple variables

You can declare a lot of variables in just one statement of code. The keyword var will be the start, and then just separate the variables using a comma with a semicolon on the end.

var myName = "James", myBDay = "10/16/1985", myAge = 30;

You can also use multiple lines to make one declaration if you choose to do so:

var myName = "James Patterson",

myAge = 30,

myBDay = "10/16/1985";




Value is undefined

When a programmer declares a new variable, but does not give that variable an initial value. The variable will be marked as undefined by Javascript.

var userName;

The variable userName will hold the value of the user's name, but we don't know the user's name yet. The value will more than likely be assigned to the user's name when the user gives his/her name as input.

Re-Declaration

If you accidentally redeclare a variable inside of your code, do not worry too much, but you do need to ensure you fix the issue. There really should be no reason to redeclare your variable after declaration, or at least none that I can think of. In Javascript, the web browser will not replace the value already stored inside the variable, but it will essentially reload the variable. So..

var userName = "Billy Joe";

var userName;

The redeclaration of userName will not effect the value of userName, and userName will still output Billy Joe when called.




Arithmetic and Concatenation

Arithmetic can be done inside of Javascript code very easily.

var sumTotal = 5 + 2 + 17;

The output for sumTotal will be 24

var weight = 100 + 81;

The output for weight will be 181


Concatenation is the addition of two strings together, or the joining of two separate data types together to be displayed by the output as a string. Quotation marks around a number will yield the number being treated as a string data type. The string will not interact with numbers the way other numbers will, remember that.

var sumTotal = "The sum total is: " + sum + total;

The output for sumTotal will be -> The sum total is: sum + total

var myFirstName = "James";

var myLastName = "Patterson";

var myName = myFirst Name + myLastName;

The output for myName: James Patterson




Wrap Up

<!DOCTYPE html>
<html>
  <body>

    <h2>JavaScript Variables</h2>

    <p>
        Declare the variable then assign a value,
        and declare a variable while assigning a value
    </p>

    <p id="tutorial">
        
        <p id="tutorial2"></p>
        
    </p>

    <script>
        var greeting;
        greeting = "Hello, my name is ";

        var myName = "James Patterson";

        document.getElementById("tutorial").innerHTML = greeting;
        document.getElementById("tutorial2").innerHTML = myName;
    </script>

  </body>
</html>




Next, we will take a look at Operators and their function.

Just follow the buttons to continue the tutorial, Guest