JavaScript 객체의 키 가져오기

객체의 자체 열거 가능한 문자열 프로퍼티 이름을 배열로 얻으려면 Object.keys(obj)를 사용합니다. 각 키를 해당 값과 함께 다뤄야 한다면 Object.entries(obj)를 사용하세요. 두 메서드 모두 객체를 변경하지 않습니다. 상속된 열거 가능한 프로퍼티도 순회할 수 있는 반복문이 필요하다면 for...in을 사용하고, 작업에 필요한 경우 자체 프로퍼티만 남기도록 필터링하세요.

Object.keys()로 객체 키 가져오기

Object.keys()는 자체 열거 가능한 문자열 키를 배열로 반환합니다. API에서 받은 레코드처럼 프로퍼티 이름을 미리 알 수 없을 때 유용합니다. 반환 배열에는 이름만 들어 있으므로 값은 obj[key]로 읽습니다. 객체에 자체 열거 가능한 문자열 프로퍼티가 없으면 빈 배열이 반환됩니다. 심벌 프로퍼티는 포함되지 않습니다.

프로퍼티 순서는 정해져 있지만, 키를 작성한 순서와 항상 같지는 않습니다. 배열 인덱스 키(0부터 4294967294까지의 정규 정수 인덱스 문자열)가 먼저 오며 숫자 오름차순으로 정렬됩니다. 나머지 문자열 키는 프로퍼티가 생성된 순서대로 이어집니다. "01" 같은 문자열은 배열 인덱스가 아니므로 다른 문자열 키와 함께 나타납니다. 배열도 같은 규칙을 따릅니다. Object.keys()는 배열의 현재 열거 가능한 인덱스 키를 문자열로 반환하며, 배열 값을 반환하지는 않습니다.

다음 예제를 실행해 보세요:

const record = { 4: 'pear', 2: 'mango', name: 'fruit', '01': 'label' };
const keys = Object.keys(record);
console.log(keys);
console.log(record[keys[0]]);
console.log(Object.keys(['red', 'blue']));

이 예제에서는 숫자 인덱스 키가 다른 문자열보다 먼저 나오고, "01"은 일반 문자열 키에 포함되며, 반환된 키로 해당 값을 조회합니다. 키를 가져와도 record의 프로퍼티 순서나 내용은 바뀌지 않습니다.

Object.entries()로 객체 키와 값 가져오기

다음 단계에서 각 키와 그에 대응하는 값이 필요하다면 Object.entries(obj)를 사용하세요. 이 메서드는 [[key, value], ...] 형태의 두 항목 배열들을 담은 배열을 반환합니다. Object.keys()와 마찬가지로 객체의 자체 열거 가능한 문자열 프로퍼티만 포함하고 같은 순서를 따르며, 심벌은 제외합니다. 값이 객체라는 이유만으로 그 안을 재귀적으로 순회하지는 않습니다.

구조 분해를 사용하면 각 쌍을 편리하게 처리할 수 있습니다. 다음 전체 예제는 각 프로퍼티의 레이블과 값을 출력합니다. 고정된 코드 블록에 표시되는 레이블은 영어 그대로입니다.

const settings = { theme: 'dark', language: 'English' };
for (const [key, value] of Object.entries(settings)) {
  console.log(`${key}: ${value}`);
}

이름만 필요하면 Object.keys()를, 반복문에서 이름과 값을 함께 써야 하면 Object.entries()를 선택하세요. 키를 이미 알고 있다면 객체를 열거할 필요 없이 settings.theme 또는 settings['theme']로 값에 바로 접근하면 됩니다.

for…in으로 객체 키 순회하기

for...in 반복문은 열거 가능한 문자열 프로퍼티를 순회합니다. 객체의 프로토타입을 통해 상속된 프로퍼티도 포함될 수 있으므로 자체 프로퍼티만 나열하는 Object.keys()와 결과가 다를 수 있습니다. 상속된 프로퍼티를 제외해야 한다면 반복문 안에서 Object.hasOwn(obj, key)를 사용하세요. 이 메서드는 최신 JavaScript에서 사용할 수 있습니다. 구형 환경에서는 Object.prototype.hasOwnProperty.call(obj, key)를 사용하세요.

const parent = { category: 'fruit' };
const item = Object.create(parent);
item.name = 'mango';

for (const key in item) {
  if (Object.hasOwn(item, key)) {
    console.log(`${key}: ${item[key]}`);
  }
}

반복문은 자체 프로퍼티인 name과 상속된 category를 모두 만날 수 있지만, 자체 프로퍼티 확인을 거치면 name만 출력됩니다. 열거 가능한 프로퍼티를 모두 원한다면 확인 코드를 생략하세요. 객체의 자체 열거 가능한 문자열 키를 예측 가능한 목록으로 얻으려면 보통 Object.keys()가 가장 명확합니다.

열거는 얕게 이루어집니다. 최상위 프로퍼티의 값이 다른 객체라면 키 목록에는 최상위 프로퍼티의 이름이 들어가고, 그 값은 중첩된 객체 그대로 남습니다. 중첩 객체의 키를 나열하려면 해당 값에 Object.keys()를 별도로 호출하세요. 재귀 순회에는 각 중첩 객체를 방문하는 추가 로직이 필요합니다. 필요한 프로퍼티에 따라 세 방법 중에서 선택하세요. 이름에는 Object.keys(), 이름과 값의 쌍에는 Object.entries(), 프로토타입 체인 전체의 열거 가능한 프로퍼티에는 for...in을 사용합니다.