JavaScript 1 – FCC 16

Overview

Welcome to your first Free Code Camp lessons in JavaScript! These lessons will introduce you to a few of JavaScript’s basic programming concepts, such as variables, arithmetic operations, strings and zero-based indexing. Due to the complex nature of JavaScript 1 it’s important to establish a solid foundation before diving into the deep end. These introductory lessons may seem abstract, but they’ll play an important role in later lessons.

FCC + this Workbook

While you’re working through the Javascript portion of Free Code Camp, these next few sections in the Workbook will correspond to your FCC exercises. The Workbook readings will highlight key points, offer more context, and expand on the FCC examples. You may want to open these readings in a separate window alongside FCC—or perhaps you want to read them through before and after you complete the Free Code Camp sections.

FCC Help Reminder

When going through the remainder of the FCC lessons, don’t get spooked. It’s easy to overthink what FreeCodeCamp is asking. Take advantage of FCC’s hints and videos. And, feel free to work with a friend (while keeping a safe, social distance, of course).

You may also find it beneficial to peruse Free Code Camp’s JavaScript Beginner’s Handbook as well.

Once you’re ready to get started on FCC, start reading ⬇️

Comments

By now, you’re pretty familiar with the habit of writing comments in your CSS and HTML files. Writing comments in JavaScript is no different. These are comments that JavaScript will ignore, but are helpful to keep yourself, your future self, and someday perhaps, your coworkers, organized and up-to-date.

There’s two ways to write comments in JavaScript:

// This is an in-line comment.

/* This is a
multi-line comment */

Variables

Just like in your math classes, variables in JavaScript are used to store values. Unlike your math classes, though, variables in JavaScript are variable, that is, they are subject to change. In other words, variables are used to store different values at different times.

Computers require very detailed, very specific instructions to carry out commands. Essentially, variables are telling the computer, remember this piece of information at this moment in time. Store this specific knowledge away for now.

To declare a variable, write var followed by the variable name, and end your statement with a semicolon:

var madHatter;

Variables cannot use spaces or start with a number, and of course, casing matters 2. It’s best practice to use camelCase, where multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized, such as myMadQueen, yourDoorMouse.

To assign a value to a variable, use the assignment operator =.

madHatter = 3

A word of caution with the assignment operator: Everything to the right of the equals sign = is evaluated first. More on that later!

Typically, you declare a variable and assign it a value at the same time, called initializing a variable:

var cheshireCatShoppingCart = 1;

In this case, we are establishing a variable and giving it a value, all at once.

Basic math operations

Performing math operations is a keystone of programming languages including JavaScript. When we rely on a tool like JavaScript to perform arithmetic operations, we’re able to process numerical data quicker, more accurately, and at much longer volumes.

So much of the web involves processing numerical data. Think of prices, quantities, totals, shipping, in stock, out of stock, sales, taxes—and all the calculations needed to give users accurate information on all the various combinations of all of those elements!

Numbers in Javascript represent—you guessed it!—numeric data. Here’s some of the basic arithmetic operations you can do with JavaScript:

• Addition +
• Subtraction -
• Multiplication *
• Division /
• Use decimals (sometimes called floats) 2.5

You can increment (add one) with the ++ operator.

i = i + 1 becomes i++;

And decrement (decrease a variable by one) with the -- operator.

i = i - 1; is the same as i--;

The remainder operator % gives the remainder of the division of two numbers.

In the example below, the variable remainder becomes equal to the remainder of 16 divided by 7:

remainder = 16 % 7

Read more on arithmetic operators in JavaScript.

Compound assignments

Remember how I said everything to the right of the assignment operator = is evaluated first?

myVar = myVar + 5;

This above example does two things: It assigns a variable and performs a mathematical equation. This assigns myVar, and adds the value of 5 to it, all in one fell swoop.

Since this is such a common occurrence in JavaScript, there are operators which do both a mathematical operation and assignment in one step, such as the += operator.

