A function saves a block of code. You can run it whenever you reference the function's name. The code inside the block `{}` will run when the function's name is called.

The `function` keyword tells the code that you want to create a function. The function `addSquare` will create a new SVG rectangle with a height and width of 10. To run the code within the function, the function's name needs to be called: `addSquare();`

The `function` keyword tells the code that you want to create a function that can be run later. This example function is called `addSquare` which creates a new SVG rectangle with a height and width of 10. To run the code the functions name needs to be called: `addSquare();`

`let` declares a variable just like `var`, except it has a different scope. The scope of a variable is the section of code where it can be used. A `let` can only be used inside the code block `{}` where it's created.

A variable called `x` is created using `var` and set to `100`. The if statement is true, so the `let` variable `x` is created and set to `25`. The `let` variable stays inside the code block `{}`. The `print(x)`, which is outside the if statement's code block, uses the value of the `var x = 100.`

An arrow function is a compact way to create a new function. It uses `() => {}` instead of the `function` keyword. It also doesn't need a name. It is best practice to use `=>` instead of the `function` keyword.

`add()` accepts two numbers as arguments, and adds them together.

```printSum``` accepts two numbers as parameters, and adds them together.

Multiplies the value associated with the variable on the left by the value on the right, and assigns the resulting value to the existing variable.

Adds the value associated with the variable on the left to the value on the right, and assigns the resulting value to the existing variable.

Subtracts the value associated with the variable on the left by the value on the right, and assigns the resulting value to the existing variable.

Sets (or resets) the value stored in a variable. On the left is the variable you'd like to adjust, and on the right is the new value.

Compares whether two things (e.g. numbers, variables, etc) are not equal.

This code first checks that 10 is not equal to 5. Since 10 is not equal to 5, `true` is printed. The code then checks if 5 is not equal to 5. Since 5 is equal to 5, `false` is printed.

This code will print ```true```, then ```false```.

Multiplies the value on the left side to the value on the right side.

`10` is multiplied by `5`. The variable `result` holds the number `50`.

Adds two values together. This operator is most commonly used on numbers and strings.

The value of `result` is `15`. The `+` operator can combine strings, so the value of `fullName` is `'Johnny Appleseed'`.

```result``` will be equal to 15. ```fullName``` will be equal to "Johnny Appleseed"

Subtracts the value on the right side of the `-` operator from the value on the left side.

Compares whether the left side is less than the right side.

It will print because the 'b' in 'bananas' is alphabetically 'greater' than the 'a' in 'apples'.

It will print, because the 'b' in 'bananas' is alphabetically 'greater' than the 'a' in 'apples'.

Compares whether one value is less than or equal to another.  This works for number and string types, as well as some other, less obvious types like an array.

It will print, because `5` is equal to `5`.

Compares whether two things are equal to each other.

This code first checks that `10` is equal to `5`. Since `10` is not equal to `5`, `false` is printed. The code then checks if `5` is equal to `5`. Since `5` is equal to `5`, `true` is printed.

This code will print ```false```, then ```true```.

Compares whether one value is greater than or equal to another.  This works for number and string types, as well as some other, less obvious types like an array.

It won't print, because `5` is neither greater than nor equal to `6`.

It won't print, because 5 is neither greater than nor equal to 6.

Divides the value associated with the *variable on the left by the value on the right, and assigns the resulting value to the existing variable.

`drawBox()` is a function. A function tells a computer to do a certain thing. Functions can take arguments to give the computer extra information. For example `drawBox(red)` has `red` as an argument, telling the computer to draw a red box.

`drawBox()` is the name of the function. When you add `blue` in the parentheses `()`, you are calling the function with the argument `blue`. This code creates a blue box.

`drawBox()` is the name of the function. When you add `blue` in between the parentheses, you are *calling* the function with parameter `blue`.

Variables are very common in coding. They allow you to reference the same piece of information multiple times. In JavaScript, variables can be defined using `var` then giving the variable a unique name. For example, `var myVariable = 'my example'`.

The variable `myExample` is declared, then on the next line it's given a value and is then printed out. The variable's value is then updated and printed out again with a different message.

The variable `myExample` is created, it's value is printed out. The variable's value is then updated and printed out again with a different message.

Append is used to add a new SVG shape to the program, although it may not be visible until it is given a size (and fill).

An SVG circle is added to the program. An SVG rectangle is created and stored in a variable called `myRectangle` for later reference.

Attribute (`.attr()`) is a D3 library function that is used to set the value for a specified property of an SVG shape.

An SVG circle is created with a radius of 20. An SVG shape stored in the variable `myRectangle` has its width set to 35.

