string.charAt(x) or string[x]?

Question

Is there any reason I should use string.charAt(x) instead of the bracket notation string[x]?

Answer 1

From MDN:

There are two ways to access an individual character in a string. The first is the charAt method, part of ECMAScript 3:

return 'cat'.charAt(1); // returns "a"

The other way is to treat the string as an array-like object, where each individual characters correspond to a numerical index. This has been supported by most browsers since their first version, except for IE. It was standardised in ECMAScript 5:

return 'cat'[1]; // returns "a"

The second way requires ECMAScript 5 support (and not supported in some older browsers).

In both cases, attempting to change an individual character won't work, as strings are immutable, i.e., their properties are neither neither "writable" nor "configurable".

• str.charAt(i) is better from a compatibility perspective if IE6/IE7 compatibility is required.
• str[i] is more modern and works in IE8+ and all other browsers (all Edge/Firefox/Chrome, Safari 2+, all iOS/Android).

Answer 2

Very interesting outcome when you test the string index accessor vs the charAt() method. Seems Chrome is the only browser that likes charAt more.

CharAt vs index 1

ChartAt vs index 2

ChartAt vs index 3

Answer 3

String.charAt() is the original standard and works in all the browsers. In IE 8+ and other browsers, you may use bracket notation to access characters but IE 7 and below did not support it.

If somebody really wants to use bracket notation in IE 7, it's wise to convert the string to an array using str.split('') and then use it as an array, compatible with any browser.

var testString = "Hello"; 
var charArr = testString.split("");
charArr[1]; // "e"

Answer 4

They can give different results in edge cases.

'hello'[NaN] // undefined
'hello'.charAt(NaN) // 'h'

'hello'[true] //undefined
'hello'.charAt(true) // 'e'

The charAt function depends on how the index is converted to a Number in the spec.

Answer 5

// Bracket Notation
"Test String1"[6]

// Real Implementation
"Test String1".charAt(6)

It is a bad idea to use brackets, for these reasons (Source):

This notation does not work in IE7. The first code snippet will return undefined in IE7. If you happen to use the bracket notation for strings all over your code and you want to migrate to .charAt(pos), this is a real pain: Brackets are used all over your code and there's no easy way to detect if that's for a string or an array/object.

You can't set the character using this notation. As there is no warning of any kind, this is really confusing and frustrating. If you were using the .charAt(pos) function, you would not have been tempted to do it.

Basically, it's a shortcut notation that is not fully implemented across all browsers.

Note, you are not able to write characters using either method. However, that functionality is a bit easier to understand with the .charAt() function which, in most languages, is a read-only function.