Free JavaScript course. Sign Up for tracking progress →

JavaScript: Escape sequences

Imagine you want to print a dialogue between the Mother of Dragons and her child:

- Are you hungry?
- Aaaarrrgh!

If you print a string with this text:

console.log('- Are you hungry?- Aaaarrrgh!');

then you'll see:

- Are you hungry?- Aaaarrrgh!

Not quite what we were looking for. The strings are written one after the other, it doesn't start a new line. We need to tell the interpreter to "press enter" as it were. In other words, it needs to put a line break after the question mark. You can do this with the new line symbol '\n'.

console.log('- Are you hungry?\n- Aaaarrrgh!');

The result:

- Are you hungry?
- Aaaarrrgh!

\n is a special symbol. It's often referred to as LF (Line Feed, sometimes as line break or newline) in documentation. You may have initially thought it was a misprint, since there are two symbols - \ and n, but this isn't the case. To the computer, this is no more than an invisible symbol to tell it to go to the next line. Proof:

// We haven't studied it yet, but you should know the truth
// Below is code that returns the length of a string

'a'.length;    // 1
'\n'.length;   // 1 !!!
'\n\n'.length; // 2 !!!

Why is it done in this way? \n is just a way to write a line break symbol. That's why line feed is just one character, just invisible. And it's also why this problem has arisen. There had to be a way of representing it using a keyboard. And since the number of keyboard characters is limited and they're all dedicated to very important things, special characters are entered using these escape sequences.

The Line Feed symbol is not something specific to programming. Anyone who has ever typed on a computer has used the line feed by clicking Enter. Many editors can display these invisible characters, you can use this feature to see where they are (though it's only for display, these characters are invisible, they've no graphical representation):

- Hi!¶
- Oh, hey!¶
- What's up?

The device that outputs the corresponding text takes this character into account. For example, when the printer reaches the line feed, it pulls the paper up one line, and the text editor brings all subsequent text down one line as well.

\n is an example of an ** escape sequence**. Although there are dozens of these characters, only a few of them are common in programming. Besides line feed, there is also indents (which you get from pressing Tab) and carriage return (Windows only). Programmers often need to use \n line break to format text properly.

console.log('Gregor Clegane\nDunsen\nPolliver\nChiswyck');

The result:

Gregor Clegane
Dunsen
Polliver
Chiswyck

Note:

  1. It does not matter what comes before or after \n, whether it's a character or an empty string. The line feed will be detected and executed either way

  2. Remember that a string can contain a single character or none at all. Additionally, a string can only contain \n. Analyze the following example:

    console.log('\n');
    console.log('Dunsen');
    

    First the interpreter outputs the string "line feed", and then the normal string. The program will print it like this:


    Dunsen

    Why are there two empty lines before the Dunsen line instead of one? The point is that console.log() automatically adds a line feed to the end when it outputs a value. So, we explicitly typed one line feed, passing this escape character as an argument in the function, and the second line feed is added automatically by the function itself.

    One more example:

    console.log('Polliver');
    console.log('Gregor Clegane');
    console.log();
    console.log('Chiswyck');
    console.log('\n');
    console.log('Dunsen');
    

    The result:

    Polliver
    Gregor Clegane
    Chiswyck
    Dunsen

    Now you understand enough to figure out why the result was formed in this way.

  3. If we need to print \n as a text (two separate characters), we can use the escape character, adding another \ at the beginning. I.e., the sequence of \n will be printed as characters \ and n following each other

console.log('Joffrey loves using \\n');

The result:

Joffrey loves using \n

A small but important note about Windows. Windows uses \r\n by default to enter a line break. This combination works well in Windows but creates problems when copied to other systems (for example, when the development team includes both Windows and Linux users). The point is that the sequence \r\n has a different interpretation depending on the encoding chosen (we discuss it later). For this reason, it's common among developers to always use \n without \r, since it means that LF is always interpreted the same way and works fine on any system. Remember to configure your editor to use \n.

Instructions

Write a program that prints:

- Did Joffrey agree?
- He did. He also said "I love using \n".

The program calls only one console.log(), but the result on the screen should look exactly like the one above.

The exercise doesn't pass checking. What to do? 😶

If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:

  • Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨

Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.

My code is different from the teacher's one 🤔

It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.

In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.

I've read the lessons but nothing is clear 🙄

It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.

By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.

Tips

Definitions

  • Escape sequence is a special combination of characters in the text. For example, \n is a line feed.