JAVASCRIPT / GETTING STARTED
Setting up an editor and the browser console
Set up a plain-text code editor and open the browser console, run expressions at the prompt, and tell an echoed result apart from console.log output.
What you will learn
- Open DevTools' Console with Ctrl+Shift+J (Cmd+Option+J on macOS) and run one line.
- Tell the console's echoed result apart from what console.log printed.
- Enter a multi-line function at the prompt with Shift+Enter and rerun it with Up arrow.
- Save practice code as a .js file so the editor highlights it as JavaScript.
Understanding Setting up an editor and the browser console
Any program that saves plain text can hold JavaScript, but the file name decides how much help you get: an editor such as VS Code maps the .js extension to its JavaScript mode, which is what turns on keyword coloring, bracket matching, and inline warnings. A rich-text application is a different thing entirely, because it stores formatting alongside the characters and quietly rewrites straight quotes as “ and ”. Those curly characters are not string delimiters in JavaScript, so code copied out of a word processor fails to parse even though it looks correct on screen.
The browser console is a read-eval-print loop wired into one page. Ctrl+Shift+J (Cmd+Option+J on macOS) opens it in Chrome and Edge, Ctrl+Shift+K (Cmd+Option+K) in Firefox. When you press Enter, the browser parses your text, runs it in that page's JavaScript engine, and then displays the value the code evaluated to. That last step is the whole explanation for the stray undefined beginners see: console.log prints your message as a side effect and evaluates to undefined, so the message and the returned value are two separate rows.
Everything you type at the prompt lives in the page's memory, which means variables you create survive until you reload and a reload hands you an empty scope again. The Up arrow walks back through the entries you sent in that tab, so the console is ideal for checking one value, trying one call, or confirming what an expression produces. Nothing there is saved anywhere, so code you want tomorrow belongs in a file in the editor, and the console stays the place where you interrogate it.
const heading = "Console warm-up";
console.log(heading);
const logResult = console.log(6 * 7);
console.log("console.log gave back:", logResult);The editor holds code you mean to keep, while the console evaluates code immediately inside one page and shows you the value that code produced.
Worked examples
A function typed at the prompt
Shows how to enter several lines as one console entry and reuse them.
function celsiusToF(c) {
return c * 9 / 5 + 32;
}
console.log(celsiusToF(100));
console.log(celsiusToF(-40));Example explained
Line 1Enter sends whatever is in the prompt, so hold Shift while pressing Enter to move to the next line instead of running a half-written function.
Line 2Each console.log call emits one message, which is why 212 and -40 land on separate rows.
Line 3celsiusToF stays defined for the rest of the session, so the two calls could just as well be sent later as their own entries.
Line 4Up arrow recalls the entire block with its line breaks, so you can change 100 to another temperature and press Enter again.
The extra value after a block
Explains why a pasted entry can print one number and then display a second one you never logged.
const a = 3;
const b = 4;
console.log(a * b);
a + b;Example explained
Line 1console.log(a * b) prints 12 as a side effect, so that row appears while the entry is still running.
Line 2Nothing prints a + b; the 7 is the value the whole entry evaluated to, which the prompt always echoes.
Line 3Declarations like const a = 3; have no value to report, so an entry ending on a const line shows no extra row.
Line 4Run the same four lines from a saved file and only 12 appears, because files do not echo results.
Important notes
Chrome and Firefox allow re-declaring a let or const name at the prompt as a convenience; the same two lines in a file are a SyntaxError, so trust the file, not the prompt.
Reloading discards every variable you typed and clears the message list unless Preserve log is checked, so treat console work as disposable.
Common mistakes
Writing code in Word, Google Docs, or TextEdit's default rich mode: straight quotes become “ and ”, and the console rejects a line that looks perfectly fine.
Reading the undefined under a console.log row as a failure and rewriting code that already worked, when it is only the value the call evaluated to.
Saving from a basic text app on Windows with hidden extensions, producing scratch.js.txt, so the editor treats the file as prose and offers no highlighting or bracket help.
Try it yourself
Change, predict, then run
Open the console in a fresh tab, type 60 * 60 * 24 * 7 and press Enter, then press Up arrow, wrap the same expression in console.log(...), and run it. Write down in a comment in scratch.js why the second run produces two rows and the first produces one.
Open the JavaScript workspaceCheck your understanding
You type console.log("ready") at the console prompt and press Enter. The console shows ready, then undefined on the next row. What is that second row?
- The value the entry evaluated to, since console.log prints as a side effect and returns undefined
- A report that the string "ready" was never stored in a variable
- An error raised while printing, with undefined as the error message
- A warning that the name ready has not been declared yet
Show answer
The prompt always echoes the value your entry evaluated to, and a console.log call evaluates to undefined once it has done its printing. The error option is tempting because undefined shows up inside real error text too, but console errors appear in red with an error type and a source location, and this row has neither.