Altcademy - a Forbes magazine logo Best Coding Bootcamp 2023

How to uppercase in JavaScript

Understanding Case in Programming

Before we delve into the world of JavaScript and learn how to change text to uppercase, it's important to understand why we need to do this in the first place. When you're learning programming, one of the most essential aspects to grasp is the importance of case sensitivity. Case sensitivity in programming is similar to the way we use capital and small letters in English. For example, "Dog" and "dog" are considered as two different words in programming. This concept is important because it affects how we compare strings (text data) in code.

The JavaScript toUpperCase() Method

Now, let's move on to JavaScript, a popular programming language used to make websites interactive. JavaScript offers a built-in method called toUpperCase() that we can use to change text to uppercase. This is akin to turning a soft whisper into a shout in a conversation, ensuring that everyone can hear it loud and clear.

Here's how it looks:

var message = "hello world";
var upperMessage = message.toUpperCase();
console.log(upperMessage);  // Outputs: HELLO WORLD

In this code, we first declare a variable message and assign it the string "hello world". Next, we use the toUpperCase() method on our message variable, and store the result in a new variable upperMessage. When we log upperMessage to the console, it outputs "HELLO WORLD". It's as if our "hello world" whisper has now become a "HELLO WORLD" shout.

Breaking Down the toUpperCase() Method

The toUpperCase() method is an example of what we call a "String method" in JavaScript. You can imagine a String method as an in-built tool that JavaScript provides to work with text (strings).

Let's break down how the toUpperCase() method works:

toUpperCase(): This is the method we call. It's like giving a command. In our case, the command is to change all the letters to uppercase.

(): These parentheses are where we could put in any parameters if the method required them. Parameters are like additional instructions we can give to the method. However, toUpperCase() doesn't need any parameters, so we leave these parentheses empty.

.: The dot before toUpperCase() is like a bridge that connects the string and the method. It's how we tell JavaScript: "Hey, apply this method to this piece of text!"

More Examples of toUpperCase()

Let's look at more examples of using toUpperCase() to get a better understanding:

var greeting = "Good Morning";
console.log(greeting.toUpperCase()); // Outputs: GOOD MORNING

var announcement = "This is a public service announcement";
console.log(announcement.toUpperCase()); // Outputs: THIS IS A PUBLIC SERVICE ANNOUNCEMENT

In the first example, we turn the greeting "Good Morning" into "GOOD MORNING". In the second example, we're making sure our public service announcement is loud and clear by turning "This is a public service announcement" into "THIS IS A PUBLIC SERVICE ANNOUNCEMENT".

Practical Application of toUpperCase()

You might be wondering, "When would I need to change text to uppercase in real life coding?" Well, one common use case is when you want to compare strings without caring about case. Remember, "Dog" and "dog" are considered different in JavaScript. So, if you want to check if two strings are the same irrespective of their case, you can turn both to uppercase before comparing.

Here's an example:

var input = "Yes";
var standard = "YES";

if (input.toUpperCase() == standard) {
    console.log("The input matches the standard.");
} else {
    console.log("The input does not match the standard.");
}

In this example, even though the user input is "Yes" (with a capital 'Y' and small 'e' and 's') and our standard is "YES" (all caps), the condition in our if statement still evaluates to true because we convert the user input to uppercase before comparing.

Reflecting on toUpperCase()

Just as a librarian might use a loudspeaker to ensure everyone hears an important announcement, JavaScript uses the toUpperCase() method to ensure no letter in a string goes unnoticed. While it might seem like a small detail, understanding how to manipulate and compare text is a vital skill in programming.

Conclusion

We've journeyed through the intricate world of JavaScript's toUpperCase() method, learning to turn whispers into shouts by converting text to uppercase. Just like the way a skillful storyteller uses different tones and volumes to keep their audience engaged, you, as a programmer, can now use toUpperCase() to ensure your code captures the nuances of your intent. Remember, every line of code tells a story, and with toUpperCase(), you've added a powerful tool to your storytelling arsenal. Happy Coding!