1

I was learning about javascript string methods here.

Under section Extracting String Characters, it said:

There are 2 safe methods for extracting string characters:

  • charAt(position)
  • charCodeAt(position)

The questions here are:

  • Why these methods are called safe?
  • What are these methods protecting from?
Zameer Ansari
  • 28,977
  • 24
  • 140
  • 219

1 Answers1

3

There are two ways to access a character from a string.

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

Also, it can produce unexpected results in edge cases

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

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

Basically, it's a short-cut 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.

So for the compatibility purpose .charAt is considered to be safe.

Source

Speed Test: http://jsperf.com/string-charat-vs-bracket-notation

Testing in Chrome 47.0.2526.80 on Mac OS X 10.10.4
Test    Ops/sec

String charAt
testCharAt("cat", 1);
117,553,733
±1.25%
fastest

String bracket notation
testBracketNotation("cat", 1);
118,251,955
±1.56%
fastest
Community
  • 1
  • 1
void
  • 36,090
  • 8
  • 62
  • 107
  • Does it mean that [W3Schools](http://www.w3schools.com/) guys must edit the wordings from **safe** to **cross browser compatible** methods? Because these are two different things. – Zameer Ansari Dec 16 '15 at 07:02
  • Not exactly browser compatibility, but `.charAt` can also be used to modify the string, which can not be done using `bracket notations`. – void Dec 16 '15 at 07:03
  • Bracket string indexing is 2-3 times quicker than `.charAt` which can make a significant difference in the runtime when manipulating large strings. Though attempting to index outside the string's length bracket indexing has woeful performance compared to `.charAt` being over 10 times slower. – Blindman67 Dec 16 '15 at 07:14
  • @Blindman67 Two major drawbacks are Bracket notation does not work in IE7. You can't set the character using this notation. And see this http://jsperf.com/string-charat-vs-bracket-notation, bracket notation is definitely not 2-3 times faster. – void Dec 16 '15 at 07:19
  • @void I found an [edge case problem](http://stackoverflow.com/a/30742383/2404470) – Zameer Ansari Dec 16 '15 at 07:25
  • @student The charAt function depends on how the index is converted to a Number – void Dec 16 '15 at 07:27
  • @void my tests show different results. Though I am using large strings 1MB+ – Blindman67 Dec 16 '15 at 07:27