JS array with getter by ID ?
JS array with getter by ID ?
Hi !
Given the following sample items :
| ID | First name | Age |
|---|---|---|
xvZwiCpi | Naomi | 42 |
Nzd9UsGT | Naomi | 24 |
QiDXP2wA | Thea | 53 |
JpYeAY7H | Jeremy | 35 |
I can store these in an array :
js
const data = [
{ id: 'xvZwiCpi', firstName: 'Frederic', age: 42 },
{ id: 'Nzd9UsGT', firstName: 'Naomi', age: 24 },
{ id: 'QiDXP2wA', firstName: 'Thea', age: 53 },
{ id: 'JpYeAY7H', firstName: 'Mathew', age: 35 }
];
Thus access them the same way by ID :
js
console.log(data.find(item => item.id === 'xvZwiCpi'));
And by properties :
js
console.log(data.find(item => item.firstName === 'Frederic').id);
Or I can store these in an object :
js
const data = {
'xvZwiCpi': { firstName: 'Frederic', age: 42 },
'Nzd9UsGT': { firstName: 'Naomi', age: 24 },
'QiDXP2wA': { firstName: 'Thea', age: 53 },
'JpYeAY7H': { firstName: 'Mathew', age: 35 }
};
Thus more easily access properties by ID :
js
console.log(data['xvZwiCpi'].firstName);
But more hardly access ID by properties :
js
console.log(Object.entries(data).find(([id, item]) => item.firstName = 'Frederic')[0]);
I could duplicate IDs :
js
const data = {
'xvZwiCpi': { id: 'xvZwiCpi', firstName: 'Frederic', age: 42 },
'Nzd9UsGT': { id: 'Nzd9UsGT', firstName: 'Naomi', age: 24 },
'QiDXP2wA': { id: 'QiDXP2wA', firstName: 'Thea', age: 53 },
'JpYeAY7H': { id: 'JpYeAY7H', firstName: 'Mathew', age: 35 }
};
To slightly simplify that previous line :
js
console.log(Object.values(data).find(item => item.firstName = 'Frederic').id);
But what if a single variable type could allow doing both operations easily ?
js
console.log(data['xvZwiCpi'].firstName);
console.log(data.find(item => item.firstName === 'Frederic').id);
Does that exist ?
If not, I'm thinking about implementing it that way :
js
const data = new Proxy([
{ id: 'xvZwiCpi', firstName: 'Frederic', age: 42 },
{ id: 'Nzd9UsGT', firstName: 'Naomi', age: 24 },
{ id: 'QiDXP2wA', firstName: 'Thea', age: 53 },
{ id: 'JpYeAY7H', firstName: 'Mathew', age: 35 }
], {
get: (array, property) =>
array[property]
||
array.find(item => item.id === property)
});
In which case I'd put it in a lib, but how would this be named ?
I'd also make a second implementation that would enforce ID uniqueness and use Map to map IDs with indexes instead of running find : while the first implementation would be fine for static data, the second one would be more suitable for dynamic data.
Would this make sense ?
Thanks
Seems like a great idea.
I often find myself using objects when I'm building data (like a horrible CSV processor). It's easy to pull in a row of data, and potentially modify existing data (yeh, really horrible CSV).
But when it gets to processing the data (transformers and database), I prefer arrays.
A lot of it comes back to typescript, where Object.keys().forEach means the key isn't necessarily usable to access the item in the object (the whole, a key becomes a string, but an object can be keyed by string/number/symbol). .
So, whatever you come up with HAS to have first class Typescript support.
I'm not a TypeScript person, sorry. 😅
Fair enough, I can understand that.
I used to enjoy the flexibility that JS provides. And IDEs do a pretty good job of filling the holes!
My last project, I went all in on typescript. And I have caught so many more errors before even compiling.
It's like having tests. It gives a hell of a lot more confidence.
Some days I miss just slinging objects around, and just coercing types tho (without explicitly casting/converting... Object keys being a big one!)