JavaScript Variables

❮ Previous Next ❯

Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:

Automatically
Using var
Using let
Using const

In this initial example, there are variables named x, y, and z that have not been declared.

They automatically become defined the first time they are used.

Note : It is considered good programming practice to always declare variables before use.

When you see the examples given, you can make smart guesses.

x stores the value 5
y stores the value 6
z stores the value 11

Note : The word var was commonly used in JavaScript programming from 1995 to 2015.

In 2015, new words like let and const were introduced in JavaScript.

Use the var keyword only in code for older web browsers.

We've defined two things, price1 and price2 using the word const.

These values stay the same and can't be altered.

The word ltotal is made official using the let word.

You can alter the value of ltotal by using the code: total.

When to Use var, let, or const?

1. Always declare variables

2. Use const when you don't want to change the value.

3. Use const when you don't want to change the type (for Arrays and Objects).

4. Only use let if you can't use const

5. Use var only if you really need to support outdated web browsers.

Just Like Algebra

Similar to algebra, variables store values.

let x = 5;
let y = 6;

In algebra, just as we use variables in mathematical expressions, we also employ them.

let z = x + y;

From the example we just looked at, it seems like the total adds up to 11.

Note : Variables are containers for storing values.

JavaScript Identifiers

All JavaScript variables need special names.

These special names are known as identifiers.

Identifiers are words we use to name things in programming. They can be short, like 'x' or 'y', or they can be longer and describe what they represent, like 'age', 'sum', or 'totalVolume'.

The basic guidelines for making names for variables (unique identifiers) are:

Names can have letters, numbers, underscores, and dollar signs.
Names have to start with a letter.
Names can start with symbols like $ and _ (but we won't use them in this lesson).
Names are very specific (small 'y' and big 'Y' are not the same). They are case sensitive.
Certain words, like those used in JavaScript, cannot be used as names.

The Assignment Operator

In JavaScript, the symbol = is used to assign values, not to compare them.

This is not the same as algebra. The following doesn't make sense in algebra:

x = x + 5

In JavaScript, when we say x = x + 5, it means we're taking the current value of x, adding 5 to it, and then storing that new value back into x.

(It adds 5 to the current value of x and then updates the value of x with the result. This effectively increases the value of x by 5.)

Note : The "equal to" operator is written like == in JavaScript.

JavaScript Data Types

JavaScript variables can store numbers such as 100 and words like "John Doe".

In coding, words written down are called text strings.

JavaScript can work with different kinds of information, but let's focus on two main types for now: numbers and strings.

Strings are put inside double or single quotes. Numbers are written without using quotes.

If you enclose a number within quotation marks, it will be recognized as a piece of text.

Declaring a JavaScript Variable

In JavaScript, when you make a variable, it's called "declaring" a variable.

In JavaScript, you create a variable using either the var or let keyword.

var carName;

or:

let carName;

After declaring, the variable doesn't have any value (technically it's undefined).

To set a value for a variable, use the equal sign:

carName = "Volvo";

You can give a value to the variable when you first make it:

let carName = "Volvo";

In this example, we make a variable named carName and give it the value "Volvo".

Afterward, we display the value within an HTML paragraph identified by the "demo" ID:

Note : In programming, it's smart to list all the variables at the start of a script.

One Statement, Many Variables

You can state multiple variables all at once.

To begin, use let at the start of your statement. Then, list the variables with a comma between them:

A statement can be written across many lines.

Value = undefined

In computer programs, variables are often set up without a specific value at first. This value could either be something that needs to be figured out through a calculation or something that will be given later, such as input from the user.

If you don't give a value to a variable when you declare it, it will be undefined.

The word "carName" will be empty after this statement is run: undefined.

Re-Declaring JavaScript Variables

If you declare a JavaScript variable again after already declaring it using var, its value won't be erased.

The word carName will stay as "Volvo" even after these commands are done running:

Note

You can't declare a variable again if it was already declared using let or const.

This will not work:

let carName = "Volvo";
let carName;

JavaScript Arithmetic

Just like in math, you can use JavaScript variables to do basic calculations. You use symbols like = and +: to add or assign values to these variables.

You can also include words, but they will be joined together:

Also try this:

Note If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated.

Now try this:

JavaScript Dollar Sign $

