Slicing, splicing & joining

Copy part of a list, change a list, or turn it into text

An array is an ordered list of values. In Array basics you learned to read an item by its index, check the length, and add or remove items. This lesson shows more array tools. Each tool does one of three jobs:

• It copies part of an array into a new array.
• It changes the array itself.
• It turns an array into text, or text into an array.

Two words come up again and again. A copy is a new array, and the original array stays the same. To mutate an array means to change the array itself. Every part of your code that uses that array then sees the change. A method that mutates is said to work in place.

const cart = ["tea", "bread", "apples"];
const preview = cart.slice(0, 2);
console.log(preview.join(","));
console.log(cart.join(","));

Line 1 makes an array called cart with three items. Line 2 copies the first two items into a new array called preview. Line 3 prints tea,bread. Line 4 prints tea,bread,apples, so the cart still has all three items. The join(",") on lines 3 and 4 turns an array into text with commas between the items. You'll learn it properly later in this lesson.

For every method in this lesson, ask two questions. What does it give back? And does it change the original array?

The table below lists every tool in this lesson. Read each row as: "this tool changes the original array or not, it gives back this, and here is one thing to watch for."

This lesson also uses ideas from Strings and Default & rest parameters. A separator is the text placed between items, like a comma. Spread, written ..., opens an array and places its items one by one somewhere else.

slice(start, end) copies items into a new array:

• It starts at index start.
• It stops just before index end. The item at end is not included.
• If you leave out end, it copies all the way to the end of the array.
• A negative index counts from the end. slice(-2) means "the last two items".

splice(start, deleteCount, ...items) changes the array itself:

• It starts at index start.
• It removes deleteCount items from there.
• It puts any items you pass in their place.
• It gives back a new array that holds the removed items. It does not give back the changed array. Many bugs come from forgetting this.

const letters = ["a", "b", "c"];
const middle = letters.slice(1, 2);
console.log(middle.join(""));
console.log(letters.join(""));

Line 1 makes letters. Line 2 copies from index 1 up to, but not including, index 2. That is just "b". Line 3 prints b. Line 4 prints abc, so slice did not change letters. The join("") puts the letters together with nothing between them.

const todo = ["write", "test", "ship"];
const removed = todo.splice(1, 1, "review");
console.log(removed[0]);
console.log(todo.join(","));

Line 2 starts at index 1, removes 1 item ("test"), and puts "review" in its place. It gives back ["test"], which is saved in removed. Line 3 prints test. Line 4 prints write,review,ship. Unlike slice, this call changed todo.

1const letters = ["a", "b", "c", "d"];2letters.slice(start, end);3letters.splice(start, deleteCount, ...items);

Try setting start to -2. Then slice copies from the second-to-last item, and splice starts cutting at the second-to-last item. Each button runs the real method on a fresh array. So the "return value" box shows what the method really gave back, and the "original after" box shows what the array really holds now.

const first = ["tea"];
const second = ["bread"];
const breakfast = first.concat(second);
console.log(breakfast.join(","));
console.log(first.join(","));

Line 3 calls first.concat(second). It makes a new array with the items of first, then the items of second. Line 4 prints tea,bread. Line 5 prints tea, so first did not change.

There are two ways to put arrays together without changing them:

• Spread: [...a, ...b]. Each ... opens one array and places its items inside the new square brackets.
• concat: a.concat(b, 4). It starts with the items of a, adds the items of b, and then adds the value 4.

Both give back a new outer array.

1const a = [1, 2];Run2const b = [3];3const spread = [...a, ...b];4const concatted = a.concat(b, 4);5const nested = [["Ada"], ["Lin"]];6const copy = nested.slice();7copy[0].push("Grace");8console.log(JSON.stringify(spread), JSON.stringify(concatted), JSON.stringify(nested[0]));

Lines 3 and 4 hold no surprises. [...a, ...b] gives [1, 2, 3], and a.concat(b, 4) gives [1, 2, 3, 4]. Lines 5 to 7 show the catch. slice, spread, and concat make shallow copies. If an item is an object or an inner array, the copy and the original share it. Line 7 adds "Grace" through copy[0], and nested[0] shows it too.

const tags = "js,arrays".split(",");
console.log(tags.join(" | "));

Line 1 cuts the text "js,arrays" at each comma. That gives the array ["js", "arrays"]. Line 2 puts the items back together with " | " between them, and prints js | arrays.

Here are some checked results from join:

• ["a", "b", "c"].join("-") gives a-b-c.
• join() with no separator uses a comma: a,b,c.
• [null, undefined, 1].join("-") gives --1. null and undefined turn into empty text, but the dashes stay.

