How is it possible to retrieve an object property using an array?

Question

How is it possible to retrieve an object property using an array?

I would love to hear an explanation of the behavior exhibited by this code snippet:

let obj = {a:1, b:2}
let i = ['a']
console.log(obj[i])
>> 1

Isn't it interesting how even an array can be utilized to access a property within an object? It's worth mentioning that this only works when the array has a length of 1. I've made attempts to research this phenomenon, but so far, there doesn't seem to be any documentation available that clarifies why this functionality exists.

javascript arrays object

Answer 1

Answer №1

Property names are always either strings or symbols.

If you provide something that is not a string or symbol, it will be automatically converted to a string.

The default behavior of the toString() method for an array can be simplified as:

String.prototype.toString = function () { return this.join(","); }

Therefore, ['a'] will be converted to 'a'.

It should be noted that this conversion only works with arrays containing one element.

For arrays with more than one element, you need to have a matching value:

const o = {
    "a,b": "Hello"
}
const a = ["a", "b"];
console.log("" + a);
console.log(o[a]);

Furthermore, since any object can be transformed into a string and the toString method can be customized, unusual outcomes can be achieved:

const data = {
  "42": "Hello"
}

class Weird {
    constructor(x) {
        this.x = x;
    }
    toString() {
        return this.x + 40;
    }
}

const w = new Weird(2);
console.log(data[w]);

(It's worth mentioning that engaging in these unconventional practices is generally ill-advised as it may result in difficulties while troubleshooting your code later on).

Answer 2

Property names are always either strings or symbols.

If you provide something that is not a string or symbol, it will be automatically converted to a string.

The default behavior of the toString() method for an array can be simplified as:

String.prototype.toString = function () { return this.join(","); }

Therefore, ['a'] will be converted to 'a'.

It should be noted that this conversion only works with arrays containing one element.

For arrays with more than one element, you need to have a matching value:

const o = {
    "a,b": "Hello"
}
const a = ["a", "b"];
console.log("" + a);
console.log(o[a]);

Furthermore, since any object can be transformed into a string and the toString method can be customized, unusual outcomes can be achieved:

const data = {
  "42": "Hello"
}

class Weird {
    constructor(x) {
        this.x = x;
    }
    toString() {
        return this.x + 40;
    }
}

const w = new Weird(2);
console.log(data[w]);

(It's worth mentioning that engaging in these unconventional practices is generally ill-advised as it may result in difficulties while troubleshooting your code later on).

Answer 3

Answer №2

let obj = {a:1, b:2}

A new object is created with two properties, a and b, each assigned to values 1 and 2.

let i = ['a']

After that, a variable called i is defined as an array containing the string 'a'.

console.log(obj[i])

This line of code will output the value corresponding to the 'a' property in the obj object because i resolves to a string due to being a single element within the array.

If you were to use obj[i[0]] instead, it would explicitly reference the first element in the array.

obj['a'] is a valid property, while obj['a,b'] is not.

Answer 4

let obj = {a:1, b:2}

A new object is created with two properties, a and b, each assigned to values 1 and 2.

let i = ['a']

After that, a variable called i is defined as an array containing the string 'a'.

console.log(obj[i])

This line of code will output the value corresponding to the 'a' property in the obj object because i resolves to a string due to being a single element within the array.

If you were to use obj[i[0]] instead, it would explicitly reference the first element in the array.

obj['a'] is a valid property, while obj['a,b'] is not.

How is it possible to retrieve an object property using an array?

Answer №1

Answer №2

Similar questions

Switching image source using Firefox add-on

What are the distinctions between performing React server-side rendering on a local machine versus on a live Node.js server like IBM Bluemix?

Encountering a TypeError in Node.js: "Error - res.setHeader doesn't exist as a function"

Issue: Hydration unsuccessful due to the initial UI not aligning with the server-rendered content

Real-time data texture updates in Three.js using JavaScript

Wait for another user keypress event in jQuery after a 0.5 second delay

Error: Tried to import a module but encountered a TypeError stating that it cannot read properties of undefined while trying to read 'utf16le'

Out of nowhere, an error emerged stating, "I am unable to access the 'name' property of undefined."

Exploring the concept of multi-level arrays and the manipulation of pointers to

Enhancing Vue Filtered Lists for Increased Dynamism

What is the best way to make one page disappear and replace it with a pop-up from

The issue of execution order in JavaScript Recursion with promises

What are the best practices for running node in VSCode?

Is the MUI Drawer Open 20% of the Time?

Exploring TestCafe and Testing Library: How to destructure multiple selectors with one selector

Is it possible to simultaneously adjust the source of multiple images using JavaScript?

What strategies are typically employed to prevent falling into the callback hell trap when working with error-back asynchronous functions in Node.JS?

Visualizing Data with d3.js Force Chart: Integrating Images with Nodes for Dynamic Animation

inject the HTML content into the <div> container

What is the reason behind State's disappearance only after a variable has been assigned to