[javascript]문자열을 대문자 또는 소문자로 변환하는 toUpperCase, toLowerCase

문자열을 다룰 때 유용하게 사용할 수 있는 두 가지 강력한 메서드, toUpperCase()와 toLowerCase()에 대해 알아보려고 합니다. 이 두 메서드는 문자열을 각각 대문자 또는 소문자로 변환해주며, 문자열 처리에 있어서 매우 흔하게 사용됩니다.

toUpperCase()

toUpperCase() 메서드는 호출된 문자열의 모든 알파벳을 대문자로 변환한 새로운 문자열을 반환합니다. 이 메서드는 원본 문자열에는 영향을 주지 않으며, 새로운 문자열을 결과로 제공합니다.

const originalString = "Hello World!";
const upperString = originalString.toUpperCase();

console.log(upperString); // "HELLO WORLD!"

toUpperCase() 메서드는 originalString 변수에 저장된 문자열의 모든 알파벳을 대문자로 변환하여 upperString 변수에 저장합니다.

toLowerCase()

toLowerCase() 메서드는 호출된 문자열의 모든 알파벳을 소문자로 변환한 새로운 문자열을 반환합니다. 마찬가지로, 이 메서드도 원본 문자열을 변경하지 않습니다.

const originalString = "Hello World!";
const lowerString = originalString.toLowerCase();

console.log(lowerString); // "hello world!"

활용 예시

사용자 입력 정규화

웹 애플리케이션을 개발할 때 사용자로부터 입력받은 데이터를 처리하거나 검증해야 하는 경우가 많습니다. 이때, 대소문자를 구분하지 않고 처리해야 하는 경우가 있습니다. 예를 들어, 사용자가 이메일 주소를 입력할 때 대문자 혹은 소문자로 혼용해서 입력하는 경우가 있는데, 이를 통일된 형식으로 처리하기 위해 toLowerCase()를 사용할 수 있습니다.

const email = "UserEmail@Example.com";
const normalizedEmail = email.toLowerCase();

console.log(normalizedEmail); // "useremail@example.com"

검색 기능 구현 시

검색 기능을 구현할 때 사용자가 입력한 검색어와 실제 데이터를 대소문자 구분 없이 비교해야 할 때 toLowerCase() 또는 toUpperCase()를 활용할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

const searchKeyword = "javascript";
const data = ["JavaScript", "HTML", "CSS"];

const filteredData = data.filter((item) => item.toLowerCase().includes(searchKeyword.toLowerCase()));

console.log(filteredData); // ["JavaScript"]

toUpperCase()와 toLowerCase() 메서드는 JavaScript에서 문자열을 처리할 때 매우 유용한 도구입니다. 사용자의 입력을 정규화하거나, 데이터를 대소문자 구분 없이 비교하는 등 다양한 상황에서 활용할 수 있습니다.

관련문서

MDN web docs : String.prototype.toUpperCase(), String.prototype.toLocaleUpperCase()