Your first JavaScript program: how code turns into action

A program is text with instructions for a computer. The computer doesn't guess what you meant and doesn't skip “obvious” steps: it does exactly what is written, in the order it is written. Almost every program follows the same shape: it receives data, does something with it and produces a result. A tip calculator takes the bill and a percentage, multiplies and divides, then shows the tip and the total.

JavaScript is an interpreted language: the browser or Node.js takes the program's source text and runs it without a separate build step. As MDN explains, modern engines speed things up with just-in-time compilation, turning code into a fast binary form while it runs, but you don't see any of that: you write a line, run it and see the result. That makes JavaScript a convenient first language.

There is one language and two main places to run it, called environments. In the browser, JavaScript controls the page: it reacts to clicks, changes text and submits forms. Node.js is an open-source, cross-platform runtime that runs the same V8 engine as Chrome, but outside the browser: on your computer or on a server. In the lesson on how a website works, these are the two halves of one system, the frontend and the backend.

The language itself is standardized in the ECMAScript specification (ECMA-262), and everything in this track that concerns the language (variables, conditions, loops, functions) works the same in both environments. Only the built-in environment objects differ: Node.js has no document, and the browser has no process. If an example uses one of them, it will run only in its own environment.

console.log("Hello, InterLAB!"); // → Hello, InterLAB!
console.log(2 + 3);              // → 5
console.log("2" + "3");          // → 23

console.log is the “show this value” command. The parentheses hold what to show: text in quotes, a number or an expression. The expression 2 + 3 is evaluated first, so 5 is printed. But "2" + "3" gives 23: in quotes these are strings, not numbers, and plus joins them. The next lesson covers the difference between numbers and strings in detail; for now, just remember that quotes change the meaning.

After each console.log line the console also shows a grey undefined. That's not an error: the console prints the value of the last expression it ran, and console.log itself returns nothing; per MDN its return value is undefined. If you type just 2 + 3 without console.log, the console shows 5, the value of the expression.

The console is great for experiments, but a program you'll run again and again lives in a file. For that you need Node.js and a terminal, a window where you type commands as text.

$ node --version
v24.18.0

$ node hello.js
Hello, InterLAB!
5
23

Node.js skips comments after //; they're for people. The .js extension means a regular JavaScript file. The Node.js docs also use .mjs, which marks module files that use import; we'll get to modules later, first programs don't need them.

Now a program that solves a real task. First, a version for the browser console, with the input data written right in the code.

const bill = 12500;    // bill amount, ₸
const percent = 10;    // tip percentage

const tip = bill * percent / 100;
const total = bill + tip;

console.log(`Tip: ${tip} ₸`);            // → Tip: 1250 ₸
console.log(`Total to pay: ${total} ₸`); // → Total to pay: 13750 ₸

• const bill = 12500; gives the value a name. From then on the program can say bill instead of the number. The next lesson covers const and let in detail.
• * and / are multiplication and division. As in math, they run before addition, so bill * percent / 100 is 10% of the bill.
• Text in backticks is a template literal: the value is substituted in place of ${tip}. On most keyboards the backtick key sits to the left of 1.
• A semicolon ends an instruction. JavaScript often inserts them for you, but an explicit semicolon avoids rare surprises.

A program with its data inside the code only ever handles one bill. Let's make the amount and the percentage come from outside, from the command line. Node.js provides process.argv for this: the list of arguments the program was launched with. According to the Node.js docs, the first element is the path to node itself, the second is the path to the program file, and then come the values you typed after the file name. Counting starts at zero, so the bill is process.argv[2] and the percentage is process.argv[3].

// tip.js — tip calculator
// Usage: node tip.js <bill amount> <percent>
const bill = Number(process.argv[2]);
const percent = Number(process.argv[3]);

const tip = Math.round(bill * percent / 100);
const total = bill + tip;

console.log(`Bill: ${bill} ₸`);
console.log(`Tip ${percent}%: ${tip} ₸`);
console.log(`Total: ${total} ₸`);

$ node tip.js 12500 10
Bill: 12500 ₸
Tip 10%: 1250 ₸
Total: 13750 ₸

$ node tip.js 8990 15
Bill: 8990 ₸
Tip 15%: 1349 ₸
Total: 10339 ₸

Command-line arguments always arrive as text, so we wrap them in Number(...) to turn the string “12500” into the number 12500. Math.round rounds to the nearest whole number: 15% of 8,990 is 1,348.5, and the receipt says 1,349 ₸.

Errors are a normal part of the job, and an error message is a hint, not a verdict. Start by telling two kinds apart. A syntax error (SyntaxError) happens when the engine can't parse the program text: per MDN, it ran into tokens or a token order that don't follow the language's grammar. In that case not a single line runs, not even the ones above the error.

const bill = 12500;
console.log("Calculating the tip…");
console.log(`Total: ${bill * 1.1} ₸`;

$ node broken.js
…\first-js\broken.js:3
console.log(`Total: ${bill * 1.1} ₸`;
                                ^^^^

SyntaxError: missing ) after argument list
    at …

Node.js v24.18.0

Read the message top to bottom. The first line is the file and line number (broken.js:3). Next comes the line of code itself, and the ^ marks under it show where the engine realized something was wrong. Then the error type and description: missing ) after argument list. Lines starting with at are the call stack inside Node.js; for a syntax error you can skip them. In the browser console the same message reads Uncaught SyntaxError: missing ) after argument list.

The second kind is a runtime error. The syntax is fine and the program started, but at some line it couldn't continue. The most common beginner case is a typo in a name:

$ node typo.js
Calculating the tip…
…\first-js\typo.js:3
console.log(`Total: ${totl} ₸`);
                      ^

ReferenceError: totl is not defined
    at …

Node.js v24.18.0

In this lesson const showed up as “a name for a value”, and "2" + "3" turned into 23. The next step in the track is variables and data types: how let differs from const, what kinds of values exist, where NaN comes from and how to compare values without surprises. Working in the terminal is covered in a separate lesson on the command line, and reading long error messages with a call stack is covered in the debugging guide.