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

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.

Answer 2

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 3

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 4

There is a difference when you try to access an index which is out of bounds or not an integer.

string[x] returns the character at the xth position in string if x is an integer between 0 and string.length-1, and returns undefined otherwise.

string.charAt(x) converts x to an integer using the process explained here (which basically rounds x down if x is a non-integer number and returns 0 if parseInt(x) is NaN) and then returns the character at the that position if the integer is between 0 and string.length-1, and returns an empty string otherwise.

Here are some examples:

"Hello"[313]    //undefined
"Hello".charAt(313)    //"", 313 is out of bounds

"Hello"[3.14]    //undefined
"Hello".charAt(3.14)    //'l', rounds 3.14 down to 3

"Hello"[true]    //undefined
"Hello".charAt(true)    //'e', converts true to the integer 1

"Hello"["World"]    //undefined
"Hello".charAt("World")    //'H', "World" evaluates to NaN, which gets converted to 0

"Hello"[Infinity]    //undefined
"Hello".charAt(Infinity)    //"", Infinity is out of bounds

Another difference is that assigning to string[x] does nothing (which can be confusing) and assigning to string.charAt(x) is an error (as expected):

var str = "Hello";
str[0] = 'Y';
console.log(str);    //Still "Hello", the above assignment did nothing
str.charAt(0) = 'Y';    //Error, invalid left-hand side in assignment

The reason why assigning to string[x] doesn't work is because Javascript strings are immutable.

Answer 5

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 6

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 7

What is the difference between using charAt(index) and string[index] to access a character?

#	index value	charAt (return value)	Bracket notation (return value)
1	index >= length	''	undefined
2	index < 0	''	undefined
3	index: falsy	character at 0	undefined
4	index = true	character at 1	undefined
5	Number(index: string) === NaN	character at 0	undefined
6	Number(index: string) !== NaN	character at index	character at index
7	index: decimal	character at Math.floor(Number(index))	undefined

Notes:

• For charAt(), index is first attempted to be type coerced into a number before the index is searched.

  • Boolean values are type coerced. Number(true) evaluates to 1 and Number(false) evaluates to 0.
  • All falsy values return index 0.
  • An array containing a single element [1] or ['1'] when coerced, returns the number. Array containing multiple elements returns NaN and the treatment happens as per the table above.
  • If index is a decimal value, as a number, string or array with one element, Math.floor(Number(index)) is applied.

• For bracket notation, type coercion is attempted when index provided is a string or an array containing one element.

  • Boolean values are not type coerced. So true doesn't coerce to 1. true or false both return undefined.
  • All falsy values except 0, return undefined.
  • Decimal values return undefined.

• type falsy = null | undefined | NaN | ''

  • falsy doesn't include 0 here, as 0 is a valid Number index.

let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

/** index > str.length */
console.log({ charAt: str.charAt(27) }); // returns ''
console.log({ brackets: str[27] }); // returns undefined

/** index < 0 */
console.log({ charAt: str.charAt(-2) }); // returns ''
console.log({ brackets: str[-2] }); // returns undefined

/** Falsy Values */

// All falsy values, return character at index 0
console.log({ charAt: str.charAt(NaN) }); // returns 'A'
console.log({ charAt: str.charAt(false) }); // returns 'A'
console.log({ charAt: str.charAt(undefined) }); // returns 'A'
console.log({ charAt: str.charAt(null) }); // returns 'A'
console.log({ charAt: str.charAt('') }); // returns 'A'

// All falsy values except 0, return undefined
console.log({ brackets: str[NaN] }); // returns undefined
console.log({ brackets: str[false] }); // returns undefined
console.log({ brackets: str[undefined] }); // returns undefined
console.log({ brackets: str[null] }); // returns undefined
console.log({ brackets: str[''] }); // returns undefined

/** index = Boolean(true) */
console.log({ charAt: str.charAt(true) }); // returns 'B', (character at index 1)
console.log({ brackets: str[true] }); // undefined

/** Type coercion: Failure */
console.log({ charAt: str.charAt('A1') }); // returns 'A' (character at index 0)
console.log({ brackets: str['ABC'] }); // returns undefined

/** Type coercion: Success */
console.log({ charAt: str.charAt('1') }); // returns 'B' (attempts to access index after type coercion)
console.log({ brackets: str['1'] }); // returns undefined (attempts to access index after type coercion)

/** Decimal Values */
console.log({ charAt: str.charAt(1.9) }); // returns 'B', applies Math.floor(Number(index))
console.log({ charAt: str.charAt('1.9') }); // returns 'B', applies Math.floor(Number(index))
console.log({ charAt: str.charAt(['1.9']) }); // returns 'B', applies Math.floor(Number(index))

console.log({ brackets: str[1.9] }); // returns undefined

View my Quick Reference on Github