Start learning free

LESSON 69 OF 344 · STRINGS I

Uppercase and Lowercase in JavaScript: toUpperCase and toLowerCase

Lesson Read the full explanation

In JavaScript, strings have built-in methods to change their case:

s.toUpperCase()   // converts all characters to uppercase
s.toLowerCase()   // converts all characters to lowercase

Here are some examples:

let word = "Hello World";
console.log(word.toUpperCase());  // "HELLO WORLD"
console.log(word.toLowerCase());  // "hello world"

let name = "ALICE";
console.log(name.toLowerCase());  // "alice"

These methods return a new string — the original is not modified.


Assignment
Follow the Coding Tutorial and convert word to both uppercase and lowercase!

Hint
Use word.toUpperCase() and word.toLowerCase().

STEP 1 OF 2
    Ctrl + Enter to check

    JAVASCRIPT · STRINGS I

    String Upper Lower in JavaScript, explained

    Changing the case of a string

    Every JavaScript string has two methods for changing letter case. They take no arguments, and you call them with parentheses:

    s.toUpperCase()   // all letters become uppercase
s.toLowerCase()   // all letters become lowercase

    let word = "Hello World";
console.log(word.toUpperCase());  // HELLO WORLD
console.log(word.toLowerCase());  // hello world

let name = "ALICE";
console.log(name.toLowerCase());  // alice

    Characters that have no case, such as digits, spaces and punctuation, pass through unchanged. "abc123!".toUpperCase() is "ABC123!".

    The original string is never modified

    Strings in JavaScript are immutable, which means a string's characters can't be changed after it is created. Both methods therefore return a new string. This is easy to check:

    let word = "Hello World";
word.toUpperCase();
console.log(word);   // Hello World

    The call produced "HELLO WORLD", but the result wasn't stored anywhere, so it vanished. If you want to keep it, assign it to a variable. Trying to change a character directly doesn't work either: after let w = "abc"; w[0] = "X"; the string w is still "abc".

    Why change case at all

    The most useful reason is comparing text without caring about capital letters. Computers treat "Yes" and "yes" as different strings, because the characters differ. If you convert both sides to the same case first, the comparison becomes forgiving:

    console.log("Yes" === "yes");                         // false
console.log("Yes".toLowerCase() === "yes");           // true

    Other uses are formatting output, such as showing a code in capitals, or normalizing user input before you store it or search in it. Normalizing means turning the input into one standard form, and lowercase is the usual choice. A search like text.toLowerCase().indexOf("hello") finds "Hello", "HELLO" and "hello" alike.

    You can also combine the methods with slicing to capitalize only the first letter of a word:

    let w = "hello";
console.log(w[0].toUpperCase() + w.slice(1));   // Hello

    Language details

    The case rules follow Unicode, not just English letters. Some conversions even change the length of the string. For example, the German letter "ß" becomes "SS" in uppercase, which is two characters. For everyday English text you will never notice, but it explains why these methods are the right tool and a hand-written letter-by-letter conversion is not.

    Chaining and checking

    Since each method returns a string, you can call another method on the result straight away. " Yes ".trim().toLowerCase() first removes the outer spaces and then lowercases what is left, giving "yes". This style is common for cleaning input before using it.

    The methods also work on an empty string, which simply comes back empty, so you don't need a special check for it. If a value might be missing, such as undefined, test for that first, because calling a string method on undefined stops the program with an error.

    The exercise, step by step

    The starter code gives one variable:

    let word = "Hello World";

    The task is to make two new strings, one in each case.

    1. Make the uppercase version. Declare upper with let and assign it word.toUpperCase(). It holds "HELLO WORLD".
    2. Make the lowercase version. Declare lower with let and assign it word.toLowerCase(). It holds "hello world".

    Both lines read from word, and neither changes it. That is why the second line still sees the original "Hello World" and not an uppercase version.

    The solution in JavaScript

    let word = "Hello World";

let upper = word.toUpperCase();
let lower = word.toLowerCase();

    Common mistakes

    • Leaving out the parentheses. word.toUpperCase without () is the method itself, not its result. You get a function value, not a string.
    • Misspelling the capital letters. The names are case sensitive: toUpperCase has a capital U and C, and touppercase is a different, nonexistent name that throws a TypeError.
    • Discarding the result. Calling a method on its own line changes nothing. Assign the result to a variable.
    • Calling it on a non-string. Numbers don't have toUpperCase. Convert first with String(value).

    Key takeaways

    • toUpperCase() and toLowerCase() return a new string with every letter changed.
    • The original string stays the same, because strings are immutable.
    • Convert both sides to one case when you compare text and want to ignore capitals.
    Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free