JavaScript · Beginner

JavaScript Syntax and Your First Program

In short: A JavaScript program is a sequence of statements run from top to bottom. Blocks are wrapped in curly braces, statements end with a semicolon, comments start with // or sit between /* and */, console.log() writes a line of output and, on this site, readline() reads one line of input.

How JavaScript runs a program

JavaScript runs in every browser and, through Node.js, on servers and laptops. Wherever it runs, a JavaScript program is a plain text file, usually ending in .js, whose statements are executed from the first line to the last. There is no compile step to wait for and no required wrapper such as a main function: the shortest useful program is one line.

A statement is one instruction, such as printing a value or storing one under a name. Statements end with a semicolon. JavaScript will often insert a missing semicolon for you (a rule called automatic semicolon insertion), but it guesses wrong in a few well-known cases, so most style guides end every statement with one and this site does the same. Line breaks and indentation are otherwise free: they are for the reader, not for the engine.

A block is a group of statements wrapped in curly braces { }. Blocks are the bodies of conditions, loops and functions. The braces, not the indentation, decide which statements belong together.

Comments are text the engine ignores. // starts a comment that runs to the end of the line; /* ... */ marks a comment that can span several lines. Names are case sensitive: total and Total are different names, and console.log must be written exactly like that.

Two calls carry a first program. console.log() writes its arguments to the output, separated by single spaces, and ends the line. In a browser page that output goes to the developer tools console; on this site and in Node.js it goes to standard output, so you see it under the program. readline() is provided by this site's runner: it returns the next line of standard input as a string, without the line break, or null when no input is left. readAll() returns whatever input has not been read yet as one string. Every exercise here feeds its test data through standard input, the same way in every language.

Programs on this site run in strict mode (the runner puts "use strict" in front of your code). Strict mode turns a few silent mistakes, such as assigning to a name you never declared, into errors that point at the line.

Syntax

// a one-line comment: ignored by the engine
/* a comment that
   can span several lines */
console.log("text", 42);      // writes: text 42
const line = readline();      // next input line as a string, or null
const rest = readAll();       // everything not yet read, as one string

if (condition) {              // a block: statements between { and }
  statementInsideBlock;
  anotherStatement;
}
statementAfterBlock;          // outside the block

End each statement with a semicolon. Braces mark a block; the indentation inside it is for people, not for the engine.

A program of console.log calls

Watch how console.log() joins several arguments with one space and how each call ends the line.

// Notice board for the pier ferry
console.log("Pier Ferry");
console.log("First sailing at 6:40");
const crossings = 14;
console.log("Crossings today:", crossings);
console.log("Fare:", 3.5, "per adult");
/* The line below is a comment,
   so it prints nothing. */
// console.log("Cancelled");

Pier Ferry
First sailing at 6:40
Crossings today: 14
Fare: 3.5 per adult

Each console.log() call writes one line. When you pass several arguments, JavaScript converts each to text and puts one space between them, which is why 14 follows the colon with a space and without quotes. The two comments produce no output: the engine skips everything after // on a line and everything between /* and */. Note that 3.5 is printed as a number, not as the text "3.5", because it was written without quotes.

Reading a line of input

The program is run with a single input line, Tomas, and then asks for a second line that does not exist.

const name = readline();
console.log("Hello, " + name + "!");
console.log("Your name has", name.length, "letters");
const next = readline();
console.log("Any more input?", next);

Hello, Tomas!
Your name has 5 letters
Any more input? null

readline() returns exactly what was on the input line, as a string with the line break removed, and const name = ... stores it under the name name. The + operator joins strings, so the first line is built from three pieces. .length counts the characters in the string. The second readline() finds no input left and returns null, which console.log prints as the word null. Checking for null is how a program knows the input has ended.

Blocks, braces and semicolons

Two statements sit inside a block and one after it; the last line packs three statements onto one line.

const seats = 2;
if (seats > 0) {
  console.log("Seats available");
  console.log("Remaining:", seats);
}
console.log("Booking check done");
const a = 1; const b = 2; console.log(a + b);

Seats available
Remaining: 2
Booking check done
3

