Benchmark: 1A theming lodash merge vs spread

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>

Script Preparation code:

var a = {
    background: {
        image: 'a longer test',
        position: 'center',
        mobile: 'test',
    },
    buttonShape: {
        default: '25px',
        square: '0',
    },
    colors: {
        blackContrast: 'colors.white',
        blackDarkest: 'colors.grey1000',
        inputBorder: 'colors.grey300',
        inputBorderFocused: 'colors.primary',
        inputText: 'colors.textPrimary',

        primary: 'colors.primary',
        primaryContrast: 'colors.white',
        primaryDark: 'colors.primaryDark',
        primaryHover: 'colors.primaryDark',

        secondary: 'colors.secondary',
        secondaryContrast: 'colors.white',
        secondaryHover: 'colors.secondary',

        redContrast: 'colors.white',
        redHover: 'colors.red',

        smurfBlue: '#00bbdc',
        smurfBlueContrast: 'colors.black',
        smurfBlueLight: '#57ddf5',

        textBlack: 'colors.black',
        textHint: '#838383',
        textHintDark: '#575757',
        textSecondary: '#485cc2',

        whiteContrast: 'colors.black',

        yellow: '#f2eb9d',
    },
    space: {
        1: '5px',
        2: '10px',
        3: '15px',
        logo: '30px',
    },
    fontSizes: {
        xSmall: '12px',
        small: '14px',
        normal: '16px',
        large: '18px',
        xLarge: '20px',
        xxLarge: '24px',
        xxxLarge: '32px',
    },
    fonts: {
        globalFont: 'Graphik, arial, sans-serif',
        gtEesti: 'GT-Eesti, arial, sans-serif',
    },
    fontWeights: {
        light: 300,
        regular: 400,
        medium: 500,
        semiBold: 600,
        bold: 700,
    },
    lineHeights: {},
    letterSpacings: {},
    sizes: {
        logo: '40%',
    },
    borderWidths: {},
    borderStyles: {},
    radii: {},
    shadows: {},
    zIndices: {},
    transitions: {},
};

var b = {
    background: {
        position: 'top center',
    },
    buttonShape: {
        default: '$square',
    },
    colors: {
        inputBorder: '$grey600',
        inputBorderFocused: '$black',
        inputText: '$grey700',

        primary: '#f7485d',
        primaryHover: '$primary',

        textPrimary: '#083a81',
    },
    fontWeights: {
        regular: 300,
        medium: 500,
        semiBold: 400,
    },
    space: {
        logo: '35%',
    },
};

Tests:

lodash merge
var c = _.merge(a, b);
spread
var c = { ...a, background: { ...a.background, position: 'top center', }, buttonShape: { ...a.buttonShape, default: '$square', }, colors: { ...a.colors, inputBorder: '$grey600', inputBorderFocused: '$black', inputText: '$grey700', primary: '#f7485d', primaryHover: '$primary', textPrimary: '#083a81', }, fontWeights: { ...a.fontWeights, regular: 300, medium: 500, semiBold: 400, }, space: { ...a.space, logo: '35%', }, };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash merge
spread

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark definition is a JSON object that represents the test case. In this case, there are two test cases:

1. `lodash merge`: This test case uses the Lodash library to merge two objects, `a` and `b`, using the `_merge` function.
2. `spread`: This test case creates a new object by spreading the properties of `a` into a new object.

**Options Compared**

The options being compared are:

* Using Lodash's `_merge` function (`_.merge(a, b)`) vs.
* Using the spread operator (`{ ...a, ...b }`) to merge two objects.

**Pros and Cons**

**Lodash's `_merge` function:**

Pros:

* More explicit and readable way of merging objects
* Can handle more complex object structures

Cons:

* May be slower due to the overhead of calling a library function
* May not be suitable for very large or deeply nested objects

**Spread Operator (`{ ...a, ...b }`):**

Pros:

* Very fast and efficient
* Can handle very large or deeply nested objects without performance issues
* More concise and readable syntax

Cons:

* May be less explicit about the merge operation
* May not work as expected if `a` or `b` have cyclic references (i.e., each object references the other)

**Other Considerations**

* Performance: The spread operator is generally faster than calling a library function, especially for very large or deeply nested objects.
* Code Readability: Using Lodash's `_merge` function can make the code more readable and explicit about the merge operation. However, using the spread operator can be more concise and readable in some cases.

**Library: Lodash**

Lodash is a popular JavaScript library that provides various utility functions for tasks such as array manipulation, object transformation, and more. In this case, the `_merge` function is used to merge two objects.

**Benchmark Result**

The latest benchmark result shows that the spread operator (`{ ...a, ...b }`) outperforms Lodash's `_merge` function in both tests, with an average of 1.55x faster execution times. However, it's essential to note that this result may vary depending on the specific use case and input data.

I hope this explanation helps you understand the JavaScript microbenchmarking world!

Related benchmarks:

1A theming lodash merge vs spread (version: 0)

Comparing performance of: lodash merge vs spread

Created: 3 years ago by: Guest

Jump to the latest result

lodash merge

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):