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

Using Arrays as Lists

Using Arrays as Lists

In this lesson, you ported the crew’s stop list for the van to JavaScript arrays, and found out why the port loaded 11 bikes where Python loads 6.

  • A Python list is a JavaScript array, written the same way: square brackets, quotes and commas. Each array gets a const.
  • Python’s append() becomes .push(), a method (a function that belongs to the array), which adds an item to the end of the array.
  • Python’s len() becomes .length, with no parentheses, because it’s a value the array keeps up to date, not a function.
  • JavaScript has an in operator, but it asks about keys, not values, the way Python’s in does on a dict. An array’s keys are its positions, each item’s index counted from zero, plus a few built-in names such as length. So 0 in closedDocks is true and "Market Hall" in closedDocks is false: in never finds a value in an array.
  • A closed check ported from Python as it reads, if (name in closedDocks) {, runs with no error and gives the wrong answer.
  • To ask whether an array holds a value, call .includes() on it: the array comes first, then the value, the other way round from in. It checks each item against the value, as Python’s in does on a list.

Here’s the crew’s Python step:

Language: Python
empty_docks = ["Elm Street", "Market Hall"]
closed = ["Market Hall"]
stops = []

for name in empty_docks:
    if name in closed:
        print(f"Skip {name}: closed")
    else:
        stops.append(name)

print(f"Van stops: {len(stops)}")

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 In the course intro, the full Python report loaded the van with six bikes. It loads half the free slots of each stop, and Elm Street has twelve free, so six.

00:14 The JavaScript port came out at eleven, with Market Hall closed. Each stop on the stop list adds to the load, so that’s where to look. In this lesson, you’ll port the list with JavaScript’s arrays, and find out why.

00:30 The Python script keeps its docks in lists. It skips each closed dock, adds the others to the stops, and prints how many there are.

00:41 The lists carry over unchanged: square brackets, quotes and commas. In JavaScript, a list is called an array, and each one gets a const. The loop ports as you know it, and the closed check can wait.

00:57 Python’s .append() becomes .push(), a method, like .append(): a function that belongs to the array. It adds the name to the end.

01:06 For the count, Python calls len() on the list. JavaScript reads the array’s .length, with no parentheses, because it’s a value the array keeps up to date, not a function.

01:19 Now the closed check. JavaScript has an in operator too, so the condition ports as it reads, with parentheses and braces. For Market Hall, Python’s condition is true.

01:33 Does in find the value here? Your turn: pause the video and predict.

01:43 No, it gives false.

01:46 Run the port, and the skip line never prints: JavaScript counts two stops.

01:53 Market Hall made the list, and half its ten free slots add five bikes to Elm Street’s six. That’s the eleven, with no error to warn you.

02:04 So what does in really check? It asks about keys, not values, the way Python’s in does on a dict: the key name is in it, and the value Elm Street isn’t.

02:17 An array’s keys are its positions, each item’s index, counted from zero, plus a few built-in names, like length. The closed list has one item, at position zero, so zero is in it.

02:31 Market Hall is a value, not a key, so it isn’t. So the in check never tells you whether an array holds a value.

02:42 To ask about values, an array has a method, .includes(). The array comes first, then the value you’re looking for, the other way round from in.

02:52 It checks each item against the value, as Python’s in does on a list. Run it again. The skip line prints, and the count drops to one stop, as in Python.

03:06 Market Hall stays off the list, so the van loads only Elm Street’s six bikes.

03:13 So stops grew, even though it’s a const. A const can’t be reassigned, but the array can still change inside.

03:23 So here’s the rule. A Python list is a JavaScript array. .append() becomes .push(), len() becomes .length, and .includes() does the job of in for values.

03:35 JavaScript’s in asks about keys, which in an array are its positions, so never use it to find a value. Next up: Using Objects as Dicts and Records.

03:48 You’ll write each dock as one record, read with a dot where Python uses square brackets, and loop over a whole array of them.

Become a Member to join the conversation.