Source text → tokens03 / 19

Scanner: recognizing language elements

Recognizing keywords, names, operators, and literals in a sequence of characters.

Before understanding an expression, we need to identify its parts. In const hp = 10; the scanner recognizes const, the identifier hp, the symbol =, the numeric literal 10 and ;.

Spaces help separate elements, but the rules cover more than spaces. They also account for strings, comments, Unicode, the context of /, and line breaks that matter for automatic semicolon insertion. Splitting text on spaces is therefore not enough to build a JavaScript parser.

const hp = 10;
// const · hp · = · 10 · ;

The scanner answers the question “Which elements are present?”. The parser answers the next question: “Which construct do they form?”. Processing source text and executing a program are different tasks: the scanner and parser do not run game logic.

In the simulation we will examine the tokens one at a time. This is a fixed teaching example, not a general-purpose scanner.

How the scanner recognizes tokens

One click recognizes one token.

Source text

const hp = 10;

Tokens

No tokens recognized yet.

The source text has not been scanned yet. We will start with the first token.

Recognized 0 of 5
Key takeaway

Tokenization recognizes language elements; it does not evaluate the expression itself.

Check the primary source ↗

V8 · Scanner↗The V8 team's explanation of tokenization and the path from source text to an AST.ECMA-262 · Lexical Grammar↗The normative rules for tokens, comments, and line breaks.