Benchmark: Spread vs object.assing vs forEach pt3

Tests:

Spread

const a = {
    email: "abc@mail.com",
    phone: "12345678",
};

const b = {
    app_version: "AP.12",
    appsflyer_id: "askldjajkshdlkjh2323h4234j2l3j4h",
    advertising_id: "23;o4h2l34hl2kj3h4kj23h4",
    device_os_version: "12",
    device_name: "Aifon 15 PRO",
    firebase_instance_id: "2liu3hiuo23y4u23y4ui2y34iy3u4y234",
};

const c = {
  first_name: "lalala",
  last_name: "dadada"
};

const res = {
    email: null,
    phone: null,
    last_name: null,
    first_name: null,
    app_version: null,
    appsflyer_id: null,
    advertising_id: null,
    device_os_version: null,
    device_name: null,
    firebase_instance_id: null,
    ...a,
    ...b,
  	...c
};

​x
 
const a = {    email: "abc@mail.com",    phone: "12345678",};​const b = {    app_version: "AP.12",    appsflyer_id: "askldjajkshdlkjh2323h4234j2l3j4h",    advertising_id: "23;o4h2l34hl2kj3h4kj23h4",    device_os_version: "12",    device_name: "Aifon 15 PRO",    firebase_instance_id: "2liu3hiuo23y4u23y4ui2y34iy3u4y234",};​const c = {  first_name: "lalala",  last_name: "dadada"};​const res = {    email: null,    phone: null,    last_name: null,    first_name: null,    app_version: null,    appsflyer_id: null,    advertising_id: null,    device_os_version: null,    device_name: null,    firebase_instance_id: null,    ...a,    ...b,    ...c};

Object.assign

const a = {
    email: "abc@mail.com",
    phone: "12345678",
};

const b = {
    app_version: "AP.12",
    appsflyer_id: "askldjajkshdlkjh2323h4234j2l3j4h",
    advertising_id: "23;o4h2l34hl2kj3h4kj23h4",
    device_os_version: "12",
    device_name: "Aifon 15 PRO",
    firebase_instance_id: "2liu3hiuo23y4u23y4ui2y34iy3u4y234",
};

const c = {
  first_name: "lalala",
  last_name: "dadada"
};

const res = Object.assign({
      email: null,
      phone: null,
      last_name: null,
      first_name: null,
      app_version: null,
      appsflyer_id: null,
      advertising_id: null,
      device_os_version: null,
      device_name: null,
      firebase_instance_id: null
    }, a, b, c);

 
const a = {    email: "abc@mail.com",    phone: "12345678",};​const b = {    app_version: "AP.12",    appsflyer_id: "askldjajkshdlkjh2323h4234j2l3j4h",    advertising_id: "23;o4h2l34hl2kj3h4kj23h4",    device_os_version: "12",    device_name: "Aifon 15 PRO",    firebase_instance_id: "2liu3hiuo23y4u23y4ui2y34iy3u4y234",};​const c = {  first_name: "lalala",  last_name: "dadada"};​const res = Object.assign({      email: null,      phone: null,      last_name: null,      first_name: null,      app_version: null,      appsflyer_id: null,      advertising_id: null,      device_os_version: null,      device_name: null,      firebase_instance_id: null    }, a, b, c);

Foreach

const a = {
      email: "abc@mail.com",
      phone: "12345678",
};

const b = {
    app_version: "AP.12",
    appsflyer_id: "askldjajkshdlkjh2323h4234j2l3j4h",
    advertising_id: "23;o4h2l34hl2kj3h4kj23h4",
    device_os_version: "12",
    device_name: "Aifon 15 PRO",
    firebase_instance_id: "2liu3hiuo23y4u23y4ui2y34iy3u4y234",
};

const c = {
  first_name: "lalala",
  last_name: "dadada"
};

const res = {
      email: null,
      phone: null,
      last_name: null,
      first_name: null,
      app_version: null,
      appsflyer_id: null,
      advertising_id: null,
      device_os_version: null,
      device_name: null,
      firebase_instance_id: null,
  	  ...a
};

Object.keys(b).forEach(key => {
    res[key] = b[key];
  });
Object.keys(c).forEach(key => {
    res[key] = c[key];
  });

 
