[JS] Object.keys 와 Object.getOwnPropertyNames 차이점

공통점

둘 다 객체의 key 값을 배열로 반환하는 매서드다.

차이점

Object.keys()

열거 가능한(enumerable) 속성만 가져온다.

Object.getOwnPropertyNames()

열거 가능(enumerable), 불가능한(non-enumerable) 속성을 모두 가져온다

예제

배열에서

배열에서 각 요소의 key 값은 인덱스다.
Object.keys()는 오로지 key 값을 가져오지만, Object.getOwnPropertyNames(arr)는 key 값과 length라는 값을 같이 가져온다.

const arr = ["a", "b", "c", "d"];

Object.keys(arr);  // [ '0', '1', '2', '3' ]
Object.getOwnPropertyNames(arr);  // [ '0', '1', '2', '3', 'length' ]

오브젝트에서

오브젝트 객체에서는 enumerable: false로 지정하지 않는 이상 Object.keys()와 Object.getOwnPropertyNames(arr)의 두 결괏값은 같다.

const obj = { 0: 'a', 1: 'b', 2: 'c' };

Object.keys(obj);  // ["0", "1", "2"]
Object.getOwnPropertyNames(obj);  // ["0", "1", "2"]

enumerable: false로 지정하면 Object.keys()는 열거 가능한 속성만 반환하므로 두 결괏값이 다르게 나온다.
아래 예제처럼 객체에 속성을 추가하면서 enumerable: false로 설정하게 되면 Object.keys()는 그 속성을 무시한다.

const obj = { 0: 'a', 1: 'b', 2: 'c' };

Object.defineProperties(obj, {
  // 3: "d" 추가
  3 : {
    enumerable: false, // non-enumerable 설정
    value: "d",
  },
})

Object.keys(obj);  // ["0", "1", "2"] 
Object.getOwnPropertyNames(obj); // ["0", "1", "2", "3"]