JavaScript Refresh – Program Structure

by

Expressions and statements

A fragment of code that produces a value is called an expression. Expressions can contain other expressions.

  • true l false
  • 1
  • “hello”
  • 2×5
  • Math.min((2+6),4)

Statements

Statements are one or multiple expressions with a semicolon after it.

A program is a list of statements.

Statements are made up of expressions.

This is a program.

1;

!false;

Statements can display something on the screen or change the internal state of the machine that will affect the statements that come after it. These are known as side effects.

Bindings

Use a binding (otherwise known as a variable) to catch and hold a value for later.

let val = 2 x 5;

This kind of statement uses the keyword “let” to say we are creating a binding.

You can use the equals sign to change the value of a binding when you use the let keyword to instantiate the binding.

Binding Names

Binding names cannot be keywords (const, let, for, while).

The environment

The environment is the collection of bindings and their values at a certain time. Even without your bindings, the environment contains bindings specific to the language and bindings to interact with the system (reading keyboard input and interacting with a website, like in a browse’s environment).

Existing environments can have a lot of functions to interact with the environment. A function is a small program (a list of statements) that is tied to a variable. When calling a function, the values in the parenthesis are given to the program in the function. Those are called arguments.

Return value

Some functions produce side effects (like console.log showing text to the screen), and others return values. Functions that return values do not need to produce a side affect to be useful.

Functions that return values can be used in expressions.

Math.min(2,4) + 200

Control flow

Programs execute statements from top to bottom.

Conditional Execution

Code in a program can be skipped (based on a certain condition) using the if keyword and curly braces.

let height = 4;

let value = 4;
if (value > 4) {
    console.log('Welcome!');
}

Braces can be used to group any number of statements into a single statement, known as a block.

  • else

while and do loops

Write a program to do less work, not more.

let number = 0
while (number <= 12) {
    console.log(number);
    number = number+2; 
}

The while keyword starts this statement. The expression in parenthesis is used to determine if the statement should run again.

The do/while loop is just like the while loop except it runs the statement before checking the condition.

Indenting Code

Indentation is used to make the structure of the code stand out.

for loop

  • Create a variable to track progress.
  • Check variable to see if loop should continue.
  • Update variable after the statement.
for (let current = 20; current < 25; current = current + 1) {
    console.log(current);
}

The for loop is a slightly shorter, more comprehensive term of a while loop.

All the statements related to the state of the loop come after the for keyword.

Breaking out of a loop

You can use the break statement to exit a for loop.

Use the continue statement to begin the next iteration.

for (let current = 20; ; current = current + 1) {
    if (current > 25) {
        break;
    }
}

Update bindings succinctly

  • let counter = 0;
  • counter + = 1;
  • counter++;

Dispatching on a value with switch

switch/case

Capitalization

JavaScript functions are usually camel-cased.

Comments

// comment

/*
multi
line
comment
*/

Summary

Programs are composed of statements (which can also contain statements), and statements are composed of expressions (which can also contain expressions).

Usually programs run from top to bottom, but you can alter the execution flow by using condition statements (if, else, switch) and loop statements (while, do, for).

Functions are special values that encapsulate a piece of a program. Calling a function is an expression, and it might produce a value.