cf.completefrontend
STRING ALGORITHMS · FOUNDATION

Building strings piece by piece

Make a new string by collecting small pieces in an array and joining them once at the end.

Time O(n)Space O(n)7 practice problemsStep-through picture

The idea

In JavaScript a string can't be changed after it is made. Writing name[0] = "X" does nothing. Every change, like adding a letter, makes a brand new string.

So when you transform text, such as turning marginTop into margin-top, you read the old string one character at a time and build the new one. A simple, predictable way is to push each piece into an array called parts and call parts.join("") once at the end.

This pattern shows up whenever you clean, format, escape, or convert text: slugs for URLs, CSS property names, masked emails, or wrapped lines in a text box.

An everyday example

Writing a sign with letter tiles

You want to copy the sign marginTop but in a new style. You don't scratch the old sign. You walk along it letter by letter. For each letter you pick a new tile and place it on a tray. When you reach a capital letter, you first put a dash tile on the tray, then the small version of the letter. At the end you glue the whole tray into one new sign.

How the example maps to the code
In the exampleIn the code
The old sign you read fromThe input string name
Your finger on the current letterThe index i and char = name[i]
The tray of tilesThe array parts
Placing a dash before a capitalparts.push("-")
Gluing the tray into one signparts.join("")

From the slow way to building strings piece by piece

  1. Say you want to turn fontSize into font-size by editing. Find a capital, then rebuild the string around it: result.slice(0, k) + "-" + lower + result.slice(k + 1). Each edit copies the whole string, so a name with c capitals costs O(n · c), which reaches O(n^2) when most letters are capitals.
  2. Notice that every character of the output comes from reading the input once, from left to right. The output is the input with small local changes: a letter made lowercase here, a - added there. So instead of editing a finished string again and again, read each input character once and write down what it becomes.
  3. Each input character becomes one or two output pieces: its lowercase form, with a - in front if it starts a new word. Collect the pieces in order in an array parts. A push costs O(1), and nothing already pushed is ever copied again.
  4. At the end, parts.join("") copies every piece into the final string exactly once. Read once, decide per character, push the pieces, join once: that loop is building strings piece by piece.

How it works

  1. Make an empty array parts. It will hold the pieces of the answer in order.
  2. Walk the input with an index i from 0 to the last character, reading char = name[i].
  3. Decide what this character turns into. Here lower = char.toLowerCase() is the small version.
  4. If the character needs extra output first, push that: a capital letter that isn't the first character gets a "-" in front.
  5. Push the piece for the character itself, lower.
  6. After the loop, return parts.join(""), which glues every piece into one string.

Watch it run

This picture runs the code below on a real input. Press Step to move one step at a time, or Play to watch. The highlighted line is the one that just ran. Change the input to see other cases.

Loading the picture…
See every step at onceThe same run, laid out side by side
Drawing every step…

The code

Point at a note to light up the lines it explains.

JavaScriptOpen in the code editor (opens in a new tab)
  1. function toKebabCase(name) {
  2. const parts = [];
  3. for (let i = 0; i < name.length; i++) {
  4. const char = name[i];
  5. const lower = char.toLowerCase();
  6. if (char !== lower && i > 0) {
  7. parts.push("-");
  8. }
  9. parts.push(lower);
  10. }
  11. return parts.join("");
  12. }

How fast it is

TimeO(n)
Extra memoryO(n)

Each of the n characters is read once and adds at most two pieces. The pieces and the result take memory that grows with n.

  • Best caseO(n)

    Any name, even one with no capitals like color: every character is read once and pushed once.

  • Average caseO(n)

    A typical name like borderTopWidth: one push per letter, plus one extra push per capital.

  • Worst caseO(n)

    Every character after the first is a capital, like aBCDE: two pushes each, so parts holds 2n - 1 pieces, still linear. It returns a-b-c-d-e.

