JavaScript for Python programmers

Functions, arrows and template literals

A function declaration looks like Python's def with braces: function total(items) { ... }. Arrow functions are the short form you'll see everywhere, much like lambda but allowed to have a body:

const double = (x) => x * 2;
const label = (name, price = 0) => `${name}: ${price} dollars`;
function shipping(total) {
  if (total >= 100) return 0;
  return 7.5;
}
console.log(double(21), label("Trail mug", 12), shipping(189));

Backtick strings are template literals, JavaScript's f-strings: ${...} holds any expression. Default parameters work as in Python. One difference to remember: a function that reaches its end without return gives back undefined, and calling it with too few arguments doesn't raise. The missing ones are undefined.

function priceLabel(product) {
  // return a string like "Ridge tent: 189 dollars"
}

console.log(priceLabel({ name: "Ridge tent", price: 189, stock: 4 }));

Arrays: map, filter and reduce

Arrays are Python lists: items.length, items.push(x), items.includes(x), items.slice(1, 3) and [...a, ...b] to join two. Instead of list comprehensions, you chain methods that each take a function:

• filter(fn) keeps the items where fn returns something truthy, like [p for p in ps if ...];
• map(fn) turns each item into a new one, like [f(p) for p in ps];
• reduce((acc, x) => ..., start) folds the array into one value, the way a running total does;
• find(fn) returns the first match or undefined, and some and every are any and all.

To loop yourself, use for (const p of products). Note the word of: for...in also exists, but it walks an object's keys, and on an array those keys are the indexes as strings. It's the most common loop bug for people arriving from Python.

const seen = [];
for (const x in ["tent", "mug"]) seen.push(x);
console.log(seen);

Objects, destructuring and JSON

Objects are JavaScript's dictionaries, written with unquoted keys: { sku: "MUG-01", price: 12 }. Read fields with a dot, p.price, or brackets for a key in a variable, p[key]. A missing field is undefined, not a KeyError, and order.customer?.email stops at the first null or undefined instead of crashing. ?? gives a default only for those two: p.discount ?? 0.

Destructuring pulls fields into names, and spread copies with changes:

const product = { sku: "MUG-01", name: "Trail mug", price: 12, stock: 0 };
const { name, price } = product;
const onSale = { ...product, price: 9 };
console.log(name, price, onSale.price, product.price);
console.log(JSON.stringify({ sku: product.sku, price }));
console.log(Object.entries({ tent: 4, mug: 0 }));

JSON.stringify and JSON.parse are json.dumps and json.loads. Because objects are JSON's own shape, data from an API is ready to use the moment it's parsed.

function cartSummary(items) {
  if (!items) return "Your cart is empty";
  const total = items.reduce((sum, it) => sum + it.price * it.qty, 0);
  return `${items.length} items, ${total} dollars`;
}

console.log(cartSummary([]));
console.log(cartSummary([{ price: 12, qty: 2 }, { price: 79, qty: 1 }]));

Three more traps

Sorting. sort() with no argument converts items to strings and sorts those, so numbers come out in dictionary order. Pass a comparison: prices.sort((a, b) => a - b) sorts numbers from low to high. sort also changes the array in place; toSorted returns a sorted copy, like Python's sorted.

Floats. 0.1 + 0.2 is 0.30000000000000004 here too. For money, count in cents as whole numbers, or round when you display with total.toFixed(2), which returns a string.

Strings and numbers. + joins as soon as either side is a string, which matters for anything read from a form or a URL: "2" + 1 is "21". Convert first with Number(text), and check the result with Number.isNaN, because a bad number becomes NaN instead of raising.

console.log([10, 9, 1, 100].sort());

A map to keep

Two habits carry the rest: declare with const unless the name must change, and when something surprises you, print it with console.log and its type with typeof. The next lesson adds the part of JavaScript with no direct Python twin in everyday code: everything that waits, from timers to network calls.