Object.getOwnPropertyNames() vs Object.keys()

Differences

  1. Object.getOwnPropertyNames(obj) returns all the properties of the object obj. Object.keys(obj) returns all enumerable properties.
    They provide the same result unless you set enumerable: false to any property.
    In the following example, the screen object has two properties, branch and size.
    const screen = {
        branch: 'Dell',
        size: '27inch',
    };
    
    Object.getOwnPropertyNames(screen);     // ['branch', 'size']
    Object.keys(screen);                    // ['branch', 'size']
    Let's define one more property named resolution but it is set as enumerable: false:
    Object.defineProperties(screen, {
        resolution: {
            enumerable: false,
            value: '2560 x 1440',
        },
    });
    The resolution property then doesn't appear in the list of Object.keys:
    Object.getOwnPropertyNames(screen); // ['branch', 'size', 'resolution']
    Object.keys(screen);                // ['branch', 'size']
  2. For arrays, Object.getOwnPropertyNames includes an extra property named length which is the size of the array.
    const animals = ['dog', 'cat', 'tiger'];
    
    Object.keys(animals);                   // ['0', '1', '2']
    Object.getOwnPropertyNames(animals);    // ['0', '1', '2', 'length']
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved