Comments, Semi-Colons & ASI

Open the project folder

Semi-colons

If you have worked in JavaScript before, or if looking for code examples online, you may notice that using semi-colons are sometimes used and sometimes not.

JavaScript programs are made up of multiple statements which are read from the top to the bottom of the file. A statement is basically an instruction, something such as a variable declaration, or the code to run inside of an if statement.

Although semi-colons in JavaScript programs are required, if we choose not to manually write them, the JavaScript parser will add them in for us automatically where they are required.

Automatic Semicolon Insertion (ASI)

These semi-colons are added at the end of each statement, and the process is called Automatic Semicolon Insertion. This does not mean we can simply forget about using them all together, there are cases when we still need to add them.

For example, let’s add some variables and output the results in the console:

const name = 'Chris';
const learningJavaScript = true;
console.log(name, learningJavaScript);

Which would display the value of Chris true in the console. Nothing unexpected here. But, if we added these variables onto the same line there will be an error in the console:

const name = 'Chris' const learningJavaScript = true;
console.log(name, learningJavaScript);

Uncaught SyntaxError: Unexpected token 'const'

If we have multiple statements on the same line, we need to declare these are separate statements by adding a semi-colon:

const name = 'Chris'; const learningJavaScript = true;
console.log(name, learningJavaScript);

This will fix the issue.

Using parenthesis to begin a new line

Some other gotchas are when we begin a new line with brackets, often referred to as parenthesis. Let’s look at an example:

const name = 'Chris'
const learningJavaScript = true

let score = 97.34
const damage = 10.42
console.log(score - damage)

Here we log the score, minus the damage, giving us the value of 86.92 as expected.

We know we can perform a calculation inside of these console log brackets, let’s remove the console log and leave the calculation:

let score = 97.34
const damage = 10.42
(score - damage)

Then if we wanted to do something with this calculated number, such as controlling the length to be 86, rather than 86.92.

To do this, JavaScript has a method we can use called toPrecision() where we pass in the length of 2 to make it 2 digits long:

let score = 97.34
const damage = 10.42
(score - damage).toPrecision(2)

Over in the browser, this gives us an error:

Uncaught ReferenceError: Cannot access 'damage' before initialization

This is because this line begins with brackets, or parenthesis, and the above line has no semi-colon. Meaning the code will effectively be read like this:

const damage = 10.42(score - damage).toPrecision(2)

This may not mean much if you are completely new to JavaScript, but if you have done a little in the past, part of it looks similar to how we declare a function.

Instead, these are intended to be separate statements. For this case, we would need to separate with a semi-colon:

let score = 97.34;
const damage = 10.42;
(score - damage).toPrecision(2)

The above third line can also be stored into a variable if we wanted to store the result. There are also some cases related to functions and we will look at these when dealing with functions later.

Comments

To round off this section we are going to take a quick look at using comments. Comments are simply a way for us to make notes in our code that are not read as part of the program. We can also comment out lines of code which means they are still there, but not included when our script is executed.

A comment in JavaSscript begins with two forward slashes, and we can type a note to ourselves or other developers:

let score = 97.34;
const damage = 10.42;
// must have semi colon in above statement
(score - damage).toPrecision(2)

This covers a single line, but often we may want multiple lines of comments:

let score = 97.34;
const damage = 10.42;
// must have semi colon in above statement
// control the length of the number using toPrecision
(score - damage).toPrecision(2)

For this we can either begin each new line with a double forward slash, as above. Or we can use a multi-line comment:

/* must have semi colon in above statement
control the length of the number using toPrecision */

This also works to comment out lines of code which we want to leave in for reference, but remove from the program:

// const name = 'Chris'
// const learningJavaScript = true