Episode 1 Liney's First Day at Work

The Life of Code 02

Twig's Assembly Time

We have all the pieces, so why won't the code work?

Last time, Snip cut the code into little pieces.

Now those pieces have arrived at Twig's table.

But once you have the pieces, can you build any code you like?

Today's odd questionWhat happens to 1 + * 2?

What will happen if you hand this to a computer?

So that's your guess.

Today, let's watch how Twig handles this code.

TwigOne on the left, one on the right.Good. A perfect fit.

LineyWhoa! Did you already work it out?

TwigNope. So far I've only worked out how it fits together.

LineyThere's one extra piece this time?

TwigSo there is.Well, let's try putting this one together too.

TwigHmm.

LineyWhat's wrong? Is something missing?

TwigI'm not sure yet.But it doesn't fit like this.

LineyUh-oh. The tree didn't get built!

TwigHaving a piece doesn't mean you can stick it just anywhere.

LineySo what now?

TwigFirst, we find out where it got stuck.

LineyThey look alike, but one works and the other doesn't.

TwigThat's why the rules for putting pieces together matter, not just the pieces.

LineyHow do you learn those rules?

TwigTry building one yourself. You'll catch on fast.

A little experiment

Twig's Assembly Table

Now it's your turn to hang the pieces.

The pieces arrive in the order they are written. Pick up a piece, then pick the right spot for it.

It's okay if it doesn't fit. Finding where it gets stuck is an important part of the experiment too.

Pick a parcel
  1. 1
  2. +
  3. 2
Real syntax tree

Topaz compiler 5.21.1 record

expression/binaryoperator addjoins two values · plusTakes up
  • left
    expression/integer1numberTakes up
  • right
    expression/integer2numberTakes up
  1. 6
  2. *
  3. 3
Real syntax tree

Topaz compiler 5.21.1 record

expression/binaryoperator multiplyjoins two values · timesTakes up
  • left
    expression/integer6numberTakes up
  • right
    expression/integer3numberTakes up
  1. 1
  2. +
  3. *
  4. 2
Real error

Topaz compiler 5.21.1 record

TPZ2001error

expected an expression

Points to

In plain wordsIt means an expression should come here. To the right of the plus sign, a times sign showed up before any value.

  1. 1
  2. +
Real error

Topaz compiler 5.21.1 record

TPZ2001error

expected an expression

Points to

In plain wordsIt means an expression should come here. The code ended before a value showed up to the right of the plus sign.

The assembly table moves when JavaScript is on.

Take one more look

Compare these two.

6 * 31 + * 2

Both have a * in them, right?

But one can be put together and the other can't.

The symbol itself isn't wrong. What matters is where it's used.

The real inside story

Code has grammar too

The languages we speak have rules for building sentences.

Code has rules like that too.

At the assembly table, you just played at parsing. A compiler also checks the pieces against the grammar rules to work out how the code is built.

Draw the result as connected branches, and you get what is called a syntax tree.

What is an AST?

A syntax tree with the grammar details we don't need taken out is called an abstract syntax tree, or AST for short.

This drawing shows the expression part of the record, with one addition and two numbers.

Code that fits together

1 + 2

In this code, the part that stands for adding joins two numbers.

Observed Topaz syntax tree

Topaz compiler 5.21.1 record

This record comes from the compiler of Topaz, the language this site runs its examples in.
expression/binaryoperator addjoins two values · plusTakes up
  • left
    expression/integer1numberTakes up
  • right
    expression/integer2numberTakes up

Code that can't be put together

1 + * 2

This time, part of it breaks the grammar rules.

A problem like this is called a syntax error.

Instead of passing broken code along as if it were a normal sum, the compiler tells you what went wrong.

Real Topaz error message

Topaz compiler 5.21.1 record

TPZ2001error

expected an expression

Points to

In plain wordsIt means an expression should come here. To the right of the plus sign, a times sign showed up before any value.

Once the tree is built, is every check done?

Not quite.

Code that fits the grammar isn't always a correct calculation.

Even after the tree is finished, there is more to check.

We'll get to that in the next episode.

In one line

What we found out today

A compiler puts tokens together following the grammar to work out how the code is built.

If part of it breaks the grammar, the compiler points out the error.

So why is this code a problem?

3 +
Find out why

In this expression, + is a plus sign that joins two values.

There is a 3 on the left, but the code ended before the value it needs on the right.

So the plus can't be completed as it is.

Now you know that putting pieces together the right way matters just as much as cutting them well.

Field GuideRevisit these wordsParsingSyntax TreeError Message

Next story

Episode 3Tami's Suspicious Sum

This time, Twig finished a tree without a hitch.

But then Tami came over with a magnifying glass.

1 + "apple"

TamiThe shape looks fine.But can these two really be added?

Next time, let's meet type checking.