Javascript map vs object

Map vs object instance creation. A map is an instance of object, but an object is not an instance of a map.

let map = new Map([[1,2],[3,4]]);
console.log(map instanceof Object); //true

let obj = new Object();
console.log(obj instanceof Map); //false

Examples of constructing an object.

let objEx1 = {}; //Empty object
let objEx2 = {id: 1, name: "Test object"};
let objEx3 = new Object(); //Empty Object
let objEx4 = new Object; //same result
let objEx5 = Object.create(null); //Empty Object

let Vehicle = {
    type: "General",
    display: function(){console.log(this.type);}
}
let Car = Object.create(Vehicle); //create a new Car inherits from Vehicle
Car.type = "Car"; //overwrite the property
Car.display();//"Car"
Vehicle.display();//still "General"

Examples of constructing a map.

let map1 = new Map(); //Empty Map
let map2 = new Map([[1,2],[2,3]]); // map = {1=>2, 2=>3}

Accessing elements in map vs object.

//map
let map = new Map([[1,2],[2,3]]); // map = {1=>2, 2=>3}
map.get(1); // 2

//object
var obj = {id: 1, name: "test"};
obj.id; // 1
obj['id']; // 1

Checking if a key is already in a map vs if a property already exist in an object.

//map
let map = new Map(); // map = {1=>2, 2=>3}
map.set(1, 2);
map.set(2, 3);
map.has(1);   // true

//object
var obj = {id: 1, name: "test"};
let doesExist1 = obj.id === undefined; //check if obj has that property defined before.
let doesExist2 = 'id' in obj; //which will apply for inherited property as well.

Adding new elements, map vs object.
//map
let map = new Map([[1,2],[2,3]]); // map = {1=>2, 2=>3}
map.set(4,5); //{1=>2, 2=>3, 4=>5}
map.set(4,6); //{1=>2, 2=>3, 4=>6}

//object
let obj = {};
obj['gender'] = 'female'; //{id: 1, name: "test", gender: "female"}
obj.gender = male; 
//Both is ok and will overwrite the existing mapped value if property already exists.
//{id: 1, name: "test", gender: "male"}

Removing or deleting an element, map vs object.
//map
let map = new Map([[1,2],[2,3]]); // map = {1=>2, 2=>3}
map.set(4,5); //{1=>2, 2=>3, 4=>5}
let isDeleteSucceeded = map.delete(1); //{ 2=>3, 4=>5}
console.log(isDeleteSucceeded); //true
map.clear(); //{}

//object
let obj = {id: 1, name: "test", gender: "male"};
delete obj.id; //{name: "test", gender: "male"}

Getting the size, map vs object.
//map
let map = new Map([[1,2],[2,3]]); // map = {1=>2, 2=>3}
console.log(map.size); // 2

//object
let obj = {id: 1, name: "test", gender: "male"};
console.log(Object.keys(obj).length);// 3

Iterating through a map.
let map = new Map([[1,2],[2,3]]); // map = {1=>2, 2=>3}
for (const item of map){
    console.log(item); 
    //Array[2,3]
    //Array[4,5]
}

//Or
for (const [key,value] of map){
    console.log(`key: ${key}, value: ${value}`);
    //key: 2, value: 3
    //key: 4, value: 5
}

//Or
map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));
//key: 2, value: 3
//key: 4, value: 5

Iterating through an object.
let obj = {id: 1, name: "test"};
for (var key in obj){
   console.log(`key: ${key}, value: ${obj[key]}`);
   //key: id, value: 1
   //key: name, value: test
}

//Or

Object.keys(obj).forEach((key)=> console.log(`key: ${key}, value: ${obj[key]}`));
//key: id, value: 1
//key: name, value: test

Reference:

https://medium.com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373