자바스크립트 charAt() 메소드 – 문자열에서 특정 인덱스의 문자 찾는 방법

자바스크립트 charAt() 메소드란?

자바스크립트에는 문자열 내에서 주어진 인덱스(위치)에 어떤 문자가 있는지 확인할 수 있게 해주는 String 객체 메소드가 있습니다. 바로 charAt() 메소드입니다. 이 글에서는 charAt() 메소드의 개념과 실제 사용 방법을 예제와 함께 자세히 살펴보겠습니다.

원시 타입(Primitive Type) 이해하기

charAt() 메소드를 제대로 이해하려면 먼저 자바스크립트의 원시 타입(primitive type) 개념을 짚고 넘어갈 필요가 있습니다. 원시 타입 또는 원시 값(primitive value)이란 객체가 아니며 메소드를 직접 포함하지 않는 데이터를 의미합니다. 자바스크립트의 원시 타입은 다음과 같습니다.

string (문자열)
number (숫자)
boolean (참/거짓)
bigint (큰 정수)
symbol (심볼)
undefined (정의되지 않음)

오늘은 이 중에서 문자열(string) 원시 값에 집중해 보겠습니다.

흥미로운 점은 원시 문자열 값이 대부분의 경우 String 객체와 사실상 같은 방식으로 동작한다는 것입니다. 자바스크립트는 원시 문자열에 String 객체 래퍼(wrapper)를 자동으로 감싸서 String 메소드를 사용할 수 있도록 처리해 줍니다. 따라서 일반적인 상황에서는 메소드가 없는 원시 문자열을 메소드가 있는 String 객체로 일일이 변환하는 작업을 신경 쓸 필요가 없습니다.

charAt() 메소드 문법

charAt() 메소드의 문법은 매우 간단합니다. 먼저 확인하고자 하는 문자열이 있고, 이것이 String 객체이므로 점 표기법(dot notation)을 통해 메소드에 접근하여 문자열 끝에 붙입니다. 그런 다음 메소드를 호출할 때 괄호 안에 조회하고 싶은 인덱스를 넣어주면 됩니다.

const charAtFive = new String("It is warm today.").charAt(5);

charAt() 메소드는 해당 인덱스에 위치한 문자를 반환합니다. 단, 문자열은 0부터 시작하는(zero-based) 인덱스 체계를 사용하므로, 첫 번째 문자의 인덱스는 0이며 이후 1, 2, 3 순으로 차례대로 증가한다는 점을 반드시 기억하세요.

charAt() 실전 예제

아래는 charAt() 메소드를 활용한 실제 구현 예제입니다. 문자열과 인덱스를 입력한 뒤 제출 버튼을 누르면, 요청한 인덱스에 해당하는 문자 한 글자가 화면에 표시됩니다. 물론 범위를 벗어난 인덱스를 요청하지 않았을 때만 정상적으로 결과가 반환됩니다.

<!DOCTYPE html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="to-fixed">Enter a string:</label>
     <input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
     <label for="num-digits">Enter an index:</label>
     <input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>
 
     <input type="submit" value="Submit" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = '';
     let numVal = '';
     let errorVal = '';
 
     const handleChange = e => {
       if(e.target.name === "inputVal") {
         inputVal = e.target.value;
       } else {
         if(inputVal.length - 1 < e.target.value || e.target.value < 0) {
           errorVal = "Must enter index less than length of string and greater or equal to 0"
         } else {
           errorVal = "";
           numVal = e.target.value;
         }
       }
     }
     const handleSubmit = e => {
       e.preventDefault();
       console.log(e)
       const root = document.querySelector("#root");
       if(errorVal) {
         root.innerHTML = errorVal;
       } else {
         root.innerHTML = new String(inputVal).charAt(Number(numVal));
         console.log(new String(inputVal).charAt(Number(numVal)));
       }
 
     }
     const inputValue = document.getElementById("to-fixed").value
   </script>
 </body>
</html>

마무리

charAt() 메소드는 문자열에서 특정 위치의 문자를 손쉽게 추출할 수 있는 아주 유용한 도구입니다. 인덱스가 0부터 시작한다는 점만 유의하면 초보자도 부담 없이 활용할 수 있습니다. 문자열을 다루는 다른 메소드들도 함께 익혀두면 자바스크립트 실력을 한층 더 향상시킬 수 있습니다.

자바스크립트 charAt() 메소드 – 문자열에서 특정 인덱스의 문자 찾는 방법

자바스크립트 charAt() 메소드란?

원시 타입(Primitive Type) 이해하기

charAt() 메소드 문법

charAt() 실전 예제

마무리

함께 읽으면 좋은 글