Loading lesson path

JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Object Iterations

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind JavaScript Object Iterations?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

// ___ properties from a source object to a target object

3Order

Put the learning moves in the order that makes the concept easiest to apply.

JavaScript Object.fromEntries()

JavaScript Object.entries()

JavaScript Object.assign()

General Methods

// Copies properties from a source object to a target object
Object.assign(target, source)
// Creates an object from an existing object
Object.create(object)
// Returns an array of the key/value pairs of an object
Object.entries(object)
// Creates an object from a list of keys/values
Object.fromEntries()
// Returns an array of the keys of an object
Object.keys(object)
// Returns an array of the property values of an object
Object.values(object)
// Groups object elements according to a function
Object.groupBy(object, callback)

JavaScript Object.assign()

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

Example

// Create Target Object
const person1 = {
  firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"
};
// Create Source Object
const person2 = {firstName: "Anne",lastName: "Smith"};
// Assign Source to Target Object.assign(person1, person2);

JavaScript Object.entries()

ECMAScript 2017 added the Object.entries() method to objects.

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

Example

const person = {
  firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"
};
let text = Object.entries(person);

Object.entries() makes it simple to use objects in loops:

Example

const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

Object.entries() also makes it simple to convert objects to maps:

Example

const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));

Object.entries() is supported in all modern browsers since March 2017:

JavaScript Object.fromEntries()

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

Example

const fruits = [ ["apples", 300], ["pears", 900], ["bananas", 500]
];
const myObj = Object.fromEntries(fruits);

JavaScript Object.values()

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

Example

const person = {
  firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"
};
let text = Object.values(person);

Object.values() is supported in all modern browsers since March 2017:

JavaScript Object.groupBy()

ES2024 added the Object.groupBy() method to JavaScript.

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

The Object.groupBy() method does not change the original object.

Example

// Create an Array
const fruits = [ {name:"apples", quantity:300}, {name:"bananas", quantity:500}, {name:"oranges", quantity:200}, {name:"kiwi", quantity:150}
];
// Callback function to Group Elements function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Group by Quantity
const result = Object.groupBy(fruits, myCallback);

Browser Support

Object.groupby() is an ECMAScript 2024 feature.

JavaScript 2024 is supported in new browsers since March 2024 :

Chrome 117	Edge 117	Firefox 119	Safari 17.4	Opera 103
Sep 2023	Sep 2023	Oct 2023	Okt 2024	May 2023

Warning

ES2024 features are relatively new.

Older browsers may need an alternative code (Polyfill)

Object.groupBy() vs Map.groupBy()

The difference between Object.groupBy() and Map.groupBy() is:

Object.groupBy() groups elements into a JavaScript object.

Map.groupBy() groups elements into a Map object.

JavaScript Object.keys()

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

Example

// Create an Object
const person = {
  firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"
};
// Get the Keys
const keys = Object.keys(person);

JavaScript for...in Loop

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

Syntax

for (let
variable
in
object ) {
 // code to be executed
}

The block of code inside of the for...in loop will be executed once for each property.

Looping through the properties of an object:

Example

const person = {
  fname:" John", lname:" Doe", age: 25
};
for (let x in person) {
  txt += person[x];
}

Advanced Chapters

JavaScript Object Definitions

JavaScript Object Advanced this

JavaScript Object Iterations

JavaScript Object Getters & Setters

JavaScript Object Management

JavaScript Object Protection

JavaScript Object Prototypes

JavaScript Object Reference

JS Temporal Arithmetic

JS Temporal Differences

Loading lesson path

JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Object Iterations

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind JavaScript Object Iterations?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

// ___ properties from a source object to a target object

3Order

Put the learning moves in the order that makes the concept easiest to apply.

JavaScript Object.fromEntries()

JavaScript Object.entries()

JavaScript Object.assign()

General Methods

// Copies properties from a source object to a target object
Object.assign(target, source)
// Creates an object from an existing object
Object.create(object)
// Returns an array of the key/value pairs of an object
Object.entries(object)
// Creates an object from a list of keys/values
Object.fromEntries()
// Returns an array of the keys of an object
Object.keys(object)
// Returns an array of the property values of an object
Object.values(object)
// Groups object elements according to a function
Object.groupBy(object, callback)

JavaScript Object.assign()

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

Example

// Create Target Object
const person1 = {
  firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"
};
// Create Source Object
const person2 = {firstName: "Anne",lastName: "Smith"};
// Assign Source to Target Object.assign(person1, person2);

JavaScript Object.entries()

ECMAScript 2017 added the Object.entries() method to objects.

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

Example

const person = {
  firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"
};
let text = Object.entries(person);

Object.entries() makes it simple to use objects in loops:

Example

const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

Object.entries() also makes it simple to convert objects to maps:

Example

const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));

Object.entries() is supported in all modern browsers since March 2017:

JavaScript Object.fromEntries()

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

Example

const fruits = [ ["apples", 300], ["pears", 900], ["bananas", 500]
];
const myObj = Object.fromEntries(fruits);

JavaScript Object.values()

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

Example

const person = {
  firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"
};
let text = Object.values(person);

Object.values() is supported in all modern browsers since March 2017:

JavaScript Object.groupBy()

ES2024 added the Object.groupBy() method to JavaScript.

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

The Object.groupBy() method does not change the original object.

Example

// Create an Array
const fruits = [ {name:"apples", quantity:300}, {name:"bananas", quantity:500}, {name:"oranges", quantity:200}, {name:"kiwi", quantity:150}
];
// Callback function to Group Elements function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Group by Quantity
const result = Object.groupBy(fruits, myCallback);

Browser Support

Object.groupby() is an ECMAScript 2024 feature.

JavaScript 2024 is supported in new browsers since March 2024 :

Chrome 117	Edge 117	Firefox 119	Safari 17.4	Opera 103
Sep 2023	Sep 2023	Oct 2023	Okt 2024	May 2023

Warning

ES2024 features are relatively new.

Older browsers may need an alternative code (Polyfill)

Object.groupBy() vs Map.groupBy()

The difference between Object.groupBy() and Map.groupBy() is:

Object.groupBy() groups elements into a JavaScript object.

Map.groupBy() groups elements into a Map object.

JavaScript Object.keys()

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

Example

// Create an Object
const person = {
  firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"
};
// Get the Keys
const keys = Object.keys(person);

JavaScript for...in Loop

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

Syntax

for (let
variable
in
object ) {
 // code to be executed
}

The block of code inside of the for...in loop will be executed once for each property.

Looping through the properties of an object:

Example

const person = {
  fname:" John", lname:" Doe", age: 25
};
for (let x in person) {
  txt += person[x];
}

Advanced Chapters

JavaScript Object Definitions

JavaScript Object Advanced this

JavaScript Object Iterations

JavaScript Object Getters & Setters

JavaScript Object Management

JavaScript Object Protection

JavaScript Object Prototypes

JavaScript Object Reference

JS Temporal Arithmetic

JS Temporal Differences