Start learning free

LESSON 1 OF 348 · WELCOME TO TYPESCRIPT

Printing to the Console in TypeScript with console.log

Lesson Read the full explanation

TL ; DR:

  • The console is a panel that displays important messages, like errors, for developers.


  • In TypeScript, we use the console.log() function to print something to the console. For example, this program:

    console.log(13);

    prints 13 to the console.


Full lesson:

The console is a panel that displays important messages, like errors, for developers.

Much of the work the computer does with our code is invisible to us by default. If we want to see things appear on our screen, we can print, or log to our console directly.

console.log():

In TypeScript, we use the console.log() function to log / print something to the console. For example, this program:

console.log(13);

logs 13 to the console.

When you run this program, this is what you'll see in your console:

13

We refer to the data printed to the console as the output of the program.

Newline character:

You might have noticed the extra empty line after 13 in our program's output.

It's important to know that the console.log() function also prints an invisible newline character after the value we provide.

This newline character inserts a new line in the console. It's like pressing Enter in your text editor to move the cursor to the next line.

This means that if we use console.log() multiple times, the values will be printed on separate lines in the console:

console.log(1);
console.log(2);
console.log(3);

The ouput of this program would be:

1
2
3

Assignment
Follow the Coding Tutorial and let's print some values to the console!

Hint
Look at the examples above if you get stuck.

STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · WELCOME TO TYPESCRIPT

    Print in TypeScript, explained

    What printing does

    A program is more useful when you can see what it computes. Printing writes a value to the console, the text output of the program. In TypeScript you print with console.log. You write the name, an opening parenthesis, the value you want to show, a closing parenthesis, and a semicolon:

    console.log(1998);

    Output:

    1998

    The value between the parentheses is called an argument. Each call to console.log prints its argument and then moves to a new line, so consecutive calls produce consecutive lines.

    TypeScript has no print function of its own. console is an object provided by the environment that runs your code, and log is one of its methods. The TypeScript compiler knows about it and checks that your call is well formed, but the printing itself happens when the compiled JavaScript runs.

    Numbers and strings look alike on screen

    A number is written as it is. A string, which is text, goes inside quotes. Both of these print the same characters:

    console.log(1998);
console.log("1998");

    1998
1998

    The output hides a difference that matters as soon as you compute with the values. The first is a number and the second is a string:

    console.log(1998 + 2);
console.log("1998" + 2);
console.log(typeof 1998, typeof "1998");

    2000
19982
number string

    With two numbers, + adds. With a string on one side, + joins the text, so the 2 becomes the character "2" glued to the end. This is why the exercise insists that a number needs no quotes.

    Printing several things at once

    console.log accepts any number of arguments, separated by commas. It prints them on one line with a single space between each:

    console.log("Age:", 31);
console.log("a", "b", 3, true);

    Age: 31
a b 3 true

    Calling it with no arguments, or with an empty string, prints an empty line:

    console.log("first");
console.log();
console.log("third");

    This prints first, then a blank line, then third.

    Template literals

    To build one message from several pieces, use backticks and put expressions inside ${}:

    console.log(`2 + 3 = ${2 + 3}`);

    2 + 3 = 5

    Arrays and objects

    You can print whole arrays and objects. The console formats them in a readable way:

    console.log([1, 2, 3]);
console.log({ id: 7, ok: true });

    [ 1, 2, 3 ]
{ id: 7, ok: true }

    The exact formatting can differ between environments, but the contents are the same.

    Order and semicolons

    Statements run from top to bottom, and each console.log prints at the moment it runs. If you print a variable before you change it, you see the old value; after the change, the new one. Printing is the simplest way to follow what a program is doing, so you will use it constantly while learning.

    The semicolon ends a statement. TypeScript can often work out where a statement ends without it, but ending every statement with one is a clear habit and avoids rare surprises. Note also that console.log only shows a value. It does not give anything back for later use, so you cannot store its result in a variable and expect the printed text.

    Common mistakes

    • Wrong spelling or capital letters. Console.log, console.Log and consle.log are all errors. TypeScript is case sensitive.
    • Forgetting the parentheses. console.log 1998; is not a call. The parentheses are what call the function.
    • Quotes around a number you want to compute with. It prints the same, but behaves as text.
    • Unbalanced quotes or parentheses. Every opening one needs a closing partner. The Syntax Errors lesson covers these.
    • Quoting a name you meant to print. console.log("total") prints the word total. To print the value of a variable named total, write console.log(total).

    The exercise

    The exercise asks you to print the number 1998. There is one step:

    1. Write console.log.
    2. Open a parenthesis and write 1998 with no quotes, since it is a number.
    3. Close the parenthesis and end the statement with a semicolon.

    The lesson's tests look at the console output, so the line must print exactly 1998.

    Key takeaways

    • console.log(value) prints the value and ends the line.
    • Numbers are written bare, and strings go in quotes. They print alike but behave differently.
    • Several arguments print on one line, separated by spaces.
    • Template literals with ${} build messages from expressions.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free