In JavaScript, you can use a dollar sign ($) in variable names because JavaScript sees it as a regular letter, not a special character. So, variable names that include $ are allowed.

In JavaScript, using the dollar sign ($) isn't very usual. However, experienced programmers often use it as a shortcut for the main function in a JavaScript library.

In jQuery, there's a key function called $ that's used to pick out bits of HTML. So, if you see something like $("p"); in jQuery, it means "select all the paragraphs elements on the page.".

JavaScript Underscore (_)

JavaScript sees underscore (_) as a regular letter, so you can use it in variable names. If your variable name has an underscore in it, JavaScript will accept it.

In JavaScript, using the underscore (_) isn't widely done, but many expert programmers choose to use it to represent "private" variables.

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>In this example, x, y, and z are undeclared.</p>
    <p>They are automatically declared when first used.</p>
    <p id="demo"></p>
    <script>
      x = 5;
      y = 6;
      z = x + y;
      document.getElementById("demo").innerHTML = "The value of z is: " + z;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>In this example, x, y, and z are variables.</p>
    <p id="demo"></p>
    <script>
      var x = 5;
      var y = 6;
      var z = x + y;
      document.getElementById("demo").innerHTML = "The value of z is: " + z;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>In this example, x, y, and z are variables.</p>
    <p id="demo"></p>
    <script>
      let x = 5;
      let y = 6;
      let z = x + y;
      document.getElementById("demo").innerHTML = "The value of z is: " + z;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>In this example, x, y, and z are variables.</p>
    <p id="demo"></p>
    <script>
      const x = 5;
      const y = 6;
      const z = x + y;
      document.getElementById("demo").innerHTML = "The value of z is: " + z;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>In this example, price1, price2, and total are variables.</p>
    <p id="demo"></p>
    <script>
      const price1 = 5;
      const price2 = 6;
      let total = price1 + price2;
      document.getElementById("demo").innerHTML = "The total is: " + total;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>Strings are written with quotes.</p>
    <p>Numbers are written without quotes.</p>
    <p id="demo"></p>
    <script>
      const pi = 3.14;
      let person = "John Doe";
      let answer = 'Yes I am!';
      document.getElementById("demo").innerHTML = pi + " <br> " + person + " <br> " + answer;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>Create a variable, assign a value to it, and display it:</p>
    <p id="demo"></p>
    <script>
      let carName = "Volvo";
      document.getElementById("demo").innerHTML = carName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>You can declare many variables in one statement.</p>
    <p id="demo"></p>
    <script>
      let person = "John Doe",
        carName = "Volvo",
        price = 200;
      document.getElementById("demo").innerHTML = carName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>You can declare many variables in one statement.</p>
    <p id="demo"></p>
    <script>
      let person = "John Doe",
        carName = "Volvo",
        price = 200;
      document.getElementById("demo").innerHTML = carName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>A variable without a value has the value of:</p>
    <p id="demo"></p>
    <script>
      let carName;
      document.getElementById("demo").innerHTML = carName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>If you re-declare a JavaScript variable, it will not lose its value.</p>
    <p id="demo"></p>
    <script>
      var carName = "Volvo";
      var carName;
      document.getElementById("demo").innerHTML = carName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>The result of adding 5 + 2 + 3 is:</p>
    <p id="demo"></p>
    <script>
      let x = 5 + 2 + 3;
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>The result of adding "John" + " " + "Doe" is:</p>
    <p id="demo"></p>
    <script>
      let x = "John" + " " + "Doe";
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>The result of adding "5" + 2 + 3 is:</p>
    <p id="demo"></p>
    <script>
      let x = "5" + 2 + 3;
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>The result of adding 2 + 3 + "5" is:</p>
    <p id="demo"></p>
    <script>
      let x = 2 + 3 + "5";
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>The dollar sign is treated as a letter in JavaScript names.</p>
    <p id="demo"></p>
    <script>
      let $$$ = 2;
      let $myMoney = 5;
      document.getElementById("demo").innerHTML = $$$ + $myMoney;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Variables</h1>
    <p>The underscore is treated as a letter in JavaScript names.</p>
    <p id="demo"></p>
    <script>
      let _x = 2;
      let _100 = 5;
      document.getElementById("demo").innerHTML = _x + _100;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics