Throughout the course we'll be building lots of mini apps so to speak. Parts of applications that we would build in the real world. In virtually all cases, our app will have a user, so let's begin by greeting that user.
We looked at console.log, which let us log whatever data we want to the console, strings as well as anything else. So now using console.log, let's say hi to our user with their name.
So let's say a user provides their name when our program runs, such as the "John":
but how do we hold onto their name to greet them?
Variables: Boxes for stuff
The way we hold onto stuff in JS is with variables. Think of them as boxes. To use them, you just give them a name and in them you can store anything you like.
To create or declare a variable, we use the keyword var, and afterwards give it a name, also called an identifier, which says what value it will contain. Since we want to greet the user with their name, we'll call this variable 'name':
var name; ("John");
Variables are undefined by default
By default, variables have the value undefined, which is JS's built-in way of saying it's empty.
console.log(name); // undefined
If we console log it, we see that we get a value of null. Many times we'll get the value null when it should actually be undefined. This is just due to Scrimba's editor. But be aware that null and undefined are not the same. We'll talk about this more when we cover types.
To set a variable's value or assign it a value, we use the equal operator '='. To do that we reference the variable and set is equal to the value we want like so
var name; name = "John";
Now we're setting the name to the value the user typed in. But we can make this even easier and write it all on the same line:
var name = "John";
We're declaring and assigning the variable all at once. This is what you're going to be doing most of the time when making variables, we'll give it an initial value.
Then we can use this variable however we want. We can echo the user's name back to them by passing the name variable to console.log:
var name = "John"; console.log(name); // "John"
Let's say now that we want to be more specific now and tell users to enter their first name.
We would change our variable name to reflect the data that it now holds. However, variables in JS follow a specific naming convention, meaning a rule not required by the language, but one other JS developers follow to be on the same page.
Variables in JS are camel cased, meaning the first word in a variable name is lower case and the rest of the words are uppercase. The appearance of such names is looks kind of like the humps of a camel. For example, to update our name variable as firstName, it should be written like so, with first lowercase and name capitalized:
var firstName = "John"; console.log(firstName); // "John"
How to name variables
The one rule to know about variable names, that is required by JS itself is that variable names must:
- The name must contain only letters, numbers, or the symbols $ and _
- The first character must not be a number
For example, both of these variables are invalid:
var firstName-; var 1firstName;
Based off of these rules, take a second and try to answer why they're invalid.
The first because it include a disallowed symbol, a hyphen, and the second because it has a number as the first character. We can make both valid variables by replacing a hyphen with an allowed symbol, a dollar sign for the the first one, and by putting the number in the middle of the variable name for the second:
var firstName$; var first1Name;
Finally, there are a bunch of special words that you can't make a variable with in JS. We see already that there are some words that have special significance in JS, like var, which we use to declare variables. These are also called reserved words. They can't be used as names for our variables. And this makes sense--so that we couldn't make a variable with the name var for example:
var var; // Syntax Error
As a result, we get a syntax error, meaning we wrote invalid code. There are a bunch of these reserved words, which you'll learn them throughout the course and the easiest way to avoid them is through creating variables with precise names about what information they hold.