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

Changing the Rota in Place With splice()

Changing the Rota in Place With splice()

In this lesson, you took Sam, who’s on leave, out of the middle of the rota, put the new hire Lena in after this week’s person, and met the one JavaScript method that does both.

  • JavaScript has a delete operator, so Python’s del rota[1] ports as delete rota[1];. It runs with no error, but it works like Python’s del on a dict: del slots[1] on {0: "Dev", 1: "Sam", 2: "Ines"} takes out one key, keeps keys 0 and 2, and the dict’s length drops to 2.
  • delete takes position 1 out the same way and renumbers nothing: Marta is still at position 5. delete never changes an array’s length: it stays 6, where Python’s len() gives 5.
  • The array is left with a hole, or empty slot: a position with no item in it. JavaScript logs it as <1 empty item>, and .join() turns it into an empty string, so the next three weeks print Dev, , Ines.
  • del on a list and delete both clear a position, but only del on a list closes the gap, so JavaScript developers don’t use delete on arrays.
  • To remove, insert or replace items in the middle of an array, call .splice() and read its arguments as start, how many to remove, what to put in. rota.splice(1, 1) cuts out Sam and closes the gap.
  • .splice() hands back what it cut out, in an array: here, [ 'Sam' ]. When you don’t need it, call .splice() on a line of its own, like .push().
  • JavaScript arrays have no insert method: rota.splice(1, 0, "Lena") starts at 1, removes 0 and puts in Lena, as Python’s rota.insert(1, "Lena") does.
  • If two weeks change hands, Python’s slice assignment swaps in the new names, and that’s .splice() too: rota[1:3] = ["Noor", "Rui"] becomes rota.splice(1, 2, "Noor", "Rui"), which hands back [ 'Lena', 'Ines' ]. Python passes the new names as one list, but .splice() takes each one as an argument. Note the second number: Python’s slice stops before position 3, but the second number in .splice() counts how many to remove, 2.
  • .slice() and .splice() are one letter apart: .slice() copies a range and leaves the array alone, and .splice() changes the array itself.

Here’s the team lead’s Python step:

Language: Python
rota = ["Dev", "Sam", "Ines", "Kofi", "Bea", "Marta"]

del rota[1]
print(rota, len(rota))
print(", ".join(rota[:3]))

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 Sam is on leave this week, and he’s second on the rota. In this lesson, you’ll take him out of the JavaScript array, put the new hire in, and meet the one method that does both.

00:14 The script starts from the rotated rota. It deletes the item at position one, then prints the rota with its length, and the next three weeks for the team channel.

00:25 Python leaves five people: Dev, Ines and Kofi take the next three weeks.

00:32 In the JavaScript port, the rota and the two prints carry over: .length for len(), and .slice() for the first three.

00:40 For del, JavaScript has a delete operator, so the line ports as it reads. After del, Python’s len() gives five.

00:51 What length does JavaScript log? Your turn: pause the video and predict.

01:01 Run the port: JavaScript logs six.

01:06 Sam’s slot shows as one empty item. The next three weeks read Dev, a blank, then Ines.

01:16 Python’s del on a list removes Sam and closes the gap: everyone after him moves left. JavaScript’s delete works like del on a dict.

01:27 del on a dict takes out one key, keeps zero and two, and its length drops to two. delete takes position one out the same way, and renumbers nothing.

01:39 Marta’s still at position five. delete never changes an array’s length: it stays six. That leaves a hole, or empty slot: a position with no item in it.

01:52 .join() turns it into an empty string.

01:56 del on a list and delete both clear a position, but only del on a list closes the gap, so JavaScript developers don’t use delete on arrays.

02:05 Nothing failed: the blank week would have gone straight to the team channel. To take Sam out and close the gap, arrays have a method, .splice().

02:17 Its first argument is where to start, the second how many to remove.

02:23 So .splice(1, 1) starts at position one and cuts out one item, Sam. Everyone after him slides left to close the gap. Run it again: the length’s back to five.

02:38 .splice() also hands back what it cut out, in an array: here, Sam alone. You don’t need him, so the call sits on a line of its own, like .push().

02:50 Lena, the new hire, goes in straight after this week’s person. Python inserts her at position one. JavaScript arrays have no .insert() method.

03:02 .splice() does it, with a third argument: what to put in. Start at one, remove zero, and put in Lena. Ines and everyone after her move right one place.

03:14 Run it: that’s this Monday’s rota, with Lena second.

03:20 If two weeks change hands, Python’s slice assignment swaps in the new names. In JavaScript, that’s .splice() again. Start at one, remove two, and put in Noor and Rui.

03:34 Python passes one list, but .splice() takes each name as an argument. Lena and Ines come out.

03:43 Python’s slice stops before position three, but .splice()’s second number counts how many to remove: two.

03:51 Back to Monday’s rota. Every edit in the middle is one method.

03:58 Here’s the rule. To remove, insert or replace items in the middle of an array, a JavaScript developer reaches for .splice(): start, how many to remove, what to put in.

04:10 delete leaves a hole, and .splice() removes the item and closes the gap. Watch the name. .slice() and .splice() are one letter apart: .slice() copies a range and leaves the array alone, and .splice() changes the array itself.

04:28 Next up: Apply the Team Changes, an exercise. A teammate’s port runs but prints the wrong rota, and you’ll fix it to match the Python script.

Become a Member to join the conversation.