Chapter 1 · Foundations
Inside the computer
Step 1 of 18 · Concept
A computer, simplified
By the end of this lesson you know what happens to your program when it runs.
Every computer has three main parts:
| part | what it does | keeps things when off? |
|---|---|---|
| CPU | carries out instructions, one at a time, very fast | no |
| memory | holds the programs that are running, and their values | no |
| storage | holds files, such as main.js | yes |
Step 2 of 18 · Quiz
Where is it kept?
You close the browser and come back tomorrow. main.js is still there. Where was it kept?
Step 3 of 18 · Concept
Memory is numbered boxes
- Memory is a long row of tiny boxes called bytes. A byte holds a whole number from 0 to 255.
- Each box has a number, its address. The CPU finds a box by its address.
- A value takes several boxes in a row: a JavaScript number takes 8.
Step 4 of 18 · Quiz
What fits in a byte?
A byte holds one number. Which of these numbers cannot fit in one byte?
Step 5 of 18 · Concept
From your file to a running program
Run types node main.js (lesson 1). Then:
nodereadsmain.jsfrom storage.- It checks the grammar of the whole file.
- Its engine, V8, turns the file into bytecode: simple instructions, kept in memory.
- V8 carries out the bytecode with the CPU, from the top.
Step 6 of 18 · Quiz
When is the whole file checked?
When does node check the grammar of main.js?
Step 7 of 18 · Concept
One line at a time
- V8 keeps a program counter: a marker on the next instruction.
- Again and again, it reads that instruction, carries it out, and moves the marker on.
- In this course we put the marker on a line of code. Really, one line becomes several bytecode instructions.
Step 8 of 18 · Trace
Watch the program counter
Press Next to run one line. Watch the marker and the output.
console.log("Ready");
console.log("Set");
console.log("Go");- Line 1 is next. Nothing is printed yet.
- Line 1 ran and printed
Ready. Line 2 is next. - Line 2 ran and printed
Set. Line 3 is next. - Line 3 ran and printed
Go. No line is left, so the program ends.
Step 9 of 18 · Try it
Try it: put it in order
The lines run from the top, one at a time. Move them so the program prints:
3
2
1
Go!
Cut a whole line and paste it where it belongs (on a desktop, Alt+↑ and Alt+↓ move the line the cursor is on).
Step 10 of 18 · Concept
Input and output
| goes from ... to ... | in JavaScript | |
|---|---|---|
| output | the program to the screen | console.log, which you know |
| input | the keyboard to the program | in lesson 8 |
| files | the program to storage, and back | in lessons 8 and 19 |
Step 11 of 18 · Concept
A value sits in its box
let age = 15;
let name = "Ada";
- Each line makes a variable: a box with a name. Lesson 3 teaches you to write them.
- The boxes live in the module's frame: the frame of your file,
main.js. It goes on the stack when the program starts to run. - A number, a text,
trueorfalsesits in its box.
Step 12 of 18 · Concept
Arrays and objects live on the heap
let age = 15;
const scores = [90, 75];
const makes a box too (lesson 3). [90, 75] is an array, a list of values (lesson 10). Arrays and objects
(lesson 11) live on the heap, another part of memory.
The box scores holds a reference to the array, drawn as an arrow.
Step 13 of 18 · Quiz
Where does it live?
A program runs these lines. Where do the text "Ada" and the array [1, 2] live?
const name = "Ada";
const xs = [1, 2];
Step 14 of 18 · Trace
Calls stack up
A function is a piece of work with a name, run when it is called (lesson 7 writes them). Each running call gets a frame of its own, on top of the stack. Press Next and watch the stack.
function greet() {
console.log("Hi");
}
console.log("Start");
greet();
console.log("End");- Lines 1–3 make the function
greetwithout running it. Line 5 is next. - Line 5 printed
Start. Line 6 callsgreet. - A frame for
greetgoes on top of the module's frame. Line 2 is next. - Line 2 printed
Hi. Line 3, the}, is next: it endsgreetand returns to line 6, where it was called. - The frame of
greetis gone. Back in the module's frame, line 7 is next. - Line 7 printed
End. The program is finished, and the stack is empty.
Step 15 of 18 · Quiz
When a function ends
greet has finished. What happened to its frame?
function greet() {
console.log("Hi");
}
console.log("Start");
greet();
console.log("End");Step 16 of 18 · Concept
After the last line
When the last line has run, Node checks for anything still pending: work set for later, such as a timer. It waits for that work, runs it, then exits.
Most programs have nothing pending, so they end right after their last line.
Step 17 of 18 · Check yourself
Check yourself: the life of a program
This program prints, in the wrong order, seven things that happen when a program calls a function greet. Move the
lines into the order they happen.
Storage comes first: nothing runs before node has read and checked your file. A call's frame goes on top of the frame that called it.
Step 18 of 18 · Recap
Recap
- Only storage keeps things when the power is off; memory and the CPU do not.
nodechecks all ofmain.js; then V8 runs it line by line.- A number or a text sits in its box. An array lives on the heap; its box holds an arrow.
- Each running call has a frame on the stack, removed when it ends.
- After the last line, Node waits for pending work, then exits.
Next: lesson 3 writes variables with let and const.
Review
5 questions from this lesson, in a new order each time. Answer from memory: 3 of 5 right on the first try passes. On a day after you finish the lesson, a pass earns 15 XP.
The review needs JavaScript.
console.log(1);
console.log("Go!");
console.log(3);
console.log(2);
console.log("A frame for greet goes on top");
console.log("node reads main.js from storage");
console.log("Nothing is pending, so Node exits");
console.log("The module's frame goes on the stack");
console.log("V8 turns the file into bytecode");
console.log("greet returns; its frame is removed");
console.log("node checks the grammar of the whole file");