JavaScript Variables

Variables help store information and reference it multiple times.

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 about`var`, but you also have `let`, and`const`.

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.

``````
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

// 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

Do you want more JavaScript articles?

Hey, here at Linguine Code, we want to teach you everything we know about JavaScript. Our only question is, are you in?