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.`

In JavaScript, an array is a list of items. The items can be different data types: numbers, strings, and even other arrays. An array inside another array is called array nesting.

`exampleArray` has 5 items. It contains strings, numbers and an array; which itself has two items that are numbers.

`exampleArray` has 5 items, and contains *strings*, *numbers* and an *array*; which itself has two items that are *numbers*.

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 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 = 'some text'`. The variable can later receive a new value. For example, `myVariable = 'changed some text'` When reassigning a variable the `var` is not necessary

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.

*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.

A loop repeats the section of code within curly brackets `{}`. In JavaScript, a for of loop goes through each element in an array or string, repeating the code for each element.

Each item in the `groceries` array will be printed out on its own line.

Each item in the ```groceries``` Array will print to the output area.

In JavaScript, a classic for loop repeats the same code inside the block `{ }` a specified number of times. It is defined in three parts. The first part happens before the loop starts and defines a looping variable (`var i = 0;`). The second part is a test that determines if the loop should keep repeating (`i < 10;`). And the third part updates the looping variable each time the loop repeats ( `i = i + 1`).

In this example, the looping variable (`i`) starts at 0. The code in the block `{}` will keep repeating while `i` is less than 10. And `i` is increased by 1 each loop. This code prints out the numbers 0 through 9.

The three parts control how many times the code inside the block `{}` will repeat. It has a starting value, a check if you should continue (true) or exit the loop (false), and an update to the loop counter variable.

A function does some action or task defined in its block {}. The part of code where the function is made is the function declaration. To use or call this function, its name is used with a set of parentheses ().

The `function` keyword creates a new function called `printSum(num1, num2)` that has the two parameters `num1` and `num2`. When calling `printSum(5, 2)`, the arguments 5 and 2 are added together and printed. Keep in mind, `num1` and `num2` are parameters, or placeholders for the arguments 5 and 2

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 variable `result` will be holding the number `2`.

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.

In most programming languages, including JavaScript, arrays are indexed starting at 0. The 1st item in an array has an index of 0. For example, `myArray[0]` accesses the 1st item. While `myArray[3]` accesses the 4th item.

The `fruit` variable holds the second item in the array, which is 'bananas'.

The `fruit` variable would contain the second item in the array, which is 'bananas'.

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`.

An object can store multiple pieces of information inside one variable. Dot notation is used to access a property of an object. For example, `objectName.propertyName`.

This code will print out `'Coding is fun.'`

'Coding is fun.' would be printed out in this example.

An object stores multiple values that have property (or key) names. This allows them to be easily accessed later in the code.

`apples` and `bananas` are properties of the object `groceries`. `5` and `2` are the associated values with those properties. `groceries.apples`, for instance, is equal to 5.

```apples``` and ```bananas``` are keys of ```groceries```, and ```5``` and ```2``` are the associated values with those keys. ```groceries.apples```, for instance, is equal to 5.

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'`.

`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'.

A while loop runs the code inside of its block until the test in its parentheses is no longer true.

As long as `i` is less than 3, the code in the Block Statement will repeat. If you forget to increase `i` in this code, the `while` loop will repeat forever and cause a crash.

As long as ```i``` is less than 5, the code in the Block Statement will repeat. If you forget to increase ```i``` in this code, the ```while``` loop will repeat forever and cause a crash.

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.

Adds an event listener to an HTML element. 

The event listener runs a function whenever a specified action (for example, a `'click'` event) occurs to the HTML element.

The method takes 2 arguments:

 1. The event name, e.g. `'click'`
 2. The function to run when the event listener is triggered

This code adds a `'click'` event listener to the HTML element `button1`. Whenever `button1` is clicked, the arrow function runs. The function will set the `textContent` of the button to `'Submitted'`.

Hour of Code Image Filters

- Change `colorBalanceFilter()` to `pixelateFilter()`

Functional Filter

- Change `applyFilter = false` to ` applyFilter = true`

Filter Flipper

A variable stores a piece of information that can be used later in your code

A Variable?

**Inside** the `{}` of the [if statement](concepts/IfStatement):
- Change `magentaFilter()` to `limeFilter()`

In the Limelight

**Inside** the parentheses of `updateImage()`:
- Add `grayscalePixels`. For example,  `updateImage(grayscalePixels)`

Grayed Out

Inside the `{}` of the  `pixelateFilter()` function:

* Change `pixelSize` from `1` to `10`

Pixelate

**Inside** the `pixel` [array](concepts/ArrayExpression):
* Change the 3rd number (the blue light) to `255`

A Purple Pixel

```
if (x === 5) {
    print('hello')
}
```

An Array?

Which one is an [array](concepts/ArrayExpression)?

* Change the value of `pixel[1]` to `255`

Mixing Values

**Inside** the `{}` of the [loop](concepts/ForOfStatement):

* Add `create(pixel)` 


Processing Pixels

Inside the `{}` of the `invertFilter()` function definition:

* Change `adjustment` from `0` to `255` 
* Add `pixels` 
 inside the parentheses `()` of `updateImage()`. For example, `updateImage(pixels)`

Invert the Image

Inside the `{}` of the  `lightenFilter()` function definition:


* Change `pixel[2] + 0` to `pixel[2] + adjustment`
* Add `pixels`
 inside the parentheses `()` of `updateImage()`. For example, `updateImage(pixels)`

Lighten Up

Inside the `{}` of the  `darkenFilter()` function definition:

* Update `adjustment` from `0` to `110`
* Change `pixel[2] -= 0` to ` pixel[2] -= adjustment` 



The Dark Side

It's a shortcut method for decreasing a variable's value.


The `-=` Operator?

What does the  `-=` [subtraction assignment operator](concepts/AssignmentExpression_-=) do?

Inside the `{}` of the `colorBalanceFilter()` function definition:

* Increase `pixel[2]`  by `200` 


Color Balance


* Replace `lightenFilter` with `darkenFilter`


Filter Clicker

Runs a function whenever a certain action occurs

An Event Listener?

**Inside** the `{}` of the `applyFilters()` function definition:
* Add another function. For example, `pixelateFilter()` 

Two at a Time

* Change the color values or pixel size and add functions to the `applyFilters()` function definition to create your own filter!



Grasshopper Guide

Are you sure you want to reset your code?