Javascript toUppercase Function: How it works and why you should use it

Javascript is very powerful and very robust. As a result, there is always more to learn. In this post, we will discuss the JavaScript function called toUppercase, well look at how it works and how to use it. You will also see some examples starting with some beginner-level and ending with some advanced code snippets.

Let’s start by discussing what the toUppercase function is and how it works!

What is the Javascript toUppercase function?

The `toUpperCase()` function in JavaScript is a method that allows you to convert a JavaScript string to uppercase. It is a built-in function that you can use to manipulate strings in your JavaScript programs, as seen below.

Here’s an introduction to how it is used.

Syntax:

 
string.toUpperCase()

Working with the `toUpperCase()` function:

1. Required input: The `toUpperCase()` function does not require any input parameters. It operates on the string it is called on.

2. Return value: It returns a new string with all alphabetic characters converted to uppercase. The original string remains unchanged.

3. Usage: You can apply the `toUpperCase()` function on any string variable or directly on string literals.

Example usage:

 
javascript let str = “hello world!”;
let upperCaseStr = str.toUpperCase();
console.log(upperCaseStr);
// Output:
“HELLO WORLD!”
console.log(“goodbye world!”.toUpperCase());
// Output:
“GOODBYE WORLD!”

Javascript toUppercase Function Examples

Additionally, you can also use the `toUpperCase()` function directly on the string literal “goodbye world!” without assigning it to a variable. It will still convert and display the string in uppercase.

By utilizing the `toUpperCase()` function, you can easily convert strings to uppercase in your JavaScript programs, helping with tasks such as standardizing user input or manipulating text output.

Beginner-level examples of the toUppercase function

Starting out with the toUppercase function is easy. Let’s look at a commonly referenced hello world example!

Beginner Explanation:

The `toUpperCase()` function in JavaScript allows you to convert a string to uppercase letters. Think of it as a magical tool that can transform your text into all caps. This JavaScript function is especially useful when you want to make your text more prominent or follow specific formatting rules.

Beginner Example:

 
javascript let message = “hello”;
let uppercaseMessage = message.toUpperCase(); console.log(uppercaseMessage);
// Output:
“HELLO”

In this example, we create a string variable called `message` with the value “hello”. By applying the `toUpperCase()` function to `message`, we convert it to uppercase and store the result in `uppercaseMessage`. Finally, when we log `uppercaseMessage` to the console, we see the output as “HELLO”. Check out the video below to see an example of how to capitalize the first letter of a string.

Intermediate-level examples of the toUppercase function

Intermediate Explanation:

The `toUpperCase()` function not only converts lowercase letters to uppercase but also ignores non-alphabetic characters like numbers, symbols, and spaces. This means you can use this function to transform only the alphabetic characters in your string, leaving the rest untouched.

Intermediate Example:

 
javascript let phrase = “oh, what a beautiful day!”;
let uppercasePhrase = phrase.toUpperCase();
console.log(uppercasePhrase);
// Output:
“OH, WHAT A BEAUTIFUL DAY!”

In this example, we have a string variable named `phrase` with the value “oh, what a beautiful day!”. By using the `toUpperCase()` function on `phrase`, the alphabetic characters (“oh what a beautiful day”) are transformed to uppercase, while non-alphabetic characters like commas and spaces remain unchanged.

Advanced-level examples of the toUppercase function

Advanced Explanation:

The `toUpperCase()` function can be especially beneficial when comparing strings in a case-insensitive manner. By converting both strings to uppercase before performing the comparison, you can eliminate any discrepancies caused by varying letter cases.

Advanced Example:

 
javascript function checkSecretWord(guess) {
let secretWord = “JavaScript”;
if (guess.toUpperCase() === secretWord.toUpperCase()) {
console.log(“Correct guess!”);
} else {
console.log(“Wrong guess, try again.”);
}
}
checkSecretWord(“javascript”);
// Output:
Correct guess!
checkSecretWord(“JavaScript”);
// Output:
Correct guess!
checkSecretWord(“JS”);
// Output:
Wrong guess, try again.

In this example, we define a function called `checkSecretWord` that takes a `guess` parameter. Inside the function, we have a `secretWord` variable set to “JavaScript”. By applying `toUpperCase()` to both `guess` and `secretWord`, we can compare them without considering case sensitivity. As a result, “javascript” and “JavaScript” are considered correct guesses, while “JS” is considered a wrong guess.

The toUppercase function can also be used in unison with other Javascript methods and functions, such as the Javascript split method. It can also be used inside loops and functions as well. Take a look at the image below to see an example of how this can be done.

Image Source

The `toUpperCase()` function is a versatile tool that beginners, intermediate users, and advanced users can leverage in various scenarios. Whether you want to display text in uppercase, manipulate strings, or compare them in a case-insensitive manner, `toUpperCase()` is a valuable method to have in your JavaScript toolkit.

Moving forward with Javascript toUppercase

As you use the toUppercase function more and more, you will gain a better understanding of how it works. You will also start to grow your understanding of different ways it can be used to improve your programming code. As is always the case with programming languages, practice is the best teacher.

However, it should not be forgotten that there are a number of resources that you can tap into if you get stuck, are looking for advice, or just need a little inspiration for your code.