Declaring variables

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Declaring 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 (0-9, a-z, A-Z, _).
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 primitives (like strings and numbers etc) or objects (like arrays and functions).

= 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 (RHS) of the = sign to the left hand side (LHS) of the = sign.

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 RHS, it must be evaluated before it can be assigned to a variable.

Note: 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 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. You’ll understand why in a later lesson when we talk about scopes in JavaScript.

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)

Use const over let. No more var

I recommend using const over let as much as you can. Don’t use var anymore; there’s no need for it.

Understanding whether you should use const or let is more of an advanced topic.

When you’re starting out, using let is simpler than using const. But as you progress, you will want to refrain from re-assigning variables. So you’ll prefer const over let.

But why do you want to refrain from re-assigning variables? We’ll cover this topic in the Best Practices module.

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!
• Use 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.