Variables

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Understand what variables are and why we use them
• Declare variables with proper naming conventions
• Work with different data types (strings, numbers, booleans)
• Store and retrieve values in variables
• Use variables in your JavaScript programs

:information_source: What is a Variable? A variable is a memory location to store information. It's like a labeled box where you can keep and retrieve data whenever you need it in your program.

We can imagine a variable is a box that can hold something inside.

Declaring a Variable

How to declare a variable with a name called myVariable:

var myVariable;

As you can see, you write the var and then a name with a spacing in between.

We can give any name to our variable, but there are rules and common practices!

Variable Naming Rules

One. Use Only Alphabets, Numbers, and Limited Special Characters

2. Must Begin with an Alphabet Character

3. Cannot Have Spacing in Names

4. Names are Case-Sensitive

Names are case-sensitive! This means there is a difference between capital and lower-case.

Just like passwords, a capital letter is not the same as a lower-case letter:

• myVariable is not the same as myvariable
• fullName is not the same as fullname
• Age is not the same as age
• myFavColour is not the same as myfavcolour

5. Use camelCase (Best Practice)

It is a common practice to write variable names in lower camel cases (camelCase).

Begin with the first letter in lowercase, then the first capital letter for the next word:

As you can see, it is very hard to read some names without camel casing.

Camel casing will help separate words without using spacings or symbols.

Reserved Words

Certain words cannot be used as variable names because they have other meanings within JavaScript. These are called JavaScript reserved words.

Examples of reserved words you cannot use:

A full list of JavaScript reserved words can be referred here: https://www.w3schools.com/js/js_reserved.asp

Data Types

JavaScript variables can hold many types of data, but in most situations, we'll only use these 3:

• String
• Number
• Boolean

String Data Type

• Text in programming is called a string.
• String is sandwiched by double quotes " " or single quotes ' ':

var exampleString = "This is a string."; // double quotes
var exampleString2 = 'This is also a string!'; //single quotes

• There is no right or wrong in using single or double quotes, but one common practice is to use double quotes " ".
• But when you need to use quotation marks inside a string, you'll need to use the opposite quotes.
• That means strings containing single quotes need to use double quotes, and strings containing double quotes need to use single quotes:

var myString = "It's the best day ever!";
var myString2 = 'Remember to say "please" and "thank you."';

• A variable named myString that holds the string "Hello World!" would look like this:

var myString = "Hello World!";

Number Data Type

• Numbers are usually used in calculations.
• No quotation mark needed when creating a variable with the number data type.
• Creating a variable named myNumber that holds the number 42:

• If you use quotation marks " " for your number, the data type will become string.
• You cannot do calculations with text data. So make sure you declare your number variables without quotation marks.

Boolean Data Type

• A boolean variable can only hold values either true or false.
• It just basically means yes/no or on/off.
• Very helpful when it comes to reasoning, such as checking if some condition is true.
• You can use boolean to track if something has happened:

var isFinished = true;
var isOngoing = false;
var removed = false;
var gameOver = false;
var activated = true;
var lightsOn = true;

Using Variables

You can get a value by using its variable name.

Below is an example when we use console.log() to say our variable value:

You can also do that with alert() to alert our variable value:

Set Variable Value

If you already declared a variable, you can re-assign its value without writing var.

You can just assign the value using the = assignment operator:

You can actually set the value of a variable using the prompt() method.

Here is an example of using the prompt() method with "What is your name?" as the message.

Then you can console.log() the variable to test the result:

var yourName = prompt("What is your name?");
console.log(yourName);

This way, it will ask you to key in the value in the pop-up box for the variable:

If you key in John as the value and press OK.

It will look like this in the browser console (press F12 to open console):