There are broadly three types of syntactic container that exist within JavaScript: expressions, statements, and blocks. They are all containers in that they all hold other pieces of syntax and all have distinct behaviors that are worth distinguishing.

It's best to visualize the individual syntactic parts of a program as a hierarchy:

Here, we can see that individual expressions (with a lower border) are wrapped in statements, either of the regular or block variety. It's useful to always have this hierarchical view of the language in our mind as this is how our code will be parsed and understood by the machine. We don't need to see our code as a parser would, of course, but it's indisputably useful to know how our code will be parsed.

This hierarchical view of the language will also help us write programs that communicate their intent well to our fellow programmers. Hierarchy is not only a syntactic concern but a human one. When we write a program, we will typically model problems at different layers of abstraction: each part of a program goes within another part, and from all these individual parts, we can build a program that contains many different layers of complexity.

As we explore the syntactic parts of JavaScript, it's worth remembering how individual elements of a program's syntax, its expressions and statements, will have a natural symmetry with the individual elements and layers of the problem domain.