And here are some from split:

• "a,b,,c".split(",") gives ["a","b","","c"]. Two commas in a row have nothing between them, so you get an empty string, "".
• "a,b,,c".split(",", 2) gives ["a","b"]. The second argument is a limit: the most pieces you want back.
• "hi".split("") gives ["h","i"]. An empty separator cuts between every character.

Emoji are different. One emoji can come out as more than one piece with split(""). The Unicode & string internals lesson explains why.

1const pieces = ["a", "b", "c"];2pieces.join("-");3"a,b,,c".split(",");

const prices = Array.from({ length: 3 }, (_, index) => (index + 1) * 10);
console.log(prices.join(","));

Line 1 asks for a new array of length 3. For each index, 0, 1, and 2, the arrow function works out one price: (index + 1) * 10. The function's first argument would be the item. Here every item is undefined, so it gets the name _, which means "not used". Line 2 prints 10,20,30.

Array.from makes a new array from another value. It accepts two kinds of value:

• An iterable: a value you can loop over one item at a time, such as a string. Array.from("hey") gives ["h", "e", "y"].
• An array-like object: an object with a length property. Array.from({ length: 3 }, (_, i) => i * 2) gives [0, 2, 4].

A Set is iterable too. A Set is a collection that keeps each value only once. Array.from(new Set([1, 1, 2])) gives [1,2]. The Set dropped the second 1 before Array.from read it. Sets get their own lesson later.

Array.of avoids a surprise you met in Array basics:

• Array.of(3) makes an array with one item, the number 3: [3].
• new Array(3) makes an array with length 3 but no items. Its three slots are empty.

This mix-up causes real bugs, so it is worth seeing again.

1const letters = Array.from("hey");Run2const evens = Array.from({ length: 4 }, (_, i) => i * 2);3const oneNumber = Array.of(3);4const emptySlots = new Array(3);5const rows = new Array(3).fill({ done: false });6rows[0].done = true;7const shifted = [1, 2, 3, 4, 5].copyWithin(0, 3);8console.log(letters, evens, oneNumber, emptySlots.length, rows[1].done, shifted);

fill and copyWithin: two tools that change the array

const seats = new Array(3).fill("open");
seats[1] = "taken";
console.log(seats.join(","));

Line 1 makes an array with 3 empty slots. Then fill writes "open" into each slot. Line 2 changes slot 1 to "taken". Line 3 prints open,taken,open. This works well because "open" is a string. A string is a primitive value: it has no parts that one slot could change for the others.

The step-through above showed this trap. After rows[0].done = true, rows[1].done is true too. All three slots hold the same object.

The fix is to make a new object for each slot. Array.from calls your function once per slot, so each call makes a new object:

1const rows = Array.from({ length: 3 }, () => ({ done: false }));

copyWithin is used less often. It copies some items to another place in the same array, and it changes that array. For example, [1, 2, 3, 4, 5].copyWithin(0, 3) copies the items from index 3 onward, 4 and 5, to index 0. The array becomes [4,5,3,4,5], and the method gives back that same array. You may not write it often. When you read it, remember that it changes the array.

Where you'll use this

Apps keep lists all the time: cart items, chosen filters, open tabs, songs in a playlist, rows in a form, and text a person typed. These tools work on those lists.

1const items = ["red", "green", "blue", "gold"];2const index = 1;3const next = [...items.slice(0, index), ...items.slice(index + 1)];

Line 3 copies the items before index 1 and the items after index 1. Then it spreads both copies into a new array: ["red", "blue", "gold"]. items still has all four colors, so other code that uses it keeps working. Later, the Sorting & copying safely lesson shows toSpliced, a newer method that does the job of splice without changing the original.

• Use split to cut text a person typed into tags, and join to show the cleaned tags as text.
• Use concat or spread to add new results from a server to a list, without changing the old list.
• Use Array.from to make placeholder rows, with a new object for each row.
• Use slice to show the first few cards while keeping the full list.

Common misconceptions

For each question, follow two things one at a time: what the method gives back, and what the original array holds after. Your first answer is the one that counts, and every choice explains why it is right or wrong.

Key takeaways

• slice makes a shallow copy of part of an array. splice changes the array and gives back the removed items.
• Spread and concat make a new outer array, but objects inside it are still shared.
• join gives back a string. split gives back an array of strings, and it keeps empty pieces.
• Array.from builds an array from an iterable or an array-like object. Array.of(3) means [3].
• fill and copyWithin change the array. Avoid fill() unless you want every slot to share one object.

Up next: Searching arrays.