JavaScript Zero to Advanced #1: Introduction & Setup

Welcome to JavaScript Zero to Advanced, a 10-part series that takes you from "I have never written a line of JavaScript" to understanding closures, Promises, classes, and the event loop. Every part is hands-on: you will see a code example, then the exact output it produces, so you can follow along and check your own results.

In this first part we keep things simple. You will learn what JavaScript actually is, where it runs, how to set up a comfortable environment, and how to run code in two places: the browser console and Node.js.

What is JavaScript?

JavaScript is a programming language originally created in 1995 to make web pages interactive. Today it is far more than that. It is the only language that runs natively in every web browser, and thanks to Node.js it also runs on servers, in command-line tools, in desktop apps, and even on small devices.

A few characteristics worth knowing from day one:

• Interpreted / JIT-compiled: you do not need a separate compile step. The engine (V8 in Chrome and Node.js, SpiderMonkey in Firefox) reads and optimizes your code as it runs.
• Dynamically typed: a variable can hold a number now and a string later. This is flexible, but it means you need to be careful.
• Single-threaded with an event loop: JavaScript runs one piece of code at a time, but it handles waiting (network, timers) without blocking. We will dig into this in Part 10.
• Standardized as ECMAScript: names like ES6, ES2015 or ES2022 refer to versions of the language standard. This series uses modern JavaScript (ES2015+) throughout.

JavaScript has nothing to do with Java. The name was a marketing decision in the 1990s. The two languages are completely different.

Where does JavaScript run?

There are two main environments you will use in this series:

Environment	What it gives you	Typical use
Browser	The page (DOM), window, document, fetch, events	Interactive websites, front-end apps
Node.js	File system, network servers, process, npm packages	APIs, scripts, tooling, back-end apps

The core language (variables, functions, arrays, objects) is the same in both. Only the extra APIs differ. That is why most examples in this series run fine in either place.

Setting up your tools

You only need three things:

1. A modern browser such as Chrome, Firefox or Edge.
2. A code editor. Visual Studio Code is free and popular, but any editor works.
3. Node.js. Download the LTS version from the official Node.js website and install it.

After installing Node.js, open a terminal and check the versions:

node -v
npm -v

Output:

v22.11.0
10.9.0

Your version numbers will probably differ. Anything from Node.js 18 upwards is fine for this series.

Your first code: the browser console

Every browser ships with developer tools. Press F12 (or Ctrl+Shift+J on Windows/Linux, Cmd+Option+J on macOS in Chrome) and open the Console tab. Type the following and press Enter:

console.log("Hello, JavaScript!")

Output:

Hello, JavaScript!

The console is also a calculator and a playground. Type an expression and it shows the result immediately:

console.log(2 + 3 * 4)
console.log("Full" + "Stack" + "Notes")
console.log(10 / 4)

Output:

14
FullStackNotes
2.5

Notice that * runs before +, just like in math, and that dividing two whole numbers can give a decimal. JavaScript has a single number type for both.

Running JavaScript with Node.js

The console is great for quick experiments, but real programs live in files. Create a folder, and inside it create a file called hello.js:

// hello.js
const name = "Budi"
console.log("Hello, " + name + "!")
console.log("This file is running in Node.js")

Output:

Hello, Budi!
This file is running in Node.js

Run it from the terminal, inside the same folder:

node hello.js

Output:

Hello, Budi!
This file is running in Node.js

You can also start an interactive session (called the REPL) by typing just node. It behaves like the browser console. Type .exit or press Ctrl+C twice to leave.

More than console.log

console.log will be your best friend while learning, but the console object has a few more useful methods:

console.log("Normal message")
console.log("Several values:", 42, true, "text")
console.error("Something went wrong")
console.warn("Be careful")
console.table([
  { name: "Budi", city: "Jakarta" },
  { name: "Siti", city: "Bandung" }
])

Output:

Normal message
Several values: 42 true text
Something went wrong
Be careful
┌─────────┬────────┬───────────┐
│ (index) │ name   │ city      │
├─────────┼────────┼───────────┤
│ 0       │ 'Budi' │ 'Jakarta' │
│ 1       │ 'Siti' │ 'Bandung' │
└─────────┴────────┴───────────┘

In the browser, console.error and console.warn are shown in red and yellow, and console.table draws a nice table. Passing several values to console.log separated by commas prints them with a space in between, which is handy for debugging.

Comments

Anything after // on a line is a comment and is ignored by JavaScript. Use /* ... */ for multi-line comments:

// This is a single-line comment
/*
  This is a
  multi-line comment
*/
console.log("Comments are ignored") // comments can follow code too

Output:

Comments are ignored

Linking JavaScript to an HTML page

In the browser, JavaScript is usually loaded from an HTML file with a script tag. Create index.html next to a file called app.js:

<!DOCTYPE html>
<html>
  <head>
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <script src="app.js"></script>
  </body>
</html>

// app.js
console.log("app.js is loaded")

Output:

app.js is loaded

Open index.html in the browser and check the console: you should see the message. Putting the script tag at the end of body makes sure the page is loaded before your code runs. We will use this setup again in Part 7 when we manipulate the page.

Common mistakes

• Wrong capitalization. JavaScript is case-sensitive. Console.log or console.Log will throw an error; it must be console.log.
• Running node in the wrong folder. If you see Cannot find module, check that your terminal is in the folder that contains the file.
• Forgetting quotes around text. console.log(Hello) looks for a variable named Hello and fails with a ReferenceError. Text needs quotes: "Hello".
• Mixing up browser and Node.js APIs. document does not exist in Node.js, and require/process are not available in a plain browser page.

Exercise

Create a file called about-me.js that prints three lines: your name, your city, and the result of 365 * 24 (the number of hours in a year). Run it with Node.js. Then paste the same code into the browser console and compare the output. Bonus: print the same data with console.table.

Summary

• JavaScript is the language of the web and also runs on servers through Node.js.
• You can run code in the browser console (F12) or from a file with node file.js.
• console.log prints values; console.error, console.warn and console.table are useful variations.
• Comments use // or /* */, and JavaScript is case-sensitive.

In Part 2 we will look at variables, data types and operators: the building blocks of every program you will write.