Declaring JavaScript variables and data types explained

New tutorials sent to your inbox 💌
moshing doodle
What are variables and data types?
When we have an awesome idea or a problem we want to solve, we're going to have to store values into our app to work with at some point. For example, our goal for the year is to become ramen profitable, but we have no idea how much money we'll need to make to achieve this milestone.

Ramen profitable means making just enough to cover our minimal living expenses. In order to calculate this, we'll need to know a few things:
1. How much money do we spend on bills
2. How much money do we spend on food

The process of storing the above values is called declaring and as the name of the tutorial implies, data types is the type of data you'll be storing into the app. Is it a text? or a number? In our case, the above are all numbers. Let's take a look at how we declare thevariables in code below. A variable is just a container used for storing data values.
Working with numbers
Following on from above, I've went ahead and declared the four variables using the keyword const. The first variable is bills and this stores the amount you've spent on bills. The second variable is food which stores the amount you've spent on food etc.

You can pretty much name the variables anything following thecamel case convention. The name camel case comes from the hump on a camel which represents the capital letter used when joining two words together in a variable e.g. totalExpenditure. This is because:
1. A variable should start with a lowercase letter.
2. A variable cannot contain spaces.
To do: Here are the four variables used to store each spending category. Try editing the values in the code and see the numbers change.
Bills: 200
Food: 100
Pretty cool hey? We've just declared our first variable with the data type number!

You're also probably wondering why everything is inside a function and why there's a return with a funny looking div. This is how we render things onto the screen with React (a library for building user interfaces), so don't worry too much about it for now. Just notice how the variables are being wrapped around in curly braces which will render the value stored inside the variable onto the screen.
Working with words (String)
let's say you also have a co-founder and want to put a name next to the expense. To do this, the data type used to store a word is called a String and we use quotation marks around the value to declare it.
To do: Try replacing the name Sam with your own name.
Name: Sam
Bills: 200
Food: 100
Working with logic (Boolean)
How exciting is it to see your code render onto the screen? I still remember thinking holy sh*t, I'm going to be building apps in no time! Let's crank it up a notch by adding in some simple logic to our calculator. A good example would be to determine if we've reached ramen profitability yet. To do this, we'll need two pieces of information.

1. What our minimum expenses are
2. How much revenue have we made this month

I've gone ahead and declared two new variables to represent this information. The variable minimumExpenses sums the total of the 4 categories. In programming, we can easily add +, subtract -, divide/ and multiply * variables that are numbers together 🙂.

The second variable monthlyRevenue is sadly just a fictional number representing how much money I've made.
Name: Sam
Minimum expenses: 300
Monthly revenue: 2000
In order to know if we are ramen profitable, we'll need to compare whether our monthly revenue is greater than our minimum living expenses. To do this, we can use the data type Booleanto see if a condition is true or false.
Name: Sam
Minimum expenses: 300
Monthly revenue: 2000
Ramen profitable: true
The variable isRamenProfitable does the check using the greather than > operator and returns true or false. It's common convention to prefix a boolean with "is", "has" or "can" to indicate that it will return a boolean value.

A boolean is not a String (word), so we've converted it into one using thetoString()method just to display the results.
To do: Update the condition to check if the monthly revenue is less than the monthly expenses using the operator <. The result should display false.
However, displaying true or false onto the screen is not what we want to see and this is the perfect segue into learning about conditional statements in JavaScript!
Lesson summary
Congrats you've made it to the end of the first lesson on JavaScript variables and data types 🎉

We declared our very first variable and learnt about 3 different data types including Number, String and Boolean.
We learnt about naming our variables in camel case and prefixing Booleans with "is", "has", "can" for better readability.
And even did some simple math to build our calculator!
To do: Next lesson on conditionals
Next tutorial