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”.
Hello my fellow newbs. Today, we are going to talk about the next String object method and that is charCodeAt(). Hold on to your hats, because we are going to dive right in.
The charCodeAt() method returns a number indicating the Unicode value of the character at the given index in a specified string. The index of the first character is 0, the second character’s index is 1, and so on. The last character has an index equal to length of the specified string minus one.
let myNotSoLongString= "Hello newbs!";myNotSoLongString.charCodeAt(0) // 7'
myNotSoLongString.charCodeAt(1) // 101
myNotSoLongString.charCodeAt(2) // 108
myNotSoLongString.charCodeAt(3) // 108
myNotSoLongString.charCodeAt(4) // 111
myNotSoLongString.charCodeAt(5) // 32
myNotSoLongString.charCodeAt(6) // 110
myNotSoLongString.charCodeAt(7) // 101
myNotSoLongString.charCodeAt(8) // 119
myNotSoLongString.charCodeAt(9) // 98
myNotSoLongString.charCodeAt(10) // 115 myNotSoLongString.charCodeAt(11) // 33
Similarly, like with charAt(), there are some exceptions, when the method does not return the actual Unicode value. This happens if there is no character at the specified index, or if the index is less than “0”. In these cases, we get “NaN” instead.
myNotSoLongString.charCodeAt(-1) // NaN
myNotSoLongString.charCodeAt(12) // NaN
Both results are “NaN”, because we provided a negative index in the first case and out of range index in the second case.
Let’s have a look at a few more edge cases and see how the method behaves:
myNotSoLongString.charCodeAt("A") // 72
myNotSoLongString.charCodeAt(NaN) // 72
myNotSoLongString.charCodeAt(null) // 72
myNotSoLongString.charCodeAt(undefined) // 72
myNotSoLongString.charCodeAt(false) // 72
myNotSoLongString.charCodeAt(true) // 101
First four cases are examples of invalid values for the index. Because they can not be converted into integer, the default value of index equal to zero is used instead.
Now, I also mentioned that some characters do not fit into these 16-bits and therefore they consist of more than one code unit. And because of that, we have Unicode code points, or shortly code points.
To make matters simple, let’s just say that a code point can consist of one or more code units. And that they represent a specific unicode character. Their value can range anywhere from 0 to 1,114,111.
Interesting fact is that the first 128 Unicode code points are a direct match of the ASCII character encoding.
And now back to our method of the day. charCodeAt() always returns a value that is less than 65,536. If you missed that, it is the maximum theoretical value that can fit into one code unit. That means, it will not return the whole unicode value for the characters that consist of more than one code unit.
At this moment, your head is probably hurting and you’re contemplating leaving development for something less stressful — like fixing high voltage power lines. But don’t give up just yet. Let’s rather have a look at this issue using an example. You’ll see it’s not actually that bad.
let thumbsUpIcon = "👍";thumbsUpIcon.length // 2thumbsUpIcon.charCodeAt(0) // 55357
thumbsUpIcon.charCodeAt(1) // 56397thumbsUpIcon.codePointAt(0) // 128077
All right, we can see that length of our character is more than 1 code unit thanks to length property. So we already know that the value we will get is not the correct one, but that’s okay. Because there is another method that can help us. And that is codePointAt(), which returns the actual unicode value of a code point and not just a code unit.
As always thank you very much for your time and I will see you soon with the next method.