Skip to main content
X

Explore your training options in 10 minutes

JavaScript Methods: charAt() Method

Christina Kopecky - December 29, 2020


There exists a String object method in JavaScript that gives us the ability to figure out which character is at a given index in a string. This article will tell you about that method and show how to use it.

For this method, we turn to our primitive types in JavaScript. What are those types? What does primitive even mean?

Primitive types, or values, are items that are not objects and don’t have methods associated with them. In JavaScript, the primitives are string, number, boolean, bigint, symbols, and undefined. Today, we’re going to focus on the string primitive value.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

What’s interesting about the primitive string value is that it’s usually interchangeable with the primitive String object. In most cases, JavaScript will automatically wrap a primitive String object wrapper around a primitive string and coerce the use of String methods. So, in most cases, you don’t need to worry about changing a primitive string (with no methods available) to a primitive String Object (with methods available).

Syntax

The syntax for the String charAt() method is fairly straightforward. We start with the string we want to look at. Since it’s a String Object, we use the dot notation to access the method and attach it to the end. To invoke it, we add parentheses to the end with the index we want to look up.

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

The charAt() method returns the character at that index in the string. Remember that strings are zero-based so indexes start at 0 and go from there in sequential order. Here is a working implementation – use the inputs to add a string and an index and then hit submit. Unless you’ve asked for an index out of range, it should return a single character at the index you asked for.


<!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>

What Should You Take A Look At Next?

JavaScript Reverse String Code Challenge

JavaScript Pop Method: What is It and How to Use It

How to Use Substring in JavaScript

JavaScript String Contains: Step-By-Step Guide

JavaScript toUpperCase and toLowerCase

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content