This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.
The charAt() method returns the character at the specified index in a string. The index or a position, if you will, of the first character is 0, the second character’s index is 1, and so on. The last character has an index equal to the length of string minus one.
let FivecharactersLongString= "Hello";FivecharactersLongString.charAt(0) // H
FivecharactersLongString.charAt(1) // e
FivecharactersLongString.charAt(2) // l
FivecharactersLongString.charAt(3) // l
FivecharactersLongString.charAt(4) // o
There are few cases when charAt() method returns an empty string. One of them is if you provide negative value as an index. The other one is if you provide a positive value which is equal or greater than the actual length of the string.
// valid range is from 0 to 4FivecharactersLongString.charAt(-1) // empty string
FivecharactersLongString.charAt(5) // empty string
From the second example, we can clearly see that all of the used indexes are out of range for our string, therefore, the resulting value is an empty string.
If the value given as index cannot be converted to the integer or you provide no index value at all, the default value of 0 is used instead.
FivecharactersLongString.charAt("H") // H
FivecharactersLongString.charAt(NaN) // H
It is important to mention, that the returned value is a new string primitive value consisting of the single UTF-16 code unit. What does that mean? We already mentioned that some characters are composed of more than one code unit.
Well, if the character at the specified index consists of more than one code unit, you will not get the actual character, but only a portion of it — specifically code unit value at the given position.
let thumbsUpIcon = "👍";thumbsUpIcon.length // 2
thumbsUpIcon.charAt(0) // "\ud83d"
thumbsUpIcon.charAt(1) // "\udc4d"[...thumbsUpIcon] // "👍"
This is obviously an issue for us. Fortunately we already solved it in the previous article about String object property length. If you did not see the article, go read it. In short, we need to convert our string value into an array using spread syntax. Then we can use square brackets notation with the original index as if we used the charAt() method.
But this brings us to a question, why use the charAt() method, when in some edge cases, it fails miserably? In the past — ten years ago or so, the square notation was not implemented in all major browsers (greetings to Internet Explorer), so you did not really have a choice. If you needed your code to be universally working, you had to use the String object method. Those old days are fortunately long gone and there is no real reason not to use square brackets notation everywhere. That way, you treat the string as an array-like object and all will be good and dandy.
There are however some minor differences in the result of some edge cases, which we will show in examples.
So at the end of the day, all that you need to take into account is which kind of edge case behavior fits your use case better and stick to that one.
Okay, that’s enough of a talk. Let’s see the actual differences in action.
'hello'[NaN] // undefined
'hello'.charAt(NaN) // 'h''hello'[true] // undefined
'hello'.charAt(true) // 'e'
The resulting value for these edge cases differ when using charAt() method and square brackets notation. The reason is in a way how they are specified and implemented. By default, charAt() returns the first character of string if not given proper index value. On the other hand, default behaviour for accessing indexes not initialized within an array is to return undefined. Simply because the value at the given index was indeed not yet defined.
Okay, that’s it for this episode. We have covered the first of almost forty String object methods. Hopefully you learned something interesting and enjoyed the episode.
Thank you very much for your time and I will see you in the next article.