const a = {      email: "abc@mail.com",      phone: "12345678",};​const b = {    app_version: "AP.12",    appsflyer_id: "askldjajkshdlkjh2323h4234j2l3j4h",    advertising_id: "23;o4h2l34hl2kj3h4kj23h4",    device_os_version: "12",    device_name: "Aifon 15 PRO",    firebase_instance_id: "2liu3hiuo23y4u23y4ui2y34iy3u4y234",};​const c = {  first_name: "lalala",  last_name: "dadada"};​const res = {      email: null,      phone: null,      last_name: null,      first_name: null,      app_version: null,      appsflyer_id: null,      advertising_id: null,      device_os_version: null,      device_name: null,      firebase_instance_id: null,      ...a};​Object.keys(b).forEach(key => {    res[key] = b[key];  });Object.keys(c).forEach(key => {    res[key] = c[key];  });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Spread
Object.assign
Foreach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread	8618732.0 Ops/sec
Object.assign	6108910.0 Ops/sec
Foreach	3536326.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Measuring the performance of different JavaScript methods for iterating over objects is an essential task, especially when working with large datasets.

Benchmark Test

The benchmark test measures the time taken to create an object res by spreading one or more objects (a, b, or c) onto another object, using either the spread operator (...), Object.assign(), or a loop (forEach()).

Options Compared

There are three options being compared:

Spread Operator (...): This method creates a new object by spreading the properties of one or more objects onto another object.
Object.assign(): This method creates a new object by copying the values from multiple source objects to a target object.
forEach() Loop: This method uses a loop to iterate over the keys of an object and assigns the corresponding values from one or more objects to a target object.

Pros and Cons

Spread Operator (...)
- Pros:
  - Efficient, as it creates a new object with references to the original properties.
  - Easy to read and understand.
- Cons:
  - May not be suitable for large datasets or objects with many properties, as it can create a very large object in memory.
Object.assign()
- Pros:
  - Suitable for large datasets or objects with many properties, as it creates a shallow copy of the source objects and copies only the values that are not already present in the target object.
  - Can be faster than the spread operator for larger datasets.
- Cons:
  - Less readable and understandble than the spread operator.
forEach() Loop
- Pros:
  - Suitable for large datasets or objects with many properties, as it avoids creating a new object in memory.
- Cons:
  - Can be slower than Object.assign() due to the overhead of iterating over the keys and assigning values manually.

Library Used

None. The benchmark test uses built-in JavaScript methods (..., Object.assign(), and forEach()).

Special JS Feature/Syntax

The spread operator (...) is a new feature introduced in ECMAScript 2018 (ES9). It allows creating a new object by spreading the properties of one or more objects onto another object.

Benchmark Results

According to the latest benchmark results, the order of performance from fastest to slowest is:

forEach() Loop
Object.assign()
Spread Operator (...)

Note that these results may vary depending on the specific use case and hardware configuration.

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript methods for iterating over objects is an essential task, especially when working with large datasets.

**Benchmark Test**

The benchmark test measures the time taken to create an object `res` by spreading one or more objects (`a`, `b`, or `c`) onto another object, using either the spread operator (`...`), `Object.assign()`, or a loop (`forEach()`).

**Options Compared**

There are three options being compared:

1. **Spread Operator (`...`)**: This method creates a new object by spreading the properties of one or more objects onto another object.
2. **`Object.assign()`**: This method creates a new object by copying the values from multiple source objects to a target object.
3. **`forEach()` Loop**: This method uses a loop to iterate over the keys of an object and assigns the corresponding values from one or more objects to a target object.

**Pros and Cons**

1. **Spread Operator (`...`)**
	* Pros:
		+ Efficient, as it creates a new object with references to the original properties.
		+ Easy to read and understand.
	* Cons:
		+ May not be suitable for large datasets or objects with many properties, as it can create a very large object in memory.
2. **`Object.assign()`**
	* Pros:
		+ Suitable for large datasets or objects with many properties, as it creates a shallow copy of the source objects and copies only the values that are not already present in the target object.
		+ Can be faster than the spread operator for larger datasets.
	* Cons:
		+ Less readable and understandble than the spread operator.
3. **`forEach()` Loop**
	* Pros:
		+ Suitable for large datasets or objects with many properties, as it avoids creating a new object in memory.
	* Cons:
		+ Can be slower than `Object.assign()` due to the overhead of iterating over the keys and assigning values manually.

**Library Used**

None. The benchmark test uses built-in JavaScript methods (`...`, `Object.assign()`, and `forEach()`).

**Special JS Feature/Syntax**

The spread operator (`...`) is a new feature introduced in ECMAScript 2018 (ES9). It allows creating a new object by spreading the properties of one or more objects onto another object.

**Benchmark Results**

According to the latest benchmark results, the order of performance from fastest to slowest is:

1. `forEach()` Loop
2. `Object.assign()`
3. Spread Operator (`...`)

Note that these results may vary depending on the specific use case and hardware configuration.

Related benchmarks:

Spread vs object.assing vs forEach pt3 (version: 0)

Comparing performance of: Spread vs Object.assign vs Foreach

Created: one year ago by: Guest

Jump to the latest result