Your First JavaScript Program
Write a program that prints a coffee shop's specials with console.log, run it with node, leave notes in it with comments, and read the error message when something goes wrong.
Novice · JavaScript · Web Development · Updated
After this lesson you can
- Write and run a JavaScript program that prints lines with console.log
- Use comments to leave notes in code and to switch a line off
- Read a JavaScript error message to find its name, its message and its line number
Key takeaways
- A program is a list of instructions, called statements, that run one after another from the top of the file to the bottom.
console.log("text")prints a line in the terminal. Run a file withnodeand its name, such asnode hello.js.//starts a comment: JavaScript skips everything after it on that line. Use comments to leave notes and to switch a line off.- An error message gives the file and line number, the error's name, such as ReferenceError or SyntaxError, and a message saying what went wrong.
Every program you'll ever write starts the same way: you write a few lines, run them, and look at what comes out. Professional developers print things all day long, to check what their code is doing and to find out why it isn't doing what they expected. In this lesson you'll write your first program, for a real kind of job: printing the chalkboard of daily specials for The Daily Grind, a neighborhood coffee shop. Then you'll break it on purpose, so the first error message you meet is one you already understand.
A program is a list of instructions
Before the doors open, a barista at The Daily Grind follows a checklist: turn on the espresso machine, grind the beans, write the specials on the chalkboard. One step at a time, top to bottom.
A program works the same way. It's a list of instructions in a text file, and the computer carries them out one after another, from the first line to the last. Each instruction is called a statement. In JavaScript a statement usually sits on its own line and ends with a semicolon ; (read "semicolon"), the way a sentence ends with a period.
JavaScript files end in .js, so the computer knows what's inside them.
Your first program: hello.js
In your javascript-course folder, make a folder named daily-grind, and open it in VS Code with File > Open Folder. In the Explorer on the left, click the New File icon and name the file hello.js. Type this line, then save with Ctrl+S (Cmd+S on macOS):
console.log("Good morning from The Daily Grind!");
Open the terminal (Terminal > New Terminal) and run the file with the node command, followed by the file's name:
node hello.js
Good morning from The Daily Grind!
Here's what that one line does:
consoleis the console: the place where a program writes messages. Run with Node, that's your terminal.- The dot,
., read "dot", means "the part ofconsolenamed...".logwrites one line there. Together,console.logis read "console dot log". - The parentheses
( )hold what to print. - The double quotes
" "mark the start and end of the text. Text in quotes is called a string. The quotes aren't printed.
Several statements, in order
A chalkboard has more than one line. Make a new file, chalkboard.js, with one console.log statement for each line:
console.log("THE DAILY GRIND");
console.log("Today's specials:");
console.log("Pumpkin Spice Latte: $5.25");
console.log("Blueberry Muffin: $3.25");
node chalkboard.js
THE DAILY GRIND
Today's specials:
Pumpkin Spice Latte: $5.25
Blueberry Muffin: $3.25
The lines print in the order the statements are written. Swap two lines in the file and run it again: the output swaps too. The computer never skips ahead or guesses what you meant.
Try it. Add a line for a drink you'd order, with its price, and run node chalkboard.js again. Then add console.log(3 * 4.75);, with no quotes. It prints 14.25: without quotes, JavaScript works the sum out instead of printing it as text. Numbers get a chapter of their own next.
Comments: notes for people
A recipe card often has a note in the margin: "use oat milk if they ask". The note is for the cook, not part of the recipe. Code has notes like that too, called comments. JavaScript skips them completely.
//(read "slash slash") starts a comment that runs to the end of the line./*and*/(read "slash star" and "star slash") wrap a comment that spans several lines.
Comments have two everyday jobs: explaining code to the next person who reads it (often you, a month from now), and switching a line off without deleting it. The muffins sold out, so this chalkboard skips them:
/* The Daily Grind's chalkboard.
Update the specials every morning. */
console.log("Pumpkin Spice Latte: $5.25");
// console.log("Blueberry Muffin: $3.25");
console.log("Chai Latte: $4.50"); // back by popular demand
Pumpkin Spice Latte: $5.25
Chai Latte: $4.50
Putting // in front of a line of code is called commenting it out. In VS Code, Ctrl+/ (Cmd+/ on macOS) comments out the line your cursor is on, and pressing it again brings the line back.
Reading an error message
A smoke alarm doesn't only beep: the panel by the door says which room it's in. JavaScript's error messages are like that. They look alarming at first, but they tell you where to look and what's wrong.
Change the second line of chalkboard.js so console is missing its last letter, and run it again:
console.log("THE DAILY GRIND");
consol.log("Pumpkin Spice Latte: $5.25");
console.log("Blueberry Muffin: $3.25");
THE DAILY GRIND
C:\Users\you\Documents\javascript-course\daily-grind\chalkboard.js:2
consol.log("Pumpkin Spice Latte: $5.25");
^
ReferenceError: consol is not defined
at Object.<anonymous> (C:\Users\you\Documents\javascript-course\daily-grind\chalkboard.js:2:1)
at Module._compile (node:internal/modules/cjs/loader:1968:14)
at Object..js (node:internal/modules/cjs/loader:2108:10)
at Module.load (node:internal/modules/cjs/loader:1690:32)
at Module._load (node:internal/modules/cjs/loader:1480:12)
at wrapModuleLoad (node:internal/modules/cjs/loader:261:19)
at Module.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:171:5)
at node:internal/main/run_main_module:33:47
Node.js v26.13.0
Read it from the top. The path is where your file is, so yours will be different (on a Mac it starts /Users/). The at lines under the message point inside Node's own files, and their numbers change from one Node version to the next, so yours may not match. Only your own file's line matters.
- Where:
chalkboard.js:2is the file and the line number, line 2. Node shows that line, with a^(read "caret") under the spot. - The name:
ReferenceError. Each kind of error has a name, and the name is the first clue. - The message:
consol is not defined. JavaScript doesn't know anything calledconsol.
The lines that start with at are the stack trace: the route the program took to get there. In a program this small, only the first one is yours (chalkboard.js:2:1 is line 2, column 1), and you can skip the rest. Notice the first line did print: the program ran line 1, then stopped at the error.
Two errors you'll meet first
A ReferenceError means JavaScript met a name it doesn't know. It's almost always a typo or a wrong capital letter: JavaScript is case-sensitive, so Console.log (with a capital C) is a different name from console.log, and it fails the same way.
A SyntaxError means the code breaks JavaScript's grammar, its syntax: the rules for how code is written. Put the e back, then remove the closing quote from line 2 instead:
console.log("THE DAILY GRIND");
console.log("Pumpkin Spice Latte: $5.25);
console.log("Blueberry Muffin: $3.25");
C:\Users\you\Documents\javascript-course\daily-grind\chalkboard.js:2
console.log("Pumpkin Spice Latte: $5.25);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Invalid or unexpected token
at wrapSafe (node:internal/modules/cjs/loader:1900:18)
at Module._compile (node:internal/modules/cjs/loader:1942:20)
at Object..js (node:internal/modules/cjs/loader:2108:10)
at Module.load (node:internal/modules/cjs/loader:1690:32)
at Module._load (node:internal/modules/cjs/loader:1480:12)
at wrapModuleLoad (node:internal/modules/cjs/loader:261:19)
at Module.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:171:5)
at node:internal/main/run_main_module:33:47
Node.js v26.13.0
Two things are different this time. Nothing printed at all, not even line 1: JavaScript reads the whole file before it runs any of it, and it can't run a file it can't read. And the message, Invalid or unexpected token, is vaguer: a token is one piece of code, such as a word, a quote or a bracket, and JavaScript is saying it found one it didn't expect. When a message is vague, the line number and the ^ marks are your best clue: look at line 2, from where the marks start. Remove the ) instead of the quote, and the message is clearer: missing ) after argument list.
Try it. Make each mistake on purpose, one at a time, and read what Node says: a capital C in Console, a missing ), a missing quote. Then fix each one. Knowing what an error looks like when you caused it on purpose makes the next one, the one you didn't mean, much less scary.
Check yourself
3 questions to try on the lesson page.
So what
console.log and node are how you'll see what every program in this course is doing, and an error message, read from the top, tells you the line, the kind of problem and what went wrong. Reading errors calmly is one of the most useful skills a developer has.
Key terms
- console.log()
- Statement
- Comment
- node Command
- Syntax Error
- ReferenceError