Variables in JavaScript

Chances are that this is not the first time you come across the term 'variables'. In Mathematics, a variable is an alphabet used to represent an unknown number.

For instance, if the square of an unknown number is 81, we could represent the number by x and evaluate it afterwards:

x^2 = 81

x = 9

In research, variables are attributes that can take on different values, such as age, eye colour, address, etc. You can assign thea1q values of attributes of other subjects to a variable.

For instance, the height and weight of subject A are 1.5 m and 130 lbs respectively.

In programming, however, a variable is like a container used to store a value at a point in time. These values are bound to change as you require, hence, the term 'variable'.

For example, in a moment, x could be initialized to a specific value :

x = 5

The next moment, the value could change with or without reference to the old value:

x = 2

In the above expression, 2 becomes the new value of x and the old value is discarded, and no reference is made to the old value.

x = x + 7

In this expression, the new value of x is the old value (2) plus 7. This new value referred to the old value.

What happened was that we assigned 2 to x in the first expression. Then circumstances changed and it required the previous value of x to be incremented by 7.

The values of variables can be changed and reassigned as necessary.

Data and Variables

Data is anything that has meaning to the computer.

Remember: A computer is an electronic device, that accepts data as input, processes the data and outputs data as information.

The types of data in Javascript include number, string, boolean, symbol, bigint, object, null and undefined.

Each of these data can be manipulated and used depending on the requirements of your program.

A program is typically made of data of different kinds.

Variables are used to store data. Rather than repeat the values of the data each time you need to use it, you could simply use the variable names instead. It also gives some context or meaning to the purpose of the data.

Let's write some basic code that demonstrates how a variable name can give context to the purpose of the data and how values can be changed every time.

Let's say our cat, Kit has nine lives.

let numberOfLives = 9

But cats lose 1 life every time they drink soda, 2 lives every time they fall from the top of a building and 3 lives every time they go missing for days without an explanation.

And Kit has had a can of soda.

numberOfLives = numberOfLives - 1

This would mean that she has 8 (9-1) lives left.

And while the owner was on vacation, she ran away and came back after four days.

numberOfLives (which was eight by this time) would reduce by three.

numberOfLives = numberOfLives - 3

Kit, at this point, has 5 (8-3) lives.

And soon after, she fell off the top of a building.

numberOfLives = numberOfLives - 2

So, our cat ends up with 3 (5-2) lives.

That is a short demonstration of how variables change in JavaScript.

How to declare a variable

You declare a variable by using the keyword let

Here's how the syntax goes:

let numberOfLives;

let is a keyword, it lets the computer know that what comes next is a variable you're trying to store. This keyword is used to declare a variable of any data type.

You may be wondering if you need to use different keywords for different data types. In primitive languages like C, you must specify the data type you intend to store. For integers, you use int followed by the variable name, float for floats, and char for characters.

numberOfLives is the variable name that you chose. It's mostly left to your discretion but specific rules and conventions guide naming your variables.

The semicolon ; is optional, your code would still work without it (in most cases).

You can also declare multiple variables on the same line. The trick is to separate them with a comma.

let numberOfLives, myPetName, age;

You might have seen the keyword var being used, like so:

var numberOfLives;

But we'll stick with let, and you should too. Here's why.

Once we declare a variable, the computer knows it is expecting a value. If you don't assign any value to it, the computer will assign undefined to it, meaning that the user hasn't assigned a value.

The Assignment Operator =

You probably already know this sign as the equal-to or equality sign: used to equate a value to another.

But in JavaScript, it's called the assignment operator and it is used to set a value to a variable.

let age, myPetName; --> Declaring two variables

age = 27; --> Assigning a value to age variable

myPetName = 'Bingo'; --> Assigning a value to myPetNamevariable

The operator = assign 27 to age and Bingo to myPetName

This means that you can now use the variable names where you intend to use the values. The names hitherto represent the values.

Initializing a Variable

A variable is initialized when it's assigned a value.

let age;

age = 27;

27 has been assigned to age, hence the age variable has been initialized.

The value of one variable can also be assigned to another variable.

let myAge, friendAge;

myAge = 27;

friendAge = myAge;

You're assigning the value of myAge to friendAge. friendAge now has a value of 27.

If instead, you reverse the order, like so:

myAge = friendAge;

This would mean that you're assigning friendAge (which is currently undefined) to myAge. This would discard 27 previously assigned to myAge and give it a new value of undefined, which is technically no value.

So be conscious of the order of assignment of a variable to another variable.

You could also initialize multiple variables to a value in a single line

let myAge = friendAge = 27;

Note that even though the following expression is valid in mathematics, it would result in an error in JS

let myAge = 27 = friendAge;

You can also declare and initialize a variable at the same time

let myAge = 27;

Should you declare and initialize on the same line?

If you already know the value of the variable while declaring it, by all means, use a one-liner. But in some circumstances, you don't. In that case, you can just declare a variable and update it as you get its values.

Summary

The main function of a computer is to process data. To feed the computer data, they're stored in variables. Values of data stored in variables can change as required. A variable is to be declared before it can be used. Initializing a variable means assigning it a value with the assignment operator =.