Locked learning resources

Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Locked learning resources

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Looking Up Postage by Country

Looking Up Postage by Country

In this lesson, you looked up the postage for order 1042 by a key held in a variable, and ported Marta’s rates table.

  • The country comes from Iris’s address, cut down to the two fields this step needs, so the key is in a variable. Python’s RATES[country] is RATES[country] in JavaScript too: the brackets use the variable’s value.
  • Ported the way the order was, with the quotes off the keys, the table keeps HOME_COUNTRY bare, as it was in Python. The port stops with TypeError: Cannot read properties of undefined (reading 'toFixed'): the lookup gave undefined, because in JavaScript a key that isn’t there gives undefined instead of raising a KeyError.
  • Logged on its own, the table has a key called HOME_COUNTRY and no GB. In an object literal, a bare key is always the key’s own name, as the order’s id: 1042 made a key called id. It’s the name you’d write after a dot, because an object is also a record: order.id reads the key that id: 1042 wrote.
  • Python reads a dict literal differently: a bare word there is a variable, so Python looks up HOME_COUNTRY and uses its value, and the dict prints with 'GB' first. The same line means the value in Python and the name in JavaScript.
  • To use a variable’s value as a key, wrap it in brackets inside the literal: [HOME_COUNTRY]: 3.2, a computed property name. The brackets work out what’s inside and use the result, as Python’s bare word did.
  • Brackets mean “the value of this”, whether you read a key or write one in a literal. Dots and bare keys mean “this name”, as a dot does on any Python object, so RATES.country looks for a key called country and gives undefined. Write a dot when you know the key as you write the code, as in address.country, and brackets when the key comes from data.

Here’s Marta’s Python step:

Language: Python
HOME_COUNTRY = "GB"
RATES = {
    HOME_COUNTRY: 3.20,
    "IE": 7.50,
    "DE": 8.90,
    "US": 14.50,
    "ROW": 16.50,
}

address = {"city": "Leeds", "country": "GB"}
country = address["country"]
rate = RATES[country]
print(f"Postage: £{rate:.2f}")

Locked learning resources

Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Locked learning resources

The full lesson is for members only. Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

00:02 Order ten forty-two goes to Iris Okafor in Leeds, and the label needs the postage for her country. In this lesson, you’ll look up a rate by a key held in a variable, and port the rates table.

00:16 The Python script keeps the rates in a dict, keyed by country code, with the rest of the world last. Marta’s home country is stored in a constant, HOME_COUNTRY, and that’s the first key.

00:29 The country comes from Iris’s address, cut down to the two fields this step needs, and the lookup puts that variable in brackets. Python prints it to two decimals: postage, three pounds twenty.

00:43 In the JavaScript port, the constant and the table get const, and the keys lose their quotes, as the order’s did. The rates also drop the trailing zeros, which neither language prints.

00:55 HOME_COUNTRY had no quotes in Python, so it stays as it is. The address and its country carry over, with a dot for the field. The lookup keeps Python’s brackets.

01:08 The port calls .toFixed() for the two decimals.

01:12 Python printed three pounds twenty. What does the JavaScript port print? Your turn: pause the video and predict.

01:24 Run it: JavaScript stops with a TypeError. It tried to read .toFixed() from undefined, which has no properties at all.

01:36 The error points at the last line, where .toFixed() is called on the rate. So the rate is undefined: the lookup on the line above found nothing.

01:46 In JavaScript, a key that isn’t there gives undefined instead of raising a KeyError, as the order’s phone did.

01:55 But Marta’s home country is in the table, isn’t it? Log the table on its own. It has a key called HOME_COUNTRY, and no GB at all.

02:06 You’ve seen this rule with the order: a bare id made a key called id. It’s the name you’d write after a dot, because an object is also a record: order.id reads the key that id wrote.

02:21 In an object literal, a bare key is always the key’s own name, as after a dot. HOME_COUNTRY is no exception, even with a constant of that name two lines above.

02:34 Python reads a dict literal differently. There, a bare word is a variable, so Python looks up HOME_COUNTRY and uses its value. Print the Python dict: its first key is GB.

02:49 So the same line means two things. Python’s key is the value, GB, and JavaScript’s is the name. Nothing failed until the lookup asked for GB.

03:04 To use a variable’s value as a key, wrap the variable in brackets inside the literal. It’s called a computed property name. The brackets mean: work out what’s inside, and use the result.

03:17 That’s what Python’s bare word did. Log the table again: its first key is now GB.

03:26 The lookup’s brackets work the same way. country holds GB, so the lookup reads the key GB, and the rate is three point two. Run the port: postage, three pounds twenty, as in Python.

03:44 Here’s the rule. Brackets mean the value of this, whether you read a key or write one in a literal. Dots and bare keys mean this name, as a dot does on any Python object.

03:58 So RATES.country would look for a key called country, and you’d get undefined back. Write a dot when you know the key as you write the code, like the address’s country, and brackets when the key comes from data.

04:13 Next up: Listing an Object’s Keys and Entries, a text lesson. You’ll get the country codes, the rates and the pairs out of RATES as arrays, where Python reaches for keys(), values() and items().

Become a Member to join the conversation.