string.charAt(i) vs string[i]

There are two ways to access an individual character of a string:
  • using the charAt[index] method
  • and using bracket notation such as 'hello'[1]
In both ways, 'hello'[1] and 'hello'.charAt(1) returns the second character e.

Differences

  1. The second way is standard of ECMA 5, and is supported in modern browsers. It is not supported in the very old browsers such as IE 6, 7. (I don't think we still need to support these versions of IE).
  2. Here is a table listing the expect result of both methods:
    Methodindex is in the range of 0 and string.length - 1Other cases
     string.charAt(index)character at associate positionan empty string
    string[index]character at associate positionundefined
    We will get different results in some edge cases if you don't pass a proper index (not an integer or out of bounds).
    'hello'[NaN];               // undefined
    'hello'.charAt(NaN);        // 'h'
    
    'hello'[undefined];         // undefined
    'hello'.charAt(undefined);  // 'h'
    
    'hello'[true];              // undefined
    'hello'.charAt(true);       // 'e'
    
    "hello"["00"];              // undefined
    
    // return 'h' because it will try to convert `00` to number first
    "hello".charAt("00");       
    
    'hello'[1.5];               // undefined
    // return 'e' because it will round 1.23 to the number 1 
    'hello'.charAt(1.23);
    In the case the index is out of bounds:
    'hello'[100];           // undefined
    'hello'.charAt(100);    // ''

Good to know

Why does 'hello'.charAt(true) return e?
The charAt(index) method will try to convert the index to the number first. Since Number(true) === 1, charAt(true) will returns the character at the one index position, i.e, the second character.
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved