Intro to Programming

• Setup

• What is a program?

• Running a file with Node

• Debunking the Console Log Myth

• Control Flow

  • Inspecting the Control Flow With Node

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

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

• Statements change the program.

index.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';
}

• 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:

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.

console.log('hello');

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

# 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!

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.

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.

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

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

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.

index.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")

• 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

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

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

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.

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:

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

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

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