String.prototype .toUpperCase() vs String. prototype.toLocaleUpperCase()
Tags: javascript, programming, tutorial
Published: 2021-10-16 23:58:05

## Understanding String.toUpperCase()
The string.toUpperCase() method is used to convert a string into upper case letters. So, if we pass the string `hello, my name is john doe` through the string.toUpperCase method, it should return `HELLO, MY NAME IS JOHN DOE` as the output.

**Note:** The method simply returns the string in upper case letters but doesn't change the original string. Our example shall make this clear.
### Syntax
```
string.toUpperCase()
```
### Example
Let's check with our string `hello my name is john doe` how this works.
```
let sentence = 'hello my name is john doe'; 
```
> we assigned our string to a variable called **sentence**

```
let upperCase = sentence.toUpperCase();
```
> we declared a new variable **upperCase** and assigned the return value of the method to it.

Now let's print this to the console and see the result.
```
console.log(upperCase);
```
> The output comes as expected, ```HELLO MY NAME IS JOHN DOE```

We can simply output the result without the need for declaring a new variable too, check the code below in case you need to simply output a given string into `UPPERCASE` letters.
```
let sentence = "hello my name is john doe";
console.log(sentence.toUpperCase());
```
> The output is still the same, ```HELLO MY NAME IS JOHN DOE```

Let's try to see if this method affects our original string variable.
```
let sentence = "hello my name is john doe";
let upperCase = sentence.toUpperCase();
console.log(upperCase, sentence);
```
> The output comes to ```HELLO MY NAME IS JOHN DOE hello my name is john doe```

As is clear from the above example, this method simply returns a value but doesn't alter the string in question.

### Exceptions for String.toUpperCase() method
This method shall work on all `strings` but what if the input is not `string`. If we try this method with, let's say a `number` or a `boolean` value like ***true*** or if we simply used an `undefined` variable, it shall give a ***type error***.

Clearly, the uses for this method are countless. If we are dealing with strings, we could use this method and get our inputs converted into `UPPERCASE` letters with ease. This method can work in conjunction with a `for` loop and we can even convert the string elements of an array into UPPERCASE letters. 

Check the code below and try it in your browsers.
```
const sampleArray = ['newyork', 'ottawa', 'toronto', 'washington dc']
sampleArray.forEach(element => console.log(element.toUpperCase()));
```

## Understanding String.toLocaleUpperCase()
The String.toLocaleUpperCase() method returns a string input after converting it to either a default or a specified locale.

Let's first try to understand what ***Locale*** means. 

The [Merriam-Webster](https://www.merriam-webster.com/dictionary/locale) dictionary defines locale as '*a place or locality especially when viewed in relation to a particular event or characteristic*'. So, in Javascript that would translate to the locale/locality of the host server by default or any other user-defined locale (like "en-US", "en-CA"). 

### Syntax
```
String.toLocaleUpperCase()
```

### Examples
Let's look at a few examples to see how String.toLocaleUpperCase() method works.
```
let language = 'turkish';//#1
console.log(language.toLocaleUpperCase());//#2
console.log(language.toLocaleUpperCase('en-CA'));//#3
console.log(language.toLocaleUpperCase('TR'));//#4
```
Before we look at the output of this code, let's try to understand what it does. 
***#1*** assigns the `string` value '*turkish*' to the variable ***language***.
***#2*** prints out the `uppercase` version of '*turkish*' in the locale of the host server(let's assume we are working in the US, so the locale is "en-US" or American English).
***#3*** prints out the `uppercase` version of '*turkish*' in the user-specified Canadian English locale.
***#4*** prints out the `uppercase` version of '*turkish*' in the user-specified Turkish locale.  

> The output shall look like this```TURKISH TURKISH TURKİSH ```
Notice something different with the output of ***#4***? The dot on the ***I*** is due to the fact that we selected to convert the string into the Turkish locale and the capital I in Turkish is written as `İ`.

We can also pass an array of locales through this method and it shall use the [best available locale](https://tc39.es/ecma402/#sec-bestavailablelocale).

### Exceptions for String.toLocaleUpperCase() method
This method just like the String.toUpperCase() method shall work on all `strings` but if the input is `number`, `boolean` or an `undefined` variable, it shall give a ***type error***.

##String.toUpperCase() vs String.toLocaleUpperCase()

Now that we saw the usage of both the String.toUpperCase() as well as the String.toLocaleUpperCase() methods, let's look at the differences in between them.
The String.toUpperCase() is not locale specific, so it does not expect any input for the locale. However, even though by default the String.toLocaleUpperCase() method doesn't demand a value to be passed, it is still working and converting letters as per a locale.

So, practically, for a user using a locale that has all the UPPERCASE alphabets looking like the english alphabets, both these methods shall give the same output and the user can use these methods interchangeably.

However, if we are working on a language like Turkish or any other language that has characters looking like 'GESÄSS', we will need to use the String.toLocaleUpperCase() method.

For detailed information on these methods, please refer the MDN Web Docs for [String.prototype.toUpperCase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) and [String.prototype.toLocaleUpperCase()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase) methods.