JavaScript basics

What is JavaScript?

JavaScript is the programming language of the web. Every interactive website you’ve ever used — clicking buttons, loading new data without refreshing, updating a shopping cart — that’s JavaScript running in the browser.

// This runs in the browser
document.querySelector("button").addEventListener("click", () => {
  console.log("Button clicked!");
});

// This runs on the server (with Node.js)
const express = require("express");
const app = express();
app.listen(3000);

JavaScript started as a browser-only language in 1995. Today it runs everywhere — browsers, servers (Node.js), mobile apps, and even desktop applications. For web development, it’s not optional. HTML gives you structure, CSS gives you style, and JavaScript gives you behavior.

In this course, you’ll use JavaScript for two things: building React frontends and connecting them to your FastAPI backend. That covers the vast majority of what full-stack web developers do with JavaScript.

JavaScript vs Python

You already know how to program. JavaScript and Python share the same core concepts — variables, functions, loops, objects. The differences are mostly syntax.

// JavaScript
function greetUser(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

const users = ["Sarah", "John", "Alice"];

for (const user of users) {
  greetUser(user);
}

# Python equivalent
def greet_user(name):
    message = f"Hello, {name}!"
    print(message)
    return message

users = ["Sarah", "John", "Alice"]

for user in users:
    greet_user(user)

The logic is identical. The wrapping is different. Here are the key differences you’ll notice right away:

Feature	Python	JavaScript
Variables	`name = "Sarah"`	`const name = "Sarah";`
Functions	`def greet():`	`function greet() {}`
Blocks	Indentation	Curly braces `{}`
Strings	`f"Hello, {name}"`	`Hello, ${name}`
Print	`print()`	`console.log()`
None/null	`None`	`null` (and `undefined`)
Naming	`snake_case`	`camelCase`

Don’t try to memorize every difference up front. You’ll pick them up naturally as you write code. The table above covers 90% of what trips people up in the first few days.

Syntax basics

JavaScript has three syntax rules that differ from Python. Once you internalize these, the rest feels familiar.

Semicolons

const name = "Sarah";
const age = 25;
console.log(name); // "Sarah"

Semicolons end each statement. JavaScript can technically guess where they go (called “automatic semicolon insertion”), but always include them. It avoids subtle bugs and every serious codebase uses them.

Curly braces

// Python uses indentation
// JavaScript uses curly braces {}

function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  const total = price + tax;
  return total;
}

if (total > 100) {
  console.log("Free shipping!");
} else {
  console.log("Shipping: $9.99");
}

Curly braces {} define blocks of code — function bodies, if/else branches, loops. Indentation is optional (but you should still indent for readability).

Case sensitivity

const userName = "Sarah";
const UserName = "John";
const USERNAME = "ALICE";

// These are three different variables
console.log(userName); // "Sarah"
console.log(UserName); // "John"
console.log(USERNAME); // "ALICE"

JavaScript is case-sensitive. userName, UserName, and USERNAME are three completely different variables. The convention is camelCase for most things, PascalCase for React components, and UPPER_CASE for constants.

Comments

// Single-line comment

/*
  Multi-line comment
  for longer explanations
*/

const apiUrl = "https://api.example.com"; // Inline comment

Two slashes // for single-line comments, /* */ for multi-line. Same idea as Python’s #, just different characters.

Running JavaScript

You’ll run JavaScript in two places during this course:

Browser console (for quick experiments)

Open any browser, press F12 (or Cmd+Option+J on Mac), and type directly into the Console tab.

// Try this in your browser console right now
const greeting = "Hello from JavaScript!";
console.log(greeting); // "Hello from JavaScript!"

Node.js (for files and projects)

Create a .js file and run it with Node:

hello.js

const name = "Sarah";
console.log(`Welcome to JavaScript, ${name}!`);

node hello.js
# Welcome to JavaScript, Sarah!

Use the browser console to test quick ideas and one-liners. Use Node.js for anything you want to save or build on. You set up Node.js in the Getting Started section.

What’s next?

Now that you know how JavaScript fits into web development and how its syntax compares to Python, let’s start writing real code. First up: storing data in variables.

Variables

Store and manage data using let and const

Fundamentals

Functions

Scope

What is JavaScript?

JavaScript vs Python

Syntax basics

Semicolons

Curly braces

Case sensitivity

Comments

Running JavaScript

Browser console (for quick experiments)

Node.js (for files and projects)

What’s next?

Variables

​What is JavaScript?

​JavaScript vs Python

​Syntax basics

​Semicolons

​Curly braces

​Case sensitivity

​Comments

​Running JavaScript

​Browser console (for quick experiments)

​Node.js (for files and projects)

​What’s next?

Variables

What is JavaScript?

JavaScript vs Python

Syntax basics

Semicolons

Curly braces

Case sensitivity

Comments

Running JavaScript

Browser console (for quick experiments)

Node.js (for files and projects)

What’s next?