Skip to main content

Printing some output

Let's start with the most minimal example capable of producing some output:

console.log('Hello World!');
Toggle Console Output
  • Hello World!

Why are we greeting the planet? Who is even talking? Alright, let's generate a different output:

console.log('I expected more from my first program');
Toggle Console Output
  • I expected more from my first program

Let's make some observations:

  • both programs generate some output below;
  • both programs are made of a sentence, and some other words and symbols like console, log, a dot, a matched pair of parentheses and a trailing semicolon;
  • the programs differ just by the sentence that eventually gets printed;
  • the sentence is enclosed in single quotes (e.g. 'Hello World!).

Why the quotes?​

That's a good question. The problem is that we need to tell the machine when we are using language specific words (like console.log), and when we are reporting human speech.

We must enclose the human speech in quotes to differentiate from the former. Such enclosed portion of text enclosed is called a string in programming. A string can contain whitespace, so it can represent both single words or full sentences.

Strings are a fundamental structure in JavaScript and all other programming languages as well. We'll discuss their properties and applications widely in this course.

In the examples above we used single quotes (' ... '). You can use double quotes as well. That's useful if you want to include single quotes as part of the text you are representing, or more commonly if you are typing apostrophes (since they use the same symbol):

console.log("Hey y'all, it's time to discuss something more interesting!");
Note

There is a way to include a apostrophes in a string enclosed in single quotes:

console.log('Ain\'t no sunshine');
Toggle Console Output
  • Ain't no sunshine

We prepended a backslash to the apostrophe - 'Ain\'t. JavaScript know it should replace the \' sequence with a single quote. I find double quotes just more practical!

Dealing with quantities​

Still far from being excited? That's expected. Let's raise the stakes:

console.log(2 + 3);
Toggle Console Output
  • 5

Now that's my baby! But now the output doesn't mirror the input: it looks like the machine made some considerations and produced some output according to them. Namely it recognized some mathematical expression made of two operands (2 and 3) and an operator (the plus symbol) in between, and evaluated the corresponding arithmetical operation. Numbers don't need quotes around them because they are not subject to any ambiguity.

Note

What is an operator?​

In programming, operators are special symbols that perform operations on one or more operands.

The number of operands is called the arity of the operator and is usually expressed with an associated adjective: the arithmetic operators for instance are binary operators because they deal with two numbers (sum, product, subtraction, division).

We'll encounter various unary operators that deal with just one entity, and even one single ternary operator that juggles between three things!

You can also represent negative and decimal numbers:

console.log(-2 + 3);
console.log(2 + 1.5);
Toggle Console Output
  • 1
  • 3.5

Cool you already knew how to compute two plus three. What about the rest then?

Let's omit the console.log(...) part:

2 + 3;
Toggle Console Output
  • No output

It looks like our program has lost its voice, since there is no output. We can conclude that console.log(...) is responsible for printing the output. That's our first item in the quest! You can save and continue now. Why is it called console.log? Why it's made of two words with a dot in between? Take it as given for now, I am sorry.

It's interesting to know that 2 + 3; is a perfectly valid JavaScript program, being a well formatted mathematical expression. Since we are not logging anything, no output is produced making it not particularly useful.

Let's make a final experiment before moving on:

console.log(2 + 3
Toggle Console Output

We are not getting any output, or better we are not getting the output we expected but instead a nasty message:

'SyntaxError: /index.js: Unexpected token, expected , (1:17)'

Let's not open the can of worms but just observe what changes between the two examples:

// works
console.log(2 + 3);

// doesn't work
console.log(2 + 3

It looks like not matching the opening parenthesis with a closing one at the end, drives the machine mad. And rightfully so, it's more or less like leaving it hanging without knowing if you are done telling it what they have to print!

(let's ignore the semicolon for a second)

This is our first syntax observation: putting stuff in parentheses after console.log tells the computer what we want to print. If we miss the closing parenthesis our program is not valid and the machine doesn't know how to proceed, leading to stopping the execution there.

Coming back to the semicolon:

console.log(2 + 3);
console.log(2 + 3)
Toggle Console Output
  • 5
  • 5

First observe how we get two lines in the output. It looks like we can use console.log multiple times! As many as you want actually. Since we read 5 twice, it looks like having the semicolon or not has no impact on our program. That's mostly right. Programming languages evolved over decades though, and the language JavaScript stemmed from had mandatory semicolons at the end of every line as a grammar rule. This rule is optional is JavaScript but can be enforced by the programmer or team of programmers working on a project.

Semicolons will be used in this course, get used to that!

Logging more stuff at once​

Sometimes we want to log multiple information on one take, like for instance:

console.log('The sum of 2 and 3 is', 2 + 3);
console.log('The product of 2 and 3 is', 2 * 3);
Toggle Console Output
  • 'The sum of 2 and 3 is'5
  • 'The product of 2 and 3 is'6

It's observations time!

  • we are using console.log twice, both like 'sentence comma expression';
  • the sentence before the comma is enclosed in single quotes;
  • we made acquaintance with a new symbol (*), and it looks like it behaves much like the multiplication sign.

Those are all sound observations, not just because I was the one to make them.

Soon we'll learn that the comma separated list constitute the arguments passed to the console.log function. That would be too much theoretical information for you to digest now, let's just explore the language behavior intuitively.

Are we limited to pass a maximum of two things to console.log? This you can try yourself by editing the following code: append something else after 'one'. Remember to put a comma between the entries. You can write words in quotes, numbers, and mathematical expressions with the symbols you know. Have fun!

console.log('one');
Toggle Console Output

Conclusion​

WIP