A Program Line by Line: console.log, Numbers and Text

Maria's grandmother keeps her biryani recipe on a card. The card is a list of steps, and the order matters: you wash the rice before you cook it, never after. A program is the same kind of list. The computer reads it from the top, one line at a time, and does exactly what each line says. This lesson writes the recipe card as a program, and then makes the program do sums.

The recipe card as a program

Here is the card as four lines of JavaScript. Each line prints one step.

console.log("1. Wash the rice.");
console.log("2. Fry the onions until brown.");
console.log("3. Add the meat and the spices.");
console.log("4. Add the rice and cook on low heat.");

1. Wash the rice.
2. Fry the onions until brown.
3. Add the meat and the spices.
4. Add the rice and cook on low heat.

Four lines in, four lines out, in the same order. Each console.log prints its text and then moves to a new line, so you never type the line break yourself.

Each line is a statement: one complete instruction, ending with a semicolon. The engine runs the first statement, then the second, and so on to the last. When it runs out of statements, the program ends.

So a program is a list of statements, run from top to bottom, and the console shows what they printed in that same order.

One statement, piece by piece

Take the first line apart. It has six pieces, and each one has a job.

console.log(value1, value2, ...);

JavaScript cares about capital letters. console.log works, and Console.log stops the program with an error, as Common mistakes shows. So a statement is pieces in a fixed order, and every piece is spelled exactly.

Several values in one call

console.log takes any number of arguments. It prints them in order, with one space between each pair. A number does not need quotes.

console.log("Rice:", 450, "taka");
console.log("Items:", 3);
console.log(2026);
console.log();
console.log("The line above is empty.");

Rice: 450 taka
Items: 3
2026

The line above is empty.

Look at the first output line. You did not type a space after the colon, and one is there anyway. console.log adds the spaces between arguments, so "Rice:" needs no space of its own. A call with no arguments prints an empty line.

So commas separate the values, and console.log puts the spaces in for you.

Arithmetic: six operators

A number in a program can take part in a sum. Write 120 + 45 and the engine works it out before printing. A piece of code that produces a value, like 120 + 45, is called an expression. The symbol in the middle is an operator.

console.log(120 + 45);
console.log(120 - 45);
console.log(12 * 5);
console.log(7 / 2);
console.log(7 % 2);
console.log(2 ** 10);

165
75
60
3.5
1
1024

The order is the one from school. *, / and % go before + and -, and ** goes before all of them. Brackets go first of all.

console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 4 - 3);
console.log(2 * 3 ** 2);

14
20
3
18

2 + 3 * 4 is 2 + 12, and the brackets make it 5 * 4 instead. 10 - 4 - 3 works from the left, so it is 6 - 3. When you are not sure of the order, add brackets: they cost nothing and the next reader thanks you. So an expression is worked out first, in the school order, and only its value reaches console.log.

Division keeps the fraction

7 / 2 printed 3.5. In JavaScript there is one kind of number for whole numbers and decimals alike, so division never throws the fraction away. Lesson 03 shows that one kind of number up close.

When you want the whole part only, say so with Math.floor. It rounds down to the whole number at or below its argument. Math is another ready-made object, like console, full of number tools.

console.log(7 / 2);
console.log(Math.floor(7 / 2));
console.log(10 / 3);
console.log(9 / 3);

3.5
3
3.3333333333333335
3

9 / 3 prints 3, not 3.0, because a whole result prints as a whole number. 10 / 3 ends in a 5 where you might expect a 3. That last digit is real, and lesson 03 explains where it comes from.

So / always keeps the fraction, and Math.floor is how you drop it on purpose.

Remainder and power

% gives the remainder after division. 17 % 5 is 2, because 5 goes into 17 three times with 2 left over. Its most common job is testing whether a number is even: n % 2 is 0 for an even n and 1 for an odd one.

With a negative number, the sign of the answer follows the left side. Bob expects -7 % 3 to be 2, and it is not.

console.log(17 % 5);
console.log(-7 % 3);
console.log(7 % -3);
console.log(4.5 % 2);

2
-1
1
0.5

-7 % 3 is -1: take 3 out of -7 twice and -1 is left, with the sign of the -7. % also works on decimals, so 4.5 % 2 is 0.5.

** raises a number to a power. 2 ** 10 is ten 2s multiplied together, 1024. A power of 0.5 is a square root, so 2 ** 0.5 prints 1.4142135623730951. So % is the remainder, with the sign of the left side, and ** is the power.

Text in quotes

A string can sit between double quotes or single quotes. "Hello" and 'Hello' are the same string. This track writes double quotes, the default of Prettier, the formatter most JavaScript teams run (lesson 06).

The two kinds help when the text holds a quote. Put the string in the other kind, or put a backslash before the quote.

console.log("It's Zara's turn.");
console.log('She said "go".');
console.log("She said \"go\".");

It's Zara's turn.
She said "go".
She said "go".

The backslash in \" tells the engine that this quote is text, not the end of the string. It is called an escape, and the backslash is not printed. So a string opens and closes with the same kind of quote, and a quote inside it is either the other kind or escaped.

console.log("Hello, JavaScript.");

Hello, JavaScript.

console.log("Notebooks:", 2 * 60);
console.log("Pen:", 25);
console.log("Bag:", 450);
console.log("Total:", 2 * 60 + 25 + 450);

Notebooks: 120
Pen: 25
Bag: 450
Total: 595

console.log("Film length:", 135, "minutes");
console.log("That is", Math.floor(135 / 60), "h", 135 % 60, "min");

Film length: 135 minutes
That is 2 h 15 min

console.log("Sum:", 72 + 65 + 80);
console.log("Average:", (72 + 65 + 80) / 3);
console.log("Without brackets:", 72 + 65 + 80 / 3);

Sum: 217
Average: 72.33333333333333
Without brackets: 163.66666666666666

console.log(Hello);

console.log("Hello');

Console.log("Hello");

console.log(-2 ** 2);

console.log(7 / 2);
console.log(Math.floor(7 / 2));
console.log(7 % 2);
console.log(Math.floor(-7 / 2));

Tea: 45
Samosa: 40
Cake: 55
Total: 140

// Print the receipt, one console.log per line.
// Write the costs as sums, such as 3 * 15, not as 45.

Area: 60
Perimeter: 34

// The area is length times width.
// The perimeter is twice the length plus twice the width.
// Use brackets where the order matters.

Next, lesson 02 gives a value a name, so a program can keep a number and change it later.