Adds an event listener to an SVG shape. The event listener runs a function whenever a specified action happens to the SVG shape.

This code adds a `'click'` event listener to the SVG shape `myRectangle`. Whenever `myRectangle` is tapped, the function `moveToTop` runs.

Adds a 'click' event listener to the SVG shape that is stored in the variable `myRectangle`. Whenever `myRectangle` is clicked (tapped), the function moveToTop starts running.

Deletes the selected SVG shape from the program.

Removes all the circles from the program. Then removes the SVG shape called `myRectangle` from the program.

Removes all the circles from the program, then removes the SVG shape called `myRectangle` from the program.

*Data structures* are ways to store and organize data that's more complex than just a single `primitive` value. In JavaScript, the most common data structure types are `arrays` and `objects`.

Note that an object can contain arrays, and vice versa. In this case, `groceries.vegetables` would be equal to the `vegetables` variable.

Note that an object can contain arrays, and vice versa. In this case, ```groceries.vegetables``` would be equal to the ```vegetables``` variable.

The `function` keyword creates a new function called `printSum()` that takes two arguments. When `printSum()` is called it adds the two arguments together.

Because this was created without ```var```, ```printSum``` can be called prior to the line of code on which it was created.

Executes a sequence of commands when called. It has three parts: 

1. The identifier value (the name of the function)
2. The parameters or arguments (the values between the parentheses)
3. The function body, which is the sequence of commands that executes when the function is called.

When ```printSum(5, 2)``` is called, 7 will print to the output area.

Divides the value on the left side of the `/` operator by the value on the right side.

Divides `10` by `5`. The variables `result` will be holding the number `2`.

`if...else` statements perform a test to decide which code to run. If the test is true, the `if` block `{}` runs. If the test is false, the `else` block `{}` runs.

This code picks a random number from 1 to 10. If `number` is 7 it will print out, 'The number is 7!'. If `number` is anything else it will print out, 'The number is not 7.'

This code will pick a random number form 1 to 10. If the number happens to be 7, it will print out, "The number is 7!". If the number is not 7, it will print out, "The number is not 7."

If statements allow you to run a specific section of code when a test is true. The code inside the parentheses `()` is the test. If the test is true then the code inside the block `{}` runs. If the test is not true, then the code inside the block doesn't run.

In this example, the variable `aNumber` is assigned the number 5. There are two if statements. The 1st is checking if `aNumber` is equal to 5. The 2nd is checking if its equal to 4. Only the 1st if statement's test is true, so a blue box would be drawn.

In this example a variable is created called `aNumber` and assigned a value of 5. There are two if statements, the first is checking if aNumber is equal to 5, then second is checking if its equal to 4.

A boolean is one of two special values in JavaScript, either `true` or `false`. They are useful for dealing with state that has just two possibilities.

It is `true` that you are learning to code, but it is `false` that one should wear socks with sandals.

`false` is a boolean value. The other boolean value is `true`. In code, if an if statement's test `()` is `false` then the code in the block `{}` won't run.

This code will print, "The equation is false." Since 1 is not equal to 2, the `equation` variable stores the value `false`. The first if statement checks if the value of `equation` is `false`, and it is, so the first print statement runs.

This code will only print, "The equation is false." Since 1 is not equal to 2, the `equation` variable stores the value `false`. The first *if statement* checks if the value of `equation` is `false`, and it is, so the first print statement runs.

The second *if statement* looks inside its parentheses and sees that it's `false` which means the test doesn't pass and the print statement is skipped.

A number that can either be whole (such as 10) or a decimal (such as 3.5).

The variable `numberOfApples` stores the integer (whole number) 10. The variable `temperature` stores the decimal 74.6.

In JavaScript, integers and decimals are both of type number.

Letters, words, and sentences are called strings in coding. Quotation marks are used to show the start and end of a string. For example, `'hello world'` is a string.

`'royg'` is a string used in the `drawBoxes()` function to create red, orange, yellow and green boxes.

```royg``` is a *string* value that will be used by the function `drawBoxes()`.

`true` is a boolean value. The other boolean value is `false`. In code, if an if statement's test `()` is `true` then the code in the block `{}` will run.

This code will print 'yes' and 'yes again'. The code in the parentheses `()` of the if statement is the test. If the test is true, the curly bracket `{}` code will run. `true` is true, so it prints "yes". For the `question`, since 1+1 does equal 2, `question` is storing the value `true`.

This code will print "yes" and "yes again". The code in the parentheses of the *if statement* is the test. If the test is true, the curly bracket code will run. `true` is true, so it prints "yes". For the `question`, since 1+1 does equal 2, `question` is storing the value `true`.

