Ready to start programming in JavaScript?
This is an intro to JavaScript code tutorial which assumes zero prior experience. You'll learn how to use variables and store numbers, booleans, and strings.
There are six code stages during which you'll learn background information about JavaScript and be able to Ready to begin. Let's get started!
Variables
A key feature of programming languages is the ability to store some value for later use. We store values in something called a variable. Let's see what this looks like in a line of code:
const a = 3
In the line above a is our variable. The number 3 is the value we'd like to sore in a. Finally, the word const is the keyword used to declare "a" as a constant value. We can access the value 3 in a future line of code by referring to the variable a:
const a = 3
module.exports = a
In this case, we are exporting the value "a" so another file can access it Don't worry too much about module.exports for now, we will discuss this in future stages!
Multiple Variables
Just as we discussed in the last stage, JavaScript programs are run line-by-line. The line you created in the previous stage is called a statement.
const a = 4;
Notice how in my statement above, I added a semicolon ( ; ) at the end. In JavaScript most statements end with ; . I suggest you end all statements with a semi-colon, although in many cases JavaScript automatically inserts them.
Automatic Semicolon Insertion
In JavaScript, statements should end with ; like this statement below:
const a = 4;if this is the case, why does this code still work without a semi-colon?
The reason is that JavaScript will automatically insert semi-colons for you in some cases.
Typically, JavaScript will insert a semi-colon at the end of a line. However, this depends on what comes on the next line! There are statements in JavaScript as we will see, that can span multiple lines. Therefore, without a semi-colon, you may end up creating a multi-line statement unintentionally!
Here's an example, although it's a bit advanced using concepts we have not explained yet!
a = b (c).toString()This may look like 2 different statements. However, this is interpreted as one statement a = b(c).toString(); The variable b will be invoked as if it were a function! we'll go over functions in a future lesson. To be safe add a semi-colon at the end of your statements. It might save you a headache
After the statement above, we can access a . We can also create another variable b and store in it the value from a:
const a = 4;
const b = a;
After these two lines, both a and b will store the value 4.
Booleans
Great work! So far you've stored numbers inside of variables. Well, surprise, there are more types of values we can store inside variables!
We can also store a boolean. Weird name, huh? Don't worry, a boolean is quite simple. It can only be one of two values: "true" or "false" let's store a false value:
const loggedIn = false;
Is the user logged in the above line? The false value indicates that they are not.
Let's store a true value:
const purchasedItem = true;
Did the User purchase the item? Yup!
Notice that variables in Java Script tend to be lowerCamelCase
Casing
JavaScript variables tend to be written in lowerCamelCase. Let's take a look at an example :
In this case, isLoggedIn are three words. The first word is not capitalized The next two words are combined and the first letter is capitalized. This is what I mean when I say lowerCamelCase other languages use different casing styles. Python and Ruby use snake case, for example ( is_logged_in ).
In JavaScript, the casing is purely stylistic. JavaScript itself doesn't enforce any type of rule. All JavaScript cares about is the variables are one word ( not separated by a space ) and that they only include valid characters. Valid characters for variable names are a-z, A-Z, $, _, and 0-9 (although it should be noted they cannot start with a digit).
You also might see one other type of casing in JavaScript, Upper snake case:
const SERVER_KEY_VALUE = "abcdefg";This casing is typically reserved for environment variables or values that are determined before the program's execution. Environment variables store values that will configure your program to run a certain way. Perhaps you have some secret key that you don't want to store on your local machine, but you want to on a server. You might keep that variable tucked away on the server in an environment variable that will require permission to access or change. These are the types of variables you'll often see with this casing.
Strings
Now let's introduce a new primary type called String Another weird name, huh? A string is a bunch of characters (think a, b, c) put together. Like a massage!
const a = "Hello!";
In JavaScript, we have three ways to define a string. Here are the first two:
const myName = "Dan";
const anotherNmae = 'Cody';
Here you can see that myName and anotherName use different types of quotes, double and single. These quotes are interchangeable. Feel free to use either! You can also use them inside each other
Quotes
You can use both single quotes and double quotes when declaring JavaScript strings. This makes it easy to have quotes inside of your string.
Consider this example:
const message = "Hello hope you're having a nice day!";Here we used double quotes so we could use a single quote inside the message.
Similarly, if we needed to use double quotes:
const message = 'Then he said, "Wait, are you just going to stand there?"';And finally, if we ever needed to use double-quotes inside of a double-quoted string, you can always use backslash as an escape character:
const message = "This is a double-quote \" inside double-quoes"'
Let's look at one other way to declare a string:
const helloMessage = `Hello ${anotherName} my name is ${myName}!`;
This variable helloMessage uses backticks. With backticks, you can interpolate or add values inside your string. That is what the ${variable} syntax is all about. Here we are taking the values out of anotherName and myName and placing them in the string. Using the values from the previous example, helloMessage now contains "Hello Cody, my name is Dan!".
Changing a Variable
Let's say we want to change a value stored inside of a variable. As mentioned in the first stage, the keyword const declares our variable as a constant. So if we tried to change our variable:
const a = 3;
a = 5;
This is going to throw an error! You can try it you'll get an ugly TypeError: Assignment to constant variable. Constants are immutable, meaning their value cannot change.
Turns out there are other keywords for declaring variables! Using the keyword let instead of const will allow us to make the value mutable.
Comments
Comments are an important part of writing programs! When we write a program, we want to let other programmers know about certain choices we made.
Be a good friend to your fellow coders who may see your code one day. Write good comments!
It's also important to come up with good variable names:
const value = 82;
const price = 82;
Both of these variables hold 82, although the price is more descriptive! we can do even better using comments:
//this is price in U.S. Dollars
const price = 82;
In this example, we use a double forward slash // for comments. JavaScript engines will not execute this line. Comments are only written for humans to better understand the program. We can also write multi-line comments:
/*The price of all our items
Denominated in U.S. Dollars */
const price = 82;
Here /* indicates the beginning of the comment and */ indicates the end. This comment can span many lines.