What's arr['1'] in JavaScript?

Ever wondered what is arr['1'] in JavaScript? I always felt that the array index should be a non-negative integer, but i was wrong. Let me explain...

What is an Array in JavaScript?

First, let us understand what exactly an array is. Arrays in JavaScript are special objects, but they work differently from regular objects when it comes to property names (or keys).JavaScript arrays use non-negative integers (0, 1, 2, etc.) as valid indices.

let arr = [1, 2, 3];
console.log(arr); 
// Internally, it behaves like an object: { 0: 1, 1: 2, 2: 3 }

Here, numeric indices are just keys.
We can also check that the array is an object by:

console.log(typeof arr) // output: object

How Does JavaScript Handle Array Indices?

Dot notation cannot be used when the property name starts with a number. That is:

console.log(arr.1); // a syntax error
console.log(arr[1]); // correct way to access an element

Thus, an array is an object whose key values are non-negative integers and one can access its element using the square brackets and the index.

What Happens When You Use arr['1']?

Now, Let's come back to the title of this post, that is what is arr['1'] in JavaScript?
Since array is an object, thus its keys can be string. JavaScript allows accessing array elements using string representations of numbers given that the string that we are using is a representation of a valid number. If you try to use a string (other than a string representation of a number), the array treats it as an object property, not an actual array index. Let me explain with an example:

let arr = [1, 2, 3, 4, 5, 6];
console.log(arr[1] === arr['1']); // true
console.log(arr[1] === arr['01']); // false
console.log(arr['1']) // 2
console.log(arr['01']) // undefined

console.log(arr[1] === arr['1']);

• here the string '1' will coerce into a number 1, hence it acts like an array index.

• Both access the same element (2 in this case), so the comparison returns true

console.log(arr[1] === arr['01']);

• arr[1] still accesses the element at index 1 (which is 2). However, arr['01'] is different - JavaScript doesn't coerce '01' into 1.

• '01' is treated as a literal string property name (like a regular object key). Since no property named '01' exists on the array, it returns undefined

• Therefore, 2 === undefined is false

  Key Takeaways

  At the end, summarize the main points:
  ✅ JavaScript arrays are objects with numeric keys.
  ✅ String representation of numbers (e.g., '2') gets coerced into a number.
  ✅ Arbitrary strings (e.g., '02') are treated as regular object properties.
  Hope you understood this interesting behaviour of JavaScript.Understanding these quirks will help you write better, bug-free JavaScript code. 🚀 Happy coding!
  References: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Comments

[Hardik Aggarwal]

Very well written my friend!!
Waiting for other blogs and some fascinating mind boggling concepts
btw a great and simple explanation (better than our professors)..

[Bhumesh Mahajan]

Thank you! I'm glad you found it helpful and I'll keep sharing more content