The reason why Objects are so tricky to understand in Javascript

Well, I guess reading the post title makes you react the same as the image post. Specifically, JS lovers, who might be thinking why I have some understanding issues with one of the cores of Javascript? Since almost everything is an Object in javascript.

typeof new String('I am creating String, But they call me object');
typeof ['What? I am not an array'];
typeof {'Who me?': 'Well, I have no issues'};
typeof null; // I am nothing but I have existence

There are some learnings that came into your experience by knowing from someone or experiencing it by yourself. With this post, I am sharing my experience. So, this post is regarding issues faced with Object literals, etc. and how can we opt for alternatives to achieve the same goal but with perfection.

Coming to alternatives, there are some structural types reliable in some cases.

new Map()

Use Case 1:

Well, one day I was trying to traverse a list on a view by an object literal. And, wanted to show on view in the same way I have declared below.

const obj = {  
   4: 'A'
   2: 'B',
   1: 'C',
   3: 'D',
}

When I try to print Object.values(obj), it gives me

C, B, D, A

instead of

A, B, C, D

Why?

Because apart from string-based keys, all properties that are integer keys appear first in the object property order and are sorted numerically.

Well to print an object in order, I have tried multiple fixes.

Fix #1: Concatenate a constant prefix like alpha char, special char ($, %, &), and in fact ‘0’ in quotes for every key of the object during the time of object declaration. This will guarantee order but we need to use an extra character just to preserver order. See, how unreliable it is?

{ 1: 'A', 4: 'B' } -> { $1: 'A', $4: 'B' }

Fix #2: Create an array of objects and have a key-value, which guarantees order while traversing but to find a specific value against that key, we need to traverse the whole array again. Not a good idea right?

[
 { key:4, value: 'A' }, 
 { key:2, value: 'B' },
 { key:1, value: 'C' },
 { key:3, value: 'D' },
]

Effective Fix #3: Using new Map() which guarantees order irrespective of keys data type — numeral, alpha, or any character. It maintains the object order and we get easily get the required value against that required key, there is no need to traverse the whole object.

let objectWithGuaranteeOrder = new Map([
[4, 'A'],
[3, 'B'],
[2, 'C'],
[1, 'D']]);

for (let [key, value] of objectWithGuaranteeOrder) {
  console.log(key, value);
}
O/P: // 4 A, 3 B, 2 C, 1 D

new Set()

Deal with object order, now what if we need to store the only values or keys in JS, well array does that but can’t store unique ones. For that, we all know the power of Object literals in javascript when it comes to mapping.

For mapping, we can save unique key- value, in form of Object literals or a new Map, but what if need to store only one thing - key or value.

We can achieve the same with Object or new Map() by using truthy values.

{  
   A: true
   B: true,
}
 --OR--
new Map([
[A, true],
[B, true],);

Since object literal or new Map() demands key-value pair, we have to assign extra truthy value to fill that syntax, same way we did in the above case.

#1 Effective Solution

new Set('A', 'B');

That’s it, no need to store an additional truthy value like the way we did in an object literal or new Map() to maintain the key-value pair for saving unique keys. And yes, you can see insert, delete, and detect value in O(1).

In my defense

I have started my career in javascript and still ❤️ing it. Javascript is upgrading and reaching everywhere. Who knew? except for Brendan Eic (creator of JS) what he built for Brower will take space on server machines, desktop software.