Common mistakes

  • Trying to change a character in place with text[i] = "x". Strings can't be changed, so nothing happens. Build a new string instead.
  • Forgetting the first character. Without the i > 0 check, Button becomes -button.
  • Calling join() with no argument. It uses a comma, so you get m,a,r,g,i,n. Pass "" to glue pieces with nothing between them.
  • Using split("") on text with emoji or other characters outside the basic range. They are made of two code units and get split in half. Use Array.from(text) when that matters.

When to use it

Look for these clues in a problem:

  • The task returns a new string made from an old one, such as a converted, cleaned, or escaped version.
  • Each output character depends on one input character and maybe its neighbors.
  • You need to insert, drop, or repeat characters while walking the text.
  • The answer is text made of many small pieces, like words joined by commas or lines joined by newlines.

Check yourself

Answer each one in your head first, then open it.

Why doesn't name[0] = "X" change name?

JavaScript strings can't be changed after they're made. The assignment is ignored, or throws a TypeError in strict mode, so you have to build a new string.

What does toKebabCase("aBC") return, and how many pieces does parts hold before the join?

It returns a-b-c. parts holds 5 pieces: a, -, b, -, and c.

Why is char !== lower a good test for a capital letter?

Only letters that have a lowercase form change under toLowerCase(). Digits, symbols, and lowercase letters stay the same, so they never get a - in front.

What would parts.join() with no argument return for SvgIcon?

s,v,g,-,i,c,o,n, because join puts a comma between pieces when no separator is given.

Practice problems

Stuck on one? Tuto is in the playground too, and gives you hints, never the answer.

Not started

0 of 7 solved. Solve one to earn the bronze medal, half for silver, and all of them for gold.

Start practicing

easy

medium

Go further

You don't need these to start practicing. Open one when you want more.

Why it works

The reasoning that makes it always right

The rule the loop keeps: after handling indexes 0 to i, parts.join("") is exactly the kebab-case form of name.slice(0, i + 1). Before the loop, parts is empty and so is the prefix, so the rule holds. Each step only appends what character i turns into, so the rule stays true.

Each character's output depends only on the character itself and on whether i > 0: lower it, and put a - first if it was a capital after the start. Nothing that comes later can change what an earlier character should become, so pieces never need to be revisited or edited.

The loop ends after name.length steps, and then the rule covers the whole name. The join reads each piece once, so the total work is proportional to the length of the output, which is at most 2n - 1 characters for n input characters.

Going deeper

3 more ideas

Why a capital letter tells you where a word starts

A name like backgroundColor is written in camelCase: every word after the first starts with a capital letter. A character is a capital when it changes under toLowerCase(), so char !== lower is the test. The first character is skipped (i > 0) so a name like Button becomes button, not -button.

How fast it is

The loop looks at each of the n characters once and pushes at most two pieces for each, so the work is O(n). join walks all pieces once more, which is also O(n). The array of pieces and the result use O(n) extra memory.

Is += slow in JavaScript?

In some languages, adding to a string in a loop copies the whole string each time, which costs O(n^2). Modern JavaScript engines avoid most of that cost for result += piece, so both styles are usually fine. The array of parts is still handy when you need to change a piece later, reverse the order, or join with a separator like ", ".

Work it by hand

Every step in a table, with why

Turn a camelCase name that starts with a capital into kebab-case.

name = "SvgIcon"

Stepicharlowerchar !== lower && i > 0PushedWhat happensWhy
10Ssfalse (i is 0)"s"parts spells sS is a capital, but it's the first character, so no - goes in front. Only s is pushed.
21vvfalse"v"parts spells svA lowercase letter doesn't change under toLowerCase(), so it's pushed as it is.
32ggfalse"g"parts spells svgSame again.
43Iitrue"-", "i"parts spells svg-iA capital after the start: a new word begins, so - is pushed first, then i.
54ccfalse"c"parts spells svg-icBack to plain lowercase letters.
65oofalse"o"parts spells svg-icoOne piece pushed.
76nnfalse"n"parts spells svg-iconThe last character. parts now holds 8 pieces for 7 input characters.
8-----parts.join("")The join copies the 8 pieces into one new string, once.

