Talking to the User

Your program can calculate a perfect score and still feel silent. The next step is conversation: print what happened, ask for a value, turn the answer into the type you need, and leave notes for the person who reads the code later.

Printing more than plain logs

You already know console.log(...): it prints a value so you can see what your program is doing. The console is your program's text output area, the lab bench where you inspect values before you build a full interface.

const playerName = "Mina";
const score = 42;
 
console.log("Player:", playerName);
console.log("Score:", score);

→ Player: Mina, then Score: 42.

console.log is the everyday tool, but it has siblings:

• console.warn(...) prints a warning-style message. Use it for "this might be wrong."
• console.error(...) prints an error-style message. Use it for "this did go wrong."
• console.table(...) shows row-shaped data as a table. It shines once you meet arrays, list-like object values, in Section 6.
• console.group(...) starts an indented group of console messages. console.groupEnd() closes it.

Different consoles style warnings, errors, and tables differently, so don't memorize their colors. Memorize their intent: normal note, warning, error, table, grouped story.

Browser popups: crude input and output

JavaScript also has three old browser dialog tools:

• alert() shows a message and waits for the user to dismiss it.
• prompt() asks a question and returns the user's submitted answer as a string, or null if the user cancels.
• confirm() asks an OK/Cancel question and returns a boolean: true for OK, false for Cancel.

These are modal dialogs, browser popups that pause the page until the user answers. They're useful for tiny learning programs because they make input visible. Real apps avoid them because they interrupt the user, look different across browsers, and can't become rich page layouts. You'll build real page input in Part IV.

const playerName = prompt("Player name");
const scoreText = prompt("Starting score");
const startingScore = Number(scoreText);
const nextScore = startingScore + 5;
const wantsRules = confirm("Show the rules");
 
alert("Ready, " + playerName + "!");
 
console.log(playerName);
console.log(typeof scoreText);
console.log(nextScore);
console.log(wantsRules);

→ Player name 7, Starting score 7, [confirm] Show the rules → true, [alert] Ready, 7!, 7, string, 12, then true.

In the playground, prompt and dialog actions appear as a transcript so you can replay the run. These examples assume the user types an answer. When the user submits 7, JavaScript gives you "7" until you convert it; when the user cancels, prompt() gives you null.

Explicit conversion

Explicit conversion means you choose the type change yourself instead of letting JavaScript guess. Use these three tools constantly:

• Number(value) makes a number.
• String(value) makes text.
• Boolean(value) makes true or false.

const scoreText = "18";
const score = Number(scoreText);
const scoreLabel = String(score);
const validScore = Number("not ready");
 
console.log(score + 2);
console.log(typeof score);
console.log("Score: " + scoreLabel);
console.log(typeof scoreLabel);
console.log(validScore);
console.log(Number.isNaN(validScore));
 
console.log(Boolean("Mina"));
console.log(Boolean(""));
console.log(Boolean(0));
console.log(Boolean(42));

→ 20, number, Score: 18, string, NaN, true, true, false, false, then true.

Number("not ready") gives NaN, the failed-number value from the last lesson. Boolean() has a full map of values that become true or false; lesson 4.2 gives you that map. For now, notice the shape: non-empty text becomes true, empty text becomes false, 0 becomes false, and a regular non-zero number becomes true.

Try it — ask, convert, report

Run this once. The prompt transcript gives canned answers here, then the code converts the score text before doing number math. Change the prompt messages or bonus amount, but keep the prompt messages without a trailing space.

A first taste of coercion

Implicit conversion, also called coercion, is JavaScript converting a value to another type for you. Use this mental model: coercion is a silent conversion behind your back.

Sometimes it is convenient. Sometimes it is the bug.

const playerScore = 10;
const message = "Score: " + playerScore;
const strangeTotal = "10" + 5;
const clearTotal = Number("10") + 5;
 
console.log(message);
console.log(strangeTotal);
console.log(clearTotal);

→ Score: 10, 105, then 15.

When one side of + is a string, JavaScript tends to join text. That makes "Score: " + playerScore useful and "10" + 5 surprising. The professional move is not "memorize every strange case" yet. It is "convert on purpose when the type matters." Lesson 4.2 maps the stranger coercion cases.

Comments are notes to future readers

A comment is text the engine ignores and humans read. You write // for a one-line comment. A useful comment explains intent, not syntax.

const baseScore = 40;
 
// Add the starter bonus once so first-time players see a quick win.
const firstRoundScore = baseScore + 10;
 
console.log(firstRoundScore);

→ 50.

Bad comments repeat the code: // add 10. Good comments explain the choice: why this bonus exists, why a value is stored as cents, why a conversion happens before math. Treat comments like margin notes to your future self. You don't need one on every line. You need one when the next reader would otherwise ask, "Why did you do it that way?"

You can now send values out, bring text in, convert it deliberately, and leave intent behind. Next, you'll use these building blocks to work with text itself: quotes, escapes, string length, and the first small gotchas of joining words together.