LearnStreet: Lesson 2 Variables and Operators

//sample solution

Favorite Language, AgainWelcome to the second section of the LearnStreet beginner JS course. In this section, we will cover variables. Remember that you can refer to the video or the description in the right panel if you'd like some more background. First, let's go back to what we did in the previous section. Try typing the word JavaScript between two double quotes again, like this: "JavaScript". Then press Enter. "Javascript" => 'Javascript' 

Oops, please try again. 

Use the hint button if you would like a hint. 

"JavaScript" => 'JavaScript' 

There's a reason we had you repeat this exercise -- you'll see! 

2What is a Variable? In the previous exercise, you had to type my favorite coding language again, even though you'd already done so in the first section. Imagine if Facebook had to keep asking you for your favorite music every time you logged in. Wouldn't that be annoying? We need a way to store data so we can refer to it later. Variables are one way to do this. Let's see how we can create a variable to store my favorite programming language, JavaScript. Type var favoriteLanguage = "JavaScript"; and press Enter. Then type favoriteLanguage to see its value. 

var favoriteLanguage = "JavaScript" 

favoriteLanguage => 'JavaScript' 

Great! You just created a variable called favoriteLanguage. Let's try to understand what you just typed. The first part, var, lets the JS console know you are declaring a variable. The assignment operator = tells it that you are trying to assign a value to the variable. Lastly, the string on the right side of the assignment operator is the actual value that you are assigning to the variable. 

3Your Name Let's try another example, for practice. Create a variable called myName and set it to a string containing your name. Then type myName and press Enter to see what the variable myName stores. 

var myName = "Jim" 

myName => 'Jim' 

Pleased to make your acquaintance. People like to call me the JS console. 

4Let's Make a Sentence Now that you've created two variables -- one for my favorite coding language and one for your name -- let's use them to create a sentence. Replace the blanks with the correct variable names in the following code: "My name is " + ____ + " and I am learning " + ____; 

"My name is " + myName + " and I am learning " + favoriteLanguage => 'My name is Jim and I am learning JavaScript' 

Hope you're enjoying learning JavaScript! 

5Numbers in Variables We can use variables to store more than just words (technically strings, but we'll get to that later). You can also use variables to store numbers. Try creating a variable called myAge that stores your age. Then type myAge and press Enter to see its value. 

myAge = 16 => 16 

Wow, you're young! Now you've used variables to store strings and numbers. We'll learn later about other data types you can store using variables. 

6Changing Variable Values An important characteristic of variables is that you can change them once they've been declared. But since you've already created the variable, you don't need to use the var keyword again to simply change its value. Now, suppose one year has passed and you're one year older. Can you update myAge to reflect your new age? 

myAge = 17 => 17 

You're one year older -- happy birthday! 

7Changing Variable Types As you just saw, variable values can be changed. Not only can they be changed to values of the same type, but they can also be changed to different data types. Try setting myAge to a string that spells out your current age. 

myAge = "seventeen" => 'seventeen' 

See, you just changed the type of the variable from a number to a string! 

8Equality Now that we've created several variables, what can we do besides changing their values? A useful operation is to check if two variables are equal, that is, they have the same value. This is done by using the ==, or equality, operator. Notice that there are two equal signs instead of one. Try checking if the variables alicesAge and bobsAge have the same values using the equality operator. 

alicesAge == bobsAge => false 

That returned false because Alice is 19 and Bob is 20. If they were the same age, your code would have evaluated to true. We've covered a few operators already, but check out some other commonly used operators in the description. 

9What's Your Type? We've seen that variables have values, but did you know they also have types? The type of a variable is essentially the data type (e.g. string, number, etc.) that the variable stores. So how do we know if a variable stores a number or a string? We can use the handy typeof operator to figure it out. We've created a variable for you called secret that contains -- you guessed it -- a secret value. Can you figure out its type? Give it a try! 

typeof(secret) => 'number' 

The secret variable stored the answer to the meaning of Life, the Universe, and Everything, thanks to Douglas Adams. Do you know what number it was? 

10Empty Cans, Empty Variables Sometimes you might want to create a variable for later use, but don't know the value you want to assign to it just yet. JS lets you declare variables without assigning a specific value. In this case, the variable will have an "undefined" value. You can do this by declaring a variable and leaving out the assignment operator and any value. Try creating an undefined variable called emptyCan. Then check the type of the variable using the appropriate operator. 

var emptyCan typeof(emptyCan) => 'undefined' 

Now that you have an empty variable, you can assign a value to it later. 

11Increment Operator Now you know how to create and change variables. A common task in programming is incrementing the value of a variable, like we did when we increased the myAge variable by one. This is such a common task that there's a special operator for it in JS, the ++, or increment, operator. Increment the value of the variable called counter which we have already created for you. Then type the variable name counter and press Enter to see its updated value. 

counter++ => 0 

Awesome! The increment operator will be handy when you're writing a lot of code. There is also a similar decrement operator, --, which is used to decrease the value of a variable by one. 

12Adding Numbers, Again What if you wanted to increment the value of a variable by any number, not just one? There is a way to do this using the assignment operator. For example, if you want to increase the value of a variable x by 10, you can use the code x = x + 10;. This works because the code on the right hand side of the assignment operator is evaluated first, then the resulting value is assigned to the variable x. So JS evaluates x + 10 and then reassigns the result to the variable x. Increment the value of the variable counter by 5. 

counter = counter + 5 => 6 

You can also subtract any number from a variable similarly, by using the - operator instead of the + operator.