Variables - strings, numbers and booleans

Variables are how a programming language stores information in a computer’s memory. We can think of them as containers for data and once stored there, we can act on and use this data in other parts of our program.

Variables sitting in the computer’s RAM - Random Access Memory

We are going to look at these types of data that JavaScript variables can store:

• undefined
• string
• number
• boolean

Declaring variables

Before we can use variables, we need todeclare (create) them.

Variables are declared with the var keyword. (We will use the const and let variables to declare variables in a later course.)

let pet;

Above we’ve created a variable called pet. We haven’t given pet a value, so it is empty or undefined. If you console log pet it will return a value of undefined.

Giving a variable a value when you declare it is called initialising the variable.

The video below is an introduction to variables.

undefined vs the is not defined error

This video looks at the difference between the (valid) value undefined and the error is not defined.

Strings

Strings are pieces of text. They can range in size from one character like a to a whole book of characters.

They’re enclosed in either single ' or double " quotes. At Noroff we use double quotes for our string variables.

Let’s create our first string variable.

Variable names must start with a lower case letter (a to z), an upper case letter (A to Z), a dollar sign $ or underscore _. We are only going to use lowercase letters to begin our variable names.

To declare a variable we use let, a name of our choice and a value if we are initialising it.

const pet = "dog";

We’ve initialised the variable pet with the string value “dog”. We can say we’ve assigned the value “dog” to pet, and now pet contains the value “dog”.

We can now use that variable in our code:

console.log(pet);

We use camelCase to name variables.

Using this method, the first word of a variable name starts with a lower case letter and subsequent words are joined to the first and begin with an upper case letter:

var loggedIn;
const orderHasShipped;
let lastName;

Variables names cannot include spaces.

Joining strings together

We can join strings together using the + sign. This is called concatenation.

const letters = "a" + "b";

console.log(letters);
// "ab"

Let’s assign those string values to variables and then join them:

let letter1 = "a";
let letter2 = "b";

let letters = letter1 + letter2;

console.log(letters);
// "ab"

Anything inside quotes is a string, even numbers. The variable amount below has a string value.

var amount = "7";

In this video we take a look at string variables.

Selecting HTML elements with JavaScript

Before we look at adding string variables to an HTML page, we need to look at how we can select and modify HTML elements using JavaScript’s document.querySelector function.

Adding string variables to an HTML page

In this video we will add string variables to HTML elements.

Numbers

Numbers in JavaScript can be both integers (whole numbers) and decimals.

var integer = 8;
var decimal = 7.1;

Basic arithmetic operators

We can use the following operators with numbers in JavaScript.

If you try to add a number value to a string version of a number like this:

7 + "7";

you will end up with 77 not 14.

This is because when one of the values is a string value, the + operator joins both values together as if they were both strings. It doesn’t add them together as it would if all values were number values.

You can convert a string version of a number to a proper number using the parseInt and parseFloat functions.

To convert a number without a decimal point use parseInt.

var integer = "7";
var convertedInteger = parseInt(integer);
// 7

To convert a number with a decimal point use parseFloat.

var decimalNumber = "7.9";
var convertedDecimalNumber = parseFloat(decimalNumber);
// 7

The remainder operator (sometimes called the modulus operator) returns the remainder of a division operation:

var remainder = 5 % 2;
console.log(remainder);
// 1

var remainder2 = 4 % 2;
console.log(remainder2);
// 0

This video looks at number variables.

Booleans

Boolean values are either true or false.

var isLoggedIn = true;
var onSpecial = false;

Note that there are no quotes around boolean values.

The variable badBoolean below has a string value, so it’s not a boolean.

var badBoolean = "true";

The variable properBoolean below has a boolean value.

var properBoolean = true;

Checking data types

We can use the typeof operator to check what type of data a variable holds. We can use it with or without brackets.

var colour = "red";

typeof colour;
// "string"

typeof "blue";
// "string"

typeof 14;
// "number"

typeof false;
// "boolean"

We can assign the result of a typeof operation to a variable.

var animal = "elephant";
var typeOfAnimal = typeof animal;
console.log(typeOfAnimal);
// string

The video below is an introduction to the typeof operator.

Lesson Task

There are practice questions in the master branch of this repo.

There are example answers in the answers branch.

Try the exercises before checking the solutions.