Understanding Variables

If you have 4 apples and you buy 27 more, how many apples do you have? Take a second and write your answer in your text editor.

What’s your answer?

// This?
31

// Or this?
4 + 27

Both answers are right, but the second method is better, because you’re offloading the calculation to JavaScript — you’re teaching it how to arrive at the answer.

But there’s still one problem with the code.

If you look at 4 + 27 without any context from our apple problem, do you know we’re calculating the number of apples you’re currently holding?

Probably not.

A better way is to use Algebra to substitute 4 and 27 with variables. Variables give you the ability to write code that has meaning:

initialApples + applesBought

The process of substituting 4 with a variable called initialApples is called declaring variables.

Declaring Variables

You declare variables with the following syntax:

const variableName = 'value'

There are four parts you’ll want to take note of:

1. The variableName
2. The value
3. The = sign
4. The const keyword

The variableName

variableName is the name of the variable you’re declaring. You can name it anything, as long as it follows these rules:

1. It must be one word
2. It must consist only of letters, numbers or underscores (a-z, A-Z, 0-9, or _).
3. It cannot begin with a number.
4. It cannot be any of these reserved keywords

If you need to use two or more words to name your variable, you should join the words together, but capitalize the first letter of each subsequent word. This weird capitalization is called camel case.

A good example of a camel cased variable is applesToBuy.

The value

The value is what you want the variable to be. It can be a primitive (like a string and a number etc) or an object (like an array or function).

= in JavaScript

= in JavaScript doesn’t work like = in Math. Don’t get confused.

In JavaScript, = means assignment.

When you use =, you set (or assign) the value on the right hand side to the left hand side.

In the following statement, we set the variable initialApples to the number 4.

const initialApples = 4

If you console.log this variable, you can see that initialApples is 4.

console.log(initialApples) // 4

Evaluation before assignment

Variables can only take up one value each. If you have an equation that needs to be evaluated on the right hand side, it must be evaluated before it can be assigned to a variable.

Equations that need to be evaluated are called expressions in JavaScript.

const initialApples = 4
const applesToBuy = 27

// initialApples + applesToBuy is an expression
const totalApples = initialApples + applesToBuy

Here’s what JavaScript does when you write const totalApples = initialApples + applesToBuy:

// Step 1: See the statement
const totalApples = initialApples + applesToBuy

// Step 2: Substitute initialApples and applesToBuy with their respective variables
const totalApples = 4 + 27

// Step 3: Evaluate the expression
const totalApples = 31

This is why you get 31 if you tried to log totalApples.

console.log(totalApples) // 31

The const keyword

const is one of three keywords you can use to declare variables. There are two other keywords – let and var.

All three keywords declare variables, but they’re slightly different from each other.

Const vs Let vs Var

const and let are keywords made available to us in ES6. They are better keywords to create variables than var most of the time. You’ll understand why in a later lesson when we talk about JavaScript scopes.

For now, let’s concentrate on the difference between const and let.

Const vs let

If you declare a variable with const, you cannot assign it with a new value. The following code produces an error:

const applesToBuy = 2

// ERROR! Cannot assign another value a variable declared with const
applesToBuy = 27

If you declare a variable with let, you can assign it with a new value.

let applesToBuy = 2
applesToBuy = 27
console.log(applesToBuy)

You’ll want to prefer const over let because you’ll get certainty that the variable will not get reassigned — which means you have one less thing to keep track with your mind.

Const and Let vs Var

Don’t use var anymore. There’s no need for it unless you need global variables (which is not a good practice for most JavaScript code).

You’ll learn when is the right time to use var in today’s JavaScript context when we cover the scopes.

Wrapping up

Six key points:

• Variables are used to hold a value.
• Variables can hold primitives and objects.
• The = sign means assignment (not equal!)
• Use camelCase to name your variables. Avoid reserved keywords!
• Prefer const over let.
• Don’t use var anymore.

Exercise

1. Declare a string with const.
2. Do these:
   1. Declare a variable with let. Call this variable sum. Set it to 0.
   2. Declare two more variables, num1 and num2. Set these to 300 and 50.
   3. Reassign sum with the sum of num1 and num2.