Programming as Conversation 2: Introduction

Learning Goals

• Define a statement versus an expression
• Understand the Default Execution Order
• Identify two core categories of code statements
• Provide an example of selection statement
• Provide an example of repetition statement

Introduction

Welcome to Programming as Conversation, Part 2! In this module, we'll be enriching the kinds of conversations we have with JavaScript. In Part 1, we learned to recognize expressions and saw that the data and operations they are comprised of are evaluated to produce a result or "return value." We also learned three important expressions: the constant expression, the assignment expression, and the variable lookup expression. In this next module, we'll see that evaluations of expressions, while powerful, need statements to control when (sequence), whether (selection), and how many times (repetition) they are evaluated. Code of this type is called a "statement."

We can see a parallel between expressions and statements with how children first learn to speak and how they enrich their communication with time. Learning to talk is a gigantic achievement. It's a much-loved moment for parents when a child learns to communicate through words instead of screaming fits. In this early phase, however, some of their statements lack politeness and sensitivity.

Part of growing in their ability to converse is learning to wrap their desires in politeness and consideration for the listener. "Would you mind giving me a cookie?" and "Would you care to join me for a cookie?" both express the same desire as our "rougher" example above, but show maturity.

The same is true in code: we can do a great amount of work using just expressions. However, mature "speakers" of code learn to wrap their expressions in other decisions and context. This ensures not only that the right thing happens, but also that others can understand the code easily. Learning to "wrap" expressions in reader-friendly context will continue into Programming as Conversation Part 3 as well.

Let's start learning how to wrap our expressions in statements that will give us greater flexibility and enrich our communication.

Define a Statement Versus an Expression

We have learned that all JavaScript expressions have a return value. JavaScript statements, on the other hand, don't necessarily. We can think of a statement as an instruction for some action we want to carry out.

We've already seen one type of statement: the variable declaration. A variable declaration has no return value; this is the case regardless of whether we assign a value at the time the variable is declared:

const string = "Hello";
//=> undefined
let string2;
//=> undefined
string2 = "World";
//=> "World"
string2;
//=> "World"

A variable declaration is a statement, while a variable assignment and a variable lookup (as we have learned) are expressions.

Note: If you recall the previous lesson on data types, undefined is technically its own thing in JavaScript. However, it is used to represent a lack of any particular value, so we treat it as such when we say that variable declaration has no return value.

One type of statement you will encounter frequently as you learn JavaScript is a block statement. A block statement (also called a code block) consists of one or more expressions or statements wrapped inside curly brackets ({}). We will see them in action in upcoming lessons.

Some of the most commonly used statements in JavaScript and other languages allow us to alter the order in which code is evaluated, in other words, to change the default execution order.

Understand the Default Execution Order

JavaScript by default will read our code according to the rules of a default sequence or default flow: "every line, top to bottom, left to right as ruled by order of operations." The "icon" above represents that rule. When you see it in the following lessons, you should immediately think about "execution order."

const result = 1 + 1;
result; //=> 2

You probably have an intuitive model of the default sequence since you have the general mindset that English text is read "top to bottom, left to right" and expect that to apply to code. It does! Isn't it nice when things meet our default assumptions?

This is why you intuitively grasp why JavaScript would throw an error with the following code:

result; //=> Error
const result = 1 + 1;

This error makes sense because this code is trying to do a variable lookup before initializing the variable that is looked up.

Identify Two Core Categories of Code Statements

There are two types of statements that affect whether code is executed and in what order:

• Selection: Given the default order (or "sequence"), can we choose to run certain lines of code and not others? How do we do so?
• Repetition: Given the default order (or "sequence"), can we choose to do something until a condition is met or until code has run some number of times?

Provide An Example of Selection Statement

As represented in the icon above, sometimes we need to deviate from the default sequence. We might need to select a different path. There's a poem by Robert Frost about it.

In this case, the traveler is JavaScript, traveling fatefully down the default sequence. We, as programmers, create a fork, a "split" in fate, and ask JavaScript to take one path (or the other, or a third, or a fourth...and so on) based on a Boolean "test" expression's return value. We ask JavaScript to select the path.

The first selection tool we'll learn is if. The if statement disrupts the "default sequence" by asking JavaScript to run a test, decide whether to follow the path, and then move back to the default sequence. Go ahead and open replit, paste the code below into the code window, and run it:

let favoriteNumber = 32;
if (favoriteNumber >= 10) { // evaluating favoriteNumber >= 10 returns true
  favoriteNumber = favoriteNumber + 10
} 
console.log(favoriteNumber);

Selection lets us disrupt default flow by making a choice. JavaScript evaluates the condition in the parentheses and, if it returns true, executes the code inside the block (the code enclosed in {}). If favoriteNumber were assigned 0 at the time the if statement is evaluated, it would skip over the code inside the block. That's why our icon shows the default flow "hopping" from one point to another, skipping what's in the middle.

Try changing the initial value of favoriteNumber or using a different comparison operator and see what happens.

Provide An Example of Repetition Statement

Repetition lets us disrupt default flow by repeating. The while loop, which we will introduce formally in a few lessons, means "do something while (or "as long as") some condition is true." That "something" is held inside a code block:

let favoriteNumber = 0;
while (favoriteNumber < 10) {
  favoriteNumber = favoriteNumber + 1;
}
console.log(favoriteNumber);

Run this code in the REPL as well. Try changing the value we're using in our condition, or experiment with where you put the console.log(), and see what happens.

Repetition lets us disrupt default flow by marking off a set of commands that should be re-evaluated multiple times before resuming default flow. It's even possible to get into a repetition statement that you never exit. Programmers call that an "infinite loop." Most of the time, that's not a desirable situation. Our icon shows the more desirable situation of us following default sequence, then finding a block that we repeat multiple times, then returning to default sequence.

Conclusion

This concludes our introduction to this module. This module is like a writing class: we know how to write basic sentences with a simple subject and a simple verb. We're now going to try to write complete sentences with conjunctions and punctuation (like the cookie examples!). We improve our basic sentences by using SELECTION or REPETITION statements that allow us to create code that deviates from the default "flow" or SEQUENCE.