You do not need to install anything to run JavaScript, because the browser you are reading this in already can.
Complete lesson & earn 250 PX
EXERCISE
1Every browser ships with a console that runs JavaScript the moment you press Enter, with nothing to install and no file to save.
EXERCISE
2Both of these show you a value, but only one of them is usable once you have more than a single thing to look at.
EXERCISE
3Errors are the language telling you precisely what went wrong and where, which makes them the most useful output you can get.
You do not need to install anything to run . The browser you are reading this in already contains a complete JavaScript engine, and it comes with a console that will run whatever you type the moment you press Enter. No file to create, no project to set up, no build step.
Press F12 on Windows or , or Cmd + Option + I on a Mac, then pick the Console tab.
What makes the console worth learning properly, rather than treating it as a beginner's toy, is that it answers one question faster than any other tool: what does this actually do? Reading about a method tells you what it is supposed to do. Typing it into the console tells you what it does.
Every line you type is evaluated, and the result is printed back:
2 + 2
// 4
10 > 5
// true
"hello".toUpperCase()
// 'HELLO'
"JavaScript".length
// 10
Notice that you did not write console.log anywhere. The console prints the result of the expression automatically. That is different from a file, where nothing appears unless you ask for it.
It also remembers what you told it, the same way a program does:
let name = "Sam";
// undefined
name
// 'Sam'
name + " is learning JavaScript"
// 'Sam is learning JavaScript'
That undefined on the first line surprises almost everyone, and it is worth being precise about because it is not an error. The console prints the result of the line you typed. Declaring a variable is an instruction, not a calculation, so it produces no result, and the console reports that absence as undefined. The next line proves the declaration worked.
This distinction between doing something and producing a value runs through the whole language. Some code exists to produce a value, and some exists to make something happen. The console shows you which is which, for free, on every line.
Pro Tip: Working developers keep a console open all day. Not to learn, but to check what a value really contains before writing code that depends on it. Getting comfortable here now saves you from guessing later.
There are two ways to make a value visible while you are working, and only one of them is usable once you have more than a single thing to look at.
alert opens a popup and stops the page until you click OK. console.log writes to the console and carries straight on. That sounds like a small difference. It is not, and there are two separate reasons why.
The first reason is that alert converts everything to text:
const user = { name: "Ada", age: 36 };
alert(user);
// a popup saying: [object Object]
console.log(user);
// { name: 'Ada', age: 36 }
alert can only display a string, so it asks the object for its text form, and the text form of a plain object is that useless label. Nothing is broken; you simply cannot see inside it. console.log keeps the value as a value, and the console lets you expand it and look at the actual properties.
The second reason is that alert blocks. Nothing else on the page happens until you dismiss it, and every popup has to be dismissed separately:
alert("Order placed");
alert("Total: 547");
alert("Receipt sent");
// three popups, three clicks, page frozen between each one
console.log("Order placed");
console.log("Total: 547");
console.log("Receipt sent");
// three lines, printed instantly, nothing interrupted
With three values that is annoying. With thirty it is unusable, and you cannot compare the first against the last because you have already dismissed it.
One more thing console.log does that is worth knowing early. It takes several arguments, separated by commas, and prints them on one line:
const item = "Notebook";
const price = 199;
console.log(item, price);
// Notebook 199
console.log("Item:", item, "costs", price);
// Item: Notebook costs 199
This matters more than it looks. When you print several values in a loop, a bare number tells you nothing about which value it was. Labelling each one is the difference between output you can read and output you have to count.
Pro Tip:
alerthas exactly one honest use: stopping a person to tell them something they must not miss. As a debugging tool it is actively bad, because it blocks the page, flattens your value to text, and loses the structure you were trying to inspect.
An error message is the most specific thing the language will ever tell you. It names what went wrong, what kind of mistake it was, and which line it happened on. A beginner sees red text and panics. The habit worth building in your first week is to read it instead, because it almost always contains the answer.
Every error has two parts: a type and a message. The type is the category of mistake, and there are only a few you will meet regularly. Learning to recognise the type tells you where to look before you have read a single word of the message.
Three you will hit in your first week:
consle.log("hi");
// ReferenceError: consle is not defined
const x = 5;
x = 6;
// TypeError: Assignment to constant variable.
console.log("hi";
// SyntaxError: missing ) after argument list
Read each type as a question about where to look. ReferenceError means you used a name that does not exist, so look for a typo or something you forgot to declare. TypeError means the name exists but you did something to it that it does not support, so look at what the value actually is. SyntaxError means the shape of the code is wrong, so count your brackets and quotes.
There is one difference between them that matters more than the messages. A SyntaxError happens before anything runs at all:
console.log("this never prints");
const y = ;
The engine reads the whole file before executing any of it. It could not make sense of the second line, so it refused the entire file, and the first line never ran. If a file appears to do nothing whatsoever, this is the first thing to check.
The other two happen while the program is running, which means everything above the failing line already happened:
console.log("this DOES print");
notAThing();
That distinction tells you something useful immediately. If your output stops partway through, you have a runtime error and the last thing printed tells you roughly where. If there is no output at all, you probably have a syntax error and the line number in the message is where to start.
Pro Tip: Read the error type first and the message second. The type narrows the cause to one of three or four kinds of mistake before you have even looked at your code, and that single habit will save you hours over a year.
The browser console runs JavaScript instantly. console.log prints without interrupting and keeps objects inspectable; alert freezes the page and turns everything into text.