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

Rotating the Rota With push() and shift()

Rotating the Rota With push() and shift()

In this lesson, you ported the Monday script’s first step, which moves last week’s person from the front of the rota to the back, and met the four methods that add and remove items at the two ends of an array.

  • The list carries over as an array literal, with a const. The const fixes the name, not the array’s contents, so the rotation can still change the array.
  • Python’s append() is JavaScript’s .push(), which adds an item to the end of the array.
  • Python’s pop() can take a position, but JavaScript’s .pop() takes none: it always takes the last item, so the natural port, rota.pop(0), takes Bea. Taking from the front has a method of its own, .shift(), which does what Python’s pop(0) does.
  • Watch out for Python’s method names: an array has no append() method, so calling rota.append(...) fails with “TypeError: rota.append is not a function”, and .push() is the name to write instead.
  • When the rotation line runs, .shift() hands back the item it took off, as Python’s pop(0) does. .push() hands back the array’s new length, where Python’s append() changes the list and hands back None.
  • .unshift() puts an item at the front, as Python’s insert(0, x) does, and like .push() it hands back the new length, where insert() hands back None.
  • Watch out at an empty array: there, .pop() and .shift() hand back undefined, where Python’s pop() raises an IndexError, and the rotation’s other method then adds that undefined to the rota: check the length before you rotate.

Here’s the rotation step of the Python script, monday_rota.py:

Language: Python
rota = ["Marta", "Dev", "Sam", "Ines", "Kofi", "Bea"]
rota.append(rota.pop(0))
print(f"On call this week: {rota[0]}")
print(rota)

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 rota is a JavaScript array now, and you can read either end of it. Monday’s first job is to move last week’s person to the back of the queue. In this lesson, you’ll port that step, and meet the methods that add and remove people at both ends of an array.

00:19 The Python script does it in one line. pop(), given position 0, takes Marta off the front, and append() puts her at the back.

00:29 Run it, and Dev is on call this week, with Marta last in the queue.

00:36 In JavaScript, the list carries over as an array, with a const. The name stays tied to this array, but the array itself can still change, which is what the rotation needs.

00:48 For append(), an array has .push(), which adds an item to the end. Watch out for the Python name, though: an array has no append(), so calling rota.append() fails with a TypeError saying it isn’t a function, and .push() is the name to write instead.

01:07 That leaves pop(0), the call inside .push(). The natural port keeps it as it is, zero and all. Which person does that call take off the rota?

01:18 Your turn: pause the video and predict.

01:26 It takes Bea, from the back.

01:30 Python’s pop() can take a position, but JavaScript’s .pop() always takes the last item, whatever you pass it. So the front gets a method of its own: .shift() takes the first item.

01:43 Read the line from the inside out. .shift() removes Marta from the front, and everyone else moves up one place. .push() adds her at the end.

01:55 The two print lines become console.log() calls, with a template literal for the f-string. Run it, and JavaScript prints Dev as on call, with Marta last, as in Python.

02:07 Node’s console.log() spaces the brackets a little differently, but it’s the same six names in the same order.

02:15 When that line ran, each method in it handed back a value. .shift() handed back Marta, the person it took off the front, the same as Python’s pop(0).

02:27 Python’s append() changes the list and hands back None. What did .push() hand back in that line? Your turn: pause the video and predict.

02:42 It handed back 6. That’s the array’s new length, the six people on the rota. The line ignores it, because the change to the rota is what the script needs.

02:55 Now picture the step running twice by mistake. Sam’s on call, and Dev waits at the back. To undo one rotation, an undo script starts from that order and runs the move backwards.

03:09 .pop() takes Dev off the back. .unshift() puts him at the front, where Python inserts at position 0. Like .push(), it hands back the new length, where Python’s insert() hands back None.

03:23 Run it, and Dev is on call again.

03:26 Watch out at an empty array, though. There, .pop() and .shift() hand back undefined, JavaScript’s value for nothing, where Python’s pop() raises an IndexError, and the rotation’s other method then adds that undefined to the rota, so check the length before you rotate.

03:45 So here’s the rule for the ends of an array. At the back, .push() adds and .pop() removes, as append() and pop() do in Python.

03:54 At the front, .unshift() adds and .shift() removes, where Python passes position 0. And Monday’s step is .push() of .shift(): Marta goes to the back.

04:06 Next up: Replacing Tuples With Arrays. JavaScript has no tuples, so you’ll see how an array does that job for the script’s out-of-hours window, and why porting the parentheses goes wrong.

Become a Member to join the conversation.