Object vs Map

const person = {};
person.name = 'Foo';
person.age = 20;

// Or
const person = {
    name: 'Foo',
    age: 20,
};

const person = new Map();
person.set('name', 'Foo');
person.set('age', 20);

#Differences

1. Object only accepts string and symbol keys. Another types will be converted to string automatically. `Map` on the other hand accepts any type of key.
2. We can iterate over the properties of a `Map` directly using `forEach` or `for ... of` statement:
   js

   const styles = new Map();
   styles.set('color', 'blue');
   styles.set('fontSize', '12px');
   
   styles.forEach((value, key) => console.log(key, '=', value));
   
   // Output:
   // color = blue
   // fontSize = 12px

   Objects are not iterable directly. In order to loop over the properties of an object, we have to use either `Object.keys`, `Object.values` or `Object.entries` to receives the list of keys, values or pairs of key and value.
   js

   styles = {
       color: 'blue',
       fontSize: '12px',
   };
   
   Object.keys(styles).forEach((key) => console.log(key, '=', styles[key]));
   
   // Output:
   // color = blue
   // fontSize = 12px

3. Object have special properties such as `constructor`, `__proto__`, etc.
   js

   let person = {};
   person['constructor']; // ƒ Object() { [native code] }

   While `Map` only consists of what we define:
   js

   let person = new Map();
   person.get('constructor'); // undefined

4. JSON supports `Object`:
   js

   const person = {};
   person.name = 'Foo';
   person.age = 20;
   
   JSON.stringify(person); // "{"name":"Foo","age":20}"

   With `Map`, it's not possible to get the proper data when being serialized with JSON:
   js

   const person = new Map();
   person.set('name', 'Foo');
   person.set('age', 20);
   
   JSON.stringify(person); // "{}"

#Good to know

let codes = { A: 65, B: 66, C: 67, 0: 48 };
codes; // {0: 0, A: 65, B: 66, C: 67}
Object.keys(codes); // ["0", "A", "B", "C"]

#Good practice

const person = {
    firstName: 'Foo',
    lastName: 'Bar',
    getFullName: function () {
        return `\${this.firstName} \${this.lastName}`;
    },
};

#See also

• hasOwnProperty vs in
• Map vs WeakMap