JavaScript 문자열 입문: 기본 개념부터 비교 연산자 활용까지

JavaScript에서 문자열(string)은 다른 많은 프로그래밍 언어와 마찬가지로 텍스트 형태의 데이터를 담는 데이터 타입입니다. 웹 애플리케이션에서 문자열은 흔히 사용자가 폼(form)에 입력한 값을 저장하는 데 활용됩니다. 예를 들어 검색 폼을 생각해 보면, 사용자가 입력한 검색어가 바로 문자열로 저장되는 셈입니다.

사용자가 검색 폼에 입력값을 제출하면, 제출된 문자열에 대해 다양한 비교 연산이 수행됩니다. 이 과정을 통해 일치하는 항목을 찾아 결과를 사용자에게 되돌려주는 것입니다. 여기서 사용되는 비교 연산은 '=', '==', '===', '<', '>' 등의 JavaScript 연산자입니다. 이 연산자들은 문자열이 담고 있는 값을 서로 비교한 뒤 true 또는 false를 반환합니다.

이 글에서는 특히 문자열에 사용되는 동등성(equality) 연산자에 초점을 맞춰 자세히 살펴보겠습니다.

JavaScript 문자열이란?

문자열은 JavaScript의 기본(네이티브) 데이터 타입 중 하나로, 텍스트로 표현되는 값을 저장하며 몇 가지 방법으로 생성할 수 있습니다. 첫 번째 방식은 문자열 원시값(string primitive)이라고 부르며, 문자열 리터럴을 변수에 저장하는 형태입니다.

const stringPrim1 = 'Hello World!'
const stringPrim2 = "Hello World!"
const stringPrim3 = `Hello World!`

문자열 리터럴은 작은따옴표(' '), 큰따옴표(" "), 백틱(` `)으로 감쌀 수 있습니다. 단, JavaScript에서 문자열 보간(interpolation)은 오직 백틱으로만 가능하다는 점을 기억하세요. 문자열 보간이란 문자열 안에 표현식을 삽입하는 기능을 말합니다.

const name = "John"
console.log(`Hello World! My name is ${name}`)

// 출력: "Hello World! My name is John"

위 예제에서는 변수 name에 값이 "John"인 문자열이 저장되어 있습니다. 백틱을 사용하면 문자열 보간 문법을 활용할 수 있어, name 변수의 값을 추상적인 방식으로 참조할 수 있습니다. 이것이 JavaScript에서 문자열 보간을 구현하는 한 가지 방법이며, 그 외에도 다양한 방법이 존재합니다.

JavaScript 문자열에 비교 연산자 적용하기

검색 폼이 제대로 작동하려면 문자열의 대소문자 구분을 무시해야 합니다. 사용자가 입력한 값이 데이터베이스에 저장된 값과 정확히 일치해야만 한다면, 사용자 입장에서 매우 불편할 것입니다. JavaScript는 이런 문제를 해결할 수 있도록 toUpperCase()와 toLowerCase() 메서드를 제공합니다.

동영상 웹 앱에서 귀여운 아기 고양이 영상을 검색한다고 가정해 보겠습니다.

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput == searchResult)
// 출력: false

이처럼 대소문자를 그대로 둔 채 비교하면 아무런 결과도 찾지 못합니다. 인터넷에 고양이 영상이 가득하다는 사실을 우리는 잘 알고 있죠. 그러니 대소문자 구분을 무시하고, 사용자가 실제로 찾으려던 결과를 반환하도록 코드를 수정해야 합니다.

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput.toUpperCase() === searchResult.toUpperCase())
// 출력: true

이제 입력된 두 문자열을 모두 대문자로 변환했기 때문에 정확한 검색 결과를 반환할 수 있습니다. 물론 두 문자열을 모두 소문자로 변환해도 동일한 결과를 얻을 수 있습니다.

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput.toLowerCase() === searchResult.toLowerCase())
// 출력: true

이 예제는 검색 폼이 어떤 비교 논리로 작성될 수 있는지를 보여주기 위한 것입니다. JavaScript 문자열에는 이 외에도 다양한 메서드와 연산자가 제공되므로, 필요에 따라 공식 문서를 참고해 활용 범위를 넓혀보세요.

마무리

지금까지 JavaScript 문자열 입문 시간으로, 문자열이 무엇인지 그리고 문자열을 다루는 몇 가지 방법을 간단히 살펴봤습니다. JavaScript에서 문자열은 방대한 주제입니다. 문자열이 무엇인지 이해하는 것 자체는 비교적 간단하지만, 문자열과 함께 제공되는 메서드는 그 종류가 매우 다양합니다.

이 글의 개념을 확실히 이해했다면, 이후 심화 학습 가이드를 통해 더 많은 문자열 메서드를 탐색하는 것도 훨씬 수월하게 느껴질 것입니다. 동적이고 견고한 웹 애플리케이션을 만들기 위해 JavaScript 문자열은 반드시 이해해야 할 필수 데이터 타입입니다.