JavaScript Syntax: Statements, Semicolons, Case Sensitivity, Blocks and Comments

Every language has grammar rules. JavaScript's are short, and most of them will feel natural after a few programs.

Statements and expressions#

A statement is an instruction, like a sentence. An expression is any piece of code that produces a value:

const price = 120 * 3;      // a statement containing the expression 120 * 3
console.log(price > 300);   // price > 300 is an expression that produces true or false

true

Semicolons#

Statements usually end with a semicolon. If you leave one out at the end of a line, JavaScript usually inserts it for you (automatic semicolon insertion), so both of these work:

console.log("one");
console.log("two")

one
two

But automatic insertion has a few surprising cases. The most famous is return followed by a line break:

function getUser() {
  return
  { name: "Asha" };
}
console.log(getUser());

undefined

JavaScript inserted a semicolon straight after return, so the function returned nothing. Keep what you return on the same line as return. Many teams always write semicolons; others never do and rely on a formatter. Either is fine if you are consistent; this course writes them.

Case sensitivity#

JavaScript is case-sensitive: total, Total and TOTAL are three different names, and console.Log is not console.log.

Names (identifiers)#

Names of variables and functions:

• can contain letters, digits, _ and $;
• cannot start with a digit;
• cannot be reserved words such as let, if, class or return.

Conventions:

Choose descriptive names: discountedPrice says far more than dp.

Blocks#

Curly braces { } group statements into a block, used by if, loops and functions:

const marks = 82;
if (marks >= 40) {
  console.log("Passed");
  console.log("Well done!");
}

Passed
Well done!

Whitespace and indentation#

Spaces, tabs and new lines between tokens are ignored, so indentation is only for humans. Indent code inside each block (two or four spaces) so the structure is easy to see. A formatter such as Prettier can do it automatically when you save.

Comments#

Comments are notes for people; JavaScript ignores them.

// A single-line comment runs to the end of the line.
const gst = 0.18; // comments can follow code

/*
  A multi-line comment
  can span several lines.
*/
console.log(1000 * (1 + gst));

1180

Use comments to explain why something is done, not to repeat what the code obviously does. Comments that start with /** are JSDoc comments, which editors use to show documentation for functions:

/**
 * Adds GST to a price.
 * @param {number} price - The price before tax.
 * @returns {number} The price including 18% GST.
 */
function withGst(price) {
  return price * 1.18;
}
console.log(withGst(500));

590

Strict mode#

Old JavaScript allowed some sloppy behaviour, such as creating global variables by accident. Strict mode turns these into errors. It is switched on automatically in modules and classes, and you can switch it on in a script by putting "use strict"; at the top. Modern code, including the module code this course runs, is always strict.

Practice#

Const Price = 150
let 2items = 3;
console.log("Total: " + price * 2items);

const price = 150;
let items = 3;
console.log("Total: " + price * items);

Total: 450

Key takeaway#