How to make the first letter in a string into a capital letter in JavaScript?
Tags: javascript
Published: 2021-11-30 00:00:00

---
  title: How to make the first letter in a string into a capital letter in JavaScript?
  published: true
  tags: JavaScript
  date: Tue Nov 30 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-first-letter-capital-letter-string-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-1830535e9cc61982e5ac1c8a5003f7f9.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-first-letter-capital-letter-string-javascript)
  
To make the first letter of a string into a capital letter in JavaScript, the basic idea is to get the first character in the string and then make it a capital letter using the `toUpperCase()` string method and then by appending the remaining string except for the first letter.

### TL;DR

```js
// a simple string with all letters in lowercase
const str = "hello world!";

// 1. make the first letter a capital letter
//    using the `toUpperCase()` string method
// 2. appending the remaining string except
//    first letter using the `slice()` string method
const firstLetterCapitalized = str[0].toUpperCase() + str.slice(1);

// log the output
console.log(firstLetterCapitalized); // "Hello world!"
```

- **[Capitalize String utility method code &rarr;](#capitalize-string-utility-method)**

For example, let's say we have a string called `hello world!` where all the characters are in lowercase like this,

```js
// a simple string with all letters in lowercase
const str = "hello world!";
```

Now to capitalize the first letter of the string, let's take the first character using the `0` index position in the `str` variable which gives us the first letter in the string.

It can be done like this,

```js
// a simple string with all letters in lowercase
const str = "hello world!";

// get the first letter
const firstLetterCapitalized = str[0];
```

To capitalize the first letter we can use the `toUpperCase()` string method on the first letter of the string like this,

```js
// a simple string with all letters in lowercase
const str = "hello world!";

// 1. make the first letter a capital letter
//    using the `toUpperCase()` string method
const firstLetterCapitalized = str[0].toUpperCase();
```

We have made the first letter in the string a capital letter. Now we have to append the remaining string to the first capital letter.

First, To get the remaining string we can use the `slice()` string method and pass the number `1` as an argument to the method to indicate that we need to start cutting the string from the `1st` index till the end of the string.

It can be done like this,

```js
// a simple string with all letters in lowercase
const str = "hello world!";

// 1. make the first letter a capital letter
//    using the `toUpperCase()` string method
// 2. appending the remaining string except
//    first letter using the `slice()` string method
const firstLetterCapitalized = str[0].toUpperCase() + str.slice(1);
```

Note that we have used the `+` (addition) operator to append the first letter and the remaining string together.

Now if we log the output of the `firstLetterCapitalized` variable to the console, we can see that the first letter of the string is capitalized.

It may look like this,

```js
// a simple string with all letters in lowercase
const str = "hello world!";

// 1. make the first letter a capital letter
//    using the `toUpperCase()` string method
// 2. appending the remaining string except
//    first letter using the `slice()` string method
const firstLetterCapitalized = str[0].toUpperCase() + str.slice(1);

// log the output
console.log(firstLetterCapitalized); // "Hello world!"
```

See the above code live in [JSBin](https://jsbin.com/kivozozapa/2/edit?js,console)

If you need this as a utility function, you can use this snippet of code,

<a name="capitalize-string-utility-method"></a>

```js
/*
    Capitalize the first letter in the string
*/
function capitalizeFirstLetter(str) {
  // check if string is empty
  if (!str) {
    return str;
  }
  return str[0].toUpperCase() + str.slice(1);
}
```

The above utility function also includes a check to see if the string is empty to avoid errors.

That's all 😃!

### Feel free to share if you found this useful 😃.

---