> For the complete documentation index, see [llms.txt](https://raffycastlee.gitbook.io/marcyannotes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://raffycastlee.gitbook.io/marcyannotes/fullstack-curriculum/mod-1-javascript-fundamentals/0-intro-to-programming.md).

# Intro to Programming

* [Setup](#setup)
* [What is a program?](#what-is-a-program)
* [Running a file with Node](#running-a-file-with-node)
* [Debunking the Console Log Myth](#debunking-the-console-log-myth)
* [Control Flow](#control-flow)
  * [Inspecting the Control Flow With Node](#inspecting-the-control-flow-with-node)
* [Code Style and Readability](#code-style-and-readability)

**Key Concepts**:

* A **program** is a text file with instructions to accomplish some task.
* **Comments** are ignored and help to explain the code.
* **Expressions** are raw data values or the results of operations. Expressions on their own do nothing.
* **Statements** change the program.
  * Creating a variable increases the memory used by the program.
  * `if` statements change the "control flow" of a program by skipping lines of code.
* **Node** is a program that interprets and executes JavaScript code.
* `console` is a built-in object with functions that print text to the Terminal output. A program can run without any console statements, you just won't see any output in the Terminal.
* **Control Flow** is the order in which lines of code are executed.
* **Code Style** refers to the formatting of the code in a way that makes it easier to read and understand. Refer to the [style guide](https://marcylabschool.gitbook.io/marcy-lab-school-docs/fullstack-curriculum/cheatsheets/style-guide) for more details.

## Setup

* In your `unit-1` folder, create a new folder called `1-intro-to-programming`
* `cd 1-intro-to-programming`
* `touch index.js`

## What is a program?

* A program is a text file with instructions to accomplish some task.
* Comments are ignored and help to explain the code.
* **Expressions** are raw data values or the results of operations. Expressions on their own do nothing.

```js
// index.js
5 + 5
'hello'
true
```

* **Statements** change the program.

{% code title="index.js" lineNumbers="true" %}

```js
// creating a variable increases the memory/storage used by the program
let instructor = 'ben';
let mood;

// if statements change the "control flow" of a program (which line of code comes next)
if (instructor !== 'ben') {
  mood = 'sad';
} else {
  mood = 'happy';
}
```

{% endcode %}

* References to variables are also expressions, since they retrieve the raw data held inside of them.
* Expressions can be composed of multiple smaller expressions! For example, the `instructor` and `'ben'` expressions are combined using the `!==` operator to create an expression that returns the value `false`

## Running a file with Node

* When we want to run the code in a file, we use Node
* Node is a program for interpreting and executing JavaScript code
* It is installed on your computers and can be activated in the Terminal using the `node <filename>` command:

```sh
node index.js
```

* **Question:** Any guess as to why we're not seeing anything when we run this file?

## Debunking the Console Log Myth

* `console.log()` is a built-in function that prints text to the Terminal output
* The word "Console" is a reference to the Terminal.

```js
console.log('hello');
```

* Every language has a built-in console output function:

```python
# run a .py file like this: 
# python3 index.py
print('hello')
```

* The most common assumption that beginner developers make is that `console.log()` is the only way to make your program work. This is not the case!

```js
let x = 0;

/* A loop with 1 billion iterations will actually take a second to run! Increase that number to 10 billion and it could take a minute or more. */
for (let i = 0; i < 1000000000; i++) {
  x++;
}
```

* Your computer is executing the instructions you give it, but you just can't see the results. `console.log()` just prints the results to the Terminal.

```js
let x = 0;

console.time("x timer");

/* A loop with 1 billion iterations will actually take a second to run! Increase that number to 10 billion and it could take a minute or more. */
for (let i = 0; i < 1000000000; i++) {
  x++;
}

console.timeEnd("x timer");

console.log(x);
```

* As you can see, `console` is actually an object with functions inside (a.k.a "methods") that can each be used to print things to the Terminal.

## Control Flow

* **Control Flow** refers to the order in which code is executed.
* The default control flow is top to bottom, with every line of code being executed in order.

```js
console.log('1')
console.log('2')
console.log('3')
```

* `if` statements change the control flow of a program, causing certain lines to be skipped.

```js
let instructor = 'ben';
let mood;

// if statements change the "control flow" of a program (which line of code comes next)
if (instructor !== 'ben') {
  mood = 'sad'; // this is skipped
} else {
  mood = 'happy'; // this line of code is executed next
}
```

* Functions are containers for statements. A **function call** statement changes the control flow by "activating" the function. Calling a function sets the first line of code in the function as the next line of code to be executed.

{% code title="index.js" lineNumbers="true" %}

```js
// functions are containers for statements. we've created the function, but haven't activated it yet
const say = (speaker, message) => {
  console.log(`${speaker}: ${message}`);
  return; // often, a blank return statement like this is omitted
};
 
// call the functions - activate the function, tell it start
say("ben", "hi Fall 2024")
say("Fall 2024", "hi ben")
```

{% endcode %}

* The `return` statement "returns" the control flow to the line of code that called the function. The `return` statement can be omitted if no value is returned but technically its still there (otherwise the program wouldn't know to go back to the function call!).

**Question:** What is the control flow of the code above? (Describe it using line numbers.)

### Inspecting the Control Flow With Node

* You can view the exact control flow of a program by using the built in VS Code **Run and Debug panel**.

![The run and debug panel is found on the left side of the screen](/files/TLKQHXWNBbZzhfAgHDNd)

* Once you open the panel, open a `.js` file and add a `debugger;` statement wherever you would like to inspect your code. Then, click "Run and Debug" and select the "Node" configuration.

![](/files/zSbIBeSc21A8fIo0qPqW)

* At the top, you will see the debugger control panel where you can control the execution of the program.

![](/files/povrV48QoIvnyuzwjwNt)

## Code Style and Readability

* **Readability** is how easy it is for another engineer to read and understand your code (including future you).
* Indentation shows the scope of each line of code. Without it, it is harder to read and understand.

```js
const canVote = (age) => {
if (age >= 18) {
return true;
} else {
return false;
}
}
```

* Whenever a block of code is created with curly braces `{}`, we indent the code inside using the Tab key:

```js
const canVote = (age) => {
  if (age >= 18) {
    return true;
  } else {
    return false;
  }
}
```

**Question:** How would you fix the code style of this function?

```js
const sayTheTime = (time) => {
if (time <= 12) {
  console.log("Good morning");
        } else if (time <= 18) {
  console.log("Good afternoon");
} else {
  console.log("Good evening");
}
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://raffycastlee.gitbook.io/marcyannotes/fullstack-curriculum/mod-1-javascript-fundamentals/0-intro-to-programming.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.