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

Cleaning Up the Tags With a Set

Cleaning Up the Tags With a Set

In this lesson, you cleaned up order 1042’s tags, ["gift", "fragile", "gift"], with a JavaScript Set.

  • JavaScript has a Set type too. You make one with the new keyword, as you make a Map, and like Python’s set(), it takes an iterable: new Set(order.tags) builds it from the tags array and drops the repeat.
  • For the length, a Set has a .size property, where Python has len(). A Set isn’t an array, so tags.length gives undefined.
  • A Set keeps its members in the order they first arrived, so JavaScript logs Set(2) { 'gift', 'fragile' } 2. The number in parentheses is the size, and the braces hold the members: that’s how a Set prints, not code you write.
  • Python’s set promises no order. For strings like these, its order can change from run to run: one run printed {'fragile', 'gift'} 2, and the next printed {'gift', 'fragile'} 2.
  • Because a Set keeps the order, [...new Set(order.tags)] removes the repeats and gives [ 'gift', 'fragile' ]. The ... spreads the Set into a new array, as it spreads one array into another. In Python, keeping the order takes list(dict.fromkeys(order["tags"])), because a dict keeps its keys in the order they arrived, as a Set does with its members.
  • tags.has("gift") does the job of Python’s "gift" in tags, and logs true.
  • Watch out for porting in as it reads: JavaScript’s in asks whether an object has a key by that name, as it does for an array’s positions, so "gift" in tags is false.
  • .add() adds a member, as in Python, and adding "gift" again leaves the size at 2. Where Python has discard(), a Set has a .delete() method, a call on the Set, not the delete operator you used on object keys.
  • Watch out for Python’s set literal: in JavaScript, braces make an object, which needs keys and values, so {"US", "CA", "AU"} ported with its braces stops the file with a syntax error. JavaScript has no Set literal, so pass the items as an array: new Set(["US", "CA", "AU"]).
  • Combining sets, such as a union, comes later.

Here’s Marta’s Python step:

Language: Python
order = {"tags": ["gift", "fragile", "gift"]}
country = "GB"
TRACKED_COUNTRIES = {"US", "CA", "AU"}

tags = set(order["tags"])
print(tags, len(tags))
print("gift" in tags)
print(country in TRACKED_COUNTRIES)

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 The shop platform sends order 1042’s tags with a repeat: gift, fragile, and gift again. In this lesson, you’ll clean them up with a JavaScript Set. Marta’s Python script turns the tags into a set, which drops the repeat.

00:19 Then it prints the set and its length, and checks for the gift tag and for tracked postage to Britain. Run it: two tags. The gift tag is there, and Britain needs no tracking.

00:34 Notice the order: fragile came out first.

00:39 In the JavaScript port, the order and the country carry over.

00:44 JavaScript has a Set type too. As with Map, you make one with the new keyword. Like Python’s set, it takes an iterable: here, the tags array. For the length, a Set has a .size property.

01:00 A Set isn’t an array, so tags.length gives you undefined, not two.

01:07 Python’s set printed fragile first. Which tag will JavaScript log first? Your turn: pause the video and predict.

01:21 Run it: JavaScript logs gift first, then fragile. The number in parentheses is the size, and the braces hold the members. That’s how a Set prints, not code you write.

01:36 A Set keeps its members in the order they first arrived. The second gift was dropped.

01:43 Run the Python script again, and for strings like these, its order can change. This time, gift comes first. Python’s set promises no order.

01:56 Often you only need the tags as an array, without the repeat. Because a Set keeps the order, it can do that itself. Build a Set from the tags, then spread it into a new array, with the three dots that spread one array into another.

02:12 Out comes gift, then fragile. A Python set can’t promise that order. Keeping it takes dict.fromkeys(), because a dict keeps its keys in the order they arrived.

02:26 A JavaScript Set does the same with its members.

02:31 Next, the gift check. Where Python asks with in, a JavaScript Set asks with its .has() method. Run it: true, as in Python.

02:45 Watch out for porting in as it reads: JavaScript’s in asks whether an object has a key by that name, as it does for an array’s positions, so "gift" in tags is false.

02:59 Say Marta marks the order as a gift by hand. The .add() method adds a member, as in Python, and adding gift again leaves the size at two. Where Python has .discard(), a Set has a .delete() method.

03:14 It’s a call on the Set, not the delete operator you used on object keys.

03:21 The tracked countries are a set Python writes as a literal, in braces. Watch out: in JavaScript, braces make an object, which needs keys and values, so this line ported with its braces stops the file with a syntax error.

03:38 JavaScript has no Set literal, so you pass the countries to new Set as an array. Its .has() method then checks the country. Run it: false, so order 1042 needs no tracked postage.

03:55 Here’s the rule. Where Python uses a set, build a new Set from an array. .has() and .size do the jobs of in and len(), and .add() and .delete() change it.

04:09 A Set keeps the order of arrival, so spreading a new Set into an array removes the repeats and keeps the order. Combining sets, such as a union, comes later.

04:21 Next up: Spotting Remote Postcodes With String Keys. The courier charges extra for Shetland and the Outer Hebrides, and Python keeps those areas as a set of tuples, which you’ll port for order 1043’s address.

Become a Member to join the conversation.