{{figure {url: "img/chapter_picture_2.jpg", alt: "Picture of tentacles holding objects", chapter: framed}}}

_programming_. We will expand our command of the JavaScript language

beyond the nouns and sentence fragments we've seen so far, to the

point where we can express meaningful prose.

In [Chapter ?](values), we made values and applied operators to them

to get new values. Creating values like this is the main substance of

any JavaScript program. But that substance has to be framed in a

{{index "literal expression"}}

{{index [nesting, "of expressions"], "human language"}}

This shows part of the beauty of a language-based interface.

contain its own subsentences, and so on. This allows us to build

expressions that describe arbitrarily complex computations.

When a binding points at a value, that does not mean it is tied to

that value forever. The `=` operator can be used at any time on

existing bindings to disconnect them from their current value and have

Let's look at another example. To remember the number of dollars that

Luigi still owes you, you create a binding. And then when he pays back

{{index "var keyword"}}

The first, `var` (short for "variable"), is the way bindings were

differs from `let` in the [next chapter](functions). For now,

remember that it mostly does the same thing, but we'll rarely use it

in this book because it has some confusing properties.

Binding names can be any word. Digits can be part of binding

names—`catch22` is a valid name, for example—but the name must not

start with a digit. A binding name may include dollar signs (`$`) or

{{index syntax, "implements (reserved word)", "interface (reserved word)", "package (reserved word)", "private (reserved word)", "protected (reserved word)", "public (reserved word)", "static (reserved word)", "void operator", "yield (reserved word)", "enum (reserved word)", "reserved word", [binding, naming]}}

Words with a special meaning, such as `let`, are _((keyword))s_, and

they may not be used as binding names. There are also a number of

words that are "reserved for use" in ((future)) versions of

JavaScript, which also can't be used as binding names. The full list

```{lang: "text/plain"}

reserved word.

`console.log` function that writes out its arguments to _some_ text

output device. In browsers, the output lands in the ((JavaScript

console)). This part of the browser interface is hidden by default,

{{if interactive

Though binding names cannot contain ((period character))s,

`console.log` does have one. This is because `console.log` isn't a

simple binding. It is actually an expression that retrieves the `log`

find out exactly what this means in [Chapter ?](data#properties).

{{id return_values}}

{{index grouping, "{} (block)"}}

statements into a single statement, called a _((block))_. You could

also have omitted them in this case, since they hold only a single

statement like this. We'll mostly follow that convention in this book,

except for the occasional one-liner.

You often won't just have code that executes when a condition holds

true, but also code that handles the other case. This alternate path

execution paths.

```{test: wrap}

{{index ["if keyword", chaining]}}

_less_ work, not more. If we needed all even numbers less than 1,000,

this approach would be unworkable. What we need is a way to run a

piece of code multiple times. This form of control flow is called a

{{figure {url: "img/controlflow-loop.svg", alt: "Loop control flow",width: "4cm"}}}

The counter could also have started at `1` and checked for `<= 10`,

?](data#array_indexing), it is a good idea to get used to

counting from 0.

differs only on one point: a `do` loop always executes its body at

least once, and it starts testing whether it should stop only after

that first execution. To reflect this, the test appears after the body

{{index "code structure", whitespace, "programming style"}}

In the examples, I've been adding spaces in front of statements that

will accept the program just fine without them. In fact, even the

((line)) breaks in programs are optional. You could write a program as

a single long line if you felt like it.

{{index syntax, "while loop", "counter variable"}}

"counter" binding is created to track the progress of the loop. Then

comes a `while` loop, usually with a test expression that checks whether the

counter has reached its end value. At the end of the loop body, the

Because this pattern is so common, JavaScript and similar languages

provide a slightly shorter and more comprehensive form, the `for`

{{index exponentiation}}

```{test: wrap}

If you create an infinite loop in one of the examples on these pages,

you'll usually be asked whether you want to stop the script after a

few seconds. If that fails, you will have to close the tab that you're

if}}

```{test: no}

Functions are special values that encapsulate a piece of program. You

can invoke them by writing `functionName(argument1, argument2)`. Such

{{index exercises}}

solve the exercise. If you run into problems, consider reading the

hints [after the exercise]{if interactive}[at the [end of the

book](hints)]{if book}. Full solutions to the exercises are

not included in this book, but you can find them online at

If you want to learn something from the exercises, I recommend looking

at the solutions only after you've solved the exercise, or at least

after you've attacked it long and hard enough to have a slight

{{index [string, length]}}

It may be useful to know that you can find the length of a string by

`"Fizz"` instead of the number, and for numbers divisible by 5 (and

not 3), print `"Buzz"` instead.

for numbers that are divisible by both 3 and 5 (and still print

`"Fizz"` or `"Buzz"` for numbers divisible by only one of those).

{{index "|| operator", ["if keyword", chaining]}}

The second version of the program has a straightforward solution and a

string containing the word or words to output and print either this

word or the number if there is no word, potentially by making good use

of the `||` operator.

hint}}

Write a program that creates a string that represents an 8×8 grid,

using newline characters to separate lines. At each position of the

grid there is either a space or a "#" character. The characters should

Passing this string to `console.log` should show something like this:

{{index "chess board (exercise)"}}

repeatedly adding characters. A newline character is written `"\n"`.

To work with two ((dimensions)), you will need a ((loop)) inside of a

easy to see where they start and end. Try to properly indent these

bodies. The order of the loops must follow the order in which we build

up the string (line by line, left to right, top to bottom). So the

on a line.

{{index "counter variable", "remainder operator", "% operator"}}

the sum of the two counters is even (`% 2`).

Terminating a line by adding a newline character must happen after the

hint}}