Creating and Using Variables
Creating and Using Variables
In any programming language, the two most common tasks are creating and using variables to accomplish different tasks. A variable is a container for different values. In JavaScript, a variable is defined using the keyword “var” and then its name.
The metaphor of a bucket is often useful in thinking about variables. When using a variable, the two common tasks are either creating (“putting something in the bucket”) or using (“seeing what is already in the bucket”).
Creating Variables
JavaScript follows a tradition defined in earlier programming languages of using a single equal sign (=) as part of assignment.
In the metaphor of the bucket, this process of assignment is actually two different processes. Using the “var” keyword tells JavaScript to “make a new bucket called” and then to call it the variable name listed. Then, using a single equal sign, the assignment process tells JavaScript “put the following value into this bucket.”
Every instruction in JavaScript ends in a semicolon, too. This tells JavaScript that it should do that task before continuing to the next. In the case of creating and assigning a value, the semicolon signals the entire operation should be completed before moving to the next line of code.
Naming Variables
Variables can be created using many different possible names. The only requirements are that the name of the variable not start with a number or contain spaces. They can contain the underscore. Capital letters are not used at the beginning of variables as a general rule (they're reserved for classes, which we won't get into).
Because other developers working on the project or users can view the JavaScript on webpages and thus can see these variables, it is important to not name them something offensive or rude. While it may seem funny to some to do so, having crude variable names can ruin projects or companies, or land developers into major trouble when they seek to hide them within projects.
Example: There Is Blatant Racist and Sexist Language Hiding in Open Source Code Links to an external site.
Why is naming important?
Naming variables may not seem terribly important. After all, they can contain any combination of letters, numbers, and the underscore. They can be as silly as monsterAwesomeSauce and heyFrankWhatsUpMyFriend.
When storing values in variables, it always a good idea to name the variables something useful. Naming a variable lastName that stores a last name from a form makes it easier to know what value is in the variable, for example.
While not required, many programmers also follow the Camel Case Links to an external site. rule for writing variable names. For those with multiple words, the second and each following word will have a capital letter.
Using Math on Variables
The assignment of a variable need not just to be a numerical value. It can also be some type of mathematical operation between other variables. Frequently, it is useful to create variables to store values as part of a much larger project to allow the programmer to more easily understand some complex process.
Any mathematical operation like addition, subtraction, multiplication, and division can be carried out on variables and used as part of its assignment.
One thing you might use this for is when you have two different kinds of information that you might want to look at both separately and together:
Storing Values
Because it would be inefficient to keep creating new variables with each operation, the assignment process can happen without the keyword “var” in the line. Previously created variable names can be re-used for additional operations. In these cases, the value of the variable is changed instead of creating a new variable. So if you later have additional retweets, it's no problem!
Displaying Output
JavaScript would not be particularly useful if all it could do is perform mathematical operations and create and change variable values. There needs to be a way to output some type of value in order to test things and see exactly what the code is doing.
When JavaScript is used in a HTML document, it is included within a SCRIPT tag. When a web browser encounters this tag, it will run the code.
For testing purposes, web browsers provide functionality called a console. The term is borrowed from a past usage of where code would be input in one place, a console, and then run somewhere else. In order to test the code, any error could be shown where the programmer was, the console.
In web development terminology, the console is a place where errors or warnings show up. Often, when the web browser encounters a problem or something it does not understand, it will put information in the console.
Finding the console is often different in every web browser.
Google Chrome
In Google Chrome, the console is part of the Developer Tools. It can be accessed through the extended menu ("...") and then More Tools –> Developer Tools. It is the second tab labelled "Console."
Mozilla Firefox
In Mozilla Firefox, the console can be found through Web Developer –> Web Console.
Play with the Code (Repl.it):
Take a moment to play with the code and concepts in the embedded Repl.it viewer below.
Try different values for the bucket1 and bucket 2 variables, or even do something different to bucket1 in result.