NgxDeepEqualsPure

Note:

• Please use version 0.2.5 for projects using Angular 11.0 and below.
• Please use version 0.3.0+ for Angular 12.0+ projects.
• Version 0.4.0+ supports use in Web Workers (see example project in this repository).
• Version 0.4.2 is malformed and should not be used.
• Version 0.4.3+ supports Standalone Components.
• Version 0.5.0 supports Angular 16.
• Version 1.0.0 supports Angular 17.
• Version 2.0.0 supports Angular 18.

This is a package intended to provide a deep equals function for JavaScript objects without requiring numerous dependencies. Other packages which provide a deep equals function, like Lodash or deep-equal, require a large number of dependencies or they are themselves very large. This contributes to unnecessary bloat and, ultimately, poor application load performance.

Unlike deep-equal and Lodash, ngx-deep-equals-pure can correctly handle function properties. Furthermore, ngx-deep-equals-pure properly determines equality for arrays of complex objects when the order of the data differs where deep-equal and Lodash fail to do so.

Repository: https://github.com/puckowski/deepequalspure

Bugs: https://github.com/puckowski/deepequalspure/issues

Size

The minified ES2015 size of ngx-deep-equals-pure is 9.18KB which includes ESM5, ESM2015, FESM5, and FESM2015 bundles.

|ngx-deep-equals-pure |deep-equal |Lodash | |---------------------|-----------|-------| |9.18KB |3.44KB |528KB |

npm Package

https://www.npmjs.com/package/ngx-deep-equals-pure

Usage

In the appropriate module, such as AppModule, add the following to providers:

providers: [NgxDeepEqualsPureService],

In a component part of a module where NgxDeepEqualsPureService is provided, inject the deep equals service in the constructor like so:

constructor(private ngxDeepEquals: NgxDeepEqualsPureService) {

Then use NgxDeepEqualsPure like so:

this.ngxDeepEquals.deepEquals(this.obj1, this.obj2);

Alternatively, construct a standalone component like the following:

import { Component } from '@angular/core';
import { NgxDeepEqualsPureModule, NgxDeepEqualsPureService } from 'NgxDeepEqualsPure';

@Component({
  selector: 'app-standalone-test',
  templateUrl: './standalone-test.component.html',
  styleUrls: ['./standalone-test.component.scss'],
  standalone: true,
  imports: [NgxDeepEqualsPureModule]
})
export class StandaloneTestComponent {

  private obj8: any = { b: 'a', c: 2 };
  private obj9: any = { c: 2, b: 'a' };

  public isStandaloneMatch: boolean;

  constructor(private ngxDeepEquals: NgxDeepEqualsPureService) {
    this.isStandaloneMatch = this.ngxDeepEquals.deepEquals(this.obj8, this.obj9);
  }
}

Performance

The following is the latest performance result of 2,000 comparisons run in a web worker.

|ngx-deep-equals-pure |deep-equal |Lodash isEqual | |---------------------|-----------|---------------| | 0.023 | 0.006 | 0.091 | | 0.007 | 0.008 | 0.107 | | 0.006 | 0.004 | 0.106 | | 0.006 | 0.001 | 0.115 | | 0.006 | 0.001 | 0.115 | | 0.006 | 0.001 | 0.117 | | 0.005 | 0.001 | 0.117 | | 0.006 | 0.001 | 0.12 | | 0.006 | 0.001 | 0.118 | | 0.006 | 0.001 | 0.117 | | 0.006 | 0.001 | 0.117 | | 0.006 | 0.001 | 0.116 | | 0.006 | 0.001 | 0.118 | | 0.006 | 0.001 | 0.118 | | 0.006 | 0.001 | 0.118 | | 0.005 | 0.001 | 0.118 | | 0.006 | 0.001 | 0.119 | | 0.006 | 0.001 | 0.118 | | 0.006 | 0 | 0.118 | | 0.006 | 0.002 | 0.117 | | Avg: 0.0068s | Avg: 0.00175s | Avg: 0.1149s |

Tests

this.isMatch.push(this.deep.deepEquals(obj1, obj2));
this.isMatch.push(this.deep.deepEquals(obj1, obj3));
this.isMatch.push(this.deep.deepEquals(obj1, obj4));
this.isMatch.push(this.deep.deepEquals(obj1, obj5));
this.isMatch.push(this.deep.deepEquals(obj1, obj6));
this.isMatch.push(this.deep.deepEquals(obj1, obj7));
this.isMatch.push(this.deep.deepEquals(obj8, obj9));

this.isMatchLodash.push(_.isEqual(obj1, obj2));
this.isMatchLodash.push(_.isEqual(obj1, obj3));
this.isMatchLodash.push(_.isEqual(obj1, obj4));
this.isMatchLodash.push(_.isEqual(obj1, obj5));
this.isMatchLodash.push(_.isEqual(obj1, obj6));
this.isMatchLodash.push(_.isEqual(obj1, obj7));
this.isMatchLodash.push(_.isEqual(obj8, obj9));

this.isMatchDeepEqual.push(deepEqual(obj1, obj2));
this.isMatchDeepEqual.push(deepEqual(obj1, obj3));
this.isMatchDeepEqual.push(deepEqual(obj1, obj4));
this.isMatchDeepEqual.push(deepEqual(obj1, obj5));
this.isMatchDeepEqual.push(deepEqual(obj1, obj6));
this.isMatchDeepEqual.push(deepEqual(obj1, obj7));
this.isMatchDeepEqual.push(deepEqual(obj8, obj9));

Results

|#|Actual |ngx-deep-equals-pure |deep-equal |Lodash isEqual | |---|-------------|---------------------|-----------|---------------| |1 | true | true | false | false | |2 | false | false | false | false | |3 | false | false | false | false | |4 | false | false | false | false | |5 | false | false | false | false | |6 | true | true | false | false | |7 | true | true | true | true |

Input objects

const obj1: any = {
  b: () => {
    console.log('foo');
  },
  e: 'abcbc',
  a: [
    { 'a': 12.7 },
    { 'c': 37.6 }
  ],
  c: 126.8,
  f: ['f', 'a'],
  g: [
    { t: () => { console.log('h'); }, g: 'a', j: 12 },
    ['b', 2, { p: '123' }],
    '789',
    12.6,
    809,
    () => { console.log('er'); }
  ]
};

const obj2: any = {
  g: [
    [{ p: '123' }, 2, 'b'],
    '789',
    12.6,
    () => { console.log('er'); },
    { g: 'a', t: () => { console.log('h'); }, j: 12 },
    809
  ],
  e: 'abcbc',
  b: () => {
    console.log('foo');
  },
  a: [
    { 'c': 37.6 },
    { 'a': 12.7 }
  ],
  f: ['f', 'a'],
  c: 126.8
};

const obj3: any = {
  g: [
    [{ p: '123' }, 2, 'b'],
    '789',
    12.6,
    () => { console.log('er'); },
    { t: () => { console.log('h'); }, j: 12 },
    809
  ],
  e: 'abcbc',
  b: () => {
    console.log('foo');
  },
  a: [
    { 'c': 37.6 },
    { 'a': 12.7 }
  ],
  f: ['f', 'a'],
  c: 126.8
};

const obj4: any = {
  g: [
    [{ p: '123' }, 2, 'b'],
    '789',
    12.6,
    () => { console.log('er'); },
    { g: '6', t: () => { console.log('h'); }, j: 12 },
    809
  ],
  e: 'abcbc',
  b: () => {
    console.log('foo');
  },
  a: [
    { 'c': 37.6 },
    { 'a': 12.7 }
  ],
  f: ['f', 'a'],
  c: 126.8
};

const obj5: any = {
  g: [
    [{ u: '123' }, 2, 'b'],
    '789',
    12.6,
    () => { console.log('er'); },
    { g: 'a', t: () => { console.log('h'); }, j: 12 },
    809
  ],
  e: 'abcbc',
  b: () => {
    console.log('foo');
  },
  a: [
    { 'c': 37.6 },
    { 'a': 12.7 }
  ],
  f: ['f', 'a'],
  c: 126.8
};

const obj6: any = {
  g: [
    [{ p: '123' }, 2, 'b'],
    '789',
    12.6,
    () => { console.log('er'); },
    { g: 'a', y: () => { console.log('h'); }, j: 12 },
    809
  ],
  e: 'abcbc',
  b: () => {
    console.log('foo');
  },
  a: [
    { 'c': 37.6 },
    { 'a': 12.7 }
  ],
  f: ['f', 'a'],
  c: 126.8
};

const obj7: any = {
  b: () => {
    console.log('foo');
  },
  e: 'abcbc',
  a: [
    { 'a': 12.7 },
    { 'c': 37.6 }
  ],
  c: 126.8,
  f: ['f', 'a'],
  g: [
    { t: () => { console.log('h'); }, g: 'a', j: 12 },
    ['b', 2, { p: '123' }],
    '789',
    12.6,
    809,
    () => { console.log('er'); }
  ]
};

const obj8: any = { b: 'a', c: 2 };
const obj9: any = { c: 2, b: 'a' };

Building library

Use command:

ng build NgxDeepEqualsPure --configuration production

Running benchmark

Use command:

ng serve

Then navigate to localhost:4200 in your preferred browser.

Note: It may be necessary to run the build command before trying to run the benchmark.

See the GitHub repository at https://github.com/puckowski/deepequalspure for example usage of ngx-deep-equals-pure in an Angular application and for example usage in a Web Worker.