Javascript Variables

Lesson Content

Introduction

It’s time to embark on an exciting journey into the realm of Javascript, and what better way to begin than by exploring the fundamental building blocks of any scripting language: variables. In this lesson, you will learn about Javascript variables and the various ways in which they can be used to store and manipulate data within your code.

Overview

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

- Understand what Variables are
- How Variables can be used
- The Naming rules for Variables
- The different forms of arithemetic we can do in Javascript
- Using Variables with Javascript Arithmetic

Variables

In Javascript and other common programming languages, variables are used everywhere. So what are they? Well, variables are nothing more than storage containers. Let’s understand this with a visual:

So whats happening here? We are assigning the value John to a variable called name. Now, whenever the variable name is called, the value John is what is going to show up since we set name to equal John Here’s another visual to help you understand:

Think of our variable name as a box. Inside of that box, we are putting our value which in this case is John. Now whenever someone calls name, they are really calling John since that’s whats inside of the box.

In Javascript, we can also declare a variable, but not give it any value until later. Take a look:

let name
name = "John"

Here, we are declaring the variable name, but not giving it a value until later. The next line, we are choosing to give it the value John.The code above is really the same thing as let name = "John", except in the example above, we are declaring the variable and setting the value later. Hopefully by now, you understand how variables work. Some nice resources will be linked down in the practice incase you want to go more in-depth!

Now, let’s take a look at let and const, which are keywords we can use to declare variables

Let and Const

let name = "John"
name = "Bob"

console.log(name) // What will this print to the console?

Let’s start by taking a look at the keyword let. let allows us to set a variable equal to a value, and then change it later on as shown in the example above. In line 1, we are declaring the variable name and giving it a value of John. In line 2 however, we are changing the value of name from John to Bob. When we log name in line 4 using console.log(name), you can see that Bob gets printed to the console, not John. Whenever we define a keyword with let, we can always change the value later on.

But what if we wanted to make it so our variable can’t be changed? There may be some instances in your code when you don’t want a variable to be accidently changed. Fortunately, JavaScript gives us the const keyword, which achieves this exact purpose.

We declare variables using const just like we do using let, the only catch is that we can’t change the value later on. Take a look at two examples that demonstrate this:

// Example #1

const name
name = "Bob"

// Lines 3 - 4 cause an error

In the above example, we are declaring a variable name and giving it a value of Bob later on. This will result in an error because whenever variables are declared with const, the value must be initialized at that moment, we can’t declare the value later on. This of course would not be an issue had we used let rather than const.

Take a look at this other example:

// Example #2

const name = "John"
name = "Bob"

// Lines 3 - 4 cause an error

In line 3, we are declaring the variable name and giving it a value of John. In line 4, we are changing the value of name from John to Bob. This results in an error since we are declaring name using const. With const, the variable value can’t be initalized later on.

So why would we want to use const over let? Let’s say you are storing the usernames and passwords of customers on your site. You definitely don’t want to change those variables by accident, so you can declare them using const .

Arithmetic in Javascript

Whether you hate or love math, you are bound to be using it in not only Javascript, but almost any programming language that you work with.

Most of the time though, the math isn’t that complicated! Let’s explore some basic arithmetic that we can do in Javascript:

// Addition in Javascript

console.log(1 + 1) // Logs "2" in console

console.log(5374 + 9165) // Logs "14539" in console

console.log(0.38164 + 1.86) // Logs "2.24164" in console

// Subtraction in Javascript

console.log(15 - 6) // Logs "9" in console

console.log(5374 - 9165) // Shows "-3791" in console

console.log(0.38164 - 1.86) // Shows "-1.41836" in console

It’s as simple as that! Just like in real life, the same rules apply in Javascript. The same goes for division and multiplication:

// Multiplication in Javascript

console.log(15 * 6) // Logs "90" in console

console.log(0.367 * 1) // Logs "0.41104" in console

console.log(2.376 * 2) // Logs "4.752" in console

// Division in Javascript

console.log(640 / 16) // Logs "40" in console

console.log(0.367 / 0.2) // Logs "1.835" in console

console.log(16 / 32) // Logs "0.5" in console

It’s exactly like how we do it in math. Something to note is that the rules of math in Javascript also follow the order of operations. You might know the acronym PEMDAS or BODMAS (depending on where you’re from). Javascript also follows these rules.

So far, we have just been using two numbers, but did you know that we can also use variables in our Javascript arithmetic? Take a look:

let num = 5

console.log(num + 5) // Logs "10" in console
console.log(num - 5) // Logs "0" in console
console.log(num * 5) // Logs "25" in console
console.log(num / 5) // Logs "1" in console

All we are doing here is defining a variable, and then using that variable in mathematical operations. We can also do this with multiple variables if we wanted! Take a look:

let num1 = 5
let num2 = 3
let num3 = 1.5

console.log(num1 + num3) // Logs "6.5" in console
console.log(num1 * num2) // Logs "15" in console
console.log(num3 - num2) // Logs "-1.5" in console
console.log(num2 / num3) // Logs "2" in console

The Modulus (%)

The last thing we need to know when it comes to arithmetic in Javascript is the Modulus operator. The modulus operator is division but with another step. With the modulus operator, we are taking the remainder of two numbers being divided. Take a look below:

let num = 7

console.log(num % 2) // Logs "1" in the console

In mathematics, modulus is an operation that returns the remainder after a number is divided by another number. In this example, when 7 is divided by 2, the remainder is 1, so the modulus of 7 is 1. Let’s take a look at a few more examples:

console.log(3 % 3) // Logs "0" in console
console.log(73 % 5) // Logs "3" in console
console.log(12 % 5) // Logs "2" in console
console.log(2 % 3) // Logs "2" in console

Practice

Let’s practice some basic arithmetic and variable naming in Javacript through these 10 simple exercises! You don’t have to do all of them, but it’s good practice if you would like to play and better you understanding.

1. Create a variable called sum and set it equal to the sum of two numbers
2. Create a const variable called remainder and set it equal to the remainder of a division operation
3. Create two variables, x and y, and assign them each a value of your choice
4. Use the let keyword to create a variable called ‘result‘ and set it equal to the product of the variables x and y
5. Create a variable called difference and set it equal to the difference between x and y
6. Create a variable called quotient and use it to store the quotient of x and y
7. Create a variable called average and set it equal to the average of x and y
8. Create a variable called max and set it equal to the larger of x and y
9. Create a variable called min and set it equal to the smaller of x and y

Hopefully, with these exercises you understand the basics of arithmetic in Javascript and the different ways to name variables. Next lesson, we’ll learn about the different data types in Javascript!

Find an issue/typo/error with our content? Please report it here

Lesson Content