Combines two statements into a `true` or `false` value. It becomes `true` only if the left and right side are both `true`, otherwise, it's `false`.

Since 1 is less than 2 and 5 is greater than 0, the if statement's test `()` is `true` and 'Yes!' will be printed out.

Since 1 is less than 2 *and* 5 is greater than 0, the *if statement* is `true` and will print out, "Yes!".

Combines two statements into a `true` or `false` value. It becomes `true` if either the left or right side is `true`, and it's only `false` if both sides are `false`.

Although 2 is not equal to 4, 1+1 is equal to 2. Since the right side is true, the if statement's test `()` is true and it prints, 'At least one is true.'

2 is not equal to 4, but 1+1 is equal to 2. Since the right side is `true`, the *if statement* is `true` and it prints, "At least one is true."

`appName` can be used in the future whenever you want "Grasshopper".

```appName``` could be used in the future whenever you need the piece of text "Grasshopper".

A way of storing a value for later use, also known as a variable. A `var` should have a name (also known as an identifier), and it optionally can be assigned a value, which could be a number, a string, or a more complex piece of data.

`cityOfOrigin` is a variable that will be equal to `'Pittsburgh'`. Then another variable called `cityOfDestination` is created and later gets assigned a new value of `'Manila'`.

```cityOfOrigin``` is now a *variable* that will be equal to 'Pittsburgh'.

Often called the remainder or modulo operator, `%` determines the whole value left over when the value on the left is divided by the value on the right.

`result` will be equal to 0, and `resultWithRemainder` will be equal to 2.

An argument is the input given to a function when it is called.

Arguments are similar to parameters, except parameter refers to the input of a function declaration, while argument refers to the input when the function is called.

In this code example, `4` and `7` are the arguments for the `sum()` function because they are the inputs given to the function when it is called.

The parameters for the function are `number1` and `number2`.

A parameter is a special type of variable that is used to specify the input of a function.

Parameters are defined inside the parentheses `()` of a function declaration, and behave like a variable inside a function. They only exist inside the function declaration.

In the `sum()` function declaration, `number1` and `number2` are the parameters. The function returns the sum of the 2 parameters.

When the function is called, the numbers passed into it are called arguments. In this example code, `4` and `7` are arguments.

Hour of Code Hacky Grace

- Change `dizzyMode` from `true ` to `false`

Set it Straight

- Change `let size = 1.5` to `let size = 1`

Downsizing

Variable?

**Inside** the test `()` of the [if statement](concepts/IfStatement):
- Change `throughGap === false` to `throughGap === true`

**Inside** the code block `{}` of the [if statement](concepts/IfStatement):
- Change `score = score + 0` to `score = score + 1`

Settling the Score

At the **top** of the code:
- Change `binary = false` to `binary = true`


  

On the empty line `_ _ _` below `if (binary === true)`:
- Add `updateScoreBoard(binaryScore)`

Binary Scoring

Runs one piece of code if a test is true, and a different piece of code if its false

Holds a value to be used later in the code

If...else?

- Change the value of `loopInterval` from `10` to `12`

Time Lord

 **Inside** the code block `{}` of the 2nd  [if statement](concepts/IfStatement) that checks `if (collision === 'wall')`: 
- Replace `gameOver()` with `changeColor()`

Can't Touch This

**Inside** the test `()` of the [if statement](concepts/IfStatement), on the **right** side of the `||`:
 - Change `grasshopperHeight < 0` to `grasshopperHeight < 10`


  **Inside** the code block `{}` of the [if statement](concepts/IfStatement):
- Add `jump()` 

Autopilot

Update the x coordinate of the laser's end point.  

**Inside** the code block `{}` of the  `createLaser()`:
 - Change `.attr('x2', midX + 0)` to `.attr('x2', midX + 100)`


Line it Up

Change the function that runs when the game panel is clicked.

**Inside** the parentheses `()` of `.on()`:
- Replace `createLaser` with `shootLaser`

Click it

Waits several seconds before running a function


Runs a function after an event happens, like when a mouse is clicked


Event Listeners?

Update the coordinates that set the end point of the laser.  

**Inside** the parentheses `()` of `aimAndShootLaser()`:
- Change the **third** value from `250` to `x2`.  
- Change the **last** value from `y1` to  `y2`. 

Point to Point

**Inside** the test `()` of the  [if statement](concepts/IfStatement):
- Change `box === ''` to `box === 'hit'`

**Inside** the code block `{}` of the [if statement](concepts/IfStatement):
- Add `removeBox()`

Hit it

Change the [variables](concepts/CreatingVariables), and add [functions](concepts/CallExpression), to create your own game!

Grasshopper Guide

Concepts for this lesson

Are you sure you want to reset your code?