JavaScript for Python Developers

The fastest way to write bad JavaScript is to transliterate a Python file. Translate the intent, not the surface. A Python dictionary often becomes an object, but a dictionary with arbitrary keys may need a Map. A list comprehension often becomes map plus filter, but a plain loop is frequently clearer. JavaScript also gives you two absences, null and undefined. Treat undefined as “not supplied or not found” and reserve null for deliberate emptiness.

# Python
names = [u["name"] for u in users if u.get("active")]
first = next((u for u in users if u["id"] == wanted_id), None)

// JavaScript: the question mark is optional chaining
const names = users.filter(u => u.active).map(u => u.name);
const first = users.find(u => u.id === wantedId); // undefined if absent
const city = first?.address?.city ?? "unknown";

My rule is blunt: declare with const first. Change it to let only when the name itself must be reassigned. Avoid var; its function scope and hoisting preserve historical mistakes you do not need to inherit. Do not confuse a constant binding with an immutable value. A const array can still be pushed into, just as a Python name can keep pointing at a mutated list.

const user = { name: "Ada" };
user.name = "Grace";       // valid: object mutated
user = { name: "Lin" };     // TypeError: Assignment to constant variable.

let retries = 3;
retries -= 1;               // reassignment, so let is honest

// Do not write new code with var.

Python developers get caught by exactly two values: empty arrays and empty objects are truthy in JavaScript. So if (items) answers “does this variable hold an array?” rather than “does it contain anything?” Strings still behave as you expect. Zero, the empty string, null, undefined, NaN, and false are falsy. Everything else is truthy.

# Python
if not items:
    print("empty")

// JavaScript
if (items.length === 0) console.log("empty");
if (Object.keys(options).length === 0) console.log("no options");

const shown = count ?? 10; // preserves a legitimate 0
const wrong = count || 10; // replaces 0 with 10

JavaScript arrays are mutable references, like Python lists, but their methods split into two camps. map, filter, slice, and toSorted return new arrays. push, pop, splice, and sort mutate the original. That last one causes excellent bugs because default sorting is textual: ten comes before two.

# Python
prices = [10, 2, 30]
ordered = sorted(prices)               # [2, 10, 30]
last = prices[-1]

// JavaScript
const prices = [10, 2, 30];
const ordered = prices.toSorted((a, b) => a - b);
const last = prices.at(-1);
const doubled = prices.map(n => n * 2);

An object is ideal for a record with known string keys: a user, configuration, or API payload. For arbitrary keys, especially object keys, use Map. Property access can use dots or brackets. Brackets are required when the key lives in a variable. Destructuring replaces much of the repetitive dictionary unpacking you wrote in Python, and spread makes shallow copies. Emphasis on shallow: nested objects are still shared.

# Python
name = user["name"]
role = user.get("role", "reader")
updated = {**user, "active": True}

// JavaScript
const { name, role = "reader" } = user;
const updated = { ...user, active: true };
const field = "name";
console.log(user[field]);               // variable key

const byElement = new Map();          // arbitrary keys
byElement.set(button, { clicks: 1 });

Functions are values in both languages, but JavaScript APIs lean hard on callbacks. Use declarations for substantial named behavior and arrows for short callbacks. JavaScript has no Python-style keyword arguments, so use an options object when positional arguments become cryptic. Destructure it in the parameter list and provide defaults there.

# Python
def fetch_users(active=True, limit=20):
    ...
fetch_users(limit=5)

// JavaScript: options object substitutes for keyword arguments
function fetchUsers({ active = true, limit = 20 } = {}) {
  return client.get("/users", { active, limit });
}
fetchUsers({ limit: 5 });

const labels = users.map(user => user.name.toUpperCase());

Python’s self is explicit and stable. JavaScript’s this depends on how a function is called, which is a terrible fact to carry around while migrating. My recommendation: largely avoid this. Prefer plain functions, closures, and data passed as arguments. You still need to read this in classes and older libraries, but you do not need to design new application code around it.

// Fragile when passed as a callback: the receiver is lost.
const counter = {
  value: 0,
  increment() { this.value += 1; }
};
setTimeout(counter.increment, 100);

// Boring and portable: state is explicit.
function increment(state) {
  return { ...state, value: state.value + 1 };
}
let state = { value: 0 };
state = increment(state);

JavaScript’s event loop means an asynchronous function returns a Promise immediately. await pauses only the current async function, not the process. Fetch has a second trap: HTTP errors such as 404 do not reject the promise. You must check response.ok. Use Promise.all for independent work; sequential awaits in a loop are correct but needlessly slow when tasks do not depend on one another.

async function fetchJson(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
  }
  return response.json();
}

const [user, teams] = await Promise.all([
  fetchJson("/api/users/42"),
  fetchJson("/api/teams")
]);

Python has one mainstream import model. JavaScript has the modern ES module system and the older Node.js CommonJS system. New code should use ES modules: export and import. In Node, declare that choice with "type": "module" in package.json, or use the .mjs extension. In a browser, load the entry script with type="module". Mixing systems creates errors that look like syntax problems but are configuration problems.

// math.js
export function mean(values) {
  return values.reduce((sum, n) => sum + n, 0) / values.length;
}
export const version = "1.0";

// report.js — relative imports need the extension in browsers
import { mean, version } from "./math.js";
console.log(mean([2, 4, 9]), version);

JavaScript stack traces are noisy, but the useful routine is the same as Python: read the first relevant frame in your code, inspect the value at that boundary, and reproduce with the smallest input. The browser console is not a substitute for understanding types. Ask typeof, Array.isArray, and whether a promise was awaited. Then fix the producer of the bad value, not every consumer downstream.

// Keep this five-question checklist beside the debugger.
value === undefined                 // missing property, index, return?
value === null                      // deliberate empty value?
typeof value                         // "function", "object", "string"...
Array.isArray(value)                   // typeof [] is misleadingly "object"
value instanceof Promise             // forgot await?

// JSON is stricter than a JS object literal:
JSON.parse("{'name': 'Ada'}");

The practical migration stance: use const, strict equality, explicit empty checks, plain functions, ES modules, and await every promise whose value you need. Avoid var, largely avoid this, and stop trying to make JavaScript impersonate Python. Once you accept its runtime model, the language becomes much less surprising.