Your First Program

Enough background. In the next two minutes you will run code you wrote yourself.

There is nothing to install. You already have everything you need, twice over: the playground on this page, and a console built into the browser you are reading this in.

Printing something

The most useful instruction in the language, and the one you will type more than any other:

console.log("Hello");

console.log prints a message somewhere only a developer will see. It does not appear on the page and visitors never notice it. It exists so you can ask your own program what it is doing, which is most of what debugging is.

Run this. Then change the text and run it again.

Two lines, two messages, in the order they were written. That is your first program. It is a small one, but the difference between zero programs and one is the biggest gap in this course.

Printing more than one thing

You can pass several values at once, separated by commas, and they print on one line with spaces between:

console.log("Lessons finished:", 5);
// Lessons finished: 5

This is better than gluing the pieces together with +, because commas keep each value as it is. That matters when you are printing something more complicated than text, where joining with + can turn a useful value into the useless string [object Object].

Notes to yourself

Anything after // on a line is a comment. The engine ignores it entirely.

// Prices are in rupees, before tax
const price = 199;
 
console.log(price); // 199

Several lines can be wrapped in /* and */ instead.

Comments are for the next person to read your code, who is very often you in three months. Write them to explain why something is the way it is. Do not write them to restate what the line plainly says — // add one to the total above a line adding one to the total helps nobody and rots the moment the code changes.

The browser's own console

The playground is convenient, but the real thing is already in your browser and worth meeting now.

Press F12, or right-click anywhere on this page and choose Inspect. A panel opens. Find the tab labelled Console and click it. There is a prompt there where you can type JavaScript against this very page.

Try it. Type this and press Enter:

console.log("Hello from the real console");

Then something more interesting:

document.title

That prints the title of the page you are on. You are now running code inside a real website — the same access every site's own JavaScript has.

This console is where errors from any page show up. When something breaks, this is the first place to look, and knowing that alone puts you ahead of most people learning.

Errors, and how to read them

Errors feel like failure. They are not — they are the most direct help you will get, and reading them properly is a skill you can pick up right now.

Every error has three useful parts.

Uncaught ReferenceError: total is not defined
    at script.js:12

The name is ReferenceError, which tells you the category of problem. The description is total is not defined, which names the actual thing that went wrong. The location is script.js:12, the file and line.

Beginners read the line number and skip the sentence. The sentence is the part that tells you what to fix.

Three you will meet in your first week:

ReferenceError: x is not defined — you used a name that does not exist. Usually a typo, or a variable you meant to create and did not.

TypeError: x is not a function — the name exists, but it is not the kind of thing you tried to use it as. Often a misspelled method name.

SyntaxError: Unexpected token — the code is not valid JavaScript. A missing bracket, quote or comma. Remember from the last lesson: this one stops the entire file before anything runs, so the page can look completely dead over one missing character.

Break something deliberately

The fastest way to stop fearing errors is to cause a few on purpose. Run this as it is — it works. Then make each change below, one at a time, and read what comes back.

Now try each of these:

1. Change lessonsDone on the last line to lessonsDon. That is a ReferenceError — the name does not exist.
2. Delete the closing ) on any line. That is a SyntaxError, and notice that nothing runs, not even the lines above it.
3. Add console.log(lessonsDone.toUpperCase()) at the end. That is a TypeError — toUpperCase is for text, and this is a number.

Each message names the problem. Once you have seen each of these three deliberately, you will recognise them instantly when they happen by accident, which is the entire point of the exercise.

undefined is not an error

One more distinction, because it confuses people for weeks.

let total;
console.log(total); // undefined

No error here. total exists — you created it — you simply have not given it a value. undefined is JavaScript's way of saying "this is empty".

Compare with:

console.log(somethingElse); // ReferenceError: somethingElse is not defined

That is an error, because no such name was ever created.

Empty versus non-existent. The fixes are completely different: one means "give it a value", the other means "you spelled it wrong or forgot to create it".

What to take away

console.log prints for you, not for visitors. Comments explain why. The browser's console is always available with F12 and is the first place to look when something breaks. Errors have a name, a description and a location, and all three are useful. undefined means empty; a ReferenceError means the name does not exist at all.

You have run your own code and caused your own errors. From here on, everything is building on that — starting with somewhere to keep your data.