It returns svg-icon. The loop read each of the 7 characters once and pushed 8 pieces; the only copy of the whole result happened in the final join.

Compared with other ways

When to pick something else
ApproachTimeExtra memoryChoose it when
Building strings piece by pieceO(n)O(n)Any change that reads text once and writes new text, especially with special cases per character.
result += piece in a loopO(n)O(n)Plain appends in JavaScript. In languages without this engine help, like Java with plain strings, it can become O(n^2); use a builder there.
One replace with a regular expressionO(n)O(n)The rule fits a pattern, like name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()). It's short, but it puts a - before a capital first letter unless you handle that, and special cases get hard to add.
Edit with slice at each changeO(n^2)O(n)Only for one or two edits in a long string, since each edit copies the whole string.

Extra memory: O(n): parts holds up to 2n - 1 pieces, and the result has up to 2n - 1 characters.

How the steps grow

1101001k10k100k1M116324864input size n
Steps as the input grows, for Building strings piece by piece and the other approaches, on a scale where each line up is 10 times more steps.
  • Building strings piece by piece, result += piece in a loop, One replace with a regular expression O(n)
  • Edit with slice at each change O(n^2)
About how many steps for bigger inputs
Approachn = 10n = 1,000n = 1,000,000
Building strings piece by piece101,0001 million
result += piece in a loop101,0001 million
One replace with a regular expression101,0001 million
Edit with slice at each change1001 million1 trillion

Inputs that need care

5 tricky inputs
An empty name: ""
The loop never runs and [].join("") returns "".
A capital first letter: "SvgIcon"
i > 0 is false at index 0, so no - goes in front, and the result is svg-icon.
Capitals in a row: "zIndexUI"
Every capital gets its own -, so it returns z-index-u-i. If UI should stay one word, add the - only when the character before is lowercase, or the one after is.
Digits: "a1B"
"1".toLowerCase() is "1", so a digit never counts as a capital. It returns a1-b.
Accented capitals: "farbeÄndern"
"Ä".toLowerCase() is "ä", so the capital test works beyond English letters, and it returns farbe-ändern.

Variations and follow-ups

Twists interviewers add

The reverse: kebab-case to camelCase

Walk margin-top. When you see -, push nothing and set a flag; push the next character in uppercase and clear the flag. The same parts array works, with a flag instead of a look at the previous character.

Escaping text for HTML

To show user text safely as HTML, walk the characters and push &lt; for <, &gt; for >, &amp; for &, and the character itself otherwise. One character can become several, and the array keeps that simple.

Joining with a separator

When the pieces are words, push the words and call parts.join(" ") or parts.join(", "). join only puts the separator between pieces, so there's no extra separator to trim at the end.

Using += instead

result += piece in a loop is also linear in modern JavaScript engines, which keep the pieces as a tree and copy them into one string only when it's needed. Keep parts when you need to change a piece later, reverse the order, or join with a separator.

In an interview

Spot it, explain it, answer follow-ups
  • Spot it whenever the output is the input with local changes: change case, escape characters, compress, mask, or insert separators. If each piece of the output depends only on nearby input, one pass with an array of pieces fits.
  • Say out loud that JavaScript strings can't be changed, so you'll build a new one, and that pushing pieces then joining once keeps the work linear.
  • Test by hand: an empty string, a capital first letter, and two capitals in a row. Mention what you'd do for acronyms like UI if the interviewer cares.
  • A common follow-up is "isn't += slow?". In modern JavaScript engines it's usually fine, because they join pieces lazily. In Java or C# you'd use a StringBuilder, which is the same idea as parts.

Where frontend code uses it

The same idea in real UI code
  • React turns style object keys like backgroundColor into CSS property names like background-color when it renders styles on the server.
  • Building a className from conditions, such as ["btn", isActive && "btn-active"].filter(Boolean).join(" "), is this pattern; small libraries like clsx do the same.
  • Turning a blog post title into a URL slug, or escaping < and & before inserting user text into HTML, walks the text and builds a new string.

Related algorithms