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

Bracket notation now works on all major browsers, except for IE7 and below.

// Bracket Notation
"Test String1"[6]

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

It used to be 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.

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).

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.