The two lines between the braces belong to the if; they run only because seats > 0 is true. The console.log("Booking check done") line sits after the closing brace, so it is outside the block and runs regardless. The last line shows that the semicolon, not the line break, separates statements: three statements on one line are legal, though one per line is far easier to read. The conditions lesson covers if in full.

Common mistakes

• Forgetting the quotes around text

  Why it goes wrong: console.log(Hello); does not print the word Hello. Without quotes, Hello is read as the name of a variable, and since no such variable exists the program stops with ReferenceError: Hello is not defined.

  Fix: Put text in double or single quotes. Only names of variables and functions are written bare.

   JavaScript · fixCopy

  console.log("Hello");

• Wrong capitalisation in a built-in name

  Why it goes wrong: JavaScript is case sensitive. Console.log(...) fails with ReferenceError: Console is not defined, and console.Log(...) fails with TypeError: console.Log is not a function.

  Fix: Write console.log entirely in lower case, and check the exact spelling of any name the engine says it cannot find.

• Treating what readline() returns as a number

  Why it goes wrong: Input always arrives as a string. If the input line is 5, then readline() + 1 is the string "51", because + joins strings instead of adding.

  Fix: Convert with Number() before doing arithmetic. The data types lesson explains the conversions.

   JavaScript · fixCopy

  const count = Number(readline());
  console.log(count + 1);

• Leaving out a semicolon before a line that starts with ( or [

  Why it goes wrong: Automatic semicolon insertion does not add one when the next line begins with a bracket, so the engine reads let total = 5 and [1, 2].forEach(...) as a single expression 5[1, 2].forEach(...) and throws a TypeError.

  Fix: End every statement with a semicolon and the problem cannot arise.

   JavaScript · fixCopy

  let total = 5;
  [1, 2].forEach((n) => { total += n; });
  console.log(total); // 8

Where you use this

Every exercise on this site is a program of exactly this shape: it reads its data with readline(), computes something, and prints the answer with console.log(). Tests feed different input through standard input and compare what the program prints, line by line, with the expected output. So the very first skill is being able to read one line, turn it into the type you need, and print a result on a line of its own. A typical opening reads a count on the first line and then that many further lines; the loops lesson shows the loop that does it.

const n = Number(readline());
let sum = 0;
for (let i = 0; i < n; i++) {
  sum += Number(readline());
}
console.log(sum);

Key points

• Statements run from top to bottom; end each one with a semicolon.
• Curly braces { } group statements into a block; indentation is only for readers.
• // comments to the end of the line; /* */ comments can span lines.
• Names are case sensitive: console.log, never Console.Log.
• console.log(a, b) prints its arguments separated by one space and ends the line.
• readline() returns the next input line as a string, or null when input is exhausted; readAll() returns the rest.
• Programs on this site run in strict mode, so undeclared names are errors instead of silent globals.

Try it yourself

Extend the program so it reads a second line holding the last name, prints Ticket for: followed by the first name, a space and the last name, and then prints Characters: followed by the total number of letters in both names.

const first = readline();
// read the second line into last, then print the two lines

const first = readline();
const last = readline();
console.log("Ticket for: " + first + " " + last);
console.log("Characters:", first.length + last.length);

Practise this

Exercises for this lesson are in the JavaScript practice set.

Open the JavaScript playground

Related lessons

• Variables in JavaScript: let, const and varHow to declare variables in JavaScript with let, const and var, what block scope and hoisting mean, and why const is the default choice.8 minCompleted
• JavaScript Data Types: Primitives, Objects and typeofThe seven primitive types in JavaScript plus objects, what typeof reports, how numbers behave, and how to convert between strings, numbers and booleans.9 minCompleted
• JavaScript Operators: Arithmetic, Comparison and LogicJavaScript's arithmetic, assignment, comparison and logical operators, why === beats ==, how + behaves with strings, and what ?? and the ternary do.9 minCompleted

Frequently asked questions

How this page was checked. Every program on it was run with Node.js 22 at build time; runs in your browser in an isolated Web Worker by the publishing checks, and the output shown is what it printed. The Run buttons execute the same code on your device; nothing you type is sent anywhere.