JavaScript Syntax

Syntax is the set of rules for how a programming language must be written, the same way grammar and spelling are the rules for English. A reader can usually guess what a misspelled sentence means, but JavaScript cannot guess. If the syntax is wrong, it stops with an error or does something you did not intend. Learning these rules up front saves hours of debugging later.

Here is a tiny program that shows most of the pieces this lesson covers:

// How to declare variables:
let x = 5;
let y = 6;

// How to compute values:
let z = x + y;

// I am a comment. I do nothing.

Keywords (let), names (x, y, z), values (5, 6), operators (=, +), and comments. Each gets its own section below.

// Values: Literals and Variables

JavaScript syntax has two kinds of values: fixed values and variable values.

Literals (fixed values)

A literal is a value typed directly into the code. It means exactly what it says and never changes. Numbers and strings are the most common:

// Number literals: written with or without decimals, no quotes
10.50
1001
-100

// String literals: text inside double or single quotes
"John Doe"
'John Doe'

Variables (variable values)

A variable is a named container that stores a value. Unlike a literal, what is inside can change. Each variable needs its own unique name:

let score;             // create a variable called score
score = 6;             // put the value 6 in it
score = 10;            // replace it with 10
console.log(score);

Variables get three full lessons next (Variables, Let, Const). For now, just recognize the difference: 10 is a literal, score is a variable holding one.

// Keywords

Keywords are words JavaScript reserves for itself. Each one tells JavaScript to perform a specific action. let and const, for example, both mean "create a variable":

let x = 5;
const fname = "John";

Some keywords you will use constantly:

let      // declare a variable that can change
const    // declare a variable that cannot be reassigned
var      // old-style declaration (avoid)
if       // run code only when a condition is true
for      // repeat code in a loop
function // define a reusable block of code
return   // exit a function and send back a value

Because they are reserved, keywords cannot be used as variable names. let let = 5; is an error.

// Identifiers: Naming Rules

An identifier is the name you give a variable, function, or other item. JavaScript has strict rules about which names are legal:

• Must begin with a letter, underscore _, or dollar sign $
• After the first character, digits 0 to 9 are also allowed
• Cannot be a reserved keyword (let, if, return, and so on)
• Case sensitive: score and Score are two different names
• No spaces, and no hyphens

// Valid identifiers
let userName;
let _count;
let $price;
let item2;

// Invalid identifiers
let 2item;       // starts with a digit
let user-name;   // hyphen
let user name;   // space
let let;         // reserved keyword

Why can a name not start with a digit? So JavaScript can instantly tell names and numbers apart. When it sees 2 at the start of a word, it knows a number is coming. Why no hyphens? Because - already means minus. JavaScript would read user-name as "user minus name".

// Operators

Operators are the symbols that do something with values.

Assignment

The assignment operator = stores a value in a variable. It does not mean "equals" like in math; it means "put the value on the right into the name on the left":

let x = 5;
let y = 6;
let sum = x + y;     // work out x + y, store the result in sum

Arithmetic

The arithmetic operators compute values:

let a = 10;
let b = 3;

console.log(a + b);   // addition
console.log(a - b);   // subtraction
console.log(a * b);   // multiplication
console.log(a / b);   // division
console.log(a % b);   // remainder (10 ÷ 3 is 3, remainder 1)

Notice the division result ends in 5 instead of repeating 3s forever. Computers store decimals with limited precision; the JS Numbers lesson explains why. The operators each get full lessons in the JS Operators section.

// Expressions

An expression is any combination of values, variables, and operators that computes to a single value. The computing is called evaluating:

(5 + 6) * 10                // evaluates to 110 (parentheses first)
x * 10                       // evaluates to 50 when x is 5
"John" + " " + "Doe"        // evaluates to "John Doe"

Expressions can be used anywhere a value is expected, including on the right side of =:

let price = 100;
let tax   = 0.08;
let total = price + (price * tax);
console.log(total);

// Comments

Text after // is a comment. JavaScript skips it completely; it is there for the humans reading the code. Comments get their own lesson (JS Comments).

let x = 5;    // I will be executed
// x = 6;       I will NOT be executed

// Case Sensitivity

JavaScript is case sensitive everywhere: keywords, variable names, function names, all of it. Two names that differ only by capitalization are two completely separate variables:

let lastName = "Doe";
let lastname = "Peterson";    // a different variable

console.log(lastName);
console.log(lastname);
console.log(LastName);

// Naming Convention: camelCase

Variable names often need more than one word, and spaces are not allowed. Programmers have used several ways to join words:

let firstName     = "Alex";
let totalPrice    = 149.99;
let isLoggedIn    = true;
let maxRetryCount = 3;

A good name says what the value is. totalPrice beats tp, and isLoggedIn tells you at a glance it holds true or false.

// Quick Check

let points = 4;
console.log((points + 2) * 10);

let Score = 10;
console.log(score);

// Try It

▶ Open Playground

1. Click Open Playground. It starts with let myCity = "Baltimore"; and logs it. Click Run and find Baltimore in the Console
2. Change console.log(myCity) to console.log(mycity) and run it again. Read the ReferenceError
3. Add a line Let x = 1; with a capital L. Run it, read the error, then fix it
4. Log (8 + 2) * 5 and then 8 + 2 * 5. Why are they different?