In JavaScript, there are numerous ways to iterate though the properties of an object.

The Object.assign() method copies properties from one or more source objects to a target object.

// create target object
const person1 = {
    firstName: "Johnny",
    lastName: "Shay",
    age: 12
};

// create source object
const person2 = {firstName: "Marty", lastName: "Shay"};

// assign source to target
Object.assign(person1, person2);

// display target
let text = Object.entries(person1);
document.getElementById("demo").innerHTML = text;

Output:

firstName,Marty,lastName,Shay,age,12

The Object.create() method creates an object from an existing object.

// create an object:
const son = {
    firstName: "Johnny",
    lastName: "Shay",
    age: 12
};

// create new object
const father = Object.create(son);
father.firstName = "Marty";

// display properties
document.getElementById("demo").innerHTML = son.firstName + " and " + father.firstName;

Output:

Johnny and Marty

Object.entries() returns an array of the key/value pairs in an object.

const person = {
    firstName: "Johnny",
    lastName: "Shay",
    age: 12
};

let text = Object.entries(person); // firstName,Johnny,lastName,Shay,age,12

Object.entries() can be used to access objects in a loop.

const cars = {Lamborghini:300, Ferrari:200, Maserati:100}; 

let text = "";
for (let [car, amount] of Object.entries(cars)) {
    text += car + ": " + amount + "k<br>";
}

document.getElementById("demo").innerHTML = text;

Output:

Lamborghini: 300k
Ferrari: 200k
Maserati: 100k

Object.entries() can be used to convert objects to maps.

const cars = {Lamborghini:300, Ferrari:200, Maserati:100}; 
const myMap = new Map(Object.entries(cars));

document.getElementById("demo").innerHTML = myMap; // [object Map]

The fromEntries() method creates an object from a list of key/value pairs.

const cars = [
    ["Lamborghini", 300],
    ["Ferrari", 200],
    ["Maserati", 100]
];

const myObj = Object.fromEntries(cars);

document.getElementById("demo").innerHTML = myObj.Maserati + "k";

Output:

100k

The Object.keys() method returns an array with the keys of an object.

// create an object
const person = {
    firstName: "Johnny",
    lastName: "Shay",
    age: 12,
    eyeColor: "brown"
};

// get the keys
const keys = Object.keys(person);
document.getElementById("demo").innerHTML = keys;

Output:

firstName,lastName,age,eyeColor

Object.values() is similar to Object.entries(), but returns a single dimension array of the object values.

const cars = [
    ["Lamborghini", 300],
    ["Ferrari", 200],
    ["Maserati", 100]
];

let text = Object.values(cars)
document.getElementById("demo").innerHTML = text

Output:

Lamborghini,300,Ferrari,200,Maserati,100

The Object.groupBy() method groups elements of an object according to string values returned from a callback function. It not change the original object.

// create an array
const cars = [
    {name:"Lamborghini", quantity:300},
    {name:"Ferrari", quantity:200},
    {name:"Maserati", quantity:100},
    {name:"Alfa Romeo", quantity:75}
];

// callback function to select high prices 
function myCallback({ quantity }) {
    return quantity > 100 ? "high" : "low";
}

// group by ok and low
const result = Object.groupBy(cars, myCallback);

// display results
let text ="These cars are low priced: <br>";
for (let [x,y] of result.low.entries()) {
    text += y.name + " " + y.quantity + "k<br>";
}

text += "<br>These cars are high priced: <br>";
for (let [x,y] of result.high.entries()) {
    text += y.name + " " + y.quantity + "k<br>";
}

document.getElementById("demo").innerHTML = text;

Output:

These cars are low priced:
Maserati 100k
Alfa Romeo 75k

These cars are high priced:
Lamborghini 300k
Ferrari 200k

The JavaScript for…in statement loops through the properties of an object.

const person = {
    fname: "Johnny",
    lname: "Shay",
    age: 12
}; 

let txt = "";
for (let x in person) {
    txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;

Output:

Johnny Shay 12

---