JavaScript Variables

What are variables?

Do you remember learning about variables back in algebra one?

A variable in algebra is a letter used to represent a number, and to be used in a expression.

i = 2
i + 3 = 5

In the example above, we used the variable i  to represent the number 2.

We can use i to calculate the total to be 5.

The same goes for variables in programming. You may declare variables to allow you to reference the same piece of information multiple times.

var price = 5;
var items = 3;
var total = price * items;

console.log(totals) // 15

Declaring variables

To declare a variable in JavaScript, you must use the keyword var first followed up with the variable name.

var x = 5;

In the example above, x is the variable identifier, and it has a value of 5.

In algebra, variables are never consistent or have a fixed pattern. It's liable to change. This also applies to variables in JavaScript.

var foo = 2;

console.log(foo); // Output is 2

foo = 9999;

console.log(foo); // Output is  9999

Look at the code above, I declared a variable called foo and assigned it a value of 2. I then printed the , foo and it showed me the correct value, 2.

After the first print, I than changed the value of foo to 9999. I then printed foo again, and it showed me the new value I gave it, 9999.

Another thing to note is that I didn't re-type the keyword var again. Once you declare a variable once, you don't need to do it again.

JavaScript gives you 3 different options to declare a variable. I've already showed you aboutvar, but you also have let, andconst.

Methods to delcare JavaScript variables

var has been available since 1995, but with the release of ES6, let and const are now available to declare variables.

var foo = 2;
let bar = 2;
const age = 29;

console.log(foo); // 2
console.log(bar); // 2
console.log(age); // 29

Each one of these special keywords allow you to declare a variable.

You might be asking yourself, "what's the difference between all 3?"

Or "Which one should I use?"

var

// Functional scope
var price = 45;
price = 100;
price = 0;

var was the original keyword to declare variables in JavaScript, and it's not one to leave anytime soon.

var allows you to change the value at anytime in program.

var is also functional scope. This topic will be discussed in further details later in this guide.

let

// Block scoped
let price = 10;
price = -100;

let is similar to var with the exception that block scoped and NOT functional scoped.

Use let isntead of var.

const

const price = 5;

// JS application will break!
price = 10;

const is similar to let but with the exception that it's a fix pattern through the entire application.

If you try to modify the value, it will break the entire JavaScript application. const also stands for constant.

// Example with 'var'
var price1WithVar = 15;
console.log(price1WithVar); // 15
price1WithVar = 0;
console.log(price1WithVar) // 0. It's free!

// Example with 'let'
let price2WithLet = 45;
console.log(price2WithLet); // 45
price2WithLet = 10;
console.log(price2WithLet); // 10

// Example with 'const'
// Variable value may NOT change
const age = 29;
console.log(age); // 29

age = 40; // Error. JS breaks.

Try to use const as much as possible.

Variable naming patterns

Variable names are very important in programming, because it will help with readability, and understanding of your code. This will help future you, and your team members.

My rule of thumb is to always make your variable names to be pronouns.

// Bad: Never start with a number or special character.
const 1foo = 2;

// Bad: Don't do arbitrary letters
const x = 45;

// Good: 
const saraAge = 25;

// Good
const hisAge = 13;

Pick one of following patterns, and stick with it until the end of the program. Consistency is key to good code.

// Camel case
const momHeightInInches = 65;

// UpperCamel case
const DadHeightInInches = 69;

// Snake case
const my_height_in_inches = 67;

General JavaScript variable rules

• All variables must be unique names
• Pick descriptive names
• Variables may only contain letters, digits, underscores, and dollar signs
• Variables must begin with a letter, $, or _
• Variables are case sensitive
• Reserved keywords cannot be used
• Pick a pattern such as camelCase ,UpperCamelCase  or snake_case
• Use const by default, unless a variable needs to be reassigned
• The var keyword should not be used
• Declare you variables as early as possible