On the lowest level, a computer program is simply made up of a set of instructions for the computer to execute. As a programmer, the software we create controls what the computer does and exactly how it performs those instructions. Whether it be a simple calculator app or Microsoft Office software, programs are nothing but a collection of encoded instructions we give to the computer to execute.
To create these instructions, we first have to create values that will be used within these instructions. For instance, if I we were to create the calculator app, we'd need to store the values of the numbers we'd want to perform our math equations on.
For any program we create, we need a way to create and store values that we can use throughout the application. These named containers for values are called variables.
To create or declare a variable in JavaScript, we first begin with typing the var keyword. var is followed by the name of the variable that we chose, that will store the value we'll create for it later on.
For instance, if our program needed to store a user’s age, we would declare a variable with the name age and assign it to the value of the user's age, using the equal sign =. In Javascript, this is referred to as the assignment operator, but we'll learn more about operators later on. For now, let's see how to declare a variable and assign it a value! An example is shown below.
//Initializing a variable named 'age'
// Declaring the variable & assigning it the value of 24
var age = 24;Voila! We just initialized our age variable. In case you were wondering, to initialize a variable is just another way of saying that we've assigned the created variable to a value. In this example, we assigned the value of age to be 24. Now, we have a named container for our value that will exist throughout the lifecycle of our program!
More examples of variable declarations and assignments are below:
// Initializing variables that store different types of values
var name = 'Maddy';
var myAddress = '748 Camp St';
var iAmAnAdult = true;
var salary = 65000;You may have noticed a pattern in the variable names above. Did you see how the variable names that contained multiple words didn't include spaces, underscores, and had a capital letter for each word after the first? This is referred to as _Camel Case_, and is the proper way to format variable names in JavaScript. While the lack of camel case won't cause your code to break, the lack of it would have the same effect of writing an essay in comic sans - and nobody wants that. Make sure to always use this format in your programs!
In the examples given above, you can probably see that there are many different types of values we assigned to each of our variables. In Javascript, we can store number values - positive, negative and decimal, string values - which are considered our text or strings of characters - as seen in the name variable, and true or false values - known as booleans.
These different types of values known as Data Types - which basically refers to the types of values we use in our program. There are two major categories for data types - simple and complex. We'll learn more about these in the next sections but for now, let's see some examples of how each of these simple data types are stored as variables:
/* Numbers */
var smallNum = 1;
var bigNum = 1000000000;
var decimal = 1.111111;
var negative = -2;
/* Strings */
var singleQuotes = 'single';
var doubleQuotes = "double";
var myAddress = "748 Camp St";
var emptyString = "";
/* Boolean */
var myBooly = true;
var yourBooly = false;Numeric data is very easy to create in JavaScript. Simply type in the number value of your choice - whether it be a positive, negative, or decimal. These values will all be recognized as a number in JavaScript!
String data refers to any string of characters you wish to create as a value in your code. Whether it be a name, an address, a sentence, or a paragraph - you can have that be recognized as a string value in your code by wrapping that text with either single quotes ' ' or double quotes " ". Whichever one you use is up to you, but make sure to use the same type of quotes consistently throughout your code!
Boolean data only has two possible values - true or false. This data value will become extremely useful as we learn concepts like control flow, but for now you can think of this as being used in situations where you'd need to know whether or not a value is true or false in your code. For instance, there might be a situation where you'd like to know if a user is a certain age before they use your program. That's where a boolean would definitely be useful - you could create a variable like var isOver13 = true; that would store the result of whether or not a user is over 13 years of age.
Now that we’ve learned how to create our variables of different data types - it's time to learn how to use them!
After you create a variable, you can simply use the name of the variable to access its value later on in your program. There will be no need to use the var keyword after the variable has been declared. Here are some examples of how to properly use a variable after creating it.
//printing the value of the variable 'myName' to the console
var myName = 'Maggie';
console.log(myName);
//printing the result of dividing the values of num1 and num2 to the console
var num1 = 22;
var num2 = 11;
console.log(num1 / num2);
//printing the result of concatenating the values of jobTitle and salary to the console
var salary = 30000;
var jobTitle = 'Intern: ';
console.log(jobTitle + salary);As you can see in the examples above, whenever we want to use a variable's value - we don't use the var keyword, the assignment operator, or the value itself. We only need to type the name of the variable to access its stored values in our code. What you might not recognize is the command console.log(), which we will touch on below.
In the previous example, you can see console.log being used on each of our variables. What this code allows us to do is to print the result of any of our code to the JavaScript console. In these examples, it allows us to see the values stored in each of our variables, and displays the results for some of the equations we used on them.
The console is an object in JavaScript that allows us to inspect and test part of our applications while they're running. So, if you'd like to see the results of a variable you've created or test the results of any part of your application, you can use console.log() to log the results of any part of your application to the console. In the examples above, we logged our variables to the console to see their stored values.
Please note that
console.log() does not print results to a webpage or the user interface of an application! It is for the programmer's eyes only - it is merely a tool used to test parts of our programs to make sure they're working as expected. In the code quizzes below, you'll have many chances to practice using console.log() on the variables you create.
Here's a couple of videos covering all the topics from this module!
<iframe width="560" height="400" src="https://www.youtube.com/embed/u0Mq3FzpsmI" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="400" src="https://www.youtube.com/embed/UmSpfdxu3ro?si=3a83S_OUo1x8holk" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="400" src="https://www.youtube.com/embed/MWzmLKBRO7U" frameborder="0" allowfullscreen></iframe> ---The following hints and resources should aid you in your completion of the code exercises.
Single-Line Comments
- Refer to this website: W3Schools - Comments
Comment - Basic Data Types
- Refer to this website: JavaScript Tutorial
- Data type of null: Stack Overflow
Escaping Special Characters
- Refer to these websites: Creating a new line and W3Schools - Tab
- Your solution should be on one line
Escaping - Quotes
- Use double quotes for your answer
- Refer to this website: Digital Ocean - How to work with strings
String Construct Variables
- Refer to this website: JS Variables
- Refer to this website: What is a string in JavaScript?
Strings Join
- Refer to this website: JavaScript Concatenate Strings
Word Blanks
- Refer to this website: Mastering JS - Concat string
- + can be used for concatenating strings. Just as you can chain strings by concatenating, you can assign them to an existing variable.
- Remember to add your own non-letters in between each variable (including the spaces “ “). Be sure to use double quotes.