JavaScript Basics #1 Getting Started and Setup

Programming Language JavaScript JavaScript Node.js Vite
5 min read

This series is a 7-part introductory course for people learning JavaScript for the first time, or for those who learned it long ago and want to revisit it.

  • #1 Getting Started and Setup ← this post
  • #2 Variables and Types
  • #3 Control Flow
  • #4 Functions
  • #5 Objects and Arrays
  • #6 Strings and Template Literals
  • #7 Modules — import and export

This post covers where and how JavaScript runs first, then walks through building a modern dev environment with Node and Vite, and ends with running your first code.

Where does JavaScript run? #

This is where beginners get most confused. JavaScript runs not in one place but in two.

  1. The browser — the environment that adds interactivity to web pages. Browsers like Chrome, Safari, and Firefox bundle a JavaScript engine inside.
  2. Node.js — a runtime that lets you use JavaScript outside the browser, for servers and tooling. When it appeared in 2009, it dramatically expanded JavaScript’s reach.

Even though it’s the same JavaScript, what’s available depends on the environment.

Browser-only 
document.querySelector('h1');  // DOM access
window.location.href;           // URL
fetch('/api/users');            // network request
Node-only 
const fs = require('fs');       // file system access
fs.readFileSync('data.txt');    // read file
process.env.HOME;                // environment variables

The language itself (variables, functions, loops, objects) is the same on both sides. Environment-specific APIs sit on top of it. This series focuses on the language core that works in both environments.

Installing Node #

The fastest way to get hands-on with JavaScript is to install Node. Running everything through the browser creates too much friction when you’re just starting out.

macOS / Linux #

I recommend Volta. Once installed, it manages Node versions automatically.

Install Volta + Node LTS 
curl https://get.volta.sh | bash
volta install node@lts

You can also download it directly. Get the LTS version from nodejs.org.

Windows #

Get the Windows Installer from the official Node site. You can also use winget install OpenJS.NodeJS.LTS.

Verify the install #

Verify install 
node --version    # output like v22.x.x
npm --version     # output like 10.x.x

If both node and npm respond, you’re set.

REPL — running code one line at a time #

Once Node is installed, type node in your terminal. A REPL (Read-Eval-Print-Loop) opens, where you can run JavaScript one line at a time.

Node REPL 
> 1 + 1
2
> const greeting = 'Hello'
undefined
> greeting + ', JavaScript!'
'Hello, JavaScript!'
> .exit

In the early stages of learning, the REPL is the lightest experimentation lab you have. When you encounter new syntax, type it in here and you’ll get a feel for it quickly. Exit with .exit or Ctrl+D.

Creating and running your first file #

The REPL is great for one-liners but cumbersome for multi-line code. Let’s create a working folder and write a file.

Create a working folder 
mkdir js-playground
cd js-playground

Create a hello.js file with the following content.

hello.js 
const name = 'Curtis';
console.log(`Hello, ${name}!`);

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(`Sum: ${sum}`);

Run it:

Run the file 
node hello.js
Console output 
Hello, Curtis!
Sum: 15

This is the basic flow when you build small tools or scripts in JavaScript. Write a file, then run it with node <filename>.

Running in the browser #

If you do web development, you eventually need to run code in the browser too. The simplest way is to create an HTML file and embed code with a <script> tag.

index.html 
<html lang="en">
  <head><title>JS first steps</title></head>
  <body>
    <h1 id="message"></h1>
    <script>
      const el = document.getElementById('message');
      el.textContent = 'Hello from the browser!';
    </script>
  </body>
</html>

You can open this file with a double-click or run it through VS Code’s Live Server extension.

But hand-managing HTML files every time gets tedious, so in modern setups we use a dev server tool like Vite.

Modern dev environment — Vite #

Vite is a tool that handles a JavaScript project’s dev server, build, and module system all at once. It already showed up in the React and TypeScript series. You can also kick off vanilla JavaScript projects with Vite.

Vite vanilla JS project 
npm create vite@latest my-vanilla -- --template vanilla
cd my-vanilla
npm install
npm run dev

Open http://localhost:5173 in your browser and the default page loads. The entry point is src/main.js. Edit and save it, and the browser refreshes immediately (HMR — Hot Module Replacement).

In this series we’ll run simple examples with node and DOM-dependent examples with Vite.

Code editor #

VS Code is the most common pick. To start, you don’t need any extensions. Once you’re comfortable, these two help.

  • Prettier — auto-formatting on save
  • ESLint — code style and syntax warnings

Neither is required for this series. Until you’re comfortable, keeping tooling minimal is better for learning.

JavaScript’s two faces — the standard is ECMAScript #

Older material throws around terms like “ES5”, “ES2015”, and “ES6”. That’s because JavaScript’s official specification is named ECMAScript, and a new version is released once a year.

  • ES2015 (= ES6) — let/const, arrow functions, classes, modules, and other major changes. The baseline for modern JavaScript.
  • ES2017 — async/await
  • ES2020 — optional chaining (?.), nullish coalescing (??)
  • ES2022 — class private fields (#), top-level await
  • ES2024 — annual updates continue

This series is based entirely on modern JavaScript from ES2015 onward. Older syntax like var barely shows up.

Wrap-up #

What this post covered:

  • JavaScript runs in two places — the browser and Node
  • Install Node (Volta recommended) → run via REPL or node <filename>
  • Run in the browser with <script> or a Vite dev server
  • VS Code is a safe editor pick; keep extensions minimal at first
  • This series targets modern JavaScript (ES2015+)

In the next post (#2 Variables and Types) we’ll cover variable declarations (let/const), JavaScript’s primitive types, and the common pitfalls of type conversion.

X