How to Uppercase the First Letter of a String in JavaScript

By the end of this page, you will understand how to capitalize the first character of a string in JavaScript, why charAt(), bracket access, slice(), and toUpperCase() are commonly used together, and how to avoid changing the rest of the string accidentally.

In JavaScript, strings are immutable, which means you cannot directly change a single character inside an existing string. Instead, you create a new string from pieces.

To uppercase the first character, the common approach is:

1. Get the first character.
2. Convert that character to uppercase.
3. Append the rest of the original string unchanged.

A typical solution looks like this:

function capitalizeFirst(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

This works because:

• str.charAt(0) gets the first character.
• toUpperCase() converts that one character to uppercase.
• str.slice(1) returns the rest of the string starting from index 1.

Why this matters in real programming:

• Formatting names and labels
• Displaying user-friendly text in interfaces
• Normalizing headings or titles
• Cleaning data before display

An important detail is that toUpperCase() only affects the selected character. It does not change the rest of the string unless you explicitly do that.

Also, if the first character is not a letter, calling toUpperCase() on it usually leaves it unchanged. For example:

"/".toUpperCase(); // "/"

So for many cases, you do not need extra logic to check whether the first character is a letter.

Think of a string like a train made of connected cars.

• The first car is the first character.
• The rest of the train is everything after it.

You cannot repaint one car while the train is moving, because strings cannot be edited in place. Instead, you build a new train:

• Take the first car
• Paint it uppercase
• Attach all the remaining cars exactly as they were

If the first car is / or 1, repainting it does nothing, so the result stays the same.

The core pattern is:

str.charAt(0).toUpperCase() + str.slice(1)

Basic example

function capitalizeFirst(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

console.log(capitalizeFirst("this is a test"));
// "This is a test"

console.log(capitalizeFirst("the Eiffel Tower"));
// "The Eiffel Tower"

console.log(capitalizeFirst("/index.html"));
// "/index.html"

Why it works

• charAt(0) returns the first character.
• toUpperCase() converts only that character.
• slice(1) keeps everything else unchanged.

Using bracket notation

You can also use string indexing:

function capitalizeFirst(str) {
  return str[0].toUpperCase() + str.slice(1);
}

This is shorter, but charAt(0) can feel safer for beginners because it always returns a string.

Handling empty strings

An empty string has no first character, so it is good practice to guard against that:

function capitalizeFirst(str) {
  if (str.length === 0) {
    return str;
  }

  return str.charAt(0).toUpperCase() + str.slice(1);
}

Important example: do not change the rest

function capitalizeFirst(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

console.log(capitalizeFirst("the Eiffel Tower"));
// "The Eiffel Tower"

Notice that Eiffel stays exactly as it was. That is different from title-casing or lowercasing the rest of the string.

Consider this code:

function capitalizeFirst(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

const result = capitalizeFirst("hello world");
console.log(result);

Step by step:

1. capitalizeFirst("hello world") is called.
2. Inside the function, str is "hello world".
3. str.charAt(0) returns "h".
4. "h".toUpperCase() returns "H".
5. str.slice(1) returns "ello world".
6. JavaScript joins the two parts:

"H" + "ello world"

1. The final result is:

"Hello world"

Another example with a non-letter:

capitalizeFirst("/index.html")

Step by step:

1. str.charAt(0) returns "/".
2. "/".toUpperCase() returns "/".
3. str.slice(1) returns "index.html".
4. Combined result:

"/" + "index.html" // "/index.html"

So the string remains unchanged, which matches the requirement.

Here are common places where this pattern appears:

UI labels

You may receive lowercase text from an API and want to display it more cleanly:

const status = "pending";
const label = status.charAt(0).toUpperCase() + status.slice(1);
// "Pending"

Form input cleanup

If a user enters a city name in lowercase, you may want to improve display formatting:

const city = "london";
const displayCity = city.charAt(0).toUpperCase() + city.slice(1);
// "London"

Error and notification messages

const message = "invalid password";
const formatted = message.charAt(0).toUpperCase() + message.slice(1);
// "Invalid password"

Data display without damaging original capitalization

This is useful when only the first character should be changed and the rest must stay untouched:

const place = "the Eiffel Tower";
const formatted = place.charAt(0).toUpperCase() + place.slice(1);
// "The Eiffel Tower"

In real projects, developers often wrap this logic in a small reusable function instead of repeating it everywhere.

Reusable utility function

function capitalizeFirst(str) {
  if (!str) return str;
  return str.charAt(0).toUpperCase() + str.slice(1);
}

This uses a guard clause:

• If str is empty, return it immediately.
• Otherwise, build the capitalized version.

Common usage patterns

Formatting API data before display

const categories = ["books", "music", "games"];
const labels = categories.map(capitalizeFirst);

console.log(labels);
// ["Books", "Music", "Games"]

Validation and fallback values

In real apps, data may be missing:

function formatLabel(str) {
  if (typeof str !== "string" || str.length === 0) {
    return "";
  }

  return str.charAt(0).toUpperCase() + str.slice(1);
}

Keeping formatting logic centralized

Instead of doing this in many files:

name.charAt(0).toUpperCase() + name.slice(1)

teams often create a helper like:

export function capitalizeFirst(str) {
  if (!str) return str;
  return str.charAt(0).toUpperCase() + str.slice(1);
}

This makes code easier to read, test, and maintain.

1. Lowercasing the rest of the string by accident

If you do this:

function capitalizeFirst(str) {
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

Then this input:

"the Eiffel Tower"

becomes:

"The eiffel tower"

That changes more than just the first character.

Fix

Leave the rest unchanged:

function capitalizeFirst(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

2. Forgetting about empty strings

Broken example:

function capitalizeFirst(str) {
  return str[0].toUpperCase() + str.slice(1);
}

If str is "", then str[0] is undefined, and calling toUpperCase() causes an error.

Fix

function capitalizeFirst(str) {
  if (str.length === 0) return str;
  return str.charAt(0).toUpperCase() + str.slice(1);
}

3. Thinking strings can be changed directly

Broken idea:

let str = "hello";
str[0] = "H";
console.log(str); // still "hello"

Strings are immutable in JavaScript.

Fix

Create a new string:

let str = "hello";
str = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str); // "Hello"

4. Using the wrong substring method without understanding it

Beginners sometimes mix up slice(), substring(), and substr().

For this task, slice(1) is simple and clear.

5. Not checking the input type

If a function may receive non-strings, this can fail:

capitalizeFirst(null);
capitalizeFirst(123);

Safer version

function capitalizeFirst(str) {
  if (typeof str !== "string" || str.length === 0) {
    return "";
  }

  return str.charAt(0).toUpperCase() + str.slice(1);
}

charAt(0) vs str[0]

slice() vs substring()

For this specific task, charAt(0).toUpperCase() + slice(1) is one of the clearest solutions.

function capitalizeFirst(str) {
  if (str.length === 0) return str;
  return str.charAt(0).toUpperCase() + str.slice(1);
}

Quick rules

• Strings are immutable in JavaScript.
• charAt(0) gets the first character.
• toUpperCase() changes only that character.
• slice(1) keeps the rest unchanged.
• Non-letter first characters usually stay the same.
• Guard against empty strings.

Common pattern

str.charAt(0).toUpperCase() + str.slice(1)

Examples

capitalizeFirst("hello");          // "Hello"
capitalizeFirst("the Eiffel Tower"); // "The Eiffel Tower"
capitalizeFirst("/index.html");    // "/index.html"
capitalizeFirst("");               // ""

Safer version for unknown input

function capitalizeFirst(str) {
  if (typeof str !== "string" || str.length === 0) {
    return "";
  }
  return str.charAt(0).toUpperCase() + str.slice(1);
}

How do I capitalize only the first letter in JavaScript?

Use:

str.charAt(0).toUpperCase() + str.slice(1)

This changes only the first character and leaves the rest unchanged.

What happens if the first character is not a letter?

Usually nothing changes. For example:

"/index.html".charAt(0).toUpperCase(); // "/"

How do I handle an empty string?

Check for it first:

if (str.length === 0) return str;

Why not use toUpperCase() on the whole string?

Because that would uppercase every character:

"hello world".toUpperCase(); // "HELLO WORLD"

That is different from capitalizing only the first character.

Should I use charAt(0) or str[0]?

Both work, but charAt(0) is often safer for beginners because it returns an empty string for empty input.

Does this method modify the original string?

No. Strings are immutable, so it returns a new string.

Can I use replace() instead?

Yes, for example:

str.replace(/^[a-z]/, c => c.toUpperCase())

But this is less straightforward for beginners than charAt() and slice().

• JavaScript strings — This topic depends on understanding how strings work.
• String immutability — You cannot edit characters in place, so you build a new string.
• toUpperCase() — This method performs the actual uppercase conversion.
• slice() — This is used to keep the rest of the string unchanged.
• charAt() — A common way to safely access the first character.
• String indexing — An alternative to charAt() using str[0].
• Input validation — Useful when your function may receive empty or invalid values.
• Regular expressions — An alternative approach for matching and changing the first letter.