ref – https://medium.com/front-end-hacking/es6-map-vs-object-what-and-when-b80621932373
Object is the great choice for scenarios when we only need simple structure to store data and knew that all the keys are either strings or integers (or Symbol).
An Object in Javascript is dictionary type of data collection — which means it also follows key-value stored concept.
Construction
1 2 3 4 5 6 7 |
var obj = {}; //Empty object var obj1 = {id: 1, name: "Test object"}; // Or by constructor var obj = new Object(); //Empty Object var obj1 = new Object; //same result |
In general, like in Array, do not use built-in constructor over literal in creating new object, because:
- More typing
- Slower performance
- Confusion & increasing more chances for mistake
for example:
1 2 3 4 5 6 7 |
var obj = new Object(id: 1, name: "test") //Error var obj1 = {id: 1, name: "test"}; var obj2 = new Object(obj1); //obj1 and obj2 points to the same one obj2.id = 2; console.log(obj1.id); //2 |
Setting key/values
1 2 3 |
let storage = { // store key:value here } |
You can initialize it with key/value pairs, or simply assign it via brackets.
Each key in Object — or we normally call it “property” — is also unique and associated with a single value.
In addition, Object in Javascript has built-in prototype. And don’t forget, nearly all objects in Javascript are instances of Object.
1 2 3 4 5 6 7 8 9 10 |
let storage = { 123: "testing 1 2 3", "dob" : 6680 }; storage[0] = "this is a dictionary"; console.log(storage[123]); // testing 1 2 3 console.log(storage["dob"]); // 6680 console.log(storage[0]); // this is a dictionary |
Object: keys must be in simple types (int, string, or symbol)
In Object, it follows the rule of normal dictionary. The keys MUST be simple types — either integer or string or symbols. As shown previously, strings and integers are used often. However, we can also use symbols.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const symbol1 = Symbol(645); const symbol2 = Symbol("hadoken"); let storage = { 123: "testing 1 2 3", "dob" : 6680 }; storage[symbol1] = "645"; storage[symbol2] = "ken and ryu"; console.log(storage[123]); // testing 1 2 3 console.log(storage["dob"]); // 6680 console.log(storage[symbol2]); // ken and ryu |
Looping through the Object keys
1 2 3 4 5 6 7 8 9 |
// shows all keys for (key in storage) { console.log(`--> ${key}, ${storage[key]}`); } for (const key of Object.keys(storage)) { console.log(key); } |
Looping through symbols
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const symbol1 = Symbol(645); const symbol2 = Symbol("hadoken"); const symbol3 = Symbol("hadoken"); let storage = { 123: "testing 1 2 3", "dob" : 6680 }; storage[symbol1] = "645"; storage[symbol2] = "ken and ryu"; storage[symbol3] = "Akuma and Dan"; let i = Object.getOwnPropertySymbols(storage); console.log(i); i.forEach(function(symbol, index) { console.log(`${index}, ${storage[symbol]}`); }); |
Notice Object.keys and Object.getOwnPropertySymbols
ref – https://stackoverflow.com/questions/34449045/what-is-the-difference-between-reflect-ownkeysobj-and-object-keysobj
Object.keys() returns an array of strings, which are the object’s own enumerable properties.
The Object.getOwnPropertyNames() method returns an array of all properties (enumerable or not) found directly upon a given object.
for example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var testObject = {}; Object.defineProperty(testObject, 'myMethod', { value: function () { alert("Non enumerable property"); }, enumerable: false }); //does not print myMethod since it is defined to be non-enumerable console.log(Object.keys(testObject)); //prints myMethod irrespective of it being enumerable or not. console.log(Reflect.ownKeys(testObject)); |