You’ve heard it before, but programmers are lazy. We like to write as little code as possible, especially if it’s something as small as an arithmetic operation that could be repeated who knows how many times in a program.

Instead of writing:

a = a + 12;

It’s shorter to write:

a += 12

The += operator is replacing the = a +.

If this is confusing, please be sure to check out the FCC video under Get Help for Basic JavaScript: Compound Assignment With Augmented Addition.

Compound assignment with augmented subtraction works much the same:

b = b - 15 is the same thing as b -= 15

And so on and so fourth with augmented multiplication *= and augmented division /=.

Strings

Words have power, too. Strings in JavaScript can be used to creating custom welcome messages, alerts, prompts, as well sort items, share information, modify messages, and much more. Think of every time a website or an app told you something: Game over. You've got mail!

String literals consistent of characters (text, numbers , punctation symbols, even emojis ⚡️) enclosed in single or double quotes. It’s easy to remember if you think of a string as being a string of characters.

To transform var madHatter into a string:

var madHatter = "Take some more tea."

Likewise, strings can also consistent of numbers, so long as they are still wrapped in either double or single quotes.

var myHeads = '1'

It’s all fun and games working with single and double quotes until you want to include a literal quote " or ' inside the string. You do this by placing a backslash \ in front of the quote. This tells JavaScript: “Don’t end this string! Just keep this quotation mark as part of the string, rather than the ending.”

var sampleAliceStr = "The March Hare said, \"It wasn’t very civil of you to sit down without being invited,\" to Alice.";

Would output the following:

The March Hare said, "It wasn’t very civil of you to sit down without being invited," to Alice.

This allows us to place quotes in our strings. This is often referred to as escaping a quote.

And remember, you have to use the backslash \ to escape a quote. Don’t get confused with the forward slash / which is used for other things, such as comments.

String values in JavaScript may be written with single or double quotes, as long as you start and end with the same type of quotation mark. If you start with a double quote, you must end with a double quote. If you start with a single quote, you must end with a single quote.

You may want to use both in a string—one as a literal quote and one as your actual string quotes. If you do this, you don’t have to rely on \ to escape quotes.

Concatenation ? + ?

To concatenate is to combine or link things together, such as a name plus a greeting: Good afternoon, Anna!

In JavaScript, we can concatenate multiple strings together to form one string. This is accomplished via the concatenation operator: +

'Well, some go this way, and some go that way, ' + 'but as for me, myself, personally, I prefer the short-cut.'

Concatenation does not automatically add spaces, so you will need to add spaces manually.

You can concatenate strings with our good friend, the plus equals operator +=.

var ourStr = "Well, some go this way, and some go that way, ";
ourStr += "but as for me, myself, personally, I prefer the short-cut.";

Now, ourStr is equal to:

Well, some go this way, and some go that way, but as for me, myself, personally, I prefer the short-cut.

Bracket notation

Bracket notation [] is a way to identify a character at a specific index within a string. Each character in a string is given an index number—essentially, its that character’s place in line.

What is most important to remember is that computers don’t think the same way we do. In the example below, bracket notation [0] is being used to show us what the first character is in the string Alice.

var firstName = "Alice";
var firstLetter = firstName[0]; // firstLetter is "A"

Modern programming languages such as JavaScript use zero-based indexing, which is a fancy way of saying they start counting at 0 rather than 1. This is worth remembering.

In var firstName = "Alice";

• A = [0]
• L = [1]
• I = [2]
• C = [3]
• E = [4]

Occasionally, Free Code Camp might ask for the third letter in something, say, a last name. If you are using bracket notation to get the third letter, your bracket notation would look like: [2].

To sum it up

Your first Free Code Camp JavaScript expedition should look a little bit like Alice’s Adventures in Wonderland: Mystical, confusing, perhaps even a bit frightening, but overall, you’re starting to see that JavaScript is a programming language with huge potential. We’re just scratching the surface. Don’t lose your head!