[] is a more primitive way of accessing all kind of arrays.

charAt() is specific to strings.

You can access the index of any array by using [], but you can only use charAt() on a string.

But when it comes to string alone, both are one and the same.

But you should use charAt() because, it is well supported in all the major browsers, while the bracket notation will return undefined in IE7

Also, the bracket notation is simply accessed, while charAt() does some validation and doesn't return undefined, but will return an empty string ""

Sources:

https://stackoverflow.com/a/22728925

https://stackoverflow.com/a/5943760

https://blog.vjeux.com/2009/javascript/dangerous-bracket-notation-for-strings.html

https://stackoverflow.com/a/5943807

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#character_access