The basics of syntax

Say "a program" and you probably picture something complicated. Unpick one, though, and there is surprisingly little going on. You handle values, you give them names so they are remembered, and you do different things depending on the situation. Those three are all this chapter asks of you.

The first thing you will do is put something on the screen. Write console.log and hand it whatever you want shown. That is enough for text or numbers alike. It looks unglamorous, but it is your only way of finding out whether the code you wrote really did anything. You will be using it for the rest of your life, so get it into your hands now.

Next comes the kinds of value. In JavaScript, text goes in quotation marks as "hello", and a number goes in bare as 100. They may look alike, but "100" and 100 are different things as far as the computer is concerned. Join two pieces of text with + and they stick together; add two numbers with + and you get a sum. This is where beginners come unstuck first, and roughly half the bugs waiting for you further on start right here.

Then variables. Rather than writing the same value again and again, you give it a name and put it aside. Write let price = 150 and from then on price fetches that value for you. Fix the value in one place and every use of it follows, which makes rewriting enormously easier. There is a knack to naming, too: price beats a. The test is whether you in three days can read it and know what it is.

The second half of the chapter is branching. This is where a program first gets to make a decision. You write if and the work inside only happens when the condition holds. What to do otherwise goes in else, and a further fork goes in else if. The conditions themselves are built out of comparisons like > and ===, and combined with && and ||.

The classic stumble in branching is mixing up = and ===. = means "put the value on the right into the thing on the left"; === asks "are the left and the right the same". They mean entirely different things, and writing the wrong one gets you behaviour you did not intend. Get it into your bones here.

For when there are three or more cases we also cover switch. If you find yourself writing a run of else if that only ever compares the same variable, this reads better. Just be careful: forget a break and it carries on into the next branch.

One tip for working through this chapter. When an error comes up, read it as it stands first. A lot of people close the window because it is in technical language, but what it says is usually quite simple. "x is not defined" means "I have never heard of x" — so either you used a variable before making it, or you mistyped the name. An error message is not your enemy; it is the closest thing you have to a teacher.

In this course we show you errors exactly as the browser produced them. We do not soften them or rewrite them into something friendlier. This is the form you will meet in real work, so we would rather you got used to it early.

Once you are through this, you will be able to write a program shaped like "take some input, branch on a condition, produce a result". It is still a small program, but that shape does not change however big the app gets. A system of tens of thousands of lines is doing the same thing over and over: taking values, deciding, producing results.

There is no rush. Everything in this chapter is something you will use every single day from now on. Stay here until your hands know it and the